/* The glass look for sign-in, family list, More and the screens it opens (docs/PATIENT_APP_THEME.md).
 * Loaded after patient_app_glass.css; reads its --g-* tokens. Every class here starts gs-.
 *
 * Rebuilt 3 Oct 2026 ("I need complete change from old style"): the sign-in is a front door (the
 * hospital's mark, a welcome, the language switch, two large glass fields, the thick orange
 * button); each person on the family list is a large glass card with their drawn face; More is
 * three short glass groups whose rows carry a bold white icon on a solid round chip, blue and
 * orange in turn, as Home's tiles do.
 */

/* ------------------------------------------------------------------ shared pieces */
.gs-glass { background:var(--g-glass); border:1px solid var(--g-edge); border-radius:26px; box-shadow:var(--g-shadow);
  -webkit-backdrop-filter:blur(22px) saturate(160%); backdrop-filter:blur(22px) saturate(160%); }
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))) { .gs-glass { background:rgba(255,255,255,.88); } }
.gs-cap { display:block; font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--g-acc); }
body.te .gs-cap { letter-spacing:.02em; }
.gs-title { margin:8px 2px 6px; font-size:26px; font-weight:600; letter-spacing:-.03em; line-height:1.15; color:var(--g-ink); }
.gs-sub { margin:0 2px 16px; font-size:14px; font-weight:500; line-height:1.45; color:var(--g-soft); }
.gs-title + .gs-glass, .gs-title + .gs-lang, .gs-title + .card, .gs-title + .gs-people, .gs-title + #pa-xray { margin-top:14px; }
.gs-lead { margin:0; font-size:14.5px; font-weight:500; line-height:1.45; color:var(--g-soft); }
.gs-soft { margin:6px 0 0; font-size:13.5px; font-weight:500; line-height:1.45; color:var(--g-soft); }
.gs-small { font-size:13.5px; margin-top:14px; }
.gs-center { text-align:center; }
.gs-foot { margin:18px 4px 0; text-align:center; font-size:13px; font-weight:500; line-height:1.5; color:var(--g-soft); }
.gs-group { margin:22px 6px 9px; }

/* back to More: a quiet glass pill, 44 px */
.gs-back { display:inline-flex; align-items:center; gap:4px; height:44px; padding:0 18px 0 14px; margin:2px 0 4px; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.82); border:1px solid var(--g-edge); color:var(--g-acc); font-size:14.5px; font-weight:600;
  box-shadow:0 6px 14px rgba(16,24,40,0.05); }

/* the round solid chip with a bold white icon - blue, or orange (o), or clay (r) */
.gs-chip { flex:none; width:44px; height:44px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff;
  background:var(--fl-o); box-shadow:0 8px 16px rgba(var(--fl-o-rgb),.3); }
.gs-chip.o { background:var(--g-orange); box-shadow:0 8px 16px rgba(238,90,14,0.12); }
.gs-chip.r { background:linear-gradient(135deg, #F07B5F 0%, #C93A1E 100%); box-shadow:0 8px 16px rgba(201,58,30,.28); }
.gs-chip svg { width:22px; height:22px; stroke-width:2.1; color:#fff; }

/* the chevron at the end of a row or a card */
.gs-go { flex:none; width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; color:var(--g-acc); }
.gs-go svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }

/* the small SOLID pill */
.gs-pill { display:inline-block; height:28px; line-height:28px; box-sizing:border-box; max-width:100%; padding:0 12px; border-radius:999px; font-size:12.5px; font-weight:600;
  color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:var(--fl-o);
  box-shadow:0 4px 10px rgba(var(--fl-o-rgb),.22); }
.gs-pill.o { background:var(--g-orange); box-shadow:0 4px 10px rgba(238,90,14,0.10); }
.gs-pill.r { background:linear-gradient(135deg, #F07B5F 0%, #C93A1E 100%); box-shadow:0 4px 10px rgba(201,58,30,.24); }

/* the thick orange button */
.gs-cta { display:flex; align-items:center; justify-content:center; width:100%; min-height:54px; padding:0 20px; margin-top:16px; border:0; border-radius:18px;
  cursor:pointer; background:var(--g-orange); color:#fff; font-size:16.5px; font-weight:600; letter-spacing:-.01em; white-space:nowrap;
  box-shadow:0 12px 24px rgba(238,90,14,0.14); }
.gs-cta:disabled { opacity:.6; }
/* a quiet link: white glass, blue words, a bold icon */
.gs-quiet { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border-radius:999px; text-decoration:none;
  background:rgba(255,255,255,.84); border:1px solid var(--g-edge); color:var(--g-acc); font-size:14px; font-weight:600; box-shadow:0 6px 14px rgba(16,24,40,0.05); }
.gs-quiet svg { width:19px; height:19px; stroke-width:2.1; }
.gs-media { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.gs-video { display:block; width:100%; margin-top:10px; border-radius:18px; background:#0C1526; box-shadow:0 10px 22px rgba(16,24,40,0.09); }

.gs-cta, .gs-back, .gs-quiet, .gs-row, .gs-person, .gs-switch button { transition:transform .12s ease; -webkit-tap-highlight-color:transparent; }
.gs-cta:active, .gs-back:active, .gs-quiet:active, .gs-row:active, .gs-person:active, .gs-switch button:active { transform:scale(.97); }
@media (prefers-reduced-motion: reduce) {
  .gs-cta, .gs-back, .gs-quiet, .gs-row, .gs-person, .gs-switch button, .gs-switch::before { transition:none !important; }
  .gs-cta:active, .gs-back:active, .gs-quiet:active, .gs-row:active, .gs-person:active, .gs-switch button:active { transform:none; }
}

/* ------------------------------------------------------------------ the two-way language switch */
.gs-switch { position:relative; display:grid; grid-template-columns:1fr 1fr; padding:4px; border-radius:999px;
  background:rgba(255,255,255,.62); border:1px solid var(--g-edge); box-shadow:inset 0 1px 3px rgba(16,24,40,0.05), 0 6px 14px rgba(16,24,40,0.04); }
.gs-switch::before { content:""; position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 4px); border-radius:999px; background:var(--g-ink);
  box-shadow:0 6px 14px rgba(12,21,38,.3); transition:transform .22s ease; }
.gs-switch.gs-right::before { transform:translateX(100%); }
.gs-switch button { position:relative; z-index:1; height:44px; min-height:44px; border:0; border-radius:999px; background:none; cursor:pointer;
  font-size:15px; font-weight:600; color:var(--g-ink); box-shadow:none; }
.gs-switch button.on { color:#fff; }

/* ------------------------------------------------------------------ sign-in: the front door */
/* The name bar above says the hospital's name a second time; on the front door the mark says it. */
body:has(.gs-door) .top { display:none; }
.gs-door { padding:calc(18px + env(safe-area-inset-top)) 2px 24px; }
.gs-brand { display:flex; flex-direction:column; align-items:center; gap:12px; margin:6px 0 14px; }
.gs-mark { width:96px; height:96px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.78); border:1px solid var(--g-edge); box-shadow:0 16px 34px rgba(16,24,40,0.09), inset 0 1px 0 #fff;
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
.gs-mark img { height:64px; width:auto; display:block; }
.gs-hello { margin:2px 0 6px; text-align:center; font-size:32px; font-weight:600; letter-spacing:-.035em; line-height:1.1; color:var(--g-ink); }
.gs-door .gs-lead { max-width:320px; margin:0 auto; }
.gs-door-lang { max-width:264px; margin:18px auto 18px; }
.gs-form { padding:20px 18px 18px; }
.gs-form-h { display:flex; align-items:center; gap:12px; margin-bottom:4px; }
.gs-label { display:block; margin:14px 4px 7px; font-size:14px; font-weight:600; color:var(--g-ink); }
.gs-form-h + .gs-label, .gs-form > .gs-label:first-child { margin-top:2px; }
.gs-form-h + .gs-label { margin-top:16px; }
.gs-field { position:relative; display:block; }
.gs-field > svg { position:absolute; left:17px; top:50%; width:21px; height:21px; transform:translateY(-50%); color:var(--g-acc); stroke-width:2.1; pointer-events:none; }
input.gs-input { display:block; width:100%; box-sizing:border-box; height:58px; min-height:58px; padding:0 16px 0 50px; border-radius:18px;
  background:rgba(255,255,255,.88); border:1px solid rgba(12,21,38,.14); box-shadow:inset 0 1px 2px rgba(16,24,40,0.03), 0 6px 14px rgba(16,24,40,0.03);
  font-size:20px; font-weight:600; letter-spacing:.02em; color:var(--g-ink); font-variant-numeric:tabular-nums; }
input.gs-input::placeholder { color:rgba(79,92,120,.55); font-weight:500; }
input.gs-input:focus { border-color:var(--g-acc); box-shadow:0 0 0 3px rgba(var(--fl-o-rgb),.16); outline:none; background:#fff; }
input.gs-code { text-align:center; letter-spacing:.5em; padding-left:44px; padding-right:44px; }
.gs-slip { display:flex; align-items:center; gap:12px; margin-top:14px; padding:12px 14px; border-radius:18px;
  background:rgba(255,164,92,.16); border:1px dashed rgba(238,90,14,0.14); font-size:13.5px; font-weight:500; line-height:1.4; color:var(--g-ink); }
.gs-ticket { flex:none; display:flex; flex-direction:column; align-items:center; padding:7px 10px; border-radius:12px; background:#fff;
  box-shadow:0 4px 10px rgba(16,24,40,0.05); font-size:12.5px; font-weight:600; letter-spacing:.06em; color:var(--g-ink); }
.gs-ticket em { font-style:normal; font-size:17px; letter-spacing:.18em; color:#EE5A0E; }
.gs-err:empty { display:none; }
.gs-err { margin-top:12px; padding:10px 14px; border-radius:14px; background:rgba(217,72,43,.12); color:#8E2A14; font-size:14px; font-weight:500; }
.gs-note { display:flex; align-items:center; gap:10px; margin:16px 4px 0; font-size:13.5px; font-weight:500; line-height:1.45; color:var(--g-soft); }
.gs-note svg { flex:none; width:20px; height:20px; color:var(--g-acc); stroke-width:2.1; }

/* ------------------------------------------------------------------ the family list */
.gs-people { display:flex; flex-direction:column; gap:12px; }
.gs-person { position:relative; display:flex; align-items:center; gap:14px; width:100%; min-height:104px; padding:16px 12px 16px 16px; margin:0 0 12px;
  text-align:left; cursor:pointer; color:var(--g-ink); font:inherit; }
.gs-people > .gs-person { margin:0; }
.gs-person.gs-on { border-color:rgba(var(--fl-o-rgb),.55); box-shadow:0 0 0 3px rgba(var(--fl-o-rgb),.16), var(--g-shadow); }
.gs-face { flex:none; width:64px; height:64px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:#FBE3CB; border:2.5px solid #fff; box-shadow:0 10px 20px rgba(16,24,40,0.10); font-size:20px; font-weight:600; color:var(--g-acc); }
.gs-face svg { display:block; width:100%; height:100%; }
.gs-who { flex:1; min-width:0; display:flex; flex-direction:column; }
.gs-name { font-size:18px; font-weight:600; letter-spacing:-.02em; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gs-as { margin-top:2px; font-size:13.5px; font-weight:500; color:var(--g-soft); }
.gs-pills { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.gs-tok { flex:none; display:flex; flex-direction:column; align-items:center; min-width:62px; padding:8px 10px 7px; border-radius:18px;
  background:rgba(255,255,255,.82); border:1px solid var(--g-edge); box-shadow:0 6px 14px rgba(16,24,40,0.05); }
.gs-tok b { font-size:20px; font-weight:600; letter-spacing:-.03em; line-height:1.1; color:var(--g-ink); white-space:nowrap; }
.gs-tok small { font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--g-soft); }
body.te .gs-tok small { letter-spacing:.02em; }

/* ------------------------------------------------------------------ More */
.gs-lang { padding:16px; }
.gs-lang-t { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.gs-lang-t > span:last-child { min-width:0; display:flex; flex-direction:column; }
.gs-lang-t b { font-size:16px; font-weight:600; color:var(--g-ink); }
.gs-lang-t small { font-size:13.5px; font-weight:500; color:var(--g-soft); line-height:1.35; }
.gs-list { padding:4px 0; overflow:hidden; }
.gs-row { display:flex; align-items:center; gap:13px; width:100%; min-height:64px; padding:9px 12px 9px 14px; margin:0; border:0; border-radius:0; background:none;
  box-shadow:none; text-align:left; text-decoration:none; cursor:pointer; color:var(--g-ink); font:inherit; position:relative; }
.gs-row + .gs-row, .gs-howto + .gs-row { border-top:1px solid var(--g-rail); }
.gs-lbl { flex:1; min-width:0; display:flex; flex-direction:column; }
.gs-lbl b { font-size:15.5px; font-weight:600; line-height:1.25; color:var(--g-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gs-lbl small { margin-top:1px; font-size:13px; font-weight:500; color:var(--g-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gs-row.danger .gs-lbl b { color:#B3341A; }
.gs-howto { margin:0 14px 10px 71px; padding:12px 14px; border-radius:16px; background:rgba(var(--fl-o-rgb),.08);
  font-size:13.5px; font-weight:500; line-height:1.45; color:var(--g-ink); }
.gs-howto p { margin:0 0 6px; } .gs-howto p:last-child { margin:0; }

/* ------------------------------------------------------------------ videos and explanations */
.gs-why { padding:18px 16px 16px; margin-bottom:12px; }
.gs-why > .gs-lead { margin-top:6px; }
.gs-intro { margin-top:14px; padding:14px; border-radius:20px; background:rgba(255,255,255,.62); border:1px solid var(--g-edge); }
.gs-for { display:block; font-size:13px; font-weight:600; color:#C2480A; }
.gs-intro p, .gs-ex p { margin:6px 0 0; font-size:14.5px; font-weight:500; line-height:1.5; color:var(--g-ink); }
.gs-ex { padding:14px 0 2px; margin-top:12px; border-top:1px solid var(--g-rail); }
.gs-ex-h { display:flex; align-items:center; gap:12px; }
.gs-ex-h h3 { flex:1; min-width:0; margin:0; font-size:16px; font-weight:600; letter-spacing:-.01em; color:var(--g-ink); }
.gs-ex-h .gs-pill { flex:none; }
.gs-ex p.gs-soft { font-size:14px; color:var(--g-soft); }

/* ------------------------------------------------------------------ offers */
.gs-offer { padding:18px 16px 16px; margin-bottom:14px; }
.gs-off-head { display:flex; align-items:flex-start; gap:12px; }
.gs-off-t { flex:1; min-width:0; }
.gs-off-t h2 { margin:3px 0 0; font-size:20px; font-weight:600; letter-spacing:-.025em; line-height:1.2; color:var(--g-ink); }
.gs-off-pc { flex:none; width:62px; height:62px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--g-orange); color:#fff; box-shadow:0 10px 20px rgba(238,90,14,0.13); margin-top:-4px; }
.gs-off-pc b { font-size:19px; font-weight:600; letter-spacing:-.03em; line-height:1; }
.gs-off-pc small { font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.gs-offer > .gs-lead { margin-top:10px; }
.gs-off-price { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-top:14px; padding:12px 14px; border-radius:18px;
  background:rgba(255,255,255,.7); border:1px solid var(--g-edge); }
.gs-off-price b { font-size:26px; font-weight:600; letter-spacing:-.035em; color:var(--g-ink); font-variant-numeric:tabular-nums; }
.gs-off-price s { font-size:15px; font-weight:500; color:var(--g-soft); }
.gs-off-count { margin:16px 2px 8px; }
.gs-off-items { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:7px 12px; }
.gs-off-items li { display:flex; align-items:flex-start; gap:8px; min-width:0; font-size:13.5px; font-weight:500; line-height:1.35; color:var(--g-ink); }
.gs-off-items li i { flex:none; width:18px; height:18px; margin-top:1px; border-radius:50%; background:var(--fl-o); position:relative; }
.gs-off-items li i::after { content:""; position:absolute; left:6px; top:3.5px; width:4px; height:8px; border:solid #fff; border-width:0 2.2px 2.2px 0; transform:rotate(45deg); }
.gs-off-note { display:flex; align-items:flex-start; gap:10px; margin:14px 0 0; padding:11px 13px; border-radius:16px; background:rgba(255,164,92,.2);
  font-size:13.5px; font-weight:500; line-height:1.45; color:#7A3A0C; }
.gs-bang { flex:none; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--g-orange);
  color:#fff; font-size:13px; font-weight:600; }

/* ------------------------------------------------------------------ X-rays */
.gs-xr { padding:16px; margin-bottom:12px; }
.gs-xr-h { display:flex; align-items:center; gap:12px; }
.gs-xr-none { display:flex; align-items:center; gap:14px; }
.gs-films { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.gs-film { width:104px; height:104px; padding:0; border:2px solid #fff; border-radius:18px; overflow:hidden; background:#0C1526; cursor:pointer;
  box-shadow:0 10px 20px rgba(16,24,40,0.11); }
.gs-film img { width:100%; height:100%; object-fit:contain; display:block; }
/* the film, full screen */
.gs-xv { position:fixed; inset:0; z-index:95; background:#05080F; display:flex; flex-direction:column; }
.gs-xv-bar { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 14px; padding-top:max(10px, env(safe-area-inset-top)); color:#fff; }
.gs-xv-bar b { font-size:17px; font-weight:600; }
.gs-xv-btns { display:flex; gap:8px; }
.gs-xv-b { min-width:44px; height:44px; padding:0 14px; border-radius:999px; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.14);
  color:#fff; font-size:18px; font-weight:600; cursor:pointer; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.gs-xv-close { font-size:14.5px; }
.gs-xv-pic { flex:1; overflow:auto; display:flex; align-items:center; justify-content:center; touch-action:pinch-zoom; }
.gs-xv-pic img { max-width:100%; max-height:100%; transform-origin:center; transition:transform .15s; }

/* ================================================================== health checks, like a lab chain's (3 Oct 2026)
   He showed a lab-chain app: "health checks - can we make like this". A grid of packages, a person on
   each with what the package looks at round them; one package opened puts the person in the middle
   with every kind of test named at the sides. Pictures from /app/img/check; until a picture exists,
   an organ is its bold icon on a solid chip and a person is the drawn face. */
.ho-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.ho-head span { font-size:13.5px; font-weight:500; color:var(--g-soft); white-space:nowrap; }
.ho-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
.ho-tile { display:flex; flex-direction:column; align-items:stretch; gap:2px; padding:8px 8px 12px; border-radius:24px; text-align:left;
  color:var(--g-ink); cursor:pointer; min-width:0; font:inherit; }
.ho-art { position:relative; display:block; aspect-ratio:1 / 1.08; border-radius:18px; overflow:hidden; margin-bottom:8px;
  background:radial-gradient(circle at 50% 38%, #FFFFFF 0%, #EEF4FC 70%, #E3EDFA 100%); }
.ho-tag { position:absolute; left:7px; top:7px; z-index:3; height:22px; padding:0 9px; border-radius:999px; background:#fff; color:var(--g-acc);
  font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; display:inline-flex; align-items:center;
  box-shadow:0 3px 8px rgba(16,24,40,0.05); }
body.te .ho-tag { letter-spacing:0; }
.ho-person { position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:64%; height:86%; display:block; }
.ho-person img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center bottom; z-index:1; }
.ho-face { position:absolute; left:50%; bottom:16%; transform:translateX(-50%); width:78%; aspect-ratio:1; border-radius:50%; overflow:hidden;
  border:3px solid #fff; box-shadow:0 10px 22px rgba(16,24,40,0.09); }
.ho-face svg { display:block; width:100%; height:100%; }
.ho-person img ~ .ho-face, .ho-person:has(img) .ho-face { display:none; }
.ho-slot { position:absolute; z-index:2; width:30%; aspect-ratio:1; }
.ho-slot.s0 { left:3%; top:18%; } .ho-slot.s1 { right:3%; top:18%; }
.ho-slot.s2 { left:1%; top:46%; } .ho-slot.s3 { right:1%; top:46%; }
.ho-slot.s4 { left:4%; top:72%; } .ho-slot.s5 { right:4%; top:72%; }
.ho-org { position:relative; display:block; width:100%; height:100%; }
.ho-org-chip { position:absolute; inset:14%; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff;
  background:var(--fl-o); box-shadow:0 6px 12px rgba(var(--fl-o-rgb),.3); }
.ho-org.o .ho-org-chip { background:var(--g-orange); box-shadow:0 6px 12px rgba(238,90,14,0.12); }
.ho-org-chip svg { width:52%; height:52%; stroke-width:2.1; }
.ho-org img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:1; filter:drop-shadow(0 4px 6px rgba(16,24,40,0.11)); }
.ho-org:has(img) .ho-org-chip { display:none; }
.ho-name { display:block; font-size:15.5px; font-weight:600; letter-spacing:-.02em; line-height:1.25; padding:0 4px; }
.ho-count { display:block; font-size:13px; font-weight:500; color:var(--g-soft); padding:0 4px; }
.ho-price { display:flex; flex-wrap:wrap; align-items:center; gap:4px 7px; margin-top:7px; padding:0 4px; }
.ho-price b { height:28px; padding:0 10px; border-radius:999px; display:inline-flex; align-items:center; background:var(--g-ink); color:#fff;
  font-size:14.5px; font-weight:600; font-variant-numeric:tabular-nums; }
.ho-price s { font-size:13px; font-weight:500; color:var(--g-soft); }
.ho-pc { font-size:12.5px; font-weight:600; color:#C2480A; text-transform:uppercase; white-space:nowrap; }

/* one package opened */
.ho-top { display:flex; align-items:center; gap:12px; margin:4px 0 12px; }
.ho-back { width:44px; height:44px; border-radius:50%; border:1px solid var(--g-edge); background:var(--g-glass); color:var(--g-ink);
  font-size:24px; font-weight:500; line-height:1; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(16,24,40,0.05); }
.ho-hero { padding:20px 14px 0; text-align:center; overflow:hidden; }
.ho-hero h1 { margin:0; font-size:26px; font-weight:600; letter-spacing:-.03em; line-height:1.15; color:var(--g-ink); }
.ho-blurb { margin:6px 0 0; font-size:15px; font-weight:500; color:var(--g-ink); }
.ho-hero .ho-count { margin-top:4px; }
.ho-line { margin:10px auto 0; max-width:30em; padding:9px 0 0; border-top:1px solid var(--g-rail); font-size:13px; font-weight:500; line-height:1.55; color:var(--g-ink); }
.ho-stage { display:grid; grid-template-columns:88px 1fr 88px; align-items:stretch; gap:4px; margin-top:14px; min-height:330px; }
.ho-side { display:flex; flex-direction:column; justify-content:space-around; gap:10px; padding:6px 0 16px; }
.ho-lab { display:flex; flex-direction:column; align-items:center; gap:4px; }
.ho-lab .ho-org { width:62px; height:62px; }
.ho-lab b { font-size:13px; font-weight:600; line-height:1.2; color:var(--g-ink); }
.ho-mid { position:relative; display:block; min-height:320px; }
.ho-mid .ho-person { width:100%; height:100%; }
.ho-mid .ho-face { width:92%; bottom:auto; top:50%; transform:translate(-50%, -50%); }
.ho-mid .ho-person img { object-position:center; }
.ho-buy { margin-top:12px; }

/* "Beside the person the icons are too big, not good" (3 Oct 2026): small, each in its own white
   circle, standing clear of the person - the person is the picture, the organs are the labels. */
.ho-slot { width:21%; }
.ho-slot.s0 { left:4%; top:22%; } .ho-slot.s1 { right:4%; top:22%; }
.ho-slot.s2 { left:2%; top:47%; } .ho-slot.s3 { right:2%; top:47%; }
.ho-slot.s4 { left:5%; top:72%; } .ho-slot.s5 { right:5%; top:72%; }
.ho-slot .ho-org { border-radius:50%; background:#fff; box-shadow:0 4px 10px rgba(16,24,40,0.07); }
.ho-slot .ho-org img { inset:14%; width:72%; height:72%; filter:none; }
.ho-person { width:58%; height:88%; }
.ho-lab .ho-org { width:50px; height:50px; border-radius:50%; background:#fff; box-shadow:0 5px 12px rgba(16,24,40,0.07); }
.ho-lab .ho-org img { inset:13%; width:74%; height:74%; filter:none; }
.ho-lab b { font-size:12.5px; }
.ho-stage { grid-template-columns:76px 1fr 76px; }

/* "How cute the capzul theme - clean, good fonts, and written below each icon" (3 Oct 2026): the
   package opened shows its person on a clean white panel, each organ as itself (no circle) with its
   name under it in plain, calm lettering - the look of a printed health chart, not of buttons. */
.ho-stage { background:#fff; border-radius:22px; margin:14px -6px 0; padding:10px 6px 0; min-height:360px;
  grid-template-columns:84px 1fr 84px; box-shadow:inset 0 0 0 1px rgba(12,21,38,.05); }
.ho-lab { gap:6px; }
.ho-lab .ho-org { width:60px; height:60px; background:none; box-shadow:none; border-radius:0; }
.ho-lab .ho-org img { inset:0; width:100%; height:100%; filter:drop-shadow(0 3px 4px rgba(16,24,40,0.08)); }
.ho-lab b { font-size:14px; font-weight:500; letter-spacing:0; color:#1A2233; text-align:center; }
body.te .ho-lab b { font-size:13.5px; }
.ho-hero h1 { font-weight:500; }
.ho-blurb { font-weight:500; }
.ho-line { font-weight:500; color:#2A3346; }
.ho-price b { background:var(--fl-o); }      /* the price in the brand orange, as capzul's is in its green */

/* The front door, like a food-delivery app opens: the hospital's whole logo, large, on the white
   page - no circle, no frame (3 Oct 2026). */
.gs-brand { margin:22px 0 18px; }
.gs-logo { display:block; width:min(250px, 70vw); height:auto; margin:0 auto; }

/* Health checks: the organs as plain cut-outs beside the person - no white circle round them
   ("with round circle of white looks bad, just cut out will be good", 3 Oct 2026). */
.ho-slot .ho-org, .ho-lab .ho-org { background:none !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; }
.ho-slot .ho-org img, .ho-lab .ho-org img { inset:0 !important; width:100% !important; height:100% !important;
  filter:drop-shadow(0 2px 3px rgba(16,24,40,.16)) !important; }
.ho-slot { width:20%; }

/* The picture of the kind of package (cancer screening, diabetes, fever...) on a tile's corner and beside its name. */
.ho-art .ho-kind { position:absolute; right:6px; top:6px; z-index:3; width:40px; height:40px; object-fit:contain;
  background:#fff; border-radius:50%; padding:5px; box-shadow:0 6px 14px -8px rgba(16,23,37,.5); }
.ho-hero h1 .ho-kind { width:34px; height:34px; object-fit:contain; vertical-align:-7px; margin-right:8px; }

/* 5 Oct 2026, with capzul's screens beside it: "in the app make him small and icons also small in
   cute look... see how cute they have written names also". So a tile keeps the small person and the
   small round icons of 3 Oct; a package opened has the person in the middle and, each side, small
   round icons with the TEST's own short name under each. The photographs end at the waist, so the
   person fades out at the foot instead of stopping in a straight cut ("why person got cut"). */
.ho-person img, .gh-offer-who { -webkit-mask-image:linear-gradient(to bottom, #000 82%, transparent 100%); mask-image:linear-gradient(to bottom, #000 82%, transparent 100%); }
.ho-art .ho-kind { width:34px; height:34px; padding:4px; right:7px; top:7px; }
/* a tile: the person small in the middle, the organs small around him */
.ho-person { width:46%; height:78%; }
.ho-slot { width:15%; }
.ho-slot.s0 { left:12%; top:24%; } .ho-slot.s1 { right:12%; top:24%; }
.ho-slot.s2 { left:7%; top:46%; } .ho-slot.s3 { right:7%; top:46%; }
.ho-slot.s4 { left:12%; top:68%; } .ho-slot.s5 { right:12%; top:68%; }
.ho-stage { grid-template-columns:84px 1fr 84px; min-height:372px; }
.ho-mid { min-height:360px; }
.ho-mid .ho-person img { inset:auto auto 0 -16%; width:132%; max-width:none; height:auto; }
.ho-side { position:relative; z-index:2; justify-content:space-evenly; }
.ho-lab .ho-org { width:46px; height:46px; }
.ho-lab b { font-size:12.5px; font-weight:600; line-height:1.2; text-align:center; max-width:84px; }

/* "Free doctor consultation": his own stamp picture (5 Oct 2026) - on the corner of a tile, and
   beside the person when a package is opened, never over the face. And a few words under each test. */
.stamp { display:block; object-fit:contain; transform:rotate(-10deg); filter:drop-shadow(0 3px 5px rgba(120,40,0,.3)); }
.ho-art .stamp { position:absolute; left:3px; bottom:4px; z-index:4; width:48px; height:48px; }
.ho-mid .stamp { position:absolute; right:-18px; bottom:18px; z-index:4; width:84px; height:84px; }
.ho-free { display:flex; align-items:center; gap:12px; margin:14px 0 0; padding:10px 12px; border-radius:18px; background:#FFF5F3; border:1px dashed #F0B4AE; }
.ho-free .stamp { flex:none; width:58px; height:58px; }
.ho-free b { display:block; font-size:14.5px; font-weight:700; color:#A31616; }
.ho-free small { display:block; font-size:12.5px; line-height:1.35; color:var(--g-soft, #5B6474); margin-top:2px; }
.gs-off-items.told { grid-template-columns:1fr; gap:10px; }
.gs-off-items.told li span { display:block; min-width:0; }
.gs-off-items.told li b { display:block; font-size:14px; font-weight:600; }
.gs-off-items.told li small { display:block; font-size:12.5px; line-height:1.35; font-weight:400; color:var(--g-soft, #5B6474); margin-top:1px; }
/* the package's own picture as a plain cut-out too - no circle round it */
.ho-art .ho-kind { background:none; box-shadow:none; padding:0; border-radius:0; filter:drop-shadow(0 2px 3px rgba(16,24,40,.2)); }

/* Booking a package from the phone (5 Oct 2026). */
.ho-book, .ho-booked { margin-top:14px; display:grid; gap:10px; }
.ho-book label { font-size:13.5px; font-weight:600; color:var(--g-ink); }
.ho-book input[type="date"] { width:100%; min-height:48px; padding:0 14px; border-radius:16px; border:1px solid var(--g-edge, #E3E8EF); background:#fff; font:inherit; font-size:16px; color:var(--g-ink); }
.ho-book-row { display:grid; gap:8px; }
.gs-quiet-btn { min-height:48px; border-radius:999px; border:1px solid var(--g-edge, #E3E8EF); background:#fff; color:var(--g-ink); font:inherit; font-size:15px; font-weight:600; cursor:pointer; }
.ho-ask { border:0; background:none; color:var(--g-acc); font:inherit; font-size:14px; font-weight:600; padding:6px 0; cursor:pointer; }
.ho-booked { padding:12px 14px; border-radius:18px; background:#F1FAF4; border:1px solid #CDEBD8; }
.ho-booked b { font-size:15.5px; color:#0F6B41; }
.ho-booked small { font-size:13px; color:var(--g-soft, #5B6474); }
.ho-fast { margin:2px 0 0; padding:8px 10px; border-radius:12px; background:#FFF7E6; color:#7A4B00; font-size:13.5px; font-weight:600; }

/* No code yet: the two ways to get one, as a sheet over the sign-in page (5 Oct 2026). */
.gs-nocode { display:block; width:100%; margin:14px 0 0; padding:14px 16px; border:1.5px solid rgba(238,90,14,.35); border-radius:18px;
  background:rgba(255,255,255,.72); color:#C2410C; font:inherit; font-size:15.5px; font-weight:600; -webkit-tap-highlight-color:transparent; }
.gs-nocode:active { transform:scale(.98); }
.gs-pop { position:fixed; inset:0; z-index:80; display:flex; align-items:flex-end; justify-content:center; background:rgba(16,24,40,.46); animation:gs-pop-in .18s ease; }
.gs-pop-card { position:relative; box-sizing:border-box; width:100%; max-width:480px; max-height:94vh; overflow-y:auto;
  padding:22px 18px calc(20px + env(safe-area-inset-bottom)); border-radius:26px 26px 0 0; background:#fff;
  box-shadow:0 -12px 40px rgba(16,24,40,.22); animation:gs-pop-up .24s cubic-bezier(.2,.8,.2,1); }
.gs-pop-card h2 { margin:0 40px 14px 2px; font-size:21px; font-weight:600; letter-spacing:-.02em; color:var(--g-ink); }
.gs-pop-x { position:absolute; top:14px; right:14px; width:36px; height:36px; border:0; border-radius:50%; background:rgba(16,24,40,.07);
  font-size:22px; line-height:1; color:var(--g-ink); }
.gs-way { display:flex; gap:12px; align-items:center; padding:12px 14px; border-radius:18px; background:rgba(255,164,92,.16); }
.gs-way i { flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#EE5A0E; color:#fff;
  font-style:normal; font-size:15px; font-weight:700; }
.gs-way b { display:block; font-size:15.5px; font-weight:600; color:var(--g-ink); }
.gs-way span { display:block; margin-top:2px; font-size:13.5px; font-weight:500; line-height:1.4; color:var(--g-soft); }
.gs-or { margin:8px 0; text-align:center; font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--g-soft); }
.gs-ask { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.gs-ask .gs-cta { margin-top:4px; }
input.gs-plain { box-sizing:border-box; width:100%; padding-left:16px; padding-right:16px; font-size:17px; letter-spacing:0; background:#F6F8FC; }
.gs-two { display:flex; gap:10px; align-items:stretch; }
.gs-two input.gs-plain { flex:0 0 88px; width:88px; text-align:center; }
.gs-sex { flex:1; display:flex; gap:6px; }
.gs-sex button { flex:1; min-width:0; padding:0 4px; border:1.5px solid rgba(16,24,40,.12); border-radius:16px; background:#F6F8FC;
  font:inherit; font-size:14.5px; font-weight:600; color:var(--g-ink); -webkit-tap-highlight-color:transparent; }
.gs-sex button.on { border-color:#EE5A0E; background:#EE5A0E; color:#fff; }
.gs-hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.gs-asked { padding:8px 4px 2px; text-align:center; }
.gs-asked i { display:grid; place-items:center; width:58px; height:58px; margin:0 auto 12px; border-radius:50%; background:#16A34A; color:#fff;
  font-style:normal; font-size:30px; font-weight:700; }
.gs-asked h2 { margin:0 0 6px; }
.gs-asked p { margin:0 6px 6px; font-size:15px; font-weight:500; line-height:1.5; color:var(--g-soft); }
@keyframes gs-pop-in { from { opacity:0; } to { opacity:1; } }
@keyframes gs-pop-up { from { transform:translateY(40px); opacity:.4; } to { transform:none; opacity:1; } }
@media (min-width:560px) { .gs-pop { align-items:center; } .gs-pop-card { border-radius:26px; } }
@media (prefers-reduced-motion: reduce) { .gs-pop, .gs-pop-card { animation:none; } }