/* ORite website v2 mock-up. Tokens copied from oritemedical.com (Base.css :root). */
:root{
  --color-bg:#f3f8fc;
  --color-bg-alt:#edf5fa;
  --color-bg-muted:#dff3fc;
  --color-border:#d8e6ee;
  --color-border-strong:#a1c9dc;
  --color-dark:#173749;
  --color-dark-alt:#24566f;
  --color-signal:#168dbd;
  --color-signal-deep:#126d98;
  --color-lead:#025383;
  --color-text-muted:#526f80;
  --color-text-subtle:#617f90;
  --color-input:#9a6400;
  --color-input-bg:#fdf1d8;
  --font-body:"Helvetica Neue",Arial,sans-serif;
  --font-mono:"SFMono-Regular",Consolas,monospace;
  --radius-sm:6px;
  --radius-md:14px;
  --radius-lg:22px;
  --shell-width:1240px;
  --gutter:clamp(20px,6vw,112px);
  --section-pad:clamp(56px,6vw,88px);
  --ease-out:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--color-bg);color:var(--color-dark);font-family:var(--font-body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:500;text-wrap:balance}
h1{font-size:clamp(2.3rem,4.4vw,3.3rem);line-height:1.08;letter-spacing:-.055em}
h2{font-size:clamp(1.8rem,3vw,2.35rem);line-height:1.1;letter-spacing:-.045em}
h3{font-size:1.3rem;line-height:1.2;letter-spacing:-.03em}
p{margin:0}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--color-signal);outline-offset:3px}
.blue{color:var(--color-signal)}
.shell{max-width:var(--shell-width);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.section{padding-block:var(--section-pad)}
.section--alt{background:var(--color-bg-alt);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}
.eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--color-signal-deep)}
.lead{font-size:clamp(1.1rem,1.6vw,1.35rem);font-weight:700;line-height:1.45;color:var(--color-lead);max-width:44ch}
.body{color:var(--color-text-muted);max-width:56ch}
.muted{color:var(--color-text-muted)}
.small{font-size:.85rem}
.stack{display:flex;flex-direction:column;gap:18px}
.sec-head{display:flex;flex-direction:column;gap:12px;max-width:760px;margin-bottom:36px}
.svg-library{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* Review bar (mock-up only) */
.review-bar{position:sticky;top:0;z-index:30;background:var(--color-dark);color:#f3f8fc;font-size:.82rem}
.review-bar .shell{display:flex;gap:8px 18px;flex-wrap:wrap;align-items:center;padding-block:8px}
.review-bar a{color:#f3f8fc}
.review-bar strong{font-weight:600}
.review-bar button{font-size:.8rem;font-weight:600;border:0;border-radius:999px;padding:4px 12px;background:var(--color-input-bg);color:var(--color-input)}
.review-bar .sep{opacity:.4}

/* Header and tabs */
.header{background:rgba(243,248,252,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--color-border);position:sticky;top:36px;z-index:20}
.header__inner{display:flex;align-items:center;gap:28px;min-height:74px;flex-wrap:wrap;padding-block:10px}
.wordmark{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--color-dark)}
.wordmark__mark{width:36px;height:25px;stroke:var(--color-dark);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.wordmark__mark .wordmark__trace{stroke:var(--color-signal);stroke-width:4}
.wordmark__name{font-size:1.45rem;font-weight:700;letter-spacing:-.04em}
.tabs-nav{display:flex;gap:4px;margin-left:auto;background:#fff;border:1px solid var(--color-border);border-radius:999px;padding:4px}
.tabs-nav a{text-decoration:none;font-size:.92rem;padding:7px 16px;border-radius:999px;color:var(--color-text-muted)}
.tabs-nav a:hover{color:var(--color-dark)}
.tabs-nav a[aria-current="page"]{background:var(--color-dark);color:#fff}
@media (max-width:760px){
  .review-bar{position:static}
  .header{top:0}
  .header__inner{gap:10px 16px}
  .tabs-nav{order:3;width:100%;margin-left:0;justify-content:space-between}
  .tabs-nav a{padding:7px 10px;font-size:.88rem}
}
@media (max-width:560px){.header .header__cta{display:none}}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-size:.9rem;font-weight:500;text-decoration:none;border-radius:var(--radius-sm);padding:13px 20px;border:1px solid var(--color-signal-deep);transition:background .2s var(--ease-out)}
.btn--primary{background:var(--color-signal-deep);color:#fff}
.btn--primary:hover{background:var(--color-dark-alt)}
.btn--secondary{background:transparent;color:var(--color-signal-deep)}
.btn--secondary:hover{background:var(--color-bg-muted)}
.btn--light{background:#f3f8fc;color:var(--color-dark);border-color:#f3f8fc}
.btn .arrow{width:1em;height:1em}
.btns{display:flex;gap:14px;flex-wrap:wrap}

/* Hero */
.hero{padding-block:clamp(44px,5.5vw,80px) clamp(48px,5.5vw,84px)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,64px);align-items:center}
.hero__top{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:36px}
.hero__top > .stack{max-width:760px}
@media (max-width:900px){.hero__grid{grid-template-columns:minmax(0,1fr)}}

/* Photo with glasses overlay */
.shot{position:relative;margin:0;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-border-strong);background:var(--color-dark);aspect-ratio:3/2}
.shot > img{width:100%;height:100%;object-fit:cover}
.shot .tag{position:absolute;left:14px;top:14px;font-family:var(--font-mono);font-size:.72rem;color:var(--color-signal-deep);background:rgba(255,255,255,.85);padding:3px 8px;border-radius:4px}
.lens{position:absolute;right:4%;bottom:6%;width:min(52%,300px);background:rgba(12,30,42,.62);backdrop-filter:blur(4px);color:#eef8fd;border:1px solid rgba(223,243,252,.4);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:8px;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.lens--top{bottom:auto;top:6%}
.lens__meta{display:flex;justify-content:space-between;gap:8px;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:#a9dcf0}
.lens__cols{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.lens__cell{border:1px solid rgba(223,243,252,.3);border-radius:6px;padding:7px 8px;display:flex;flex-direction:column;gap:2px;min-width:0}
.lens__cell.now{border-color:rgba(160,240,220,.7)}
.lens__cell span{font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#cfeefa}
.lens__cell strong{font-size:.9rem;font-weight:500;line-height:1.15}
.lens__cell svg{width:100%;height:18px;fill:none;stroke:#eef8fd;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;margin-top:3px}
.lens__msg{display:flex;gap:8px;align-items:flex-start;font-size:.85rem;line-height:1.3}
.lens__msg b{font-weight:600;color:#7fd4f5}
.lens__msg .ok{color:#9be3c6;font-weight:600}
.target{position:absolute;width:30px;height:24px;border:1.5px solid #d9fff2;border-radius:50%;box-shadow:0 0 0 4px #84ddcd2b;transform:translate(-50%,-50%);pointer-events:none;transition:left .35s var(--ease-out),top .35s var(--ease-out)}
@media (max-width:560px){.lens{width:66%;padding:7px}.lens__cell strong{font-size:.78rem}.lens__cell svg{height:14px}}

/* Procedure guidance (protocol + glasses view) */
.guide{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2fr);background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 14px 45px rgba(23,55,73,.06)}
.guide__protocol{padding:22px;display:flex;flex-direction:column;gap:14px;border-right:1px solid var(--color-border);min-width:0}
.guide__head{display:flex;flex-direction:column;gap:2px}
.guide__head strong{font-weight:500}
.guide__steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.guide__steps button{width:100%;display:grid;grid-template-columns:28px 52px minmax(0,1fr);align-items:center;gap:10px;text-align:left;background:transparent;border:1px solid transparent;border-radius:10px;padding:8px;color:var(--color-dark)}
.guide__steps button:hover{background:var(--color-bg-alt)}
.guide__steps button[aria-current="step"]{background:var(--color-bg-muted);border-color:var(--color-border-strong)}
.guide__steps .n{font-family:var(--font-mono);font-size:.75rem;color:var(--color-text-subtle)}
.guide__steps svg{width:52px;height:22px;fill:none;stroke:var(--color-signal-deep);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.guide__steps b{display:block;font-weight:500;font-size:.95rem;line-height:1.2}
.guide__steps small{display:block;color:var(--color-text-muted);font-size:.8rem;margin-top:2px}
.guide__view{position:relative;min-height:0;background:var(--color-dark)}
.guide__view .shot{border:0;border-radius:0;width:100%;height:100%;min-height:340px;aspect-ratio:auto}
.guide__view .shot > img{object-position:15% 50%}
.guide__bar{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 22px;border-top:1px solid var(--color-border);background:#f8fcff;flex-wrap:wrap}
.progress{display:flex;align-items:center;gap:14px;flex:1;min-width:200px;font-size:.88rem}
.progress__track{flex:1;max-width:320px;height:4px;border-radius:4px;background:#d9e8ef;overflow:hidden}
.progress__track i{display:block;height:100%;background:var(--color-signal-deep);transition:width .35s var(--ease-out)}
.guide-note{margin-top:12px;font-size:.85rem;color:var(--color-text-muted)}
@media (max-width:900px){
  .guide{grid-template-columns:minmax(0,1fr)}
  .guide__view{order:-1}
  .guide__view .shot{min-height:0;aspect-ratio:16/10}
  .guide__protocol{border-right:0;border-top:1px solid var(--color-border)}
}

/* How it works (line-art cards) */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--color-border);border-radius:var(--radius-lg);background:#fff;overflow:hidden}
.cards > article{padding:26px;display:flex;flex-direction:column;gap:12px;border-right:1px solid var(--color-border);min-width:0}
.cards > article:last-child{border-right:0}
.cards .illus{height:130px;display:flex;align-items:center;justify-content:center;background:var(--color-bg-alt);border-radius:var(--radius-md);margin-bottom:4px}
.cards .illus svg{height:112px;width:auto}
.cards .step{font-size:.85rem;color:var(--color-signal-deep)}
@media (max-width:900px){.cards{grid-template-columns:minmax(0,1fr)}.cards > article{border-right:0;border-bottom:1px solid var(--color-border)}.cards > article:last-child{border-bottom:0}}
.la{fill:none;stroke:var(--color-signal);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.la .f{fill:var(--color-bg-muted)}
.la .w{fill:#fff}
.la .d{stroke:var(--color-signal-deep)}
.la .cone{stroke:none;fill:url(#cone-fill)}
.la .area{stroke:none;fill:#59d4ff30}

/* Value cards (why use it) */
.values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.values > article{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:24px;display:flex;flex-direction:column;gap:10px;min-width:0}
.values .kind{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-signal-deep)}
.values p{color:var(--color-text-muted)}
@media (max-width:900px){.values{grid-template-columns:minmax(0,1fr)}}

/* Paths to the three tabs */
.paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.paths a{display:flex;flex-direction:column;gap:10px;text-decoration:none;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:24px;transition:border-color .2s}
.paths a:hover{border-color:var(--color-signal)}
.paths .who{display:flex;justify-content:space-between;align-items:center;font-size:1.25rem;font-weight:500;letter-spacing:-.03em}
.paths .who span{color:var(--color-signal)}
.paths p{color:var(--color-text-muted)}
@media (max-width:900px){.paths{grid-template-columns:minmax(0,1fr)}}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:.85rem;background:#fff;border:1px solid var(--color-border-strong);color:var(--color-dark);padding:6px 12px;border-radius:999px}
.chip--voice::before{content:"“"}
.chip--voice::after{content:"”"}

/* OR managers: usage table and analysis previews */
.usage{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:22px;display:flex;flex-direction:column;gap:14px;min-width:0}
.usage-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.seg{display:inline-flex;background:var(--color-bg-alt);border:1px solid var(--color-border);border-radius:999px;padding:3px}
.seg button{font-size:.85rem;border:0;background:transparent;padding:6px 14px;border-radius:999px;color:var(--color-text-muted)}
.seg button[aria-pressed="true"]{background:#fff;color:var(--color-dark);box-shadow:0 1px 3px rgba(23,55,73,.12)}
.usage table{width:100%;border-collapse:collapse;font-size:.92rem}
.usage th{text-align:left;font-weight:500;color:var(--color-text-subtle);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;padding:6px 8px}
.usage td{padding:8px;border-top:1px solid var(--color-border)}
.usage tr[data-i]{cursor:pointer}
.usage tr[data-i]:hover td{background:var(--color-bg-alt)}
.usage tr.sel td{background:var(--color-bg-muted)}
.bar{display:flex;align-items:center;gap:10px;font-variant-numeric:tabular-nums;white-space:nowrap}
.bar i{display:block;height:8px;border-radius:4px;background:var(--color-signal);min-width:2px}
.bar i.low{background:var(--color-border-strong)}
.usage-note{background:var(--color-bg-alt);border-radius:var(--radius-md);padding:12px 14px;font-size:.9rem}
.usage-wrap{overflow-x:auto}
.analyses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.analyses > article{display:flex;flex-direction:column;gap:12px;min-width:0}
.analyses p{color:var(--color-text-muted)}
.preview{height:240px;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:16px;display:flex;flex-direction:column;gap:10px;font-size:.85rem}
.preview__head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.preview__head strong{font-weight:500}
.preview__head span{font-size:.75rem;color:var(--color-text-subtle)}
.hbars{display:flex;flex-direction:column;justify-content:space-evenly;flex:1;gap:6px}
.hbar{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(40px,1fr) 34px;align-items:center;gap:8px}
.hbar i{display:block;height:7px;border-radius:4px;background:var(--color-signal-deep)}
.hbar .track{height:7px;border-radius:4px;background:#dfebf2;overflow:hidden}
.hbar b{font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
.stages{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;flex:1;justify-content:center}
.stages li{display:grid;grid-template-columns:64px minmax(0,1fr) 48px;align-items:center;gap:8px}
.stages li > span{color:var(--color-text-muted)}
.stages li > i{display:block;height:9px;border-radius:4px;background:#b1d0e1;width:var(--w)}
.stages li.long > i{background:var(--color-signal-deep)}
.stages li > b{font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
.bill{display:flex;flex-direction:column;gap:6px;flex:1;justify-content:center}
.bill__row{display:flex;justify-content:space-between;gap:8px;padding:6px 10px;border:1px solid var(--color-border);border-radius:8px}
.bill__row span{color:var(--color-text-muted)}
.bill__status{align-self:flex-start;font-size:.75rem;color:var(--color-signal-deep);background:var(--color-bg-muted);padding:3px 8px;border-radius:4px}
@media (max-width:900px){.analyses{grid-template-columns:minmax(0,1fr)}}

/* FAQ */
.faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(28px,5vw,72px)}
.faq details{border-bottom:1px solid var(--color-border-strong)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:18px 0;font-size:1.05rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--color-signal);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details > div{padding:0 0 18px;color:var(--color-text-muted);display:flex;flex-direction:column;gap:10px}
@media (max-width:900px){.faq{grid-template-columns:minmax(0,1fr)}}

/* Closing band: one quick question and a short form */
.closing{background:var(--color-dark);color:#f3f8fc;padding-block:var(--section-pad)}
.closing .eyebrow{color:#9fd3ea}
.closing h2{color:#fff}
.closing p{color:#c9dde8}
.closing__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,64px);align-items:start}
.pick{display:flex;flex-direction:column;gap:10px}
.pick__label{font-size:.9rem;color:#fff;font-weight:500}
.pick .chips button{font-size:.88rem;border:1px solid #4f7487;background:transparent;color:#e6f2f8;padding:8px 14px;border-radius:999px}
.pick .chips button[aria-pressed="true"]{background:#f3f8fc;color:var(--color-dark);border-color:#f3f8fc}
.contact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
.contact label{display:flex;flex-direction:column;gap:6px;font-size:.85rem;font-weight:500;color:#e6f2f8}
.contact label span{font-weight:400;color:#a9c3d1}
.contact input,.contact select,.contact textarea{font:inherit;font-size:.95rem;padding:11px 12px;border:1px solid #4f7487;border-radius:var(--radius-sm);background:#f8fcff;color:var(--color-dark);width:100%}
.contact textarea{min-height:76px;resize:vertical}
.contact .full{grid-column:1 / -1}
.contact .btn{justify-self:start}
.thanks{display:flex;flex-direction:column;gap:8px;padding:22px;border:1px solid #4f7487;border-radius:var(--radius-md)}
@media (max-width:900px){.closing__grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.contact{grid-template-columns:minmax(0,1fr)}}
.footer{background:var(--color-dark);border-top:1px solid #24566f;color:#9ab3c1;font-size:.85rem}
.footer .shell{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:22px}

/* Needs-your-input markers (mock-up only) */
.input{display:inline-flex;align-items:flex-start;gap:6px;background:var(--color-input-bg);color:var(--color-input);border:1px dashed #e0b45c;border-radius:8px;padding:6px 10px;font-size:.82rem;font-weight:500;line-height:1.35;max-width:62ch}
.input::before{content:"?";flex:none;width:16px;height:16px;border-radius:50%;background:var(--color-input);color:#fff;font-size:.7rem;font-weight:700;display:grid;place-items:center;margin-top:1px}
.input.flash{animation:flash 1.2s var(--ease-out) 2}
@keyframes flash{50%{box-shadow:0 0 0 6px rgba(224,180,92,.45)}}
.closing .input{background:#3a2d12;color:#f0c060;border-color:#8a6a2a}
.closing .input::before{background:#f0c060;color:#3a2d12}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* v4: narrower protocol demo with a scrub / circulating switch */
.guide--compact{max-width:940px;margin-inline:auto;grid-template-columns:290px minmax(0,1fr)}
.guide--compact .guide__view .shot{min-height:320px}
.roles{display:flex;justify-content:center;margin:0 auto 16px}
.circ{height:100%;min-height:320px;background:#0f1f29;color:#e8f4f9;padding:22px;display:flex;flex-direction:column;gap:14px}
.circ[hidden]{display:none}
.circ__label{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:#8fc3d9}
.circ__stage{display:flex;flex-direction:column;gap:8px;border:1px solid rgba(232,244,249,.18);border-radius:12px;padding:14px}
.circ__stage strong{font-weight:500;font-size:1.15rem}
.circ__track{height:4px;border-radius:4px;background:rgba(232,244,249,.15);overflow:hidden}
.circ__track i{display:block;height:100%;background:#7fd4f5;transition:width .35s var(--ease-out)}
.circ__reqs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.circ__reqs li{display:flex;justify-content:space-between;gap:10px;border:1px solid rgba(232,244,249,.18);border-radius:10px;padding:10px 12px;font-size:.92rem}
.circ__reqs li.new{border-color:#9be3c6}
.circ__reqs li span{color:#a9c3d1;font-size:.8rem;white-space:nowrap}
.circ__empty{color:#a9c3d1;font-size:.9rem}
@media (max-width:900px){.guide--compact{grid-template-columns:minmax(0,1fr)}.circ{min-height:0}}

/* Four short benefit cards */
.values--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.values--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.values--4{grid-template-columns:minmax(0,1fr)}}

/* Dictation becomes the post-op report */
.dictate{max-width:980px;margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 14px 45px rgba(23,55,73,.06)}
.dictate__said{background:#0f1f29;color:#e8f4f9;padding:22px;display:flex;flex-direction:column;gap:12px;min-width:0}
.dictate__said .head-l{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:#8fc3d9}
.said{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.said li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:start;opacity:.35;transition:opacity .3s var(--ease-out)}
.said li.on{opacity:1}
.said li.now .q{border-color:#7fd4f5}
.said time{font-family:var(--font-mono);font-size:.75rem;color:#8fc3d9;padding-top:9px}
.said .q{border:1px solid rgba(232,244,249,.2);border-radius:10px;padding:8px 11px;font-size:.95rem;line-height:1.35}
.said .q i{font-style:normal;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:#8fc3d9;display:block;margin-bottom:2px}
.dictate__report{padding:22px;display:flex;flex-direction:column;gap:12px;min-width:0}
.dictate__report .head-l{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.dictate__report .head-l strong{font-weight:500}
.rfield{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;padding:8px 10px;border-radius:8px;transition:background .4s var(--ease-out)}
.rfield > span{font-size:.78rem;color:var(--color-text-subtle);padding-top:2px}
.rfield > div{font-size:.95rem;min-height:1.4em}
.rfield .empty{color:#a7bac5}
.rfield.flash-in{background:var(--color-bg-muted)}
.imp{width:100%;border-collapse:collapse;font-size:.82rem}
.imp td{padding:3px 6px 3px 0;vertical-align:top}
.imp td.m{font-family:var(--font-mono);font-size:.76rem}
.imp-src{display:block;font-family:var(--font-mono);font-size:.68rem;color:var(--color-signal-deep);margin-top:2px}
.rstatus{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:var(--color-bg-alt);font-size:.9rem}
.rstatus b{font-weight:600;color:#fff;background:var(--color-signal-deep);padding:6px 10px;border-radius:6px;font-size:.82rem}
.rstatus.ready{background:var(--color-bg-muted)}
.dictate__bar{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 22px;border-top:1px solid var(--color-border);background:#f8fcff}
@media (max-width:860px){.dictate{grid-template-columns:minmax(0,1fr)}.rfield{grid-template-columns:84px minmax(0,1fr)}}

/* OR managers: implant record / instrument use switch */
.rec table{width:100%;border-collapse:collapse;font-size:.88rem}
.rec th{text-align:left;font-weight:500;color:var(--color-text-subtle);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:6px 8px 6px 0}
.rec td{padding:8px 8px 8px 0;border-top:1px solid var(--color-border);vertical-align:top}
.rec td.m{font-family:var(--font-mono);font-size:.8rem}
.rec .ok{color:#21704a;font-weight:600;white-space:nowrap}

[hidden]{display:none!important}
.rec td.m{white-space:nowrap}
.imp td.m{white-space:nowrap}
@media (max-width:560px){.imp tr{display:flex;flex-wrap:wrap;gap:0 10px;padding:4px 0;border-bottom:1px solid var(--color-border)}.imp td{padding:0}}

/* v5: how the report gets done, as a short strip above the demo */
.how3{list-style:none;margin:0 auto 22px;padding:0;max-width:980px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;counter-reset:h}
.how3 li{counter-increment:h;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:12px 14px;font-size:.95rem;line-height:1.3}
.how3 li::before{content:counter(h);flex:none;width:28px;height:28px;border-radius:50%;background:var(--color-dark);color:#fff;display:grid;place-items:center;font-size:.8rem;font-weight:600}
.how3 svg{flex:none;width:30px;height:30px}
@media (max-width:760px){.how3{grid-template-columns:minmax(0,1fr)}}
.dev{display:flex;align-items:center;gap:8px}
.dev svg{width:22px;height:22px;flex:none}
.rfield .poi{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;font-size:.88rem}
.rfield .poi dt{color:var(--color-text-subtle)}
.rfield .poi dd{margin:0}
.tpl{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;color:var(--color-signal-deep);background:var(--color-bg-muted);padding:2px 7px;border-radius:4px}

/* OR managers: case timings across a list */
.tl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.tl li{display:grid;grid-template-columns:62px minmax(0,1fr) 52px;gap:10px;align-items:center;font-size:.88rem}
.tl .bars{display:flex;height:12px;border-radius:4px;overflow:hidden;background:var(--color-bg-alt)}
.tl .bars i{display:block;height:100%}
.tl .s{background:#b1d0e1}
.tl .p{background:var(--color-signal-deep)}
.tl .c{background:#6fb3d4}
.tl .t{background:#e0b45c}
.tl b{font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.8rem;color:var(--color-text-muted);margin-top:4px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:2px;display:inline-block}

/* v6: the wearable at work. Surgeon photo, live dictation, report filling in beside it. */
.live{position:relative;margin-top:8px}
.stage{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:16/9;background:#0d1a22;border:1px solid var(--color-border-strong)}
.stage > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.stage__mic{position:absolute;width:30px;height:30px;border-radius:50%;border:2px solid #9be3c6;transform:translate(-50%,-50%);animation:pulse 1.6s infinite}
.stage__mic.cam{border-color:#ffffff;animation:snap .6s 2}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(155,227,198,.6)}70%{box-shadow:0 0 0 16px rgba(155,227,198,0)}100%{box-shadow:0 0 0 0 rgba(155,227,198,0)}}
@keyframes snap{0%{box-shadow:0 0 0 0 rgba(255,255,255,.9)}100%{box-shadow:0 0 0 22px rgba(255,255,255,0)}}
.stage__rec{position:absolute;transform:translate(-50%,calc(-100% - 22px));display:flex;align-items:center;gap:7px;background:rgba(12,30,42,.8);color:#eaf6fc;border-radius:999px;padding:5px 12px 5px 10px;font-size:.78rem;white-space:nowrap}
.stage__rec::before{content:"";width:8px;height:8px;border-radius:50%;background:#e0574a}
.stage__say{position:absolute;left:20%;top:50%;width:min(36%,400px);background:rgba(12,30,42,.84);backdrop-filter:blur(4px);color:#eef8fd;border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;transition:opacity .25s}
.stage__say.out{opacity:0}
.stage__say .kind{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:#a9dcf0}
.stage__say p{font-size:1.02rem;line-height:1.35}
.stage__say .ok{font-size:.82rem;color:#9be3c6;font-weight:600;opacity:0;transition:opacity .3s}
.stage__say .ok.on{opacity:1}
.wave{display:inline-flex;gap:2px;align-items:center;height:12px}
.wave i{width:2px;height:100%;background:#7fd4f5;border-radius:2px;animation:wave 1s ease-in-out infinite}
.wave i:nth-child(2){animation-delay:.15s}.wave i:nth-child(3){animation-delay:.3s}.wave i:nth-child(4){animation-delay:.45s}.wave i:nth-child(5){animation-delay:.6s}
@keyframes wave{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.stage__ctl{position:absolute;left:14px;bottom:14px;font-size:.8rem;border:0;border-radius:999px;padding:6px 12px;background:rgba(255,255,255,.88);color:var(--color-dark)}
.live__report{background:#fff;border-radius:14px;box-shadow:0 18px 50px rgba(13,26,34,.28);padding:16px 16px 14px;display:flex;flex-direction:column;gap:6px;font-size:.86rem}
.live__report .rh{display:flex;flex-direction:column;gap:2px;padding-bottom:8px;border-bottom:1px solid var(--color-border)}
.live__report .rh strong{font-weight:600;font-size:.95rem}
.rf{display:grid;grid-template-columns:86px minmax(0,1fr);gap:8px;padding:5px 6px;border-radius:6px;transition:background .5s var(--ease-out)}
.rf > span{color:var(--color-text-subtle);font-size:.76rem;padding-top:1px}
.rf .v{min-height:1.3em;line-height:1.35}
.rf .v.empty{color:#a7bac5}
.rf .v .m{font-family:var(--font-mono);font-size:.74rem;color:var(--color-signal-deep)}
.rf.flash-in{background:var(--color-bg-muted)}
.rstate{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 10px;border-radius:9px;background:var(--color-bg-alt);font-size:.82rem}
.rstate b{font-weight:600;color:#fff;background:var(--color-signal-deep);padding:5px 9px;border-radius:6px;font-size:.78rem;white-space:nowrap}
.rstate.ready{background:var(--color-bg-muted)}
@media (min-width:901px){.live__report{position:absolute;right:2.5%;top:5%;bottom:5%;width:min(35%,380px);overflow:hidden}}
@media (max-width:900px){.stage{aspect-ratio:4/3}.stage__say{left:4%;right:4%;width:auto;top:auto;bottom:4%}.stage__ctl{bottom:auto;top:12px;left:auto;right:12px}.live__report{margin-top:12px;box-shadow:none;border:1px solid var(--color-border)}}
@media (max-width:520px){.stage__rec{display:none}}
@media (prefers-reduced-motion:reduce){.stage__mic,.wave i{animation:none}}

/* Mechanism: glasses, phone, report */
.mech{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.mech li{position:relative;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:24px;display:flex;flex-direction:column;gap:10px}
.mech li:not(:last-child)::after{content:"";position:absolute;right:-22px;top:50%;width:12px;height:12px;border-top:2px solid var(--color-signal);border-right:2px solid var(--color-signal);transform:translateY(-50%) rotate(45deg)}
.mech .ic{width:52px;height:52px;border-radius:14px;background:var(--color-bg-muted);display:grid;place-items:center}
.mech .ic svg{width:34px;height:34px}
.mech p{color:var(--color-text-muted)}
@media (max-width:900px){.mech{grid-template-columns:minmax(0,1fr);gap:28px}.mech li:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:-20px;transform:translateX(-50%) rotate(135deg)}}

/* v7: microphone marker, the report writes itself, benefits first */
.stage__mic{width:26px;height:26px}
.stage__mic::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1.5px solid rgba(155,227,198,.55);animation:pulse2 1.6s .4s infinite}
@keyframes pulse2{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.5);opacity:0}}
.live__report .rh{gap:6px}
.auto{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;font-size:.72rem;font-weight:600;color:var(--color-signal-deep);background:var(--color-bg-muted);border-radius:999px;padding:3px 10px 3px 8px;line-height:1.3}
.auto svg{width:11px;height:11px;fill:var(--color-signal);flex:none}
.hide-s{white-space:pre}
@media (max-width:560px){.hide-s{display:none}}
.gains .ic,.mech .ic{width:52px;height:52px;border-radius:14px;background:var(--color-bg-muted);display:grid;place-items:center}
.gains .ic svg{width:34px;height:34px}
.gains h3{font-size:1.18rem}
.assure{display:flex;align-items:center;gap:14px;margin-top:18px;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:14px 18px}
.assure svg{width:30px;height:30px;flex:none}
.assure p{color:var(--color-text-muted)}
.assure strong{color:var(--color-dark);font-weight:600}
.mech--4{grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.mech--4 li:not(:last-child)::after{right:-19px}
.mech h3{font-size:1.15rem}
@media (max-width:1100px) and (min-width:901px){.mech--4{grid-template-columns:repeat(2,minmax(0,1fr))}.mech--4 li::after{display:none}}
@media (max-width:900px){.mech--4{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.stage__mic::after{animation:none}}

/* v7 nurses: a nurse wearing the glasses, the display in the lens, and what it shows */
.roles--big{flex-direction:column;align-items:center;gap:10px;margin:0 auto 18px}
.seg--big{background:#fff;border-color:var(--color-border-strong);padding:5px;box-shadow:0 6px 24px rgba(23,55,73,.08)}
.seg--big button{display:flex;flex-direction:column;align-items:center;gap:1px;padding:10px 24px;font-size:1.02rem;font-weight:500;line-height:1.25;color:var(--color-dark)}
.seg--big button small{font-size:.76rem;font-weight:400;color:var(--color-text-subtle)}
.seg--big button[aria-pressed="true"]{background:var(--color-dark);color:#fff;box-shadow:none}
.seg--big button[aria-pressed="true"] small{color:#a9c3d1}
.role-line{font-size:.95rem;color:var(--color-text-muted);text-align:center}
.lensglow{position:absolute;width:24px;height:11px;border-radius:3px;background:rgba(127,212,245,.6);box-shadow:0 0 10px 3px rgba(127,212,245,.75);transform:translate(-50%,-50%) rotate(-6deg);animation:glow 2.4s ease-in-out infinite;pointer-events:none}
@keyframes glow{50%{box-shadow:0 0 16px 7px rgba(127,212,245,.9)}}
.lenslabel{position:absolute;transform:translate(-50%,calc(-100% - 20px));background:rgba(12,30,42,.82);color:#eaf6fc;border-radius:999px;padding:5px 12px;font-size:.78rem;white-space:nowrap;pointer-events:none}
.link-line{position:absolute;height:0;border-top:1.5px dashed rgba(127,212,245,.95);transform-origin:0 0;pointer-events:none;z-index:2}
.hud{background:#0c1c26;color:#eaf6fc;border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 18px 50px rgba(13,26,34,.35);border:1px solid rgba(127,212,245,.35);z-index:3}
.hud__top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:#8fc3d9}
.hud__screen{background:radial-gradient(120% 90% at 30% 0%,rgba(127,212,245,.12),rgba(127,212,245,0) 70%);border:1px solid rgba(127,212,245,.25);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:11px;transition:opacity .25s}
.hud__screen.out{opacity:0}
.hud__meta{display:flex;justify-content:space-between;gap:8px;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:#a9dcf0}
.hud__track{height:3px;border-radius:3px;background:rgba(232,244,249,.15);overflow:hidden}
.hud__track i{display:block;height:100%;background:#7fd4f5;transition:width .4s var(--ease-out)}
.hud__cols{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hud__cell{border:1px solid rgba(223,243,252,.25);border-radius:8px;padding:9px 10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.hud__cell.now{border-color:rgba(155,227,198,.85)}
.hud__cell span,.hud__req span{font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#cfeefa}
.hud__cell strong{font-size:1rem;font-weight:500;line-height:1.2}
.hud__cell small,.hud__req small{font-size:.78rem;color:#a9c3d1}
.hud__msg{display:flex;flex-direction:column;gap:1px;border-left:2px solid #7fd4f5;padding:3px 0 3px 10px;font-size:.92rem;line-height:1.3}
.hud__msg b{font-size:.62rem;letter-spacing:.07em;text-transform:uppercase;color:#7fd4f5;font-weight:700}
.hud__msg.ok{border-color:#9be3c6}
.hud__msg.ok b{color:#9be3c6}
.hud__req{border:1px solid #9be3c6;border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;background:rgba(155,227,198,.08)}
.hud__req strong{font-size:1.1rem;font-weight:500;line-height:1.2}
.hud__req.done{border-color:rgba(223,243,252,.25);background:none}
.hud__req.done span{color:#9be3c6}
.hud__foot{margin-top:auto;font-size:.78rem;color:#8fc3d9}
@media (min-width:901px){.hud{position:absolute;right:2.5%;top:5%;bottom:5%;width:min(35%,380px)}}
@media (max-width:900px){.hud{margin-top:12px}.link-line{display:none}}
@media (max-width:520px){.lenslabel{display:none}}
@media (prefers-reduced-motion:reduce){.lensglow{animation:none}}
.stage--ph{background:#e6f1f7}
.stage--ph svg.ph{position:absolute;inset:0;width:100%;height:100%}
.ph__note{position:absolute;left:4%;bottom:6%;max-width:min(52%,420px);font-size:.85rem;color:var(--color-text-muted);background:rgba(255,255,255,.85);border-radius:10px;padding:8px 12px}
@media (max-width:900px){.ph__note{max-width:none;right:4%;bottom:auto;top:4%}}

/* v7 OR managers & hospitals: camera over the instrument table, tray review writing itself */
.olive{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px;align-items:stretch}
.olive .stage{aspect-ratio:auto;min-height:340px;height:100%}
.olive .stage > img{object-position:50% 50%}
.otag{position:absolute;pointer-events:none}
.otag i{position:absolute;left:0;top:0;width:14px;height:14px;border-radius:50%;border:2px solid #7fd4f5;transform:translate(-50%,-50%);background:rgba(127,212,245,.25)}
.otag b{position:absolute;left:0;top:0;transform:translate(-50%,calc(-100% - 14px));background:rgba(12,30,42,.84);color:#eaf6fc;border-radius:999px;padding:4px 11px;font-size:.76rem;font-weight:500;white-space:nowrap;transition:background .3s}
.otag.below b{transform:translate(-50%,14px)}
.otag.off i{border-color:#e0b45c;background:rgba(224,180,92,.2)}
.otag.on i{animation:snap .7s 1}
.otag.on b{background:#126d98}
.review{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:18px;display:flex;flex-direction:column;gap:10px;font-size:.88rem;min-width:0}
.review .rh{display:flex;flex-direction:column;gap:6px;padding-bottom:8px;border-bottom:1px solid var(--color-border)}
.review .rh strong{font-weight:600;font-size:.98rem}
.review__count{display:flex;justify-content:space-between;align-items:baseline;color:var(--color-text-muted)}
.review__count b{font-size:1.4rem;font-weight:500;color:var(--color-dark);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.urow{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(50px,1fr) 44px 62px;gap:8px;align-items:center}
.urow .track{height:7px;border-radius:4px;background:#e3eef4;overflow:hidden}
.urow .track i{display:block;height:100%;width:0;background:var(--color-signal-deep);border-radius:4px;transition:width .25s linear}
.urow.low .track i{background:#e0b45c}
.urow .n{text-align:right;font-variant-numeric:tabular-nums;color:var(--color-text-muted);font-size:.8rem}
.urow .act{justify-self:end;font-size:.7rem;font-weight:600;border-radius:999px;padding:2px 8px;background:var(--color-bg-muted);color:var(--color-signal-deep);opacity:0;transition:opacity .3s}
.urow .act.pack{background:#fdf1d8;color:#9a6400}
.urow .act.rm{background:#f6e3e1;color:#a2453b}
.review.done .urow .act{opacity:1}
.review__sum{background:var(--color-bg-alt);border-radius:10px;padding:10px 12px;opacity:.35;transition:opacity .4s}
.review.done .review__sum{opacity:1}
.review__sum strong{display:block;font-weight:600;font-size:.98rem}
.review__sum span{color:var(--color-text-muted);font-size:.82rem}
.review .rstate{margin-top:auto}
@media (max-width:900px){.olive{grid-template-columns:minmax(0,1fr)}.olive .stage{aspect-ratio:16/10;min-height:0;height:auto}}
@media (max-width:520px){.otag b{font-size:.68rem;padding:3px 8px}.urow{grid-template-columns:minmax(0,1.4fr) minmax(36px,1fr) 40px 58px;gap:6px}}
.also{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.also > article{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:22px;display:flex;flex-direction:column;gap:12px;min-width:0}
.also .kind{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-signal-deep)}
.also p{color:var(--color-text-muted)}
@media (max-width:900px){.also{grid-template-columns:minmax(0,1fr)}}
.lenslabel{transform:translate(calc(-100% - 22px),-50%)}
@media (min-width:901px){.hud{bottom:auto}}
.hud__foot{margin-top:2px}
.hud__cell strong{font-size:1.08rem}
.hud__req strong{font-size:1.15rem}

/* v8: smart glasses for the OR. Header line, hands-free modes, case file, capabilities */
.tagline{font-size:.85rem;color:var(--color-text-muted);border-left:1px solid var(--color-border-strong);padding-left:14px;margin-left:-14px;white-space:nowrap}
@media (max-width:1180px){.tagline{display:none}}
.stage__mic.vid{border-color:#ff8a7a;animation:pulsered 1.2s infinite}
@keyframes pulsered{0%{box-shadow:0 0 0 0 rgba(255,138,122,.6)}70%{box-shadow:0 0 0 16px rgba(255,138,122,0)}100%{box-shadow:0 0 0 0 rgba(255,138,122,0)}}
.stage__mic.cam::after,.stage__mic.vid::after{border-color:rgba(255,255,255,.5)}
.modes{position:absolute;left:14px;bottom:14px;display:flex;gap:6px;flex-wrap:wrap}
.modes span{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:#d6e8f1;background:rgba(12,30,42,.62);backdrop-filter:blur(4px);border:1px solid rgba(223,243,252,.18);border-radius:999px;padding:5px 11px 5px 9px;transition:background .25s,color .25s}
.modes svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.modes span.on{background:#f3f8fc;color:var(--color-dark);border-color:#f3f8fc}
.live .stage__ctl{bottom:auto;top:14px}
.casefile{gap:5px}
.cf-label{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-subtle);margin-top:6px}
.casefile .rf .v .m{display:block}
.cf-media{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.cf-media li{display:flex;align-items:center;gap:10px;padding:4px 6px;border-radius:8px;transition:background .5s var(--ease-out);line-height:1.25}
.cf-media li.flash-in{background:var(--color-bg-muted)}
.cf-media li b{display:block;font-weight:600;font-size:.78rem}
.cf-media li.none{color:#a7bac5;padding-left:6px}
.th{flex:none;width:40px;height:30px;border-radius:6px;display:grid;place-items:center;background:linear-gradient(135deg,#24566f,#0f2a39)}
.th svg{width:16px;height:16px;fill:none;stroke:#cfeefa;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.th--call{background:var(--color-bg-muted)}
.th--call svg{stroke:var(--color-signal-deep)}
@media (max-width:900px){.modes{bottom:auto;top:12px;left:12px}.modes span{font-size:.72rem;padding:4px 9px 4px 7px}.live .stage__ctl{top:auto;bottom:auto;top:12px}.stage__say{bottom:4%}}
@media (max-width:520px){.modes span{gap:0;padding:6px}.modes span svg{width:15px;height:15px}.modes span{font-size:0}}

.caps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.caps > article{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:24px;display:flex;flex-direction:column;gap:10px;min-width:0}
.caps > article:first-child{border-color:var(--color-signal);box-shadow:0 0 0 3px #dff3fc}
.cap-ic{width:60px;height:60px;border-radius:16px;background:var(--color-bg-muted);display:grid;place-items:center;margin-bottom:4px}
.cap-ic svg{width:40px;height:40px;fill:none;stroke:var(--color-signal);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cap-ic .w{fill:#fff}.cap-ic .f{fill:var(--color-bg-muted)}.cap-ic .d{stroke:var(--color-signal-deep)}
.caps .kind{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-signal-deep)}
.caps h3{font-size:1.18rem}
.caps p{color:var(--color-text-muted)}
@media (max-width:1100px){.caps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.caps{grid-template-columns:minmax(0,1fr)}}

.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;counter-reset:st}
.steps li{counter-increment:st;display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;color:var(--color-text-muted)}
.steps li::before{content:counter(st);width:28px;height:28px;border-radius:50%;background:var(--color-dark);color:#fff;display:grid;place-items:center;font-size:.8rem;font-weight:600}
.steps b{color:var(--color-dark);font-weight:600}
.doc{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:22px;display:flex;flex-direction:column;gap:12px;box-shadow:0 14px 45px rgba(23,55,73,.08)}
.doc__head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding-bottom:10px;border-bottom:1px solid var(--color-border)}
.doc__head strong{font-weight:600}
.doc dl{margin:0;display:grid;grid-template-columns:90px minmax(0,1fr);gap:9px 12px;font-size:.92rem}
.doc dt{color:var(--color-text-subtle);font-size:.8rem;padding-top:2px}
.doc dd{margin:0;line-height:1.4}
.doc .m{display:block;font-family:var(--font-mono);font-size:.74rem;color:var(--color-signal-deep)}
.att{display:inline-block;font-size:.78rem;background:var(--color-bg-alt);border:1px solid var(--color-border);border-radius:999px;padding:2px 10px;margin-right:6px}
@media (max-width:900px){.feature{grid-template-columns:minmax(0,1fr)}}

/* v8 nurses: key benefits, procedure guidance first */
.nben{display:grid;grid-template-columns:minmax(0,1.25fr) repeat(2,minmax(0,1fr));grid-template-rows:auto auto;gap:18px}
.nben > article{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:24px;display:flex;flex-direction:column;gap:10px;min-width:0}
.nben > article.lead-card{grid-row:span 2;border-color:var(--color-signal);box-shadow:0 0 0 3px #dff3fc}
.nben .kind{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-signal-deep)}
.nben h3{font-size:1.18rem}
.nben p{color:var(--color-text-muted)}
.nben .lead-card h3{font-size:1.5rem;letter-spacing:-.035em}
.mini-hud{margin-top:auto;background:#0c1c26;color:#eaf6fc;border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px}
.mini-hud .hud__cols{gap:6px}
@media (max-width:1000px){.nben{grid-template-columns:repeat(2,minmax(0,1fr))}.nben > article.lead-card{grid-row:auto;grid-column:1 / -1}}
@media (max-width:600px){.nben{grid-template-columns:minmax(0,1fr)}}

/* v8 OR managers & hospitals: analysis captured by the nurses' glasses */
.olive .stage > img{object-position:50% 50%}
.olive svg.cone{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.otag.left b{transform:translate(calc(-100% - 14px),-50%)}
.otag.cam i{border-color:#ffffff;background:rgba(255,255,255,.3);animation:pulse 1.6s infinite}
.phase{position:absolute;left:14px;top:14px;display:flex;align-items:center;gap:8px;background:rgba(12,30,42,.84);color:#eaf6fc;border-radius:999px;padding:5px 12px;font-size:.78rem}
.phase::before{content:"";width:8px;height:8px;border-radius:50%;background:#9be3c6}
.analysis{gap:12px}
.analysis .seg{align-self:flex-start}
.analysis .usage-note{font-size:.85rem}
.analysis .urow .act{opacity:1}
.analysis .review__sum{opacity:1}
.olive .stage__ctl{top:auto;bottom:14px}

/* v9: clinical layer (three apps) plus the everyday features in one line */
.caps--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.caps--3 > article:first-child{border-color:var(--color-border);box-shadow:none}
@media (max-width:900px){.caps--3{grid-template-columns:minmax(0,1fr)}}
.sec-head .body{margin-top:2px}
.everyday{display:flex;align-items:center;gap:16px;margin-top:18px;padding:14px 18px;border:1px dashed var(--color-border-strong);border-radius:var(--radius-md)}
.everyday__ic{display:flex;gap:6px;flex:none}
.everyday__ic svg{width:30px;height:30px;padding:6px;border-radius:8px;background:#fff;border:1px solid var(--color-border);fill:none;stroke:var(--color-signal-deep);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.everyday p{color:var(--color-text-muted)}
.everyday strong{color:var(--color-dark);font-weight:600}
@media (max-width:600px){.everyday{flex-direction:column;align-items:flex-start}}
.th--msg,.th--timer{background:var(--color-bg-muted)}
.th--msg svg,.th--timer svg{stroke:var(--color-signal-deep)}
.nben--3{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:repeat(3,auto)}
.nben--3 > article.lead-card{grid-row:span 3}
@media (max-width:1000px){.nben--3{grid-template-columns:minmax(0,1fr)}.nben--3 > article.lead-card{grid-row:auto;grid-column:auto}}

/* v10: photo with clickable voice examples; ORite apps and built-in features side by side */
.say-hero{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(220px,.7fr);gap:16px;align-items:stretch}
.say-hero .stage{aspect-ratio:auto;min-height:420px}
.say-hero .stage__say{left:4%;top:auto;bottom:6%;width:min(55%,420px)}
.say-hero .stage__ctl{top:14px;bottom:auto}
.ex{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:12px;display:flex;flex-direction:column;gap:2px}
.ex__group{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-subtle);padding:10px 8px 4px}
.ex__group:first-child{padding-top:4px}
.ex button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:transparent;border-radius:10px;padding:7px 8px;font-size:.95rem;color:var(--color-dark);transition:background .2s}
.ex button:hover{background:var(--color-bg-alt)}
.ex button[aria-selected="true"]{background:var(--color-dark);color:#fff}
.ex__ic{flex:none;width:30px;height:30px;border-radius:8px;background:var(--color-bg-muted);display:grid;place-items:center;color:var(--color-signal-deep)}
.ex button[aria-selected="true"] .ex__ic{background:rgba(255,255,255,.14);color:#cfeefa}
.ex svg,.app-ic svg,.tile svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ex svg{width:17px;height:17px}
@media (max-width:900px){
  .say-hero{grid-template-columns:minmax(0,1fr)}
  .say-hero .stage{min-height:0;aspect-ratio:4/3}
  .say-hero .stage__say{left:4%;right:4%;width:auto}
  .say-hero .stage__ctl{left:auto;right:12px}
  .ex{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
  .ex__group{grid-column:1 / -1}
  .ex button{font-size:.88rem}
}
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.duo > div{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:22px;display:flex;flex-direction:column;gap:14px;min-width:0}
.duo__title{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-signal-deep)}
.apps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;flex:1}
.apps li{flex:1;display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:center;padding:14px 16px;border-radius:var(--radius-md);background:var(--color-bg-alt)}
.apps b{display:block;font-size:1.12rem;font-weight:500;letter-spacing:-.02em}
.apps li > span:last-child{color:var(--color-text-muted)}
.app-ic{width:44px;height:44px;border-radius:12px;background:#fff;border:1px solid var(--color-border);display:grid;place-items:center;color:var(--color-signal-deep)}
.app-ic svg{width:22px;height:22px}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;flex:1}
.tiles--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tile{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:var(--radius-md);background:var(--color-bg-alt)}
.tile svg{width:28px;height:28px;color:var(--color-signal-deep);margin-bottom:6px}
.tile b{font-size:1.12rem;font-weight:500;letter-spacing:-.02em}
.tile span{color:var(--color-text-muted);font-size:.92rem}
@media (max-width:900px){.duo{grid-template-columns:minmax(0,1fr)}.tiles--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.builtin{margin-top:18px;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:22px;display:flex;flex-direction:column;gap:14px}
.steps li > span{align-self:center}

/* v11: benefit cards that show the result */
.bcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.bcards > article{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.bcard__vis{height:190px;background:linear-gradient(160deg,#e7f3fa,#d4e8f3);display:grid;place-items:center;padding:18px;border-bottom:1px solid var(--color-border)}
.bcard__body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px}
.bcard__body h3{font-size:1.2rem}
.bcard__body p{color:var(--color-text-muted)}
.mini-doc{width:100%;max-width:290px;background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(23,55,73,.12);padding:12px 14px;display:flex;flex-direction:column;gap:6px;font-size:.8rem;line-height:1.3}
.mini-doc > div{display:grid;grid-template-columns:62px minmax(0,1fr) 14px;gap:6px;align-items:baseline}
.mini-doc span{color:var(--color-text-subtle);font-size:.72rem}
.mini-doc i{font-style:normal;color:#21704a;font-weight:700}
.mini-doc b{align-self:flex-end;margin-top:4px;font-size:.72rem;font-weight:600;color:#fff;background:var(--color-signal-deep);border-radius:6px;padding:4px 9px}
.mini-chat{width:100%;max-width:290px;display:flex;flex-direction:column;gap:8px;font-size:.82rem;line-height:1.3}
.mc-out{align-self:flex-end;display:flex;align-items:center;gap:8px;background:var(--color-signal-deep);color:#fff;border-radius:14px 14px 4px 14px;padding:7px 12px 7px 7px}
.mc-photo{width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,#24566f,#0f2a39);display:grid;place-items:center;flex:none}
.mc-photo svg{width:16px;height:16px;fill:none;stroke:#cfeefa;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mc-in{align-self:flex-start;background:#fff;border-radius:14px 14px 14px 4px;padding:8px 12px;box-shadow:0 8px 24px rgba(23,55,73,.1);max-width:85%}
.mc-in b{display:block;font-size:.7rem;font-weight:600;color:var(--color-signal-deep);margin-bottom:2px}
.mini-timer{display:flex;align-items:center;gap:16px;background:#fff;border-radius:16px;box-shadow:0 10px 30px rgba(23,55,73,.12);padding:16px 22px}
.mini-timer svg{width:64px;height:64px;transform:rotate(-90deg)}
.mini-timer .tr{fill:none;stroke:#e3eef4;stroke-width:6}
.mini-timer .tp{fill:none;stroke:var(--color-signal);stroke-width:6;stroke-linecap:round;stroke-dasharray:170 170;stroke-dashoffset:46}
.mini-timer b{display:block;font-size:1.7rem;font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.mini-timer span{color:var(--color-text-muted);font-size:.85rem}
@media (max-width:900px){.bcards{grid-template-columns:minmax(0,1fr)}.bcard__vis{height:170px}}

/* v12: one case, note to signed report (hero), documentation, communication, also hands-free */
.flow{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(230px,.7fr);gap:16px;align-items:stretch}
.flow .stage{aspect-ratio:auto;min-height:440px}
.flow .stage > img{transition:filter .5s}
.flow .stage__say{left:4%;top:auto;bottom:6%;width:min(55%,430px)}
.flow .stage__ctl{top:14px;bottom:auto;left:auto;right:14px}
.hud-state{position:absolute;left:14px;top:14px;display:flex;align-items:center;gap:8px;background:rgba(12,30,42,.82);color:#eaf6fc;border-radius:999px;padding:5px 12px;font-size:.8rem}
.hud-state i{width:8px;height:8px;border-radius:50%;background:#e0574a;animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.3}}
.shutter{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.shutter.go{animation:shut .55s ease-out}
@keyframes shut{0%{opacity:.85}100%{opacity:0}}
.draft{position:absolute;right:3%;top:5%;bottom:5%;width:min(48%,440px);background:#fff;border-radius:14px;box-shadow:0 18px 50px rgba(13,26,34,.35);padding:16px;display:flex;flex-direction:column;gap:10px;font-size:.84rem;transform:translateX(110%);opacity:0;transition:transform .5s var(--ease-out),opacity .4s}
.draft__head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding-bottom:8px;border-bottom:1px solid var(--color-border)}
.draft__head strong{font-weight:600;font-size:.95rem}
.draft dl{margin:0;display:grid;grid-template-columns:72px minmax(0,1fr);gap:7px 10px}
.draft dt{color:var(--color-text-subtle);font-size:.74rem;padding-top:2px}
.draft dd{margin:0;line-height:1.35;transition:background .4s}
.draft dd .m{display:block;font-family:var(--font-mono);font-size:.72rem;color:var(--color-signal-deep)}
.draft dd.edited{background:var(--color-input-bg);border-radius:6px;padding:2px 6px;margin:-2px -6px}
.thumbs{display:flex;gap:6px}
.thumbs span{width:38px;height:28px;border-radius:5px;background:linear-gradient(135deg,#24566f,#0f2a39)}
.thumbs span:nth-child(2){background:linear-gradient(135deg,#3a6f8a,#173749)}
.draft__foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 10px;border-radius:9px;background:var(--color-bg-alt);font-size:.8rem}
.draft__foot b{font-weight:600;color:#fff;background:var(--color-signal-deep);padding:5px 10px;border-radius:6px;white-space:nowrap;transition:background .3s}
.draft__foot b.signed{background:#21704a}
.flow.is-draft .draft{transform:none;opacity:1}
.flow.is-draft .stage > img{filter:brightness(.6)}
.flow.is-draft .stage__say,.flow.is-draft .stage__mic,.flow.is-draft .stage__rec{opacity:0}
.flow.is-draft .hud-state i{animation:none;background:#9be3c6}
.flow .stage__mic,.flow .stage__rec{transition:opacity .3s}
.flow__steps{list-style:none;margin:0;padding:12px;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:4px;justify-content:center}
.flow__steps button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;background:transparent;border-radius:12px;padding:10px;color:var(--color-dark);transition:background .2s}
.flow__steps button:hover{background:var(--color-bg-alt)}
.flow__steps .n{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:600;background:var(--color-bg-muted);color:var(--color-signal-deep)}
.flow__steps b{display:block;font-weight:500;font-size:.98rem;line-height:1.2}
.flow__steps small{display:block;color:var(--color-text-subtle);font-size:.8rem}
.flow__steps button.done .n{background:var(--color-signal);color:#fff}
.flow__steps button[aria-selected="true"]{background:var(--color-dark);color:#fff}
.flow__steps button[aria-selected="true"] .n{background:#fff;color:var(--color-dark)}
.flow__steps button[aria-selected="true"] small{color:#a9c3d1}
@media (max-width:900px){
  .flow{grid-template-columns:minmax(0,1fr)}
  .flow .stage{min-height:0;aspect-ratio:4/3}
  .flow .stage__say{left:4%;right:4%;width:auto}
  .draft{left:4%;right:4%;width:auto;top:4%;bottom:4%;padding:12px;font-size:.78rem;gap:6px}
  .draft dl{grid-template-columns:62px minmax(0,1fr);gap:4px 8px}
  .thumbs span{width:30px;height:22px}
  .flow__steps button{padding:8px}
}
@media (prefers-reduced-motion:reduce){.hud-state i{animation:none}}
.checks{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.checks li{display:flex;gap:12px;align-items:center;font-size:1.02rem;color:var(--color-text-muted)}
.checks svg{flex:none;width:38px;height:38px;padding:9px;border-radius:10px;background:#fff;border:1px solid var(--color-border);fill:none;stroke:var(--color-signal-deep);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.checks b{color:var(--color-dark);font-weight:600}
.comms{background:linear-gradient(160deg,#e7f3fa,#d4e8f3);border-radius:var(--radius-lg);padding:28px;display:flex;flex-direction:column;gap:12px;font-size:.86rem}
.cm-call{display:flex;align-items:center;gap:12px;background:#fff;border-radius:14px;padding:10px 14px;box-shadow:0 8px 24px rgba(23,55,73,.1);max-width:330px}
.cm-call b{display:block;font-weight:600}
.cm-call em{margin-left:auto;font-style:normal;font-size:.78rem;color:#21704a;background:#e3f4ec;border-radius:999px;padding:3px 10px}
.cm-ic{width:34px;height:34px;border-radius:50%;background:#e3f4ec;display:grid;place-items:center;flex:none}
.cm-ic svg{width:16px;height:16px;fill:none;stroke:#21704a;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.comms .mc-out{max-width:330px}
.cm-live{align-self:flex-start;display:flex;gap:8px;align-items:center;background:var(--color-dark);color:#fff;border-radius:999px;padding:6px 14px;font-size:.82rem}
.cm-live i{width:8px;height:8px;border-radius:50%;background:#e0574a}
/* v12 nurses: manual steps for the scrub nurse, acknowledge for the circulating nurse */
.hud__inst{width:100%;height:20px;margin-top:6px;fill:none;stroke:#eaf6fc;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.hud__nav{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.74rem;color:#8fc3d9}
.hud__nav button,.hud__ack{font-size:.82rem;font-weight:500;border:1px solid rgba(127,212,245,.5);background:rgba(127,212,245,.12);color:#eaf6fc;border-radius:8px;padding:6px 12px}
.hud__nav button:hover,.hud__ack:hover{background:rgba(127,212,245,.25)}
.hud__nav button[disabled]{opacity:.35;cursor:default}
.hud__ack{align-self:flex-start;margin-top:6px;border-color:#9be3c6;background:rgba(155,227,198,.18)}
.nben--2{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:repeat(2,auto)}
.nben--2 > article.lead-card{grid-row:span 2}
@media (max-width:1000px){.nben--2{grid-template-columns:minmax(0,1fr)}.nben--2 > article.lead-card{grid-row:auto}}
/* v12 hospitals: capture to implement, savings example */
.also-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px;font-size:.88rem}
.also-row span{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-signal-deep);margin-right:4px}
.also-row i{font-style:normal;background:#fff;border:1px solid var(--color-border);border-radius:999px;padding:5px 12px}
.flow5{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.flow5 li{position:relative;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:18px;display:flex;flex-direction:column;gap:6px}
.flow5 li:not(:last-child)::after{content:"";position:absolute;right:-10px;top:30px;width:8px;height:8px;border-top:2px solid var(--color-signal);border-right:2px solid var(--color-signal);transform:rotate(45deg);z-index:1}
.flow5 .n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:600;background:var(--color-dark);color:#fff;margin-bottom:4px}
.flow5 b{font-weight:500;font-size:1.1rem;letter-spacing:-.02em}
.flow5 li > span:last-child{color:var(--color-text-muted);font-size:.9rem}
@media (max-width:1000px){.flow5{grid-template-columns:minmax(0,1fr)}.flow5 li:not(:last-child)::after{display:none}}
.calc{margin-top:18px;display:grid;grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,.8fr)) minmax(0,1.4fr);gap:16px;align-items:end;background:var(--color-bg-alt);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:20px}
.calc label{display:flex;flex-direction:column;gap:6px;font-size:.8rem;color:var(--color-text-muted)}
.calc input{font:inherit;font-size:1rem;padding:9px 10px;border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);background:#fff;color:var(--color-dark);width:100%}
.calc__out{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;align-items:baseline}
.calc__out b{font-size:1.4rem;font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.calc__out span{font-size:.82rem;color:var(--color-text-muted)}
@media (max-width:1000px){.calc{grid-template-columns:minmax(0,1fr)}}
.flow.is-draft .stage__ctl{top:auto;bottom:14px;right:auto;left:14px}
@media (max-width:900px){.flow .stage{aspect-ratio:1/1}.draft dl dt:first-child,.draft dl dd:first-of-type{display:none}.flow.is-draft .stage__ctl{display:none}}

/* v13: one static hero pattern for every page. The person in the glasses, what they get, three steps. */
.trio{display:grid;grid-template-columns:minmax(0,1.55fr) 40px minmax(0,1fr);gap:8px;align-items:stretch}
.trio__photo{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-border-strong);background:#0d1a22;height:100%;min-height:400px}
.trio__photo > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.trio__photo > svg.cone,.trio__photo > svg.ph{position:absolute;inset:0;width:100%;height:100%}
.trio__arrow{display:grid;place-items:center;color:var(--color-signal)}
.trio__arrow svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.trio__legend{display:none}
.anno{position:absolute;width:0;height:0;z-index:2}
.anno i{position:absolute;left:-8px;top:-8px;width:16px;height:16px;border-radius:50%;border:2px solid #fff;background:rgba(22,141,189,.6);box-shadow:0 0 0 3px rgba(255,255,255,.22);font-style:normal}
.anno::before{content:"";position:absolute;top:-.75px;height:1.5px;width:28px;background:rgba(255,255,255,.9)}
.anno--left::before{right:8px}
.anno--right::before{left:8px}
.anno b{position:absolute;top:0;transform:translateY(-50%);white-space:nowrap;display:inline-flex;align-items:center;gap:7px;background:rgba(12,30,42,.86);color:#eef8fd;font-weight:500;font-size:.82rem;border-radius:999px;padding:6px 12px 6px 10px}
.anno--left b{right:36px}
.anno--right b{left:36px}
.anno b svg{width:15px;height:15px;fill:none;stroke:#9fd3ea;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.trio__result{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:20px;display:flex;flex-direction:column;gap:12px;min-width:0;box-shadow:0 14px 45px rgba(23,55,73,.06)}
.res-label{font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-signal-deep)}
.res-doc dl{margin:0;display:grid;grid-template-columns:74px minmax(0,1fr);gap:8px 10px;font-size:.9rem}
.res-doc dt{color:var(--color-text-subtle);font-size:.78rem;padding-top:2px}
.res-doc dd{margin:0;line-height:1.35}
.res-doc dd .m{display:block;font-family:var(--font-mono);font-size:.72rem;color:var(--color-signal-deep)}
.res-ok{margin-top:auto;display:flex;align-items:center;gap:8px;background:#e3f4ec;color:#1b5e3e;border-radius:10px;padding:10px 12px;font-weight:600;font-size:.9rem}
.res-ok svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.steps3{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.steps3 li{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:12px 14px;font-size:.98rem;line-height:1.3}
.steps3 .n{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--color-dark);color:#fff;font-size:.8rem;font-weight:600}
/* What the nurse sees: a see-through display over their view */
.res-view{position:relative;padding:0;overflow:hidden;min-height:400px;background:#0d1a22}
.res-view > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:15% 50%}
.res-view .res-label{position:absolute;left:16px;bottom:14px;color:#fff;background:rgba(12,30,42,.7);border-radius:999px;padding:4px 10px;letter-spacing:.08em}
.glass{position:absolute;left:16px;right:16px;top:16px;color:#fff;background:rgba(8,22,32,.28);border:1px solid rgba(255,255,255,.45);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;text-shadow:0 1px 3px rgba(0,0,0,.55);backdrop-filter:blur(1.5px)}
.glass__meta{display:flex;justify-content:space-between;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;opacity:.9}
.glass__cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.glass__cols span{display:block;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.glass__cols strong{font-size:1.1rem;font-weight:500}
.glass__req strong{display:block;font-size:1.15rem;font-weight:500}
.glass__req span{font-size:.8rem;opacity:.9}
.glass__ok{font-size:.85rem;font-weight:600;color:#b9f3da}
/* Hospital outcomes */
.res-out{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:12px;background:var(--color-bg-alt)}
.res-out b{font-size:1.25rem;font-weight:500;letter-spacing:-.02em}
.res-out span{color:var(--color-text-muted);font-size:.88rem}
.res-out .k{font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-signal-deep)}
.tray{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 8px;align-items:center;font-size:.78rem;color:var(--color-text-muted)}
.tray i{display:block;height:8px;border-radius:4px;background:#b1d0e1}
.tray i.after{background:var(--color-signal-deep)}
@media (max-width:900px){
  .trio{grid-template-columns:minmax(0,1fr);gap:6px}
  .trio__photo{min-height:0;height:auto;aspect-ratio:4/3}
  .trio__arrow svg{transform:rotate(90deg);width:24px;height:24px}
  .res-view{min-height:0;aspect-ratio:4/3}
  .steps3{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .anno b,.anno::before{display:none}
  .anno i{left:-11px;top:-11px;width:22px;height:22px;background:var(--color-signal-deep);color:#fff;font-size:.72rem;font-weight:700;display:grid;place-items:center}
  .anno i::after{content:attr(data-n)}
  .trio__legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:.85rem;color:var(--color-text-muted)}
  .trio__legend em{font-style:normal;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--color-signal-deep);color:#fff;font-size:.68rem;font-weight:700;margin-right:6px}
}
.trio__media{display:flex;flex-direction:column;min-width:0}.trio__media .trio__photo{flex:1}

/* v14: photos keep their own proportions (nothing cut), speech banners on the surgeon photo, display graphic for nurses */
.trio{align-items:center}
.trio__photo{height:auto;min-height:0;aspect-ratio:3/2}
.trio__photo.wide{aspect-ratio:16/9}
.says{position:absolute;left:3%;bottom:4%;display:flex;flex-direction:column;align-items:flex-start;gap:6px;max-width:72%;z-index:2}
.say{display:flex;align-items:center;gap:10px;background:rgba(12,30,42,.84);color:#eef8fd;border-radius:12px;padding:8px 12px;font-size:.88rem;line-height:1.3}
.say svg{flex:none;width:16px;height:16px;fill:none;stroke:#9fd3ea;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.say q{quotes:"“" "”"}
.say em{font-style:normal;white-space:nowrap;color:#9be3c6;font-size:.78rem;font-weight:600}
.says__label{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(12,30,42,.84);border-radius:999px;padding:3px 10px}
@media (max-width:900px){
  .says{position:static;max-width:none;margin-top:8px}
  .say{width:100%;background:var(--color-dark)}
  .says__label{display:none}
}
.anno--glow::before{display:none}
.anno--glow i,.anno--glow i::after{content:none}
.anno--glow i{left:-13px;top:-6px;width:26px;height:12px;border:0;border-radius:3px;background:rgba(127,212,245,.65);box-shadow:0 0 12px 4px rgba(127,212,245,.75);transform:rotate(-5deg);animation:none}
@media (max-width:700px){.anno--glow i{left:-10px;top:-5px;width:20px;height:10px;background:rgba(127,212,245,.65);display:block}}
/* Nurses: what the display shows */
.disp{display:flex;flex-direction:column;gap:14px}
.disp__glasses{width:100%;max-width:240px;height:auto;align-self:center}
.disp__screen{border:1px solid var(--color-border-strong);border-radius:14px;padding:14px 16px;background:linear-gradient(180deg,#fbfdfe,#f1f8fc);display:flex;flex-direction:column;gap:10px}
.disp__meta{display:flex;justify-content:space-between;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-subtle)}
.disp__cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.disp__cols > div{border:1px solid var(--color-border);border-radius:10px;padding:10px;background:#fff}
.disp__cols > div:first-child{border-color:var(--color-signal)}
.disp__cols span,.disp__req span{display:block;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-signal-deep)}
.disp__cols strong{display:block;font-size:1.08rem;font-weight:500;margin-top:2px}
.disp__cols svg{width:100%;height:18px;margin-top:6px;fill:none;stroke:var(--color-dark);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.disp__req{border:1px solid var(--color-signal);border-radius:10px;padding:10px 12px;background:#fff}
.disp__req strong{display:block;font-size:1.15rem;font-weight:500;margin-top:2px}
.disp__req small{color:var(--color-text-muted)}
.disp__ok{display:inline-flex;align-self:flex-start;gap:6px;background:#e3f4ec;color:#1b5e3e;border-radius:999px;padding:4px 10px;font-size:.82rem;font-weight:600}
.disp__note{font-size:.92rem;color:var(--color-text-muted)}
/* Surgeons: features closer together */
.section--tight{padding-block:clamp(40px,4.5vw,64px)}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch}
.pair > div{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:24px;display:flex;flex-direction:column;gap:14px;min-width:0}
.pair h2{font-size:clamp(1.4rem,2.2vw,1.75rem)}
.pair .comms{padding:18px}
.pair .tiles{flex:1}
@media (max-width:900px){.pair{grid-template-columns:minmax(0,1fr)}}
/* Hospitals: instrument use as icons and bars, with case timings */
.util{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.util li{display:grid;grid-template-columns:46px minmax(0,1.1fr) minmax(60px,1fr) 40px;gap:10px;align-items:center;font-size:.86rem}
.util svg{width:46px;height:18px;fill:none;stroke:var(--color-signal-deep);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.util .ub{height:8px;border-radius:4px;background:#e3eef4;overflow:hidden}
.util .ub i{display:block;height:100%;border-radius:4px;background:var(--color-signal-deep)}
.util li.low .ub i{background:#e0b45c}
.util li.low svg{stroke:#b98a2e}
.util b{font-weight:500;text-align:right;font-variant-numeric:tabular-nums;color:var(--color-text-muted)}
.util-sum{display:flex;flex-wrap:wrap;gap:8px}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 12px;font-size:.84rem;font-weight:600;background:var(--color-bg-muted);color:var(--color-signal-deep)}
.pill.amber{background:#fdf1d8;color:#8a5a00}
.mini-tl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.mini-tl li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;align-items:center;font-size:.8rem;color:var(--color-text-muted)}
.mini-tl .bars{display:flex;height:9px;border-radius:4px;overflow:hidden;background:var(--color-bg-alt)}
.mini-tl .bars i{display:block;height:100%}
.res-sep{border-top:1px solid var(--color-border);margin:2px 0}
.mini-tl .s{background:#b1d0e1}.mini-tl .p{background:var(--color-signal-deep)}.mini-tl .c{background:#6fb3d4}.mini-tl .t{background:#e0b45c}
.trio__media{position:relative}

/* v15: attached photos and video in the report card */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.shot-t{position:relative;aspect-ratio:4/3;border-radius:8px;background-repeat:no-repeat;background-color:#0d1a22;overflow:hidden}
.shot-t.t1{background-image:url(assets/glasses/surgeon-recording-v13.jpg);background-size:330%;background-position:55% 92%}
.shot-t.t2{background-image:url(assets/glasses/nurse-pov-instruments-v34.jpg);background-size:260%;background-position:35% 75%}
.shot-t.t3{background-image:url(assets/glasses/operating-room.jpg);background-size:230%;background-position:52% 28%}
.shot-t.vid i{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:rgba(255,255,255,.9)}
.shot-t.vid i::after{content:"";position:absolute;left:12px;top:9px;border-left:10px solid var(--color-dark);border-top:6px solid transparent;border-bottom:6px solid transparent}
.shot-t.vid b{position:absolute;right:5px;bottom:4px;font-size:.7rem;font-weight:600;color:#fff;background:rgba(12,30,42,.75);border-radius:4px;padding:1px 5px}
/* Dictation: what you say, and where it goes */
.dict{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:18px;display:flex;flex-direction:column;gap:10px;box-shadow:0 14px 45px rgba(23,55,73,.06)}
.dict__head{display:grid;grid-template-columns:minmax(0,1fr) 28px 96px;gap:10px;font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-signal-deep)}
.dict__head span:last-child{grid-column:3}
.dict__row{display:grid;grid-template-columns:minmax(0,1fr) 28px 96px;gap:10px;align-items:center}
.dict__q{display:flex;gap:10px;align-items:flex-start;background:var(--color-bg-alt);border-radius:10px;padding:10px 12px;font-size:.92rem;line-height:1.35}
.dict__q > svg{flex:none;width:16px;height:16px;margin-top:2px;fill:none;stroke:var(--color-signal-deep);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dict__q small{display:block;font-family:var(--font-mono);font-size:.7rem;color:var(--color-text-subtle)}
.dict__arrow{width:22px;height:22px;fill:none;stroke:var(--color-signal);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dict__f{justify-self:stretch;text-align:center;font-size:.85rem;font-weight:600;color:var(--color-signal-deep);background:var(--color-bg-muted);border-radius:8px;padding:8px 6px}
@media (max-width:560px){.dict__row,.dict__head{grid-template-columns:minmax(0,1fr) 20px 78px;gap:6px}.dict__q{font-size:.85rem}}
/* Communication wide, also hands-free in a narrow box on the right */
.pair--side{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
@media (max-width:900px){.pair--side{grid-template-columns:minmax(0,1fr)}}
.side-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;flex:1}
.side-list li{flex:1;display:flex;gap:12px;align-items:center;background:var(--color-bg-alt);border-radius:var(--radius-md);padding:12px 14px;color:var(--color-text-muted);font-size:.9rem}
.side-list b{display:block;color:var(--color-dark);font-weight:500;font-size:1.02rem}
.side-list svg{flex:none;width:36px;height:36px;padding:8px;border-radius:10px;background:#fff;border:1px solid var(--color-border);fill:none;stroke:var(--color-signal-deep);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* Nurses: the glasses from the wearer's side, with the display information highlighted */
.trio--even{grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr)}
.wear{position:relative;aspect-ratio:3/2;border-radius:var(--radius-lg);overflow:hidden;background:#0b0f14;border:1px solid var(--color-border-strong)}
.wear > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wear__lens{position:absolute;left:61.5%;top:44%;width:19%;padding:4px 5px;border-radius:4px;background:rgba(127,212,245,.22);border:1px solid rgba(127,212,245,.9);box-shadow:0 0 18px 4px rgba(127,212,245,.55);color:#eaf8ff;font-size:.56rem;line-height:1.2;text-align:center}
.wear__lens b{display:block;font-weight:600}
.wear__line{position:absolute;left:71%;top:56%;width:1.5px;height:12%;background:rgba(127,212,245,.85)}
.wear__info{position:absolute;left:6%;right:6%;bottom:6%;border:1px solid rgba(127,212,245,.6);border-radius:12px;padding:12px 14px;background:rgba(10,24,34,.55);color:#f2fbff;display:flex;flex-direction:column;gap:8px}
.wear__meta{display:flex;justify-content:space-between;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:#a9dcf0}
.wear__cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wear__cols span,.wear__req span{display:block;font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#a9dcf0}
.wear__cols strong,.wear__req strong{display:block;font-size:1.12rem;font-weight:500}
.wear__ok{font-size:.82rem;font-weight:600;color:#9be3c6}
.wear__label{position:absolute;left:14px;top:12px;font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#cfe8f3}
@media (max-width:560px){.wear__lens{font-size:.45rem;padding:2px 3px}.wear__info{padding:8px 10px;gap:4px}.wear__cols strong,.wear__req strong{font-size:.95rem}}
/* Hospitals: photo and set analysis the same size */
.trio--even .trio__photo.fill{aspect-ratio:auto;height:100%;min-height:300px}
.trio--even.stretch{align-items:stretch}
@media (max-width:900px){.trio--even{grid-template-columns:minmax(0,1fr)}.trio--even .trio__photo.fill{aspect-ratio:16/9;height:auto;min-height:0}}
/* v15 fix: nurse photo and glasses at the same size; the info panel sits below the lenses */
.wear{margin:0;aspect-ratio:4/3}
.trio--even .trio__photo:not(.fill){aspect-ratio:4/3}
.wear__lens{left:62.9%;top:44%;width:21%}
.wear__line{left:73.6%;top:53%;height:13%}
.wear__info{left:5%;right:5%;bottom:4%;padding:8px 12px;gap:4px}
.wear__meta{font-size:.62rem}
.wear__cols strong,.wear__req strong{font-size:1rem}
.wear__ok{font-size:.76rem}

/* v16: small anatomy thumbnails inside the report */
.att-row{display:flex;gap:6px}
.ana{position:relative;display:block;width:48px;height:36px;border-radius:6px;overflow:hidden}
.ana svg{display:block;width:100%;height:100%}
.ana.vid i{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:rgba(255,255,255,.92)}
.ana.vid i::after{content:"";position:absolute;left:7px;top:5px;border-left:6px solid var(--color-dark);border-top:4px solid transparent;border-bottom:4px solid transparent}
/* Dictation: the template, filled in automatically */
.tpl-doc{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:18px 20px;display:flex;flex-direction:column;gap:2px;box-shadow:0 14px 45px rgba(23,55,73,.08)}
.tpl-doc__head{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:10px;margin-bottom:6px;border-bottom:2px solid var(--color-dark)}
.tpl-doc__head strong{font-weight:600;font-size:1.05rem}
.tpl-row{display:grid;grid-template-columns:86px minmax(0,1fr);gap:12px;padding:8px 0;border-bottom:1px dashed var(--color-border)}
.tpl-k{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-subtle);padding-top:3px}
.tpl-v{font-size:.92rem;line-height:1.4}
.tpl-v.filled{background:#eaf5fb;border-radius:6px;padding:4px 8px;margin:-4px 0}
.tpl-v em{display:flex;align-items:center;gap:5px;margin-top:3px;font-style:normal;font-size:.72rem;font-weight:600;color:var(--color-signal-deep)}
.tpl-v em svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tpl-doc__foot{margin-top:10px;display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;color:#1b5e3e;background:#e3f4ec;border-radius:8px;padding:8px 12px}
/* Communication: what each command does */
.cmds{display:flex;flex-direction:column;gap:10px}
.cmd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:12px;align-items:center;background:var(--color-bg-alt);border-radius:var(--radius-md);padding:12px 14px}
.cmd__q{display:flex;align-items:center;gap:10px;font-weight:500}
.cmd__q svg{flex:none;width:34px;height:34px;padding:8px;border-radius:10px;background:#fff;border:1px solid var(--color-border);fill:none;stroke:var(--color-signal-deep);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cmd__r{color:var(--color-text-muted);font-size:.92rem}
@media (max-width:600px){.cmd{grid-template-columns:minmax(0,1fr)}}
/* Nurses: zoom into one lens, as in the procedure demo, with the display in its lower right */
.anno--glow i{left:-8px;top:-4px;width:16px;height:7px;box-shadow:0 0 7px 2px rgba(127,212,245,.6);background:rgba(127,212,245,.5)}
.wear{background:#dfe9ef}
.wear > img{position:absolute;inset:auto;left:-108%;top:50%;width:210%;height:auto;transform:translateY(-50%);object-fit:fill}
.wear__view{position:absolute;left:30%;top:47%;width:40%;color:#1b5876;text-shadow:0 0 6px rgba(255,255,255,.75)}
.wear__view .vm{display:flex;justify-content:space-between;align-items:baseline;gap:6px;font-size:.68rem;white-space:nowrap}
.wear__view .vm strong{font-weight:600}
.wear__view .vc{display:grid;grid-template-columns:62px minmax(0,1fr);gap:8px;align-items:center;margin-top:6px}
.wear__view .vc svg{width:62px;height:30px;fill:none;stroke:#1b5876;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.wear__view .vc span{display:block;font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.wear__view .vc strong{display:block;font-size:1rem;font-weight:600;line-height:1.15}
.wear__view .vok{display:block;margin-top:5px;font-size:.7rem;font-weight:700;color:#1d6b46}
.wear__cap{position:absolute;left:14px;bottom:12px;display:flex;flex-direction:column;gap:1px;background:rgba(255,255,255,.82);border-radius:10px;padding:7px 11px;font-size:.78rem;color:var(--color-text-muted)}
.wear__cap b{color:var(--color-dark);font-weight:600;font-size:.86rem}
@media (max-width:560px){.wear__view{left:27%;width:46%}.wear__view .vm{font-size:.55rem}.wear__view .vc{grid-template-columns:42px minmax(0,1fr);gap:5px}.wear__view .vc svg{width:42px;height:22px}.wear__view .vc strong{font-size:.8rem}.wear__cap{font-size:.68rem;padding:5px 8px}.wear__cap b{font-size:.74rem}}
/* Hospitals: the platform for agreeing and coordinating changes */
.platform{margin-top:22px;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(20px,4vw,48px);align-items:center}
.platform__shot{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-border-strong);aspect-ratio:16/10;background:#fff;box-shadow:0 14px 45px rgba(23,55,73,.08)}
.platform__shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:100% 0}
@media (max-width:900px){.platform{grid-template-columns:minmax(0,1fr)}}
.wear > img{max-width:none}
.wear__view{left:27%;top:48%;width:37%}.wear__view .vm{font-size:.6rem}.wear__view .vc{grid-template-columns:52px minmax(0,1fr)}.wear__view .vc svg{width:52px;height:26px}.wear__view .vc strong{font-size:.95rem}
.platform__shot{aspect-ratio:4/3}

/* v17: blurred theatre behind the glasses, seen through the lens */
.wear::before{content:"";position:absolute;inset:-20px;background:var(--wear-bg) center/cover no-repeat;filter:blur(5px) saturate(.9);transform:scale(1.05)}
.wear > img{mix-blend-mode:multiply}
.wear__view{background:rgba(255,255,255,.66);border-radius:8px;padding:7px 9px;box-shadow:0 2px 10px rgba(13,26,34,.15)}
/* Report attachments: neutral photo tiles until the real images arrive */
.ana{background:linear-gradient(135deg,#3a5a6b,#173749);display:grid;place-items:center}
.ana svg.ph-ic{width:16px;height:16px;fill:none;stroke:#cfe8f3;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ana.vid svg.ph-ic{display:none}
/* Hospitals: two screens from the platform, toolbar hidden */
.platform{grid-template-columns:minmax(0,1fr)}
.platform__intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(20px,4vw,48px);align-items:end}
.screens{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:6px}
.screen{margin:0;display:flex;flex-direction:column;gap:10px}
.screen__img{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-border-strong);aspect-ratio:2060/1570;background:#f3f8fc;box-shadow:0 14px 45px rgba(23,55,73,.08)}
.screen__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.screen figcaption{font-size:.95rem;color:var(--color-text-muted)}
.screen figcaption b{color:var(--color-dark);font-weight:600}
@media (max-width:900px){.platform__intro,.screens{grid-template-columns:minmax(0,1fr)}}
.wear::before{background-position:center;background-size:cover;background-repeat:no-repeat}
.wear--scrub::before{background-image:url(assets/glasses/nurse-pov-instruments-v34.jpg)}
.wear--circ::before{background-image:url(assets/glasses/hospital-team-v1.webp)}

/* v18: realistic surgery thumbnails in the report */
.ana{width:56px;height:42px;background:#173749}
.ana img{display:block;width:100%;height:100%;object-fit:cover}
.ana.vid i{z-index:1}
/* Also hands-free: every description on one line */
.side-list li > span{min-width:0}
.side-list li > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Nurses: the display scales with the picture, so it always stays inside the lens */
.wear{container-type:inline-size}
.wear__view{left:28.5%;top:46%;width:35%;padding:1.3cqw 1.7cqw;border-radius:1.4cqw}
.wear__view .vm{font-size:1.75cqw;gap:1cqw}
.wear__view .vc{grid-template-columns:9.5cqw minmax(0,1fr);gap:1.4cqw;margin-top:1.1cqw}
.wear__view .vc svg{width:9.5cqw;height:4.6cqw}
.wear__view .vc span{font-size:1.6cqw}
.wear__view .vc strong{font-size:2.75cqw}
.wear__view .vok{margin-top:.9cqw;font-size:1.9cqw}
@media (max-width:560px){.wear__view{left:28.5%;width:35%}.wear__view .vm{font-size:1.75cqw}.wear__view .vc{grid-template-columns:9.5cqw minmax(0,1fr)}.wear__view .vc svg{width:9.5cqw;height:4.6cqw}.wear__view .vc strong{font-size:2.75cqw}}
.wear__view{left:26%;top:45%;width:40%;padding:1.5cqw 2cqw}
.wear__view .vm{font-size:2cqw}
.wear__view .vc{grid-template-columns:11cqw minmax(0,1fr)}
.wear__view .vc svg{width:11cqw;height:5.3cqw}
.wear__view .vc span{font-size:1.8cqw}
.wear__view .vc strong{font-size:3.2cqw}
.wear__view .vok{font-size:2.1cqw}
@media (max-width:560px){.wear__view{left:26%;width:40%}.wear__view .vm{font-size:2cqw}.wear__view .vc{grid-template-columns:11cqw minmax(0,1fr)}.wear__view .vc svg{width:11cqw;height:5.3cqw}.wear__view .vc strong{font-size:3.2cqw}}
/* Display in the lower right of the lens, small and see-through */
.wear__view{left:38%;top:58%;width:30%;padding:1.1cqw 1.5cqw;background:rgba(255,255,255,.5);box-shadow:none;border:1px solid rgba(255,255,255,.55)}
.wear__view .vm{font-size:1.6cqw}
.wear__view .vc{grid-template-columns:8.5cqw minmax(0,1fr);gap:1.2cqw;margin-top:.8cqw}
.wear__view .vc svg{width:8.5cqw;height:4.1cqw}
.wear__view .vc span{font-size:1.45cqw}
.wear__view .vc strong{font-size:2.55cqw}
.wear__view .vok{margin-top:.6cqw;font-size:1.7cqw}
@media (max-width:560px){.wear__view{left:38%;top:58%;width:30%}.wear__view .vm{font-size:1.6cqw}.wear__view .vc{grid-template-columns:8.5cqw minmax(0,1fr)}.wear__view .vc svg{width:8.5cqw;height:4.1cqw}.wear__view .vc strong{font-size:2.55cqw}}
.wear__view{left:35%;top:53%;width:31.5%}.wear__view .vc strong{white-space:nowrap}@media (max-width:560px){.wear__view{left:35%;top:53%;width:31.5%}}

/* v19: report photos slightly blurred */
.ana:not(.vid) img{filter:blur(.7px)}
/* Nurses: displays share one bottom line inside the measured lens shape, clear of the frame */
.wear__view{top:auto;bottom:31%;left:30%;width:29%;padding:1cqw 1.3cqw;border-radius:1.2cqw}
.wear__view .vm{font-size:1.5cqw}
.wear__view .vc{grid-template-columns:7cqw minmax(0,1fr);gap:1cqw;margin-top:.7cqw}
.wear__view .vc svg{width:7cqw;height:3.4cqw}
.wear__view .vc span{font-size:1.35cqw}
.wear__view .vc strong{font-size:2.3cqw}
.wear__view .vok{margin-top:.5cqw;font-size:1.6cqw}
@media (max-width:560px){.wear__view{top:auto;bottom:31%;left:30%;width:29%}.wear__view .vm{font-size:1.5cqw}.wear__view .vc{grid-template-columns:7cqw minmax(0,1fr)}.wear__view .vc svg{width:7cqw;height:3.4cqw}.wear__view .vc strong{font-size:2.3cqw}}
/* Hospitals: keep both faces in frame; show the glasses are recording */
.trio__photo.fill > img{object-position:80% 50%}
.anno--rec::before{display:none}
.anno--rec i{left:-6px;top:-6px;width:12px;height:12px;border:2px solid #fff;background:#e0443a;box-shadow:0 0 0 3px rgba(224,68,58,.35)}
.anno--rec b{left:12px;top:0;transform:translateY(-50%);padding:3px 9px 3px 8px;font-size:.72rem;background:rgba(12,30,42,.82)}
.anno--rec b::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#e0443a;margin-right:2px}
@media (max-width:700px){.anno--rec b{display:inline-flex;font-size:.62rem}.anno--rec i{left:-5px;top:-5px;width:10px;height:10px;background:#e0443a;display:block}.anno--rec i::after{content:none}}
/* Hospitals: photo uncropped at its own shape, centred beside the analysis */
.trio--even.stretch{align-items:center}
.trio--even .trio__photo.fill{aspect-ratio:1672/941;height:auto;min-height:0}
.trio__photo.fill > img{object-position:50% 50%}
.anno--rec.dot-only b{display:none}
.anno--rec.up-left b{left:auto;right:6px;top:-14px;transform:translateY(-100%)}
@media (min-width:901px){.trio--even.stretch{grid-template-columns:minmax(0,1.5fr) 40px minmax(0,1fr)}}

/* v20: report photos and video softer */
.ana img,.ana:not(.vid) img{filter:blur(1.4px);transform:scale(1.08)}
/* Nurses: larger display text, still inside the lens outline */
.wear__view{left:26%;width:34%;bottom:33%;padding:1.2cqw 1.5cqw}
.wear__view .vm{font-size:2cqw}
.wear__view .vc{grid-template-columns:8.5cqw minmax(0,1fr);gap:1.1cqw;margin-top:.8cqw}
.wear__view .vc svg{width:8.5cqw;height:4.1cqw}
.wear__view .vc span{font-size:1.75cqw}
.wear__view .vc strong{font-size:2.8cqw}
.wear__view .vok{margin-top:.6cqw;font-size:2cqw}
@media (max-width:560px){.wear__view{left:26%;width:34%;bottom:33%}.wear__view .vm{font-size:2cqw}.wear__view .vc{grid-template-columns:8.5cqw minmax(0,1fr)}.wear__view .vc svg{width:8.5cqw;height:4.1cqw}.wear__view .vc strong{font-size:2.8cqw}}
/* Hospitals: a soft recording light on each camera, and a frosted badge instead of a pointer */
.anno--led::before{display:none}
.anno--led i{left:-3px;top:-3px;width:6px;height:6px;border:0;border-radius:50%;background:#ff5a4d;box-shadow:0 0 6px 3px rgba(255,70,55,.55),0 0 14px 6px rgba(255,70,55,.25);animation:none}
.anno--led i::after{content:none}
@media (max-width:700px){.anno--led i{left:-2.5px;top:-2.5px;width:5px;height:5px;background:#ff5a4d;display:block;font-size:0}}
.rec-badge{position:absolute;left:12px;top:12px;z-index:2;display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 9px;border-radius:999px;font-size:.76rem;font-weight:500;color:#fff;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(8px) saturate(1.2);-webkit-backdrop-filter:blur(8px) saturate(1.2);text-shadow:0 1px 2px rgba(0,0,0,.35)}
.rec-badge i{width:7px;height:7px;border-radius:50%;background:#ff5a4d;box-shadow:0 0 6px 2px rgba(255,70,55,.6)}
/* Hospitals: platform bullets under the heading */
.platform__intro--stack{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.platform__intro--stack .checks{flex-direction:row;flex-wrap:wrap;gap:12px 28px}
.platform__intro--stack .checks li{flex:1 1 260px}
.anno--led i{left:-2.5px;top:-2.5px;width:5px;height:5px;box-shadow:0 0 3px 1.5px rgba(255,70,55,.65),0 0 8px 3px rgba(255,70,55,.2)}
.pick__label small{font-weight:400;color:#a9c3d1;font-size:.82rem;margin-left:4px}

/* Surgeon hero: photo and report card the same width and height */
.trio--equal{grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr);align-items:stretch}
.trio--equal .trio__media{display:flex;flex-direction:column}
.trio--equal .trio__photo{flex:1;aspect-ratio:auto;height:auto;min-height:320px}
.trio--equal .trio__photo > img{object-position:45% 35%}
@media (max-width:900px){.trio--equal{grid-template-columns:minmax(0,1fr)}.trio--equal .trio__photo{flex:none;aspect-ratio:3/2;min-height:0}}


/* Hero: no duplicate button, so let the opening lines use the width and pull the visuals up */
.hero__top{margin-bottom:26px}
.hero__top > .stack{max-width:none}
.hero .lead{max-width:62ch}
.hero{padding-top:clamp(36px,4.5vw,64px)}
.hero__top .seg--big{flex:none}
@media (min-width:901px){.hero__top{flex-wrap:nowrap}.hero__top > .stack{flex:1 1 auto;min-width:0}}

/* Hospitals hero: photo and analysis card the same height, side by side. The card is tighter and the photo
   fills the card's height, trimming only the empty left edge and the foot of the table, never the faces. */
@media (min-width:1001px){
  .trio--even.stretch{align-items:stretch}
  .trio--even.stretch .trio__photo.fill{aspect-ratio:auto;height:100%;min-height:0}
  .trio--even.stretch .trio__photo.fill > img{object-position:100% 0}
  .trio--even.stretch .trio__result{gap:8px;padding:16px 18px}
  .trio--even.stretch .util li{grid-template-columns:38px max-content minmax(30px,1fr) 38px;gap:8px}
  .trio--even.stretch .util svg{width:38px}
  .trio--even.stretch .util-sum .pill{white-space:nowrap;padding:4px 10px;font-size:.8rem}
  .trio--even.stretch .util,.trio--even.stretch .steps-tl{gap:5px}
}
@media (min-width:1001px) and (max-width:1180px){.trio--even.stretch{grid-template-columns:minmax(0,1.75fr) 28px minmax(0,1fr);gap:6px}}
@media (min-width:901px) and (max-width:1000px){.trio--even.stretch{grid-template-columns:minmax(0,1fr);gap:6px}.trio--even.stretch .trio__arrow svg{transform:rotate(90deg);width:24px;height:24px}}

/* Hospitals hero card: one case broken into surgical steps, each against the median */
.steps-tl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.steps-tl li{display:grid;grid-template-columns:86px minmax(30px,1fr) 46px;gap:8px;align-items:center;font-size:.8rem;color:var(--color-text-muted)}
.steps-tl b{font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
.steps-tl li.over b{color:#8a5a00}
.sbar{position:relative;height:9px;border-radius:4px;background:#e3eef4}
.sbar i{display:block;height:100%;border-radius:4px;background:var(--color-signal-deep)}
.steps-tl li.over .sbar i{background:#e0b45c}
.sbar em,.med-key i{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;border-radius:1px;background:var(--color-dark)}
.res-label .med-key{float:right;position:relative;padding-left:8px;font-weight:500;letter-spacing:.06em;color:var(--color-text-muted)}
.med-key i{left:1px;top:1px;bottom:1px}

/* Published build */
.form-error{grid-column:1 / -1;color:#ffb4a8;font-size:.9rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
button[disabled]{opacity:.6;cursor:wait}
.demo-link{display:inline-flex;gap:6px;margin-left:10px;font-weight:600;color:var(--color-signal-deep)}