/* hospita.si - the website that sells Hospita (28-10, built from the approved preview v7, "ok apply this version").
   Hospita's own design system (ds.css, Bento skin) underneath; this file adds the website's layout, its motion and the
   care look: white and mint, one calm teal (#0d9488), photographs of care, Figtree. Everything is scoped to .site, so a
   ds-* part inside the website takes the website's tokens and the rest of the product keeps its own look.
   Light or dark follows the visitor's device (js/site.js); there is no skin switch on the public site.
   Photos: Unsplash licence, images/site/SOURCES.md. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0d1411; --card:#141d18; --soft:#1b241f; --ink:#e9f1ec; --muted:#8ba398; --faint:#5f746a;
    --line:#2b3b33; --trk:#222d27;
    --acc:#13b47b; --acc-d:#3fd29a; --acc-soft:#123026; --on-acc:#ffffff;
    --hero:#070d0a; --hero-ink:#ffffff; --hero-num:#f5b24a; --hero-sub:rgba(255,255,255,.62);
    --amber:#f5b24a; --amber-soft:#2e2515;
    --ok:#3fd29a; --ok-soft:#123026; --warn:#f5b24a; --warn-soft:#2e2515;
    --bad:#f0756a; --bad-soft:#3a1f1b; --info:#54a0e0; --info-soft:#13263a;
    --violet:#9486f4; --violet-soft:#221f3d; --orange:#f08a4a;
    --c1:#13b47b; --c2:#54a0e0; --c3:#9486f4; --c4:#f5b24a; --c5:#f0756a; --c6:#2cc2c2;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 34px -22px rgba(0,0,0,.8);
    --shadow-h:0 6px 18px rgba(0,0,0,.55),0 26px 46px -22px rgba(0,0,0,.95);
    --pop:0 16px 44px rgba(0,0,0,.6);
    color-scheme:dark;
  }
  :root:not([data-theme="light"]) .ds-logo{background:#1f2c25}
  :root:not([data-theme="light"]) .ds-btn:not(.sec):not(.ghost):not(.danger):not(.acc){background:var(--acc);color:#fff}
}
body{background:var(--soft);color:var(--ink);min-height:0}


/* the page around the website takes its ground, so nothing of the app's ground shows at the edges */
html{background:#ffffff}
:root[data-theme="dark"]{background:#0b1517}
body{margin:0;min-height:100vh;background:transparent}

/* ---------------------------------------------------------------- the website */
.site{container-type:inline-size;position:relative;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.6}
.site *{box-sizing:border-box}
.w{max-width:1200px;margin:0 auto;padding-inline:clamp(16px,4cqi,44px)}
.sx-in{max-width:1180px;margin:0 auto;padding-inline:28px}
.mi{font-family:'Material Symbols Outlined';font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24}
.site .material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24}

/* header */
.m-head{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.m-head .w{display:flex;align-items:center;gap:14px;height:68px;position:relative}
.m-brand{display:flex;align-items:center;gap:10px;cursor:pointer;flex:none}
.m-brand b{font-family:var(--f-disp);font-weight:800;font-size:19px;letter-spacing:-.02em}
.m-nav{display:flex;gap:2px;margin-left:16px}
.m-nav a{padding:8px 12px;border-radius:999px;font-weight:600;font-size:14px;color:var(--muted);cursor:pointer;white-space:nowrap}
.m-nav a:hover,.m-nav a.on{color:var(--ink);background:var(--soft)}
.m-hr{margin-left:auto;display:flex;align-items:center;gap:8px}
.m-burger{display:none}
.m-menu{position:absolute;left:12px;right:12px;top:calc(100% + 6px);z-index:30;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--pop);padding:8px;display:grid;gap:2px}
.m-menu a{padding:12px;border-radius:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:10px}
.m-menu a:hover{background:var(--soft)}
.sx-lang{position:relative;display:flex;align-items:center}
.sx-lang .material-symbols-outlined{position:absolute;left:10px;font-size:18px;color:var(--muted);pointer-events:none}
.sx-lang select{appearance:none;-webkit-appearance:none;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 12px 8px 34px;font-weight:600;font-size:13px;color:var(--ink);cursor:pointer;max-width:150px}
.m-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 20px;border-radius:999px;border:0;font:600 14.5px/1 var(--f-ui);cursor:pointer;white-space:nowrap;background:var(--hero);color:#fff;transition:transform .15s ease,background .15s ease}
.m-btn:hover{transform:translateY(-1px)}
.m-btn.g{background:var(--acc);color:#fff}
.m-btn.l{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.m-btn.sm{height:40px;padding:0 16px;font-size:14px}
.m-btn .material-symbols-outlined{font-size:19px}

/* type */
.m-h1{font-family:var(--f-disp);font-weight:700;font-size:clamp(40px,5.4cqi,70px);line-height:1.02;letter-spacing:-.045em;margin:0;text-wrap:balance}
.m-h2{font-family:var(--f-disp);font-weight:700;font-size:clamp(30px,4.2cqi,52px);line-height:1.05;letter-spacing:-.035em;margin:0;text-wrap:balance}
.m-h3{font-family:var(--f-disp);font-weight:600;font-size:21px;line-height:1.2;letter-spacing:-.02em;margin:0}
.m-lede{font-size:clamp(16px,1.5cqi,19px);line-height:1.6;color:var(--muted);max-width:60ch;margin:16px 0 0;text-wrap:pretty}
.m-kick{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;color:var(--acc-d);margin-bottom:16px}
.m-kick .dot{width:8px;height:8px;border-radius:50%;background:var(--acc)}
.m-kick.ai{color:var(--violet)}.m-kick.ai .dot{background:var(--violet)}
.m-sec{padding-block:clamp(64px,9cqi,120px)}
.m-sec+.m-sec{padding-top:0}
.m-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}

/* hero */
.m-hero{position:relative;overflow:hidden;padding-block:clamp(40px,6cqi,84px) clamp(56px,8cqi,104px);
  background:radial-gradient(50% 60% at 85% 25%,color-mix(in srgb,var(--acc) 16%,transparent),transparent 70%),
             radial-gradient(40% 55% at 70% 95%,color-mix(in srgb,var(--violet) 14%,transparent),transparent 70%)}
.m-hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:radial-gradient(70% 70% at 70% 40%,#000,transparent 75%);mask-image:radial-gradient(70% 70% at 70% 40%,#000,transparent 75%)}
.m-hero .w{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4cqi,64px);align-items:center}
.m-for{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.m-for span{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);font-size:13px;font-weight:600}
.m-for .material-symbols-outlined{font-size:17px;color:var(--acc-d)}

/* the collage of real screens, drawn with sample data */
.col{position:relative;min-height:690px}
.ui{background:var(--card);border-radius:20px;box-shadow:0 1px 2px rgba(0,0,0,.05),0 24px 60px -24px rgba(10,30,20,.35);border:1px solid var(--line);overflow:hidden}
.ui-h{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.ui-h b{font-size:13.5px}.ui-h small{color:var(--muted);font-size:12px;display:block;font-weight:500}
.ui-av{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;color:#fff;font:700 12px/1 var(--f-disp);flex:none}
.ui-pill{margin-left:auto;font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:999px;background:var(--acc-soft);color:var(--acc-d)}
.rec{position:absolute;left:0;top:0;width:min(440px,82%)}
.rec .row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 14px;border-top:1px solid var(--line)}
.rec .row:first-of-type{border-top:0}
.rec .src{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;font:700 10.5px/1 var(--f-disp)}
.rec .row b{display:block;font-size:13px}.rec .row small{display:block;color:var(--muted);font-size:12px;line-height:1.35}
.rec .tag{font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--soft);color:var(--muted)}
.rec .tag.hi{background:var(--amber-soft);color:var(--warn)}
.ai-card{position:absolute;right:0;top:318px;width:min(340px,66%);border-color:color-mix(in srgb,var(--violet) 40%,var(--line))}
.ai-card .ui-h{background:var(--violet-soft)}
.ai-card .ui-h .material-symbols-outlined{color:var(--violet)}
.ai-card .bd{padding:12px 14px;display:grid;gap:8px;font-size:13px}
.ai-card .bd p{margin:0;line-height:1.5}
.ai-card .bd small{color:var(--muted);font-size:11.5px}
.q-card{position:absolute;left:4%;top:496px;width:min(380px,76%)}
.q-card .qr{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 14px;border-top:1px solid var(--line);font-size:12.5px}
.q-card .qr:first-of-type{border-top:0}
.q-card .t{font:700 12.5px/1 var(--f-num);color:var(--muted)}
.st{font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;white-space:nowrap}
.st.na{background:var(--soft);color:var(--muted)}.st.ci{background:var(--violet-soft);color:var(--violet)}.st.wd{background:var(--info-soft);color:var(--info)}.st.sn{background:var(--ok-soft);color:var(--ok)}

/* not five tools */
.m-five{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(24px,4cqi,64px);align-items:center;padding:clamp(28px,4cqi,44px);border-radius:28px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.m-five ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.m-five li{display:grid;gap:8px;justify-items:start;padding:14px;border-radius:18px;background:var(--soft);font-size:13px;font-weight:600;line-height:1.35}
.m-five li .material-symbols-outlined{font-size:24px;color:var(--acc-d)}
.m-five li small{display:flex;align-items:center;gap:4px;color:var(--acc-d);font-size:12px;font-weight:600}.m-five li small .material-symbols-outlined{font-size:16px}

/* the platform, in tiles */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-top:44px}
.tile{position:relative;overflow:hidden;border-radius:26px;padding:clamp(20px,2.4cqi,30px);background:var(--card);box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;gap:10px;min-height:220px;cursor:pointer}
.tile:hover{box-shadow:inset 0 0 0 1px var(--acc)}
.tile p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.55;max-width:46ch}
.tile .ti{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--acc-soft);color:var(--acc-d)}
.tile .ti .material-symbols-outlined{font-size:24px}
.tile.s3{grid-column:span 3}.tile.s2{grid-column:span 2}.tile.s4{grid-column:span 4}
.tile.dark{background:var(--hero);color:var(--hero-ink);box-shadow:none}
.tile.dark p{color:var(--hero-sub)}.tile.dark .ti{background:rgba(255,255,255,.08);color:#7ee0b4}
.tile.ai{background:var(--violet-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--violet) 25%,transparent)}
.tile.ai .ti{background:var(--card);color:var(--violet)}
.tile .more{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px}
.tile .more .material-symbols-outlined{font-size:18px}
.mini{margin-top:6px;display:grid;gap:6px}
.mini .r{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;background:var(--soft);font-size:12.5px}
.tile.dark .mini .r{background:rgba(255,255,255,.06)}
.mini .r b{font-weight:600}.mini .r .st{margin-left:auto}

/* a section with words beside a screen */
.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5cqi,80px);align-items:center}
.split.rev>:first-child{order:2}
.ticks{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px}
.ticks li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start}
.ticks li .material-symbols-outlined{font-size:22px;color:var(--acc-d);margin-top:1px}
.ticks b{display:block;font-weight:600}.ticks span.x{display:block;color:var(--muted);font-size:14.5px;line-height:1.5}
.ticks.ai li .material-symbols-outlined{color:var(--violet)}

/* the OPD queue, as the front desk sees it (sample) */
.opd .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:14px}
.opd .stat{border-radius:14px;background:var(--soft);padding:10px 12px}
.opd .stat b{display:block;font:700 24px/1 var(--f-disp);letter-spacing:-.03em;margin-top:6px}
.opd .stat small{color:var(--muted);font-size:11.5px;font-weight:600}
.opd .stat.k{background:var(--hero);color:var(--hero-ink)}.opd .stat.k small{color:var(--hero-sub)}.opd .stat.k b{color:var(--hero-num)}
.opd table{width:100%;border-collapse:collapse;font-size:12.5px}
.opd th{text-align:left;font-size:11px;color:var(--muted);font-weight:600;padding:8px 14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.opd td{padding:9px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.opd td b{font-weight:600;display:block}.opd td small{display:block;color:var(--muted);font-size:11.5px}.opd td:last-child{text-align:right}
.opd .nx{font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:999px;background:var(--acc);color:#fff}

/* AI, step by step: a real sequence */
.m-ai{background:linear-gradient(180deg,transparent,var(--violet-soft) 18%,var(--violet-soft) 82%,transparent)}
.jr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:44px;counter-reset:j;position:relative}
.jr .j{counter-increment:j;background:var(--card);border-radius:24px;padding:22px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--violet) 18%,var(--line));display:flex;flex-direction:column;gap:10px}
.jr .j::before{content:counter(j);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--violet);color:#fff;font:700 13px/1 var(--f-disp)}
.jr .j p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}
.jr .j ul{margin:0;padding-left:18px;color:var(--ink);font-size:13.5px;line-height:1.5;display:grid;gap:4px}
.cds{margin-top:22px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.cds .ui .bd{padding:14px;display:grid;gap:8px;font-size:13px}
.cds .ln{display:flex;justify-content:space-between;gap:10px;padding:7px 10px;border-radius:10px;background:var(--soft)}
.cds .ln b{font-weight:600}
.lv{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px}
.lv.h{background:var(--amber-soft);color:var(--warn)}.lv.m{background:var(--info-soft);color:var(--info)}.lv.l{background:var(--soft);color:var(--muted)}
.flag{display:flex;gap:8px;align-items:flex-start;padding:9px 10px;border-radius:10px;background:var(--bad-soft);color:var(--ink);font-size:12.5px}
.flag .material-symbols-outlined{font-size:18px;color:var(--bad)}
.decide{font-size:12px;color:var(--muted);display:flex;gap:6px;align-items:center}
.decide .material-symbols-outlined{font-size:16px}

/* the patient's record at the hospital (sample) */
.prec .tabs{display:flex;gap:4px;padding:10px 14px;border-bottom:1px solid var(--line);overflow-x:auto}
.prec .tabs span{padding:6px 11px;border-radius:999px;font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
.prec .tabs span.on{background:var(--soft);color:var(--ink)}
.prec .tl{padding:6px 14px 14px;display:grid}
.prec .ev{display:grid;grid-template-columns:70px 14px minmax(0,1fr);gap:10px;padding-top:12px}
.prec .ev .d{font:600 11.5px/1.3 var(--f-num);color:var(--muted);text-align:right;padding-top:2px}
.prec .ev i{width:10px;height:10px;border-radius:50%;background:var(--acc);margin-top:5px;box-shadow:0 0 0 4px var(--acc-soft)}
.prec .ev b{font-size:13px;font-weight:600;display:block}.prec .ev small{display:block;color:var(--muted);font-size:12px;line-height:1.4}
.prec .ev .chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.prec .ev .chips span{font-size:11px;font-weight:600;padding:3px 8px;border-radius:999px;background:var(--soft)}

/* one record: the signature section */
.m-one{background:var(--hero);color:var(--hero-ink);border-radius:clamp(0px,3cqi,40px);margin-inline:clamp(0px,1.4cqi,16px);overflow:hidden;position:relative}
.m-one .m-lede{color:var(--hero-sub)}
.m-one .m-kick{color:#7ee0b4}.m-one .m-kick .dot{background:#7ee0b4}
.m-one .ticks li .material-symbols-outlined{color:#7ee0b4}.m-one .ticks span.x{color:var(--hero-sub)}
.net{position:relative;aspect-ratio:1;max-width:560px;width:100%;justify-self:center;margin-bottom:40px}
.net svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.net .node{position:absolute;transform:translate(-50%,-29px);display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;width:130px}
.net .node .b{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:#16251f;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.net .node .b .material-symbols-outlined{font-size:28px;color:#fff}
.net .node b{font-size:12.5px;font-weight:600;line-height:1.25}.net .node small{font-size:11px;color:var(--hero-sub);line-height:1.3}
.net .node b,.net .node small{background:var(--hero);padding:0 5px;border-radius:5px;position:relative}
.net .core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:38%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;text-align:center;
  background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--acc) 55%,#062016),#062016);box-shadow:0 0 0 10px rgba(19,180,123,.08),0 0 0 22px rgba(19,180,123,.05),0 0 80px rgba(19,180,123,.35)}
.net .core b{font:700 clamp(14px,1.6cqi,19px)/1.15 var(--f-disp);letter-spacing:-.02em}.net .core small{font-size:11.5px;color:rgba(255,255,255,.7);display:block;margin-top:4px}
.consent{margin-top:28px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px 18px;border-radius:20px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);max-width:560px}
.consent .ui-av{background:#3b86c9}
.consent b{font-size:14px;display:block}.consent small{color:var(--hero-sub);font-size:12.5px;display:block}
.consent .sw{width:44px;height:26px;border-radius:999px;background:var(--acc);position:relative;flex:none}
.consent .sw::after{content:"";position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;background:#fff}

/* who it is for: tabs */
.aud-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-top:34px}
.aud-tabs button{border:0;cursor:pointer;padding:10px 16px;border-radius:999px;font:600 14px/1 var(--f-ui);background:var(--card);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line);display:inline-flex;align-items:center;gap:8px}
.aud-tabs button.on{background:var(--hero);color:#fff;box-shadow:none}
.aud-tabs .material-symbols-outlined{font-size:19px}
.aud{margin-top:18px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.aud .big{border-radius:26px;padding:clamp(22px,3cqi,36px);background:var(--card);box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;justify-content:space-between;gap:20px}.aud .big .m-acts{margin-top:0}
.aud .pts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.aud .pt{border-radius:22px;padding:18px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:6px;align-content:start}
.aud .pt .material-symbols-outlined{font-size:24px;color:var(--acc-d)}
.aud .pt b{font-weight:600}.aud .pt span.x{color:var(--muted);font-size:14px;line-height:1.5}

/* video visits strip and the website looks */
.vv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:stretch}
.vv .call{border-radius:26px;overflow:hidden;background:#0d1714;position:relative;min-height:320px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.vv .call .cam{position:relative;background:radial-gradient(60% 70% at 40% 40%,#28463a,#0d1714)}
.vv .call .cam svg.who-sil{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:62%;max-width:300px;height:auto}
.vv .call .cam .p{position:absolute;inset:14px 14px auto auto;width:30%;aspect-ratio:3/4;border-radius:12px;background:radial-gradient(60% 60% at 50% 40%,#3a5f50,#16261f);box-shadow:0 0 0 2px rgba(255,255,255,.15)}
.vv .call .cam .who{position:absolute;left:14px;top:14px;display:flex;gap:8px;align-items:center;color:#fff;font-size:12.5px;font-weight:600}
.vv .call .cam .who i{width:8px;height:8px;border-radius:50%;background:#3fd29a}
.vv .call .rx{background:#111c18;color:#e9f1ec;padding:14px;display:grid;gap:8px;align-content:start;font-size:12.5px}
.vv .call .rx .h{display:flex;justify-content:space-between;gap:8px;align-items:center}
.vv .call .rx .h b{font-size:13px}.vv .call .rx .h small{font-size:10.5px;padding:3px 8px;border-radius:999px;background:rgba(84,160,224,.18);color:#8fc3f1;font-weight:700}
.vv .call .rx .m{padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.06)}
.vv .call .rx .m b{display:block}.vv .call .rx .m small{color:rgba(255,255,255,.6)}
.looks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:34px}
.looks figure{margin:0;border-radius:18px;overflow:hidden;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.looks img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.looks figcaption{padding:10px 14px;font-size:13px;display:flex;justify-content:space-between;gap:8px}
.looks figcaption b{font-weight:600}.looks figcaption span{color:var(--muted)}

/* security, channels, the end */
.sec-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:40px}
.sec-g .p{border-radius:22px;padding:22px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:8px;align-content:start}
.sec-g .p .material-symbols-outlined{font-size:26px;color:var(--acc-d)}
.sec-g .p b{font-weight:600;font-size:16px}.sec-g .p span.x{color:var(--muted);font-size:14px;line-height:1.55}
.chans{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:34px}
.chans div{border-radius:20px;padding:18px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:6px;align-content:start}
.chans .material-symbols-outlined{font-size:24px;color:var(--acc-d)}
.chans b{font-weight:600}.chans span.x{color:var(--muted);font-size:13.5px;line-height:1.5}
.langs{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.langs span{padding:6px 11px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);font-size:13px}
.end{border-radius:32px;background:var(--hero);color:var(--hero-ink);padding:clamp(32px,6cqi,72px);display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:24px;align-items:end;position:relative;overflow:hidden}
.end::after{content:"";position:absolute;right:-10%;top:-40%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--acc) 40%,transparent),transparent 65%);pointer-events:none}
.end .m-lede{color:var(--hero-sub)}
.end .m-btn{background:#fff;color:var(--hero)}.end .m-btn.l{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.m-foot{background:var(--hero);color:var(--hero-ink);margin-top:clamp(56px,7cqi,96px)}
.m-foot .w{padding-block:44px 28px}
.fcols{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:24px}
.fcols h5{margin:0 0 10px;font:600 13px/1.3 var(--f-ui);color:var(--hero-sub)}
.fcols a{display:block;color:var(--hero-ink);opacity:.86;padding:4px 0;cursor:pointer;font-size:14px}
.fcols a:hover{opacity:1;color:#7ee0b4}
.fcols p{color:var(--hero-sub);font-size:13.5px;line-height:1.55;margin:12px 0 0;max-width:36ch}
.m-foot .ds-logo{background:rgba(255,255,255,.1)}
.fbot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.12);margin-top:30px;padding-top:16px;color:var(--hero-sub);font-size:12.5px}
/* the legal links and who runs Hospita, above the foot line (31-10, the pages a payment gateway checks); the foot line then sits
   closer, as it follows them (OVERRIDES .fbot's margin and rule here) */
.flegal{display:flex;justify-content:space-between;align-items:center;gap:8px 18px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.12);margin-top:30px;padding-top:16px;color:var(--hero-sub);font-size:12.5px}
.flegal nav{display:flex;flex-wrap:wrap;gap:6px 16px}
.flegal a{color:var(--hero-ink);opacity:.86}
.flegal a:hover{opacity:1;color:#7ee0b4}
.flegal + .fbot{border-top:0;margin-top:10px;padding-top:0}

/* the features page */
.fp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:36px}
.fp .grp{border-radius:26px;padding:24px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.fp .grp.ai{background:var(--violet-soft)}
.fp .grp h3{display:flex;align-items:center;gap:10px;margin:0 0 14px;font:600 20px/1.2 var(--f-disp);letter-spacing:-.02em}
.fp .grp h3 .material-symbols-outlined{font-size:24px;color:var(--acc-d)}
.fp .grp.ai h3 .material-symbols-outlined{color:var(--violet)}
.fp .li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;padding:9px 0;border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent);font-size:14px;line-height:1.5}
.fp .li:first-of-type{border-top:0}
.fp .li .material-symbols-outlined{font-size:18px;color:var(--acc-d);margin-top:2px}
.fp .li b{font-weight:600}

/* kept from the earlier pages: sign-in, register, pricing, legal, the map, the demo chat */
.sx-crumb{display:flex;gap:6px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:13px;padding-block:22px 14px}
.sx-crumb a{cursor:pointer;color:var(--acc-d);font-weight:600}
.sx-auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-block:26px 46px;background:var(--bg)}
.sx-auth .ds-auth-side{padding:40px 44px;min-height:520px}
.sx-auth .ds-auth-main{padding:36px 22px}
.sx-auth .ds-auth-side h2{font-size:34px}
.sx-who{display:grid;gap:8px}
.sx-who button{display:flex;align-items:center;gap:12px;text-align:left;border:1px solid var(--line);background:var(--card);border-radius:var(--r-md);padding:11px 12px;cursor:pointer;color:var(--ink)}
.sx-who button:hover{border-color:var(--acc)}
.sx-who button b{display:block;font-size:14px}.sx-who button small{display:block;color:var(--muted);font-size:12.5px}
.sx-who .material-symbols-outlined:last-child{margin-left:auto;color:var(--muted)}
.hm{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff;font-family:var(--f-disp);font-weight:800;font-size:13px;flex:none}
.sx-g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.sx-g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.site :is(.sx-g2,.sx-g4,.lg)>.ds-card.ds-card{margin-top:0}
.pl{display:flex;flex-direction:column;gap:12px}
.pl h3{font-family:var(--f-disp);font-size:18px;font-weight:700;margin:0}
.pl .pr{font-family:var(--f-num);font-size:34px;font-weight:800;letter-spacing:-.02em;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.pl .pr small{font-family:var(--f-ui);font-size:13px;font-weight:600;color:var(--muted)}
.pl dl{margin:0;display:grid;gap:8px;font-size:13.5px}
.pl dl div{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:8px}
.pl dt{color:var(--muted)}.pl dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.pl .ds-btn{margin-top:auto}
.pl.pick{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc),var(--shadow)}
.lg{display:grid;grid-template-columns:240px minmax(0,1fr);gap:28px;align-items:start;padding-block:10px 46px}
.lg-doc h1{font-family:var(--f-disp);font-size:clamp(26px,3cqi,34px);font-weight:700;letter-spacing:-.02em;margin:0 0 6px}
.lg-doc h3{font-family:var(--f-disp);font-size:17px;margin:22px 0 6px}
.lg-doc p{color:var(--muted);line-height:1.7;margin:0;max-width:68ch}
.bk-scrim{position:fixed;inset:0;background:rgba(10,18,14,.45);z-index:80;display:grid;place-items:center;padding:16px}
.bk{width:min(420px,100%);height:min(640px,calc(100dvh - 32px));background:var(--card);border-radius:22px;box-shadow:var(--pop);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line)}
.bk-h{display:flex;align-items:center;gap:11px;padding:14px 14px 14px 16px;color:#fff}
.bk-h b{display:block;font-size:15px}.bk-h small{display:block;opacity:.85;font-size:12px}
.bk-h .ds-btn.ghost{margin-left:auto;background:rgba(255,255,255,.18);color:#fff}
.bk-b{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--bg)}
.msg{max-width:86%;padding:10px 13px;border-radius:16px;line-height:1.5;font-size:14px}
.msg.bot{background:var(--card);border:1px solid var(--line);border-bottom-left-radius:6px}
.msg.me{background:var(--acc);color:#fff;margin-left:auto;border-bottom-right-radius:6px}
.bk-f{border-top:1px solid var(--line);padding:12px;display:grid;gap:8px;background:var(--card)}
.bk-row{display:flex;gap:8px}.bk-row .ds-input{min-width:0}
.bk-opts{display:flex;flex-wrap:wrap;gap:6px}

/* narrower frames */
@container (max-width:980px){
  .m-nav,.m-hide{display:none}
  .m-burger{display:inline-flex}
  .m-hero .w,.split,.m-five{grid-template-columns:minmax(0,1fr)}
  .split.rev>:first-child{order:0}
  .col{min-height:600px;max-width:560px}
  .m-five ul{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile.s3,.tile.s2,.tile.s4{grid-column:span 1}
  .jr{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cds{grid-template-columns:minmax(0,1fr)}
  .aud{grid-template-columns:minmax(0,1fr)}
  .vv{grid-template-columns:minmax(0,1fr)}
  .looks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sec-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chans{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fcols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fp{grid-template-columns:minmax(0,1fr)}
  .sx-g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sx-auth{grid-template-columns:minmax(0,1fr)}
  .sx-auth .ds-auth-side{min-height:0;padding:26px 24px}
  .sx-auth .ds-auth-pts{display:none}
  .lg{grid-template-columns:minmax(0,1fr)}
  .end{grid-template-columns:minmax(0,1fr)}
}
@container (max-width:560px){
  .sx-in{padding-inline:16px}
  .col{min-height:0;display:grid;gap:12px}
  .rec,.ai-card,.q-card{position:static;width:auto}
  .m-five ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento,.jr,.aud .pts,.looks,.sec-g,.chans,.fcols,.sx-g2,.sx-g4{grid-template-columns:minmax(0,1fr)}
  .opd .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .opd table th:nth-child(3),.opd table td:nth-child(3),.opd table th:nth-child(5),.opd table td:nth-child(5){display:none}.opd td,.opd th{padding-inline:10px}
  .vv .call{grid-template-columns:minmax(0,1fr)}
  .vv .call .cam{min-height:200px}
  .net .node{width:96px;transform:translate(-50%,-22px)}.net .node .b{width:44px;height:44px;border-radius:14px}.net .node small{display:none}
  .consent{grid-template-columns:auto minmax(0,1fr)}
  .consent .sw{grid-column:2;justify-self:start}
  .ds-otp{gap:6px}.ds-otp input{width:38px;height:48px;font-size:19px}
}

/* ---------------------------------------------------------------- motion (28-10, "the pages looks dead")
   The product's own screens shown working: the record gaining entries from other places, the queue moving, the AI writing
   its note, the front desk checking people in, the prescription written during the call, the record's places sending to it.
   Every other part arrives as the reader reaches it, once. Under reduced motion every part is shown at once and nothing
   loops (the rule at the top, and the script checks the same setting). */
.site{--ez:cubic-bezier(.2,.75,.2,1);--spring:cubic-bezier(.3,1.5,.5,1)}
@keyframes mRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes mWord{from{transform:translateY(112%)}to{transform:none}}
@keyframes mCard{from{opacity:0;transform:translateY(36px) scale(.96)}to{opacity:1;transform:none}}
@keyframes mPop{0%{transform:scale(.7)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes mFlash{from{background-color:var(--acc-soft)}to{background-color:transparent}}
@keyframes mFade{from{opacity:0}to{opacity:1}}
@keyframes mPulse{0%{box-shadow:0 0 0 0 rgba(63,210,154,.6)}100%{box-shadow:0 0 0 9px rgba(63,210,154,0)}}
@keyframes mRipple{from{transform:scale(1);opacity:.7}to{transform:scale(1.8);opacity:0}}
@keyframes mMarch{to{stroke-dashoffset:-2.8}}
@keyframes mScan{from{top:-45%}to{top:105%}}
@keyframes mDrift{to{background-position:56px 56px,56px 56px}}
@keyframes mGlow{to{transform:translate(-10%,12%) scale(1.18)}}
@keyframes mCaret{50%{opacity:0}}
@keyframes mDot{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes mRowIn{from{max-height:0;opacity:0;padding-block:0}to{max-height:var(--h,96px);opacity:1}}
@keyframes mRowOut{from{max-height:var(--h,64px);opacity:1}to{max-height:0;opacity:0;padding-block:0;border-top-width:0}}
@keyframes mRoll{from{transform:translateY(60%);opacity:0}to{transform:none;opacity:1}}

/* a part arriving as it is reached; the class comes off once it has arrived, so hover and the parts' own motion are theirs
   again (doubled class: it must win over the parts' own transitions while it is on) */
.site.site .rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ez),transform .8s var(--ez);transition-delay:calc(var(--i,0) * 80ms)}
.site.site .rv.in{opacity:1;transform:none}

/* the first screen: the headline rises word by word, then the three screens arrive one after another */
.m-h1 .wd{display:inline-block;vertical-align:top;padding:0 .08em .12em 0;margin:0 -.08em -.12em 0}
.m-h1 .wd>span{display:inline-block}
.site.enter .m-hero .wd{overflow:hidden}
.site.enter .m-hero .wd>span{animation:mWord .9s var(--ez) both;animation-delay:calc(.1s + var(--w,0) * 60ms)}
.site.enter .m-hero .m-kick{animation:mRise .7s var(--ez) both}
.site.enter .m-hero .m-lede{animation:mRise .8s var(--ez) .62s both}
.site.enter .m-hero .m-acts{animation:mRise .8s var(--ez) .76s both}
.site.enter .m-hero .m-for span{animation:mRise .6s var(--ez) both;animation-delay:calc(.9s + var(--i,0) * 60ms)}
.site.enter .rec{animation:mCard 1s var(--ez) .35s both}
.site.enter .q-card{animation:mCard 1s var(--ez) .8s both}
.site.enter .ai-card{animation:mCard 1s var(--ez) 1.15s both}
.m-hero::before{animation:mDrift 40s steps(240) infinite}
/* the record gains an entry: the new one opens at the top, the oldest closes at the bottom */
.rec .row{transition:opacity .35s}
.rec .row.new{overflow:hidden;animation:mRowIn .65s var(--ez) both,mFlash 2.4s .35s ease-out both}
.rec .row.out{overflow:hidden;animation:mRowOut .5s var(--ez) both}
.rec.fade .row,.q-card.fade .qr{opacity:.15}
.q-card .qr{transition:opacity .35s}
.st{transition:background-color .35s,color .35s}
.st.chg{animation:mPop .5s var(--spring)}
/* the AI reads, then writes */
.ai-card .think{display:inline-flex;align-items:center;gap:5px;color:var(--violet);font-weight:600;font-size:12.5px}
.ai-card .think i{width:6px;height:6px;border-radius:50%;background:var(--violet);animation:mDot 1s infinite}
.ai-card .think i:nth-child(2){animation-delay:.15s}.ai-card .think i:nth-child(3){animation-delay:.3s;margin-right:4px}
.typing::after{content:"";display:inline-block;width:2px;height:1.05em;background:currentColor;margin-left:2px;vertical-align:-.15em;animation:mCaret .8s steps(1) infinite}

/* the five tools: each one ticked */
.m-five li small .material-symbols-outlined{transform:scale(0);transition:transform .45s var(--spring);transition-delay:calc(.4s + var(--i,0) * 90ms)}
.m-five li.in small .material-symbols-outlined{transform:none}

/* tiles answer the pointer */
.tile{transition:transform .4s var(--ez),box-shadow .25s}
.tile:hover{transform:translateY(-4px)}
.tile .more .material-symbols-outlined{transition:transform .3s var(--ez)}
.tile:hover .more .material-symbols-outlined{transform:translate(3px,-3px)}

/* the OPD: buttons pressed, statuses moving, the figures following */
.opd .stat b.roll{animation:mRoll .45s var(--ez)}
.opd .nx,.opd .wk{display:inline-flex;transition:transform .15s,box-shadow .2s}
.opd .nx.press,.opd .wk.press{transform:scale(.9);box-shadow:0 0 0 6px color-mix(in srgb,var(--acc) 28%,transparent)}
.opd tbody{transition:opacity .35s}
.opd tbody.fade{opacity:.15}
.opd tr.new{animation:mFade .5s var(--ez) both}
.opd tr.new td{animation:mFlash 2.2s ease-out both}
.opd tr.out{opacity:0;transition:opacity .4s}

/* AI: the four steps lit in turn; each screen reads, then shows what it found */
.jr .j{transition:transform .45s var(--ez),box-shadow .45s var(--ez)}
.jr .j::before{transition:transform .45s var(--spring),box-shadow .45s}
.jr .j.on{transform:translateY(-6px);box-shadow:inset 0 0 0 2px var(--violet),0 22px 44px -26px color-mix(in srgb,var(--violet) 80%,transparent)}
.jr .j.on::before{transform:scale(1.14);box-shadow:0 0 0 6px color-mix(in srgb,var(--violet) 22%,transparent)}
.cds .ui .bd{position:relative}
.cds .ui .bd>*{opacity:0;transform:translateY(6px);transition:opacity .5s var(--ez),transform .5s var(--ez);transition-delay:calc(.6s + var(--j,0) * 170ms)}
.cds .ui.in .bd>*{opacity:1;transform:none}
.site.enter .cds .ui.in .bd::after{content:"";position:absolute;left:0;right:0;height:45%;top:-45%;pointer-events:none;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--violet) 18%,transparent),transparent);animation:mScan 1.2s var(--ez) .15s both}

/* the features page: each group's lines ticked in after the group arrives */
.fp .grp .li{opacity:0;transform:translateX(-8px);transition:opacity .5s var(--ez),transform .5s var(--ez);transition-delay:calc(.3s + var(--j,0) * 60ms)}
.fp .grp.in .li{opacity:1;transform:none}

/* the patient's timeline drawn, event by event */
.prec .ev{position:relative;opacity:0;transform:translateX(-10px);transition:opacity .55s var(--ez),transform .55s var(--ez);transition-delay:calc(.35s + var(--j,0) * 240ms)}
.prec.in .ev{opacity:1;transform:none}
.prec .ev i{position:relative;z-index:1}
.prec .ev:not(:last-child)::after{content:"";position:absolute;left:84px;top:22px;bottom:-22px;width:2px;border-radius:2px;background:color-mix(in srgb,var(--acc) 32%,var(--line));transform-origin:top;transform:scaleY(0);transition:transform .5s var(--ez);transition-delay:calc(.6s + var(--j,0) * 240ms)}
.prec.in .ev::after{transform:none}

/* one record: the lines drawn out to each place, the places arriving, what they send travelling in */
.net .ln{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--ez);transition-delay:calc(.25s + var(--j,0) * 140ms)}
.net.in .ln{stroke-dashoffset:0}
.net .sh{opacity:0;transition:opacity .6s 1.1s;animation:mMarch 1.4s linear infinite}
.net.in .sh{opacity:1}
.net .node{opacity:0;scale:.6;transition:opacity .5s var(--ez),scale .6s var(--spring);transition-delay:calc(.75s + var(--j,0) * 140ms)}
.net.in .node{opacity:1;scale:1}
.net .core{opacity:0;scale:.82;transition:opacity .6s var(--ez),scale .8s var(--spring)}
.net.in .core{opacity:1;scale:1}
.net .core::before,.net .core::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 1px rgba(126,224,180,.5);animation:mRipple 3.6s ease-out infinite;pointer-events:none}
.net .core::after{animation-delay:1.8s}
.net .pk{opacity:0;transition:opacity .6s 1.7s}
.net.in .pk{opacity:1}
/* the patient lets a doctor see it: the switch goes on, and the look is counted */
.consent .sw{transition:background-color .35s .5s}
.consent .sw::after{transition:right .4s var(--spring) .5s}
.consent:not(.in) .sw{background:rgba(255,255,255,.18)}
.consent:not(.in) .sw::after{right:21px}
.consent .lk{display:inline-block}
.consent .lk.bump{animation:mPop .5s var(--spring);color:#7ee0b4;font-weight:700}

/* the video visit: live, and the prescription written while they talk */
.vv .call .cam .who i{animation:mPulse 1.6s ease-out infinite}
.vv .call .rx .m{transition:opacity .45s var(--ez),transform .45s var(--ez)}
.vv .call .rx .m.wt{opacity:0;transform:translateY(8px)}

/* the website looks, the languages, the end */
.looks img{transition:transform .8s var(--ez)}
.looks figure:hover img{transform:scale(1.05)}
.langs span{transition:background-color .4s,color .4s,box-shadow .4s}
.langs span.on{background:var(--acc-soft);color:var(--acc-d);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 40%,transparent)}
.end::after{animation:mGlow 12s ease-in-out infinite alternate}

/* what a press changes, shown changing */
.site .aud.swap .big,.site .aud.swap .pt{animation:mRise .55s var(--ez) both;animation-delay:calc(var(--i,0) * 60ms)}
.site .swap:is(.ds-auth-card,.lg-doc){animation:mRise .45s var(--ez) both}

@media (prefers-reduced-motion: reduce){
  .site.site .rv{opacity:1;transform:none}
  .net .pk{display:none}
}

/* ---------------------------------------------------------------- the care look (28-10, "how to get a health care feel")
   Read off health care sites' own first screens (One Medical, Tebra, athenahealth, Mayo Clinic, Cleveland Clinic, Practo,
   Apollo 24|7, eka.care, Halodoc; industry/): white pages, one calm teal, real people being cared for, headings at a regular
   weight, pill buttons, larger body text, no dark slabs. Laid over the parts above by redefining Hospita's own tokens on the
   website only - the review bar, the demo chat and the app keep the Bento look. Photos: Unsplash licence, photos/SOURCES.md. */
.site{
  --bg:#ffffff; --card:#ffffff; --soft:#f2f7f6; --ink:#10302d; --muted:#516c69; --faint:#8aa29f; --line:#dfe9e7; --trk:#e7efed;
  --acc:#0d9488; --acc-d:#0b7468; --acc-soft:#ddf3ef; --on-acc:#ffffff;
  --hero:#0f2f2c; --hero-ink:#ffffff; --hero-num:#f2b54b; --hero-sub:rgba(255,255,255,.72);
  --mint:#e9f6f3; --sky:#ecf4fb; --info:#2a78c0; --info-soft:#e6f0fa; --violet-soft:#f0eefd;
  --f-ui:'Figtree','Inter',-apple-system,'Segoe UI',Roboto,sans-serif; --f-disp:var(--f-ui); --f-num:var(--f-ui);
  --h-w:600; --h-ls:-.025em;
  font-family:var(--f-ui); font-size:16.5px;
}
:root[data-theme="dark"] .site{
  --bg:#0b1517; --card:#112022; --soft:#0f1b1d; --ink:#e3efed; --muted:#93aba8; --faint:#5f7674; --line:#223432; --trk:#1a2a28;
  --acc:#2bbfaa; --acc-d:#5dd6c3; --acc-soft:#123430; --hero:#0c2321; --mint:#0f211f; --sky:#0f1c27; --info-soft:#13263a; --violet-soft:#1e1c37;
  --on-acc:#062420;
}
/* dark (30-10): white on the bright teal was 2.3:1 - the words on a filled teal are the dark ink (8:1) */
:root[data-theme="dark"] .site :is(.m-btn.g,.opd .nx,.msg.me){color:var(--on-acc)}
.site .m-h1,.site .m-h2,.site .m-h3{font-family:var(--f-disp);font-weight:var(--h-w);letter-spacing:var(--h-ls)}
.site .m-h1{line-height:1.05;font-size:clamp(38px,4.8cqi,62px)}
.site .m-brand b{font-family:var(--f-ui);font-weight:800}
.site .m-btn.g:hover{box-shadow:0 10px 22px -10px color-mix(in srgb,var(--acc) 80%,transparent)}

/* the first screen: a consultation, the heartbeat under the headline, what the patient can trust */
.site .m-hero{background:radial-gradient(45% 60% at 88% 16%,var(--mint),transparent 70%),radial-gradient(40% 50% at 6% 92%,var(--sky),transparent 70%)}
.site .m-hero::before{display:none}
.beat{display:block;width:min(340px,80%);height:auto;margin:22px 0 2px;overflow:visible}
.beat path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.beat-l{stroke:color-mix(in srgb,var(--acc) 45%,transparent);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:0}
.beat-p{stroke:var(--acc);stroke-width:3.2;stroke-dasharray:.07 2;stroke-dashoffset:.07;animation:mBeat 3.6s linear 1.9s infinite;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--acc) 60%,transparent))}
.site.enter .beat-l{stroke-dashoffset:1;animation:mDraw 1.3s var(--ez) .6s forwards}
@keyframes mDraw{to{stroke-dashoffset:0}}
@keyframes mBeat{from{stroke-dashoffset:.07}to{stroke-dashoffset:-1}}
.m-trust{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 20px;color:var(--muted);font-size:14.5px;font-weight:500}
.m-trust li{display:inline-flex;align-items:center;gap:8px}
.m-trust .material-symbols-outlined{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--acc-soft);color:var(--acc-d);font-size:18px}
.site.enter .m-hero .m-trust{animation:mRise .8s var(--ez) .9s both}
.ph{margin:0;overflow:hidden;background:var(--soft)}
.ph img{display:block;width:100%;height:100%;object-fit:cover}
.site .col{min-height:640px}
/* the photograph on the right, the doctor in view; the AI note and her record hang off its left edge */
.site .hero-ph{position:absolute;inset:0 0 64px 84px;border-radius:32px;box-shadow:0 30px 60px -32px rgba(15,47,44,.5)}
.site .hero-ph img{object-position:66% 40%}
.site .ai-card{top:36px;bottom:auto;left:0;right:auto;width:min(290px,54%)}
.site .rec{top:auto;bottom:0;left:0;width:min(390px,72%)}
.site.enter .hero-ph{animation:mCard 1.1s var(--ez) .15s both}

/* icons sit in soft round badges */
.site .ticks li{grid-template-columns:38px minmax(0,1fr)}
.site .ticks li>.material-symbols-outlined{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--acc-soft);font-size:20px;margin-top:0}
.site .ticks.ai li>.material-symbols-outlined{background:var(--violet-soft)}
.site :is(.sec-g .p,.chans>div,.aud .pt)>.material-symbols-outlined{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--acc-soft);font-size:23px}
.site .tile .ti{border-radius:50%}

/* the platform tiles: white and mint, no dark slab */
.site .tile:hover{box-shadow:inset 0 0 0 1px var(--acc),0 18px 40px -26px rgba(15,47,44,.35)}
.site .tile.dark{background:var(--mint);color:var(--ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 22%,transparent)}
.site .tile.dark p{color:var(--muted)}
.site .tile.dark .ti{background:var(--card);color:var(--acc-d)}
.site .tile.dark .mini .r{background:var(--card)}

/* AI: the doctor and the patient beside the words */
.ai-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4cqi,56px);align-items:center}
.ai-top .ph{border-radius:28px;aspect-ratio:4/3;box-shadow:0 24px 50px -30px rgba(40,30,110,.45)}
.ai-top .ph img{object-position:58% 40%}

/* the patient record: a visit, with the record laid over it */
.ph-stack{display:grid}
.ph-stack>.ph{border-radius:28px;aspect-ratio:16/9}
.ph-stack>.prec{margin:-96px 24px 0;position:relative}

/* one record: on a mint ground */
.site .m-one{background:var(--mint);color:var(--ink)}
.site .m-one .m-lede,.site .m-one .ticks span.x{color:var(--muted)}
.site .m-one .m-kick{color:var(--acc-d)}.site .m-one .m-kick .dot{background:var(--acc)}
.site .m-one .ticks li .material-symbols-outlined{color:var(--acc-d);background:var(--card)}
.site .net svg>circle{stroke:color-mix(in srgb,var(--acc) 22%,transparent)}
.site .net .ln{stroke:color-mix(in srgb,var(--acc) 55%,transparent)}
.site .net .sh{stroke:#d9912b}
.site .net .pk circle{fill:var(--acc)}.site .net .pk circle:nth-child(4){fill:#d9912b}
.site .net .node .b{background:var(--card);box-shadow:0 8px 18px -10px rgba(15,47,44,.35),inset 0 0 0 1px var(--line)}
.site .net .node .b .material-symbols-outlined{color:var(--acc-d)}
.site .net .node b,.site .net .node small{background:var(--mint)}
.site .net .node small{color:var(--muted)}
.site .net .core{background:radial-gradient(circle at 50% 32%,#2fb8a6,#0b6b62);color:#fff;box-shadow:0 0 0 10px rgba(13,148,136,.08),0 0 0 22px rgba(13,148,136,.05),0 22px 50px -12px rgba(13,148,136,.5)}
.site .net .core::before,.site .net .core::after{box-shadow:0 0 0 1px rgba(13,148,136,.5)}
.site .consent{background:var(--card);box-shadow:0 12px 30px -20px rgba(15,47,44,.4),inset 0 0 0 1px var(--line)}
.site .consent small{color:var(--muted)}
.site .consent:not(.in) .sw{background:var(--line)}
.site .consent .lk.bump{color:var(--acc-d)}

/* who it is for: each way in with its photograph */
.site .aud .big .ph{margin:calc(-1 * clamp(22px,3cqi,36px)) calc(-1 * clamp(22px,3cqi,36px)) 0;border-radius:26px 26px 0 0;aspect-ratio:16/8}

/* the video visit: the patients at home, the doctor in the corner */
.vv .call .cam .cam-ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.vv .call .cam .p{overflow:hidden}
.vv .call .cam .p img{display:block;width:100%;height:100%;object-fit:cover;object-position:80% 30%}
.vv .call .cam .who{padding:5px 10px;border-radius:999px;background:rgba(10,20,18,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* the close: the brand's own teal */
.site .end{background:linear-gradient(120deg,#0b5f57,#0d9488 60%,#2bb5a3)}
.site .end::after{background:radial-gradient(circle,rgba(255,255,255,.22),transparent 65%)}
.site .end .m-btn:not(.l){color:#0b5f57}
:root[data-theme="dark"] .site .end{background:linear-gradient(120deg,#0a3d38,#0b6b62)}

@container (max-width:980px){
  .ai-top{grid-template-columns:minmax(0,1fr)}
  .site .col{min-height:620px}
}
@container (max-width:560px){
  .site .col{min-height:0}
  .site .hero-ph{position:relative;inset:auto;aspect-ratio:4/3;border-radius:24px}
  .site .rec,.site .ai-card{width:auto}
  .ph-stack>.prec{margin:-48px 10px 0}
  .m-trust{gap:8px 14px;font-size:14px}
}
</style>

/* ---------------------------------------------------------------- the live website (28-10): what the preview did with
   its own navigation is links here; the four ways in are four panels; the menu opens in place */
.site a{color:inherit;text-decoration:none}
.site a:focus-visible,.site button:focus-visible,.site select:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:10px}
.site .m-menu[hidden],.site .aud-p[hidden]{display:none}
.site .m-btn{text-decoration:none}
.site .tile{display:block;color:inherit}
.site .m-nav a.on{color:var(--ink);background:var(--soft)}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--card);color:var(--ink);padding:10px 14px;border-radius:12px;font-weight:600}
.skip:focus{top:12px;box-shadow:var(--pop)}

/* pricing: the plans read from the platform's own price list */
.site .pl-wait{min-height:220px;border-radius:var(--radius);background:linear-gradient(90deg,var(--soft),var(--card),var(--soft));background-size:200% 100%;animation:mShimmer 1.4s linear infinite}
@keyframes mShimmer{to{background-position:-200% 0}}
.site .pl-none{grid-column:1/-1}
.site .pl .feat{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13.5px;color:var(--muted)}
.site .pl .feat li{display:flex;gap:8px;align-items:flex-start}
.site .pl .feat .material-symbols-outlined{font-size:17px;color:var(--acc-d);margin-top:2px}
.site .ds-seg .n{font-size:11.5px;font-weight:700;color:var(--acc-d);margin-left:4px}

/* the legal pages: the list of documents beside the one being read */
.site .lg aside .ds-row.on{background:var(--soft)}
.site .lg aside .ds-row b{display:block;font-size:13.5px}
.site .lg aside .ds-row small{color:var(--muted)}
.site .lg-doc .ver{color:var(--muted);font-size:13.5px;margin:0 0 20px}
.site .lg-doc .lead{font-size:16px;line-height:1.65;color:var(--ink);margin:0 0 10px}
.site .lg-doc h2{font-family:var(--f-disp);font-weight:var(--h-w);font-size:19px;letter-spacing:-.01em;margin:30px 0 10px;color:var(--ink)}
.site .lg-doc h3{color:var(--ink)}
.site .lg-doc p,.site .lg-doc li{color:var(--ink);font-size:15px;line-height:1.7;max-width:72ch}
.site .lg-doc p+p{margin-top:10px}
.site .lg-doc ul,.site .lg-doc ol{padding-left:22px;margin:8px 0}
.site .lg-doc li+li{margin-top:6px}
.site .lg-doc a{color:var(--acc-d);text-decoration:underline;text-underline-offset:2px}
.site .lg-doc .box{background:var(--mint);border:1px solid var(--line);border-radius:var(--r-md,14px);padding:16px 18px;margin:14px 0}
.site .lg-doc table{border-collapse:collapse;width:100%;font-size:14px;margin:10px 0}
.site .lg-doc th,.site .lg-doc td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.site .lg-doc th{background:var(--soft);font-weight:600}
.site .lg-doc .unset{color:var(--muted);font-style:italic}
.site .lg-doc .rev{margin-top:34px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:13.5px}
.site .lg-doc .rev td,.site .lg-doc .rev th{font-size:13px}

/* sign-in and register inside the website */
.site .sx-auth .ds-auth-card{max-width:440px;margin:0 auto}
.site .sx-auth .ds-auth-side .m-kick{margin-bottom:12px}
.site .ds-check{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5}
.site .ds-check input{margin-top:3px;width:18px;height:18px;accent-color:var(--acc);flex:none}
.site .ds-check a{color:var(--acc-d);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* a language read right to left */
.site[dir="rtl"] .m-nav{margin-left:0;margin-right:16px}
.site[dir="rtl"] .m-hr{margin-left:0;margin-right:auto}
.site[dir="rtl"] .m-kick,.site[dir="rtl"] .m-lede{text-align:right}
.site .lg-doc .box dl{display:grid;grid-template-columns:1fr auto;gap:6px 18px;margin:0;font-size:14.5px}
.site .lg-doc .box dt{color:var(--muted)}.site .lg-doc .box dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.site .lg-doc .box .tot{font-weight:700;color:var(--ink);border-top:1px solid var(--line);padding-top:8px}
.site .lg-doc .box small{display:block;color:var(--muted);font-size:12.5px;margin-top:10px}
.site .lg-en{background:var(--sky);border-radius:12px;padding:10px 14px;font-size:14px;margin:0 0 16px}
.site .lg-en[hidden]{display:none}
.site .lg-doc .tbl{overflow-x:auto}
.site .ds-auth-side .side-v{display:flex;flex-direction:column;gap:22px;margin-top:auto}
.site .ds-auth-side .side-v h2{margin:0}
.site .ds-auth-side .side-v[hidden]{display:none}


/* Hospita's logo (30-10, drawn by .work/tabs/brand.py and put in place by .work/tabs/apply_brand.py): the four petals and
   the wordmark whose i carries a dot of all four. On a dark ground the petals take their bright colours. */
.hx-word{white-space:nowrap;line-height:1}
.hx-i{position:relative;display:inline-block;line-height:1}
.hx-dot{position:absolute;left:calc(50% + .015em);top:.1em;width:.2em;height:.2em;transform:translateX(-50%);display:block}
.hx-mark{display:block;flex:none}
.m-brand .hx-mark{width:34px;height:34px}
.m-brand .hx-word{font-family:var(--f-ui);font-weight:800;font-size:21px;letter-spacing:-.03em}
.m-foot .m-brand .hx-mark{width:36px;height:36px}
.m-foot .m-brand .hx-word{font-size:23px}
/* the footer's links are blocks at .86 - the logo is not one of them: a row, at full strength */
.fcols a.m-brand{display:inline-flex;opacity:1;padding:0}
.fcols a.m-brand:hover{color:#fff}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .m-head .hx-mark path[fill="#0d9488"]{fill:#14b8a6;stroke:#14b8a6}
  :root:not([data-theme="light"]) .m-head .hx-mark path[fill="#2f6be4"]{fill:#4f86ef;stroke:#4f86ef}
  :root:not([data-theme="light"]) .m-head .hx-mark path[fill="#5546d8"]{fill:#7a6cf0;stroke:#7a6cf0}
  :root:not([data-theme="light"]) .m-head .hx-mark path[fill="#d23a6e"]{fill:#ec5b8c;stroke:#ec5b8c}
  :root:not([data-theme="light"]) .m-head .hx-dot path[fill="#0d9488"]{fill:#14b8a6}
  :root:not([data-theme="light"]) .m-head .hx-dot path[fill="#2f6be4"]{fill:#4f86ef}
  :root:not([data-theme="light"]) .m-head .hx-dot path[fill="#5546d8"]{fill:#7a6cf0}
  :root:not([data-theme="light"]) .m-head .hx-dot path[fill="#d23a6e"]{fill:#ec5b8c}
}

/* The sign-in page (30-10: "footer is not at its place, the left text box is half empty.. i want hospita logo there.. and
   some background waves"): the page is the screen's height and the footer sits at its foot; the side carries the logo, a
   person for whom the side speaks (staff: a doctor, a patient, registering: a nurse) standing in waves of the logo's four
   colours; pale waves of the same four run under the sign-in box. The waves drift only without reduced motion. */
.site[data-page="auth"]{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.site[data-page="auth"] > main{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.site[data-page="auth"] > main > .sx-in{width:100%;position:relative;z-index:1}
.site[data-page="auth"] .m-foot{margin-top:0}
.ax-bg{position:absolute;left:0;right:0;bottom:0;height:46%;pointer-events:none}
.ax-brand{display:inline-flex;align-items:center;gap:12px;color:var(--hero-ink);text-decoration:none;position:relative;z-index:1;align-self:flex-start}
.ax-brand .hx-mark{width:40px;height:40px}
.ax-brand .hx-word{font-family:var(--f-ui);font-weight:800;font-size:25px;letter-spacing:-.03em}
.ax-art{position:relative;flex:1 1 auto;min-height:250px;margin:-8px -44px 0;overflow:hidden;isolation:isolate}
.ax-who{position:absolute;right:40px;bottom:0;height:min(140%,600px);width:auto;max-width:none;transform:translateY(30%);z-index:1}
.ax-who.ax-wide{right:12px;height:min(112%,470px);transform:translateY(16%)}
/* the photograph stops at the nurse's forehead: that side fades in from the top, so no straight cut shows */
.ax-who.ax-wide{-webkit-mask-image:linear-gradient(to right,#000 56%,transparent 70%),linear-gradient(to bottom,transparent 3%,#000 30%);mask-image:linear-gradient(to right,#000 56%,transparent 70%),linear-gradient(to bottom,transparent 3%,#000 30%);-webkit-mask-composite:source-over;mask-composite:add}
.ax-waves{position:absolute;left:0;right:0;bottom:0;height:116px}
.ax-waves svg{z-index:0}.ax-waves svg.front{z-index:2}
.ax-waves svg,.ax-bg svg{position:absolute;left:0;bottom:0;width:200%;height:100%;display:block;animation:axDrift var(--d,30s) linear infinite var(--r,normal)}
@keyframes axDrift{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){ .ax-waves svg,.ax-bg svg{animation:none} }
@media (max-width:900px){ .ax-brand,.ax-art{display:none} .ax-bg{height:30%} }