/*
  healthkiosk.info - the little that clinicsoncloud.com's own stylesheet does not
  already cover.

  Everything visible here that also exists on the main site is drawn by the main
  site's compiled CSS, fetched at build time: the background ramp, the type, the
  buttons, .section, .sec-head, the certification strip and the whole
  full-body-screening layout. What follows is only this page's own furniture -
  a header, a stat row, a checklist, a form - written against the same tokens so
  it cannot drift from the rest.
*/

/* The main site loads Poppins through next/font, which sets --font-poppins on a
   class this page does not have. Same family, from Google, bound to the same
   variable so every rule that reads it resolves. */
:root {
  --font-poppins: 'Poppins';
  --ha-gap: 18px;
}

/* ---------- header ----------
   The bar is the main site's, so there is nothing to style. The one thing it
   cannot know is that this page has no router: .nav-links a.on marks the current
   page there, and here every link is an anchor down this one page. */
.nav-links a[href^="http"] { color: var(--teal); }

/* ---------- hero ----------
   Measured off the live .hero rather than read from the source, because the
   source declares 168px of top padding and a later media query cuts it to 100.
   What clinicsoncloud.com actually draws at 1440 is 100px 40px 60px, 1400px
   wide, 1.05fr against 1fr with 20px between - and 104px of top padding once the
   bar loses its second row below 900. Those are the numbers used here.

   One thing is deliberately not copied: the main site holds min-height:100vh so
   its headline owns the first screen. A guide should be showing its first
   paragraph by then. */
.ha-hero {
  max-width: 1400px; margin: 0 auto; padding: 100px 40px 60px;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 20px; align-items: center;
}
/* The kiosk, its orbiting vitals and the watermark behind the copy are all the
   main site's: .stage-wrap, #stage, .scene, .kiosk-photo, .kp-glow, .node,
   .chip, .kp-ecg, .hint, .scanline and .hero-wm come from its stylesheet, and
   the chips are placed by the same arithmetic OrbitKiosk uses. */
.ha-hero-shot { position: relative; }
.ha-hero .sec-eyebrow { display: block; margin-bottom: 14px; }
.ha-hero h1 { font-family: var(--font-sora), sans-serif; font-weight: 600; letter-spacing: -.02em; line-height: 1.12; font-size: clamp(34px, 5vw, 58px); margin: 0 0 18px; }
.ha-hero .hero-actions { margin-top: 28px; }
@media (max-width: 980px) {
  .ha-hero { grid-template-columns: 1fr; padding: 104px 40px 40px; }
  .ha-hero-shot { order: -1; }
}

/* ---------- shared blocks ----------
   One rhythm: 34px under a heading, 18px between anything that repeats.

   A section head carries a heading and one paragraph. Where it has two they
   need a gap - .sec-head p has none of its own, so a second paragraph ran
   straight on from the first and the pair read as one block of text. */
.sec-head p + p { margin-top: 14px; }
.ha-stats, .ha-cards, .ha-steps, .ha-faq { margin-top: 34px; }

/* The main site's comparison block always follows a .sec-head, which carries its
   own bottom margin, so .vs has none of its own. Here it follows the stats row,
   and the two boxes met with nothing between them. */
.ha-stats + .vs { margin-top: 34px; }
.ha-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ha-gap); }
.ha-stats > div { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px; text-align: center; }
.ha-stats b { display: block; font-size: 32px; font-weight: 600; background: linear-gradient(100deg, var(--blue-light), var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ha-stats span { font-size: 13px; color: var(--muted); }
@media (max-width: 760px) { .ha-stats { grid-template-columns: repeat(2, 1fr); } }

.ha-cards { display: grid; gap: var(--ha-gap); }
.ha-c4 { grid-template-columns: repeat(4, 1fr); }
.ha-c2 { grid-template-columns: repeat(2, 1fr); }
.ha-c3 { grid-template-columns: repeat(3, 1fr); }
.ha-cards > div { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px; position: relative; overflow: hidden; }
.ha-cards > div::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--accent-line), transparent); }
.ha-cards h3, .ha-steps h3 { font-family: var(--font-sora), sans-serif; font-size: 18px; font-weight: 600; margin: 0 0 9px; }
.ha-cards p, .ha-steps p { margin: 0; color: var(--muted); }
@media (max-width: 900px) { .ha-c4, .ha-c3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .ha-c2 { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .ha-c4, .ha-c3 { grid-template-columns: 1fr; } }

.ha-steps { counter-reset: s; display: grid; gap: 14px; }
.ha-steps > div { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px 20px 84px; position: relative; }
.ha-steps > div::before {
  counter-increment: s; content: counter(s);
  position: absolute; left: 22px; top: 20px;
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--teal), var(--teal-deep)); font-weight: 600; font-size: 17px;
}
@media (max-width: 620px) { .ha-steps > div { padding: 74px 20px 20px; } }

.ha-check { list-style: none; padding: 0; margin: 34px 0 0; display: grid; gap: 14px; max-width: 860px; }
.ha-check li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; color: var(--muted); }
.ha-check li::before { content: '✓'; color: var(--blue-light); font-weight: 700; }

/* Two across, for a list long enough that one column runs past whatever sits
   beside it. The single-column .ha-check stays the default. */
.ha-check-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 40px; max-width: none; }
@media (max-width: 820px) { .ha-check-2 { grid-template-columns: 1fr; } }
.ha-check b { color: #fff; font-weight: 600; }

/* ---------- the parameter sheet ----------
   .pm-backdrop, .pm-sheet, .pm-close, .pm-head, .pm-ico, .pm-count and .pm-list
   are all the main site's own rules. Two things it does in React that have to be
   said here: the backdrop is a flex centring box (framer-motion set that), and
   `hidden` has to beat that display. */
.pm-backdrop { display: flex; align-items: center; justify-content: center; }
.pm-backdrop[hidden] { display: none; }
#spec-data { display: none; }
/* the small mark before each parameter, which the main site animates in */
.pm-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--blue-light); flex: none; }

/* ---------- faq ---------- */
.ha-faq details { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px; margin-bottom: 12px; }
.ha-faq summary { cursor: pointer; font-weight: 500; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.ha-faq summary::-webkit-details-marker { display: none; }
.ha-faq summary::after { content: '+'; color: var(--blue-light); font-size: 20px; line-height: 1; }
.ha-faq details[open] summary::after { content: '−'; }
.ha-faq p { margin: 14px 0 0; font-size: 15px; color: var(--muted); }

/* ---------- contact ----------
   .contact-wrap, .contact-methods, .contact-method, .cm-ico, .cm-label,
   .contact-form-card, .contact-form, .cf-intro, .cf-row, .cf-note and the
   select's .placeholder state are all the main site's own rules. Two things it
   does in React that have to be said here: the note is hidden until there is
   something to say, and the phone field is a plain input rather than its
   country-code component, which would be a whole library for one box. */
.cf-note[hidden] { display: none; }
/* laid out off the side of the page rather than display:none - a script that
   skips what is not rendered walks around a hidden field, and this is bait */
.ha-bait { position: absolute; left: -5000px; }

/* ---------- footer ---------- */
.ha-foot { background: var(--navy); border-top: 1px solid var(--line); padding: 40px 0; position: relative; z-index: 1; }
.ha-foot-in { max-width: 1200px; margin: 0 auto; padding: 0 40px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; }
.ha-foot p { margin: 0; font-size: 13px; color: var(--muted); }
.ha-foot a { color: var(--blue-light); }
@media (max-width: 900px) { .ha-foot-in { padding: 0 22px; } }

/* ---------- the film player and the client cards ----------
   .vidm, .vidm-frame, .vidm-tabs, .bro-x/.vidm-x, .mnav-veil, .cv-grid,
   .cv-card, .cv-thumb, .cv-play and .cv-body are all the main site's. Three
   things it does in React that have to be said here: the wrapper that holds the
   veil and the sheet together draws nothing itself, `hidden` has to beat that,
   and the thumbnail is a YouTube still rather than a poster from the portal. */
#vm { display: contents; }
#vm[hidden] { display: none; }
.vidm-tabs[hidden] { display: none; }
.cv-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cv-more { margin-top: 28px; text-align: center; }

/* ---------- reading weight ----------
   The one place this page deliberately parts from the main site.

   Body copy there is Poppins 300, which is right for a marketing page read in
   glances - a headline, a caption, a stat. This page is a guide somebody reads
   end to end, and at 300 the paragraphs were reported as too faint to settle
   into. 400 is one step, the colour is untouched at var(--muted), and headings,
   labels and eyebrows keep their own weights. */
.ha-hero .lede,
.sec-head p,
.ha-cards p,
.ha-steps p,
.ha-check li,
.ha-faq p,
.cv-body p,
.cf-intro {
  font-weight: 400;
}

/* ---------- the smart report ----------
   Nothing of this section is written here. .report-grid, .report-stage,
   .report-glow, .rdevice-wrap, .rchip, .rdevice, .rd-scan, .rd-head, .rd-ava,
   .rd-pill, .rd-score, .rd-ring, .rd-vitals, .rd-vital, .rd-sent, .ow-card and
   .ow-row are all the main site's, and the ring's arc is drawn by its own rule.
   The first attempt at this section was a card of my own invention; it did not
   look like the site because it was not from it. */

/* ---------- reading weight ----------
   The one place this page deliberately parts from the main site.

   Body copy there is Poppins 300, which is right for a marketing page read in
   glances - a headline, a caption, a stat. This page is a guide somebody reads
   end to end, and at 300 the paragraphs were reported as too faint to settle
   into. 400 is one step, the colour is untouched at var(--muted), and headings,
   labels and eyebrows keep their own weights. */
.ha-hero .lede,
.sec-head p,
.ha-cards p,
.ha-steps p,
.ha-check li,
.ha-faq p,
.cv-body p,
.cf-intro {
  font-weight: 400;
}

/* ---------- the smart report ----------
   The main site draws this with a device mock-up the client supplied; here the
   four points sit beside a small card standing in for the printed sheet. The
   rows and the card use .aiico and the shared card tokens, so nothing new is
   invented - only arranged. */
.ha-report {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 34px;
  align-items: start;
  margin-top: 34px;
}
/* the four points are one column beside the card, not four cells inside the
   grid - left as direct children they filled the card's column too */
.ha-report-rows { display: grid; gap: 22px; }
.ha-report-row { display: grid; grid-template-columns: 44px 1fr; gap: 16px; }
.ha-report-row b { display: block; font-weight: 600; font-size: 16px; margin-bottom: 4px; }
.ha-report-row p { margin: 0; color: var(--muted); font-weight: 400; }
.ha-report-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 24px;
  display: grid; gap: 4px;
}
.ha-report-card b { font-weight: 600; font-size: 17px; }
.ha-report-card small { color: var(--muted); font-size: 12px; }
.ha-score { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 12px; }
.ha-score b {
  font-size: 44px; font-weight: 600; line-height: 1;
  background: linear-gradient(100deg, var(--blue-light), var(--pink));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ha-score span { font-size: 12px; color: var(--muted); }
.ha-chips { display: grid; gap: 8px; }
.ha-chips span {
  display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--muted);
  background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px;
}
.ha-chips i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
@media (max-width: 860px) { .ha-report { grid-template-columns: 1fr; } }


/* ---------- the brochure form ----------
   .ha-form is this site's own class and had no rules at all: the labels stayed
   inline, the inputs fell back to the browser's, and the button floated over
   the last field. The main site styles .contact-form and nothing else, so the
   shape has to be said here. Matched to it deliberately - same radius, same
   border, same field background - so the sheet does not read as a second
   designer's work. */
.ha-form { display: grid; gap: 6px; }
.ha-form label { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--muted); }
.ha-form label + input { margin-bottom: 10px; }
.ha-form input {
  width: 100%; padding: 13px 15px; border-radius: 11px;
  border: 1px solid var(--line); background: rgba(6, 32, 58, .6);
  color: var(--ink); font-family: inherit; font-size: 14px; outline: none;
  transition: border-color .2s;
}
.ha-form input:focus { border-color: var(--blue-light); }
.ha-form input::placeholder { color: var(--muted); }
.ha-form .btn-primary { margin-top: 8px; width: 100%; justify-content: center; }
.ha-said { margin: 10px 0 0; font-size: 13px; color: var(--muted); min-height: 18px; }