/* Public landing page (landing.mjs). Uses the design tokens from style.css. Motion is CSS only and off under
   prefers-reduced-motion. Plain-language, light theme; glass is decoration only. */
.lp,body.lp{margin:0;min-height:100vh;padding:0}
.lp .demo-notice{position:relative;z-index:2}
.lp-top,.lp-main,.lp-foot{width:min(1160px,100% - 40px);margin-inline:auto}
.lp-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:max(16px,env(safe-area-inset-top)) 0 12px}
.lp-brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--ink);font-weight:700;font-size:17px;text-decoration:none}
.lp-brand:hover{color:var(--ink)}
.lp-mark{width:36px;height:36px;border-radius:11px;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:12px;letter-spacing:.04em}
.lp-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:var(--radius-pill);font-weight:650;font-size:15.5px;text-decoration:none;border:1px solid transparent;transition:background .2s,transform .15s}
.lp-btn:active{transform:scale(.98)}
.lp-primary{background:var(--accent);color:var(--on-accent);box-shadow:0 6px 16px rgba(15,110,96,.2)}
.lp-primary:hover{background:var(--accent-strong);color:var(--on-accent)}
.lp-ghost{background:var(--surface-solid);color:var(--accent-strong);border-color:var(--border-strong)}
.lp-ghost:hover{background:var(--accent-soft);color:var(--accent-strong)}
.lp-small{min-height:44px;padding:0 20px;font-size:14.5px}
.lp-eyebrow{margin:0 0 12px;font-size:13px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-strong)}
.lp .lp-main{padding:0;margin-inline:auto;max-width:none}
.lp h1{font-size:clamp(2.1rem,7.6vw,3.6rem);line-height:1.08;letter-spacing:-.03em;margin:0 0 16px}
.lp h1 em{font-style:normal;color:var(--accent)}
.lp h2{font-size:clamp(1.6rem,5vw,2.3rem);line-height:1.15;letter-spacing:-.02em;margin:0 0 20px}
.lp h3{margin:12px 0 6px;font-size:1.05rem}
.lp-hero{display:grid;grid-template-columns:1fr;gap:20px;align-items:center;padding:20px 0 40px}
.lp-sub{font-size:1.08rem;line-height:1.55;color:var(--muted);margin:0 0 24px;max-width:34em}
.lp-cta{display:flex;flex-wrap:wrap;gap:12px}
.lp-cta .lp-btn{flex:1 1 150px}
.lp-note{margin:14px 0 0;color:var(--muted);font-size:14px}
/* figure: .lp-fig is the cropped photo (x 16-86%, y 2-100% of the 1280x720 image); dots and lines are placed in % of it
   (the same numbers as VITALS in landing.mjs), so they stay on the same body part at every width */
.lp-stage{position:relative;width:100%;max-width:640px;margin-inline:auto}
.lp-fig{position:relative;width:100%;aspect-ratio:896/706;overflow:hidden}
.lp-fig::before{content:"";position:absolute;inset:6% 4% 10%;border-radius:50%;background:radial-gradient(closest-side,rgba(191,230,218,.55),rgba(217,232,250,.22) 62%,rgba(255,255,255,0));pointer-events:none}
.lp-photo{position:absolute;left:-22.857%;top:-2.04%;width:142.857%;aspect-ratio:16/9;display:block;transform-origin:50% 75%;
 -webkit-mask-image:radial-gradient(ellipse 33% 50% at 49% 47%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 33% 50% at 49% 47%,#000 55%,transparent 100%)}
.lp-photo img{display:block;width:100%;height:100%;mix-blend-mode:multiply}
.lp-lines{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#56656f;stroke-opacity:.6;stroke-width:1}
.lp-dot{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px}
.lp-dot .core,.lp-dot .ring{position:absolute;inset:0;border-radius:50%}
.lp-dot .core{background:#fff;border:3px solid var(--accent);box-sizing:border-box;box-shadow:0 1px 6px rgba(15,110,96,.35)}
.lp-dot .ring{border:1.5px solid var(--accent);opacity:0}
.d-temp{left:54.3%;top:28.6%}.d-breath{left:44.3%;top:60.2%}.d-heart{left:42.9%;top:83.7%}.d-spo2{left:61.4%;top:74.5%}
.lp-calls{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.lp-call{display:flex;flex-direction:column;gap:1px;padding:8px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--glass-edge);box-shadow:var(--shadow-1);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));line-height:1.25;white-space:nowrap;min-width:0}
html.lite .lp-call{background:var(--surface-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
.lp-call-label{font-size:12px;color:var(--muted);font-weight:600}
.lp-call-val{font-size:12px;color:var(--muted)}
.lp-call-val b{font-size:22px;color:var(--ink);letter-spacing:-.02em}
.lp-chip{position:absolute;right:2%;bottom:3%;padding:5px 12px;border-radius:var(--radius-pill);background:var(--warn-soft);color:var(--warn);font-size:12px;font-weight:700;border:1px solid #eedfca;white-space:nowrap}
.lp-lines{display:none}
/* features */
.lp-features{padding:24px 0 24px}
.lp-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:14px}
.lp-card{border-radius:var(--radius);padding:22px;border:1px solid var(--border);box-shadow:var(--shadow-1)}
.lp-card p{margin:0;color:var(--muted);line-height:1.55;font-size:15px}
.lp-ico{width:30px;height:30px;color:var(--accent-strong)}
.t-green{background:var(--tint-green)}.t-peach{background:var(--tint-peach)}.t-rose{background:var(--tint-rose)}.t-sky{background:var(--tint-sky)}.t-lilac{background:var(--tint-lilac)}.t-sand{background:var(--tint-sand)}
.lp-final{margin:32px 0;padding:36px 22px;border-radius:calc(var(--radius) + 6px);text-align:center;background:var(--tint-green);border:1px solid var(--border);box-shadow:var(--shadow-2)}
.lp-final p{color:var(--muted);margin:0 auto 22px;max-width:32em;font-size:1.05rem}
.lp-final .lp-cta{justify-content:center}.lp-final .lp-cta .lp-btn{flex:0 1 200px}
.lp-foot{padding:24px 0 max(32px,env(safe-area-inset-bottom));border-top:1px solid var(--border-strong);color:var(--muted);font-size:13.5px;line-height:1.6;margin-top:0}
.lp-foot p{margin:0 0 8px}
.lp-foot a{display:inline-block;min-height:24px}
@media (min-width:900px){
 .lp-top{padding-top:22px}
 .lp-hero{grid-template-columns:1fr 1.05fr;gap:40px;padding:48px 0 64px}
 .lp-grid{grid-template-columns:repeat(3,1fr);gap:18px}
 .lp-card{padding:26px}

 .lp-lines{display:block}
 .lp-calls{display:contents}
 .lp-call{position:absolute;min-width:128px;padding:8px 14px;translate:0 -50%}
 .lp-call-label,.lp-call-val{font-size:13px}.lp-call-val b{font-size:24px}
 .c-temp{right:0;top:28.6%}.c-spo2{right:0;top:74.5%}.c-breath{left:0;top:60.2%}.c-heart{left:0;top:83.7%}
 .lp-chip{right:0;bottom:1%}
 .lp-final{padding:56px 40px}
}
@media (min-width:560px) and (max-width:899px){.lp-grid{grid-template-columns:1fr 1fr}}
/* motion: all of it is decoration */
@media (prefers-reduced-motion:no-preference){
 .lp-photo{animation:lp-breathe 5.5s ease-in-out infinite}
 .lp-dot .ring{animation:lp-ring 2.6s ease-out infinite}
 .d-breath .ring{animation-delay:.6s}.d-heart .ring{animation-delay:1.2s;animation-duration:1.1s}.d-spo2 .ring{animation-delay:1.2s}.d-temp .ring{animation-delay:1.8s}
 .lp-hero .lp-copy{animation:lp-in .7s ease-out both}
 .lp-btn{transition:background .2s,transform .15s}
}
@media (prefers-reduced-motion:no-preference) and (min-width:900px){.lp-call{animation:lp-float 6s ease-in-out infinite}.c-heart{animation-delay:-1.5s}.c-breath{animation-delay:-3s}.c-spo2{animation-delay:-4.5s}}
@keyframes lp-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.012)}}
@keyframes lp-ring{0%{opacity:.7;transform:scale(1)}80%,100%{opacity:0;transform:scale(3.2)}}
@keyframes lp-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes lp-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
html.lite .lp *{animation:none!important}
@media (prefers-reduced-motion:reduce){.lp *,.lp *::before,.lp *::after{animation:none!important;transition:none!important}}