/* ATMO demo stand: station readings, scenario buttons and two live phones (patient and relative). */
:root { --blue: #2F7BF5; --ok: #1E9E62; --warn: #D98A1A; --bad: #D8463B; --font: 'Inter', system-ui, sans-serif; }
/* ===== ATMO brand layer: same tokens as the site and the app (dark by default, glass, blue blobs) ===== */
[data-theme=dark] { --base: #07090C; --ink: #EDEDED; --mute: #8A8A8A; --faint: #6B6B6B; --grid: rgba(255,255,255,.12); --card: rgba(255,255,255,.06); --card-bd: rgba(255,255,255,.10);
  --g-bg: rgba(255,255,255,.06); --g-bd: rgba(255,255,255,.10); --g-sh: 0 28px 56px -16px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.10);
  --b1: rgba(47,123,245,.55); --b2: rgba(70,175,200,.32); --b3: rgba(47,123,245,.30); --logo: url(/pitch/img/atmo-logo-white.png); --phone: #000; --paper: rgba(255,255,255,.06);
  --s-base: #07090C; --s-ink: #EDEDED; --s-mute: #8A8A8A; --s-faint: #6B6B6B; --s-glass: rgba(255,255,255,.07); --s-bd: rgba(255,255,255,.10); --s-chip: rgba(255,255,255,.08); --s-push: rgba(28,32,40,.92); --s-logo: url(/pitch/img/atmo-logo-white.png);
  --s-b1: rgba(47,123,245,.55); --s-b2: rgba(70,175,200,.30); }
[data-theme=light] { --base: #F3F1EB; --ink: #1B1F24; --mute: #62666C; --faint: #8C8F94; --grid: rgba(27,31,36,.12); --card: rgba(255,255,255,.55); --card-bd: rgba(255,255,255,.75);
  --g-bg: rgba(255,255,255,.55); --g-bd: rgba(255,255,255,.75); --g-sh: 0 28px 56px -18px rgba(27,31,36,.22), inset 0 1px 0 rgba(255,255,255,.9);
  --b1: rgba(47,123,245,.28); --b2: rgba(110,190,230,.38); --b3: rgba(47,123,245,.18); --logo: url(/pitch/img/atmo-logo-blue.png); --phone: #15181D; --paper: rgba(255,255,255,.55);
  --s-base: #F3F1EB; --s-ink: #1B1F24; --s-mute: #62666C; --s-faint: #8C8F94; --s-glass: rgba(255,255,255,.6); --s-bd: rgba(255,255,255,.85); --s-chip: rgba(255,255,255,.6); --s-push: rgba(255,255,255,.95); --s-logo: url(/pitch/img/atmo-logo-blue.png);
  --s-b1: rgba(47,123,245,.28); --s-b2: rgba(110,190,230,.38); }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--base); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
.bg { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 35% at 85% 10%, var(--b1), transparent 70%), radial-gradient(35% 30% at 5% 45%, var(--b2), transparent 70%), radial-gradient(50% 35% at 60% 100%, var(--b3), transparent 70%); }
.glass { background: var(--g-bg); border: 1px solid var(--g-bd); box-shadow: var(--g-sh); backdrop-filter: blur(28px) saturate(150%); -webkit-backdrop-filter: blur(28px) saturate(150%); border-radius: 28px; }

.top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 32px; max-width: 1640px; margin: 0 auto; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 16px; }
.logo { width: 100px; height: 28px; background: var(--logo) left center/contain no-repeat; }
.ttl { font-size: 15px; color: var(--mute); }
.topr { display: flex; align-items: center; gap: 12px; }
.live { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--mute); }
.live i { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(30,158,98,.18); }
.live.off i { background: var(--warn); box-shadow: 0 0 0 4px rgba(217,138,26,.2); } .live.sim i { background: var(--warn); }
.ghost { width: 40px; height: 40px; border-radius: 50%; background: var(--g-bg); border: 1px solid var(--g-bd); }

main { max-width: 1640px; margin: 0 auto; padding: 0 32px 40px; display: flex; flex-direction: column; gap: 20px; }
h2 { font: 300 26px/1.15 var(--font); letter-spacing: -.02em; }
h3 { font: 500 14px/1.2 var(--font); color: var(--mute); margin: 22px 0 10px; letter-spacing: .02em; }
.scen { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.scen-h { display: flex; gap: 20px; align-items: baseline; flex-wrap: wrap; }
.scen-h p { font-size: 14px; color: var(--mute); }
.scen-b { display: flex; flex-wrap: wrap; gap: 10px; }
.scen-b button { min-height: 46px; padding: 0 18px; border-radius: 999px; background: var(--g-bg); border: 1px solid var(--g-bd); font-size: 15px; transition: background .2s, border-color .2s; }
.scen-b button:hover { border-color: var(--blue); }
.scen-b button.act { background: rgba(47,123,245,.22); border-color: var(--blue); }
.scen-b .sosb { background: var(--bad); border-color: var(--bad); color: #fff; font-weight: 500; }
.scen-b .sosb.on { background: transparent; color: #FF8A80; }

.grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: start; }
.station { padding: 22px; }
.st-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.st-h p { font-size: 13px; color: var(--mute); margin-top: 4px; }
.sensors { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.ls { background: var(--g-bg); border: 1px solid var(--g-bd); border-radius: 20px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; min-height: 150px; }
.ls .l { font-size: 13px; color: var(--mute); }
.ls .v { font: 200 40px/1.05 var(--font); letter-spacing: -.03em; margin-top: 4px; }
.ls .v small { font-size: 15px; color: var(--mute); letter-spacing: 0; font-weight: 400; }
.ls .w { font-size: 15px; font-weight: 500; }
.ls svg { width: 100%; height: 30px; margin-top: auto; }
.ls svg polyline { stroke: #5C9BFF; }
.ls .src { font-size: 11px; color: var(--faint); }
.ls .src b { color: #F0B45A; font-weight: 500; }
.ls.warm { border-color: var(--warn); } .ls.warm .w { color: var(--warn); }
.ls.hot { border-color: var(--bad); box-shadow: 0 0 0 2px rgba(216,70,59,.25); } .ls.hot .w { color: #FF8A80; }
[data-theme=light] .ls.hot .w { color: var(--bad); }
.profiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.lp { background: var(--g-bg); border: 1px solid var(--g-bd); border-radius: 20px; padding: 14px 16px; border-top: 3px solid var(--g-bd); }
.lp.green { border-top-color: var(--ok); } .lp.yellow { border-top-color: var(--warn); } .lp.red { border-top-color: var(--bad); }
.lp .n { font-size: 13px; color: var(--mute); } .lp .n b { display: block; font-size: 16px; color: var(--ink); font-weight: 500; }
.lp .i { font: 200 42px/1.1 var(--font); letter-spacing: -.03em; margin-top: 6px; } .lp .i small { font-size: 13px; color: var(--mute); font-weight: 400; letter-spacing: 0; }
.lp .s { font-size: 14px; display: flex; align-items: center; gap: 6px; } .lp .s i { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); }
.lp.green .s i { background: var(--ok); } .lp.yellow .s i { background: var(--warn); } .lp.red .s i { background: var(--bad); }
.lp .f { font-size: 12px; color: var(--faint); margin-top: 2px; }
.note { font-size: 12px; color: var(--faint); margin-top: 16px; line-height: 1.5; }

.phonesbox { position: sticky; top: 16px; }
.phones { display: grid; grid-template-columns: repeat(3, 360px); justify-content: center; gap: 80px; margin-top: 18px; position: relative; }
.phones.two { grid-template-columns: repeat(2, 360px); }
.ph-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; transition: opacity .4s, transform .4s; }
.ph-cap { font-size: 20px; color: var(--mute); text-align: center; } .ph-cap b { color: var(--ink); font-weight: 500; display: block; font-size: 24px; }
.phones.focus .ph-wrap { opacity: .28; transform: scale(.97); } .phones.focus .ph-wrap.lit { opacity: 1; transform: scale(1.02); }
.phone { width: 360px; height: 680px; background: var(--phone); border-radius: 58px; padding: 14px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.55); position: relative; }
.screen { width: 100%; height: 100%; border-radius: 46px; background: #F4F2EC; color: #1B1F24; overflow: hidden; position: relative; font-size: 15px; display: flex; flex-direction: column; }
.notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 110px; height: 30px; background: var(--phone); border-radius: 20px; z-index: 4; }
.sbar { height: 50px; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 30px 6px; font-size: 14px; font-weight: 600; flex: none; }
.app { flex: 1; padding: 6px 18px 18px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.apphead { display: flex; justify-content: space-between; align-items: center; }
.apphead .lg { width: 66px; height: 20px; background: url(/pitch/img/atmo-logo-blue.png) left center/contain no-repeat; }
.apphead .who { font-size: 13px; color: #62666C; }
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid rgba(27,31,36,.08); }
.tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.tag.off i { background: var(--warn); } .tag.sim { background: #FFF3D6; border-color: #F0C878; color: #8A4B00; } .tag.sim i { background: #D98A1A; }
.card { background: #fff; border-radius: 22px; padding: 14px 16px; border: 1px solid rgba(27,31,36,.06); }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tile { background: #fff; border-radius: 18px; padding: 10px 12px; border: 1px solid rgba(27,31,36,.06); min-height: 92px; display: flex; flex-direction: column; }
.tile .l { font-size: 12px; color: #62666C; }
.tile .v { font: 300 28px/1.1 var(--font); letter-spacing: -.03em; margin-top: 4px; }
.tile .v small { font-size: 13px; color: #62666C; letter-spacing: 0; }
.tile .s { font-size: 11px; color: #8C8F94; margin-top: auto; }
.tile svg { width: 100%; height: 22px; margin-top: 4px; }
.tile.hot { border-color: var(--bad); box-shadow: 0 0 0 2px rgba(216,70,59,.18); } .tile.warm { border-color: var(--warn); }
.statusbig { display: flex; align-items: center; gap: 14px; }
.dot { border-radius: 50%; }
.statusbig .dot { width: 46px; height: 46px; border-radius: 50%; flex: none; background: #B4B0A6; box-shadow: 0 0 0 8px rgba(180,176,166,.2); }
.dot.green { background: var(--ok); box-shadow: 0 0 0 8px rgba(30,158,98,.16); } .dot.yellow { background: var(--warn); box-shadow: 0 0 0 8px rgba(217,138,26,.18); } .dot.red { background: var(--bad); box-shadow: 0 0 0 8px rgba(216,70,59,.2); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 14px rgba(216,70,59,.08); } }
.statusbig b { font: 400 24px/1.15 var(--font); letter-spacing: -.02em; display: block; }
.statusbig small { font-size: 12px; color: #62666C; }
.adv { font-size: 15px; line-height: 1.4; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 12px; padding: 5px 10px; border-radius: 999px; background: #F0EEE7; }
.chip.red { background: #FBE3E0; color: #9E2A20; } .chip.yellow { background: #FCEFD8; color: #8A4B00; }
.sos { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sos button { height: 58px; border-radius: 18px; font-size: 16px; font-weight: 600; }
.sos .bad { background: var(--bad); color: #fff; } .sos .alt { background: #fff; border: 1.5px solid var(--bad); color: var(--bad); }
.push { position: absolute; top: 54px; left: 12px; right: 12px; background: rgba(255,255,255,.96); backdrop-filter: blur(14px); border-radius: 20px; padding: 12px 14px; box-shadow: 0 16px 34px -12px rgba(0,0,0,.35); z-index: 5; font-size: 13px; line-height: 1.35; transform: translateY(-260px); visibility: hidden; transition: transform .45s cubic-bezier(.2,.9,.3,1.2); }
.push.show { transform: none; visibility: visible; }
.push .h { display: flex; justify-content: space-between; font-size: 11px; color: #62666C; margin-bottom: 4px; }
.push b { display: block; font-size: 14px; margin-bottom: 2px; }
.mom { display: flex; align-items: center; gap: 12px; }
.mom .av { width: 48px; height: 48px; border-radius: 50%; background: #E3DED2; display: grid; place-items: center; font-weight: 600; color: #62666C; }
.mom b { font-size: 17px; font-weight: 600; display: block; } .mom small { font-size: 12px; color: #62666C; }
.alertbox { border-radius: 22px; padding: 14px 16px; background: #fff; border: 2px solid transparent; }
.alertbox.l1 { border-color: var(--warn); } .alertbox.l2, .alertbox.alarm { border-color: var(--bad); background: #FFF6F5; }
.alertbox b { font-size: 17px; display: block; margin-bottom: 4px; } .alertbox p { font-size: 14px; line-height: 1.4; }
.chain { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.chain button { text-align: left; padding: 10px 12px; border-radius: 14px; background: #F0EEE7; font-size: 14px; display: flex; gap: 8px; align-items: center; }
.chain button.go { background: var(--bad); color: #fff; font-weight: 600; } .chain button.done { background: #E3F4EA; color: #146B43; }
.map { height: 110px; border-radius: 16px; background: linear-gradient(135deg, #E7EEF7, #EEF3E8); position: relative; overflow: hidden; }
.map::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 38px, rgba(27,31,36,.06) 38px 40px), repeating-linear-gradient(0deg, transparent 0 30px, rgba(27,31,36,.06) 30px 32px); }
.map i { position: absolute; left: 52%; top: 44%; width: 18px; height: 18px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 8px rgba(216,70,59,.2); }
.map span { position: absolute; left: 10px; bottom: 8px; font-size: 11px; background: rgba(255,255,255,.85); padding: 3px 8px; border-radius: 8px; }
.hist { font-size: 12px; color: #62666C; display: flex; flex-direction: column; gap: 4px; }
.hist div { display: flex; gap: 8px; } .hist time { color: #8C8F94; font-variant-numeric: tabular-nums; }
/* phone screens look like the real app */
.screen { background: var(--s-base); color: var(--s-ink); isolation: isolate; }
.screen::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 40% at 90% 8%, var(--s-b1), transparent 70%), radial-gradient(55% 40% at 0% 60%, var(--s-b2), transparent 70%); }
.apphead .lg { background-image: var(--s-logo); }
.apphead .who, .tile .l, .statusbig small, .mom small, .hist, .push .h { color: var(--s-mute); }
.tile .s, .hist time { color: var(--s-faint); }
.card, .tile, .alertbox, .tag, .chain button, .sos .alt {
  background: var(--s-glass); border: 1px solid var(--s-bd); color: var(--s-ink);
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); }
.tile.hot { border-color: var(--bad); box-shadow: 0 0 0 2px rgba(216,70,59,.25); } .tile.warm { border-color: var(--warn); }
.tile .v small, .tile .l { color: var(--s-mute); }
.tile svg polyline { stroke: #5C9BFF; }
.alertbox.l1 { border: 2px solid var(--warn); } .alertbox.l2, .alertbox.alarm { border: 2px solid var(--bad); background: rgba(216,70,59,.12); }
.chip { background: var(--s-chip); color: var(--s-ink); }
.chip.red { background: rgba(216,70,59,.22); color: #FF9C93; } .chip.yellow { background: rgba(217,138,26,.22); color: #F0B45A; }
[data-theme=light] .chip.red { color: #9E2A20; } [data-theme=light] .chip.yellow { color: #8A4B00; }
.tag.sim { background: rgba(217,138,26,.18); border-color: rgba(240,180,90,.45); color: #F0B45A; }
.sos .alt { color: #FF8A80; border: 1.5px solid var(--bad); }
.chain button.go { background: var(--bad); border-color: var(--bad); color: #fff; }
.chain button.done { background: rgba(30,158,98,.18); border-color: rgba(30,158,98,.4); color: #6FD3A2; }
[data-theme=light] .chain button.done { color: #146B43; }
.push { background: var(--s-push); color: var(--s-ink); border: 1px solid var(--s-bd); }
.mom .av { background: var(--s-chip); color: var(--s-mute); }
.map { background: linear-gradient(135deg, rgba(47,123,245,.18), rgba(70,175,200,.12)); }
.map::before { background: repeating-linear-gradient(90deg, transparent 0 38px, rgba(255,255,255,.07) 38px 40px), repeating-linear-gradient(0deg, transparent 0 30px, rgba(255,255,255,.07) 30px 32px); }
.map span { background: var(--s-push); color: var(--s-ink); }
.group .risk b, .num-card .t { color: var(--ink); }
#notes { background: rgba(10,12,16,.92); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(20px); }

/* demo sizing */
.phones { margin-top: 0; gap: 28px; grid-template-columns: repeat(2, 340px) !important; }
.phone { width: 340px; height: 690px; }
.ph-cap { font-size: 15px; } .ph-cap b { font-size: 18px; }
.sos button, .chain button { cursor: pointer; }
.tag { white-space: nowrap; }
@media (max-width: 1320px) { .grid { grid-template-columns: 1fr; } .phonesbox { position: static; } .phones { justify-content: center; } }
@media (max-width: 760px) {
  .top, main { padding-left: 16px; padding-right: 16px; }
  .phones { grid-template-columns: 1fr !important; justify-items: center; }
  .phone { width: min(340px, calc(100vw - 32px)); }
  .ls .v { font-size: 32px; }
}

/* visible edges in both themes */
.phone { box-shadow: 0 0 0 1.5px rgba(255,255,255,.22), 0 0 0 7px rgba(255,255,255,.04), 0 40px 80px -30px rgba(0,0,0,.7); }
[data-theme=light] .phone { box-shadow: 0 0 0 1px rgba(27,31,36,.25), 0 30px 60px -24px rgba(27,31,36,.45); }
[data-theme=light] .glass { border-color: rgba(27,31,36,.08); }
[data-theme=light] .ls, [data-theme=light] .lp { background: rgba(255,255,255,.75); border-color: rgba(27,31,36,.12); box-shadow: 0 10px 24px -18px rgba(27,31,36,.35); }
[data-theme=light] .ls.warm { border-color: var(--warn); } [data-theme=light] .ls.hot { border-color: var(--bad); }
[data-theme=light] .scen-b button { background: rgba(255,255,255,.8); border-color: rgba(27,31,36,.14); }
[data-theme=light] .scen-b button.act { background: rgba(47,123,245,.14); border-color: var(--blue); }
[data-theme=light] .scen-b .sosb { background: var(--bad); border-color: var(--bad); color: #fff; }
[data-theme=light] .scen-b .sosb.on { background: transparent; color: var(--bad); }
[data-theme=light] .ghost { background: rgba(255,255,255,.8); border-color: rgba(27,31,36,.14); }
[data-theme=light] .card, [data-theme=light] .tile, [data-theme=light] .alertbox, [data-theme=light] .tag, [data-theme=light] .chain button, [data-theme=light] .sos .alt { border-color: rgba(27,31,36,.10); }
[data-theme=light] .ls svg polyline { stroke: #2F7BF5; }
[data-theme=light] .ls .src b { color: #8A4B00; }