/*
  telemedicinehealthatm.com - 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; }


/* ---------------------------------------------------------------------------
   telemedicinehealthatm.com only. Three classes the main site has no equivalent for -
   written here rather than left to inherit nothing, because a class of ours
   that nobody styled is how two of these sites shipped with a broken form.
   --------------------------------------------------------------------------- */

/* Three figures, not four. .ha-stats is a four-column grid on the sibling
   sites; three items in it leave a hole the width of a card. */
.ha-stats-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .ha-stats-3 { grid-template-columns: 1fr; } }

/* The caveat under a section - smaller than the prose, and deliberately not a
   card, because it qualifies what is above rather than adding to it. */
.ha-note {
  margin: 26px auto 0;
  max-width: 760px;
  text-align: center;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

/* A quotation from the client's own published answer. It is set apart because
   the whole point is that these are their words and not ours. */
.ha-quote {
  margin-top: 34px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--pink);
  border-radius: 16px;
  padding: 26px 30px;
}
.ha-quote p { margin: 0; font-size: 17px; line-height: 1.75; color: #fff; }
.ha-quote span { display: block; margin-top: 12px; font-size: 13px; color: var(--muted); }
@media (max-width: 700px) { .ha-quote { padding: 20px 22px; } .ha-quote p { font-size: 15.5px; } }


/* ---------------------------------------------------------------------------
   The three pieces this page has that no other site of ours does. The main
   stylesheet drives everything else - these exist because the subject needed a
   shape the main site has never had to draw.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   The menu on a phone.

   clinicsoncloud.com's stylesheet hides .nav-links and the contact strip below
   1100px - its own shell swaps in a hamburger there, and these static pages do
   not have that shell. So the header lost every link on the width most people
   read this at. The button and the panel below are ours; they appear at exactly
   the width the main stylesheet takes the links away.
   --------------------------------------------------------------------------- */
.kmenu-btn {
  display: none;
  margin-left: auto;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  cursor: pointer;
}
.kmenu-btn:hover { background: rgba(255, 255, 255, 0.12); }
.kmenu {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 60;
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px 18px;
  background: #0d2b4a;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}
.kmenu[hidden] { display: none; }
.kmenu a {
  padding: 13px 8px;
  font-size: 15.5px;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.kmenu a:last-child { border-bottom: 0; }
.kmenu .kmenu-call { color: var(--blue-light); font-size: 14.5px; }
.kmenu .kmenu-cta {
  margin-top: 12px;
  padding: 13px;
  text-align: center;
  border-radius: 999px;
  border-bottom: 0;
  background: linear-gradient(135deg, var(--pink), #d92f5c);
  font-weight: 600;
}
@media (max-width: 1100px) {
  .kmenu-btn { display: inline-flex; }
  .kmenu.on { display: flex; }
}


/* ---------------------------------------------------------------------------
   The map: four spokes, a line, and the hub they report to.

   Drawn rather than photographed, because what matters is which way things
   travel - screenings up to the hub, a consultation back - and a photograph of
   a machine cannot say that. The pulse on the line is the same idea as the
   heartbeat divider under the hero, turned into traffic.
   --------------------------------------------------------------------------- */
.hubmap { margin-top: 40px; }
.hubmap-spokes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.hubmap-spoke {
  position: relative;
  padding: 20px 20px 26px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
}
/* the drop from each card to the line below it */
.hubmap-spoke::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -22px;
  width: 2px;
  height: 22px;
  background: linear-gradient(180deg, var(--blue-light), rgba(116, 194, 240, 0.15));
}
.hubmap-spoke h3 { margin: 0 0 8px; font-size: 17px; font-weight: 600; color: #fff; }
.hubmap-spoke p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--muted); }
.hubmap-line {
  position: relative;
  height: 2px;
  margin: 22px 12.5% 0;
  background: linear-gradient(90deg, var(--blue-light), var(--pink));
  opacity: 0.55;
}
/* traffic, travelling to the middle from both ends */
.hubmap-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
  background-size: 22% 100%;
  background-repeat: no-repeat;
  animation: hubflow 3.8s linear infinite;
}
@keyframes hubflow {
  0% { background-position: -22% 0; }
  100% { background-position: 122% 0; }
}
.hubmap-hub {
  position: relative;
  margin: 22px auto 0;
  max-width: 720px;
  padding: 26px 30px;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 0 0 6px rgba(249, 87, 127, 0.06);
}
/* the drop from the line into the hub */
.hubmap-hub::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -22px;
  width: 2px;
  height: 22px;
  background: linear-gradient(180deg, rgba(249, 87, 127, 0.15), var(--pink));
}
.hubmap-tag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(249, 87, 127, 0.14);
  color: var(--pink);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}
.hubmap-hub h3 { margin: 0 0 10px; font-size: 20px; font-weight: 600; color: #fff; }
.hubmap-hub p { margin: 0; font-size: 15px; line-height: 1.8; color: var(--muted); }
@media (max-width: 900px) {
  .hubmap-spokes { grid-template-columns: repeat(2, 1fr); }
  .hubmap-spoke::after { display: none; }
  .hubmap-line { margin: 26px 20% 0; }
}
@media (max-width: 560px) {
  .hubmap-spokes { grid-template-columns: 1fr; }
  .hubmap-hub { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .hubmap-line::after { animation: none; opacity: 0; }
}


/* ---------------------------------------------------------------------------
   Five shapes, one per section.

   The sibling sites share the main stylesheet's card grids, and four pages
   built from the same six components start to read as one page with the words
   swapped. Everything below is this site's own, and each piece is the shape its
   own section actually needs: photographs where the four products are told
   apart by looking, a ledger where the point is a handover, a track where the
   point is order, chips where the point is a list of names, numbered cards
   where the point is a question.
   --------------------------------------------------------------------------- */

/* PHOTOGRAPHS - the four form factors */
.pcards { margin-top: 34px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.pcard {
  margin: 0;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
}
/* contain, not cover. These four are shot at whatever shape the product is -
   the kiosk is 378x1100, the lounge is square, the van is landscape - and a
   fixed crop cut the top off a machine and the roof off a van. The tile keeps
   one height for all four; the picture sits inside it whole.

   The plate is light because that is how the shots are lit: dropped straight
   onto the dark page their white backgrounds looked like a rendering fault. */
.pcard-shot {
  position: relative;
  height: 260px;
  background: linear-gradient(180deg, #f6fafd, #e6eff8);
}
/* Sized to the tile and fitted inside it. max-height alone lost to a
   `width:100%; height:auto` rule in the main stylesheet, and the pictures came
   back out at their natural height - the 1100px-tall kiosk overflowing its own
   card. Filling the box and letting object-fit do the fitting cannot lose. */
/* Placed rather than sized. The main stylesheet carries `img { height: auto }`
   and it kept winning against a percentage height, so the 1100px-tall kiosk
   came out at 1100px inside a 260px tile. An inset box is a definite box, and
   object-fit then has something real to fit into. */
.pcard-shot img {
  position: absolute;
  inset: 16px;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  object-fit: contain;
}
.pcard figcaption { padding: 22px 24px 26px; }
.pcard h3 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.pcard-tag {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(116, 194, 240, 0.14);
  color: var(--blue-light);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.pcard p { margin: 0; font-size: 14.5px; line-height: 1.75; color: var(--muted); }
@media (max-width: 820px) { .pcards { grid-template-columns: 1fr; } .pcard-shot { height: 230px; } }

/* THE HUB LIST - a label and the thing it stands for */
.hublist { margin-top: 34px; border-top: 1px solid var(--line); }
.hublist-row {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 20px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--line);
}
.hublist-k {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pink);
  padding-top: 3px;
}
.hublist-row p { margin: 0; font-size: 15.5px; line-height: 1.75; color: var(--muted); }
@media (max-width: 700px) { .hublist-row { grid-template-columns: 1fr; gap: 6px; } }

/* THE LEDGER - two columns and the handover line between them */
.ledger {
  margin-top: 34px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 6px 26px 20px;
}
.ledger-head,
.ledger-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.ledger-head span {
  padding: 18px 24px 12px 0;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.ledger-head span:last-child,
.ledger-row > div:last-child { padding-left: 24px; }
.ledger-row > div {
  padding: 18px 24px 18px 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
  border-top: 1px solid var(--line);
}
/* the handover: everything left of it is theirs, everything right of it is yours */
.ledger-row > div:last-child,
.ledger-head span:last-child { border-left: 2px solid var(--pink); color: #fff; }
.ledger-head span:last-child { border-left-color: var(--pink); }
@media (max-width: 820px) {
  .ledger { padding: 6px 18px 16px; }
  .ledger-head { display: none; }
  .ledger-row { grid-template-columns: 1fr; }
  .ledger-row > div { padding: 14px 0; }
  .ledger-row > div:last-child { padding-left: 16px; }
}

/* THE TRACK - the rollout, in order, with where each stage sits */
.rollout {
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px 20px;
}
.rollout-stop { position: relative; padding-top: 34px; }
.rollout-stop::before {
  content: '';
  position: absolute;
  top: 13px;
  left: 34px;
  right: -20px;
  height: 1px;
  background: linear-gradient(90deg, rgba(116, 194, 240, 0.5), rgba(116, 194, 240, 0.08));
}
.rollout-stop:last-child::before,
.rollout-stop:nth-child(4n)::before { display: none; }
.rollout-n {
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--blue-light);
  color: var(--blue-light);
  font-size: 13px;
  font-weight: 600;
}
.rollout-stop h3 { margin: 0 0 8px; font-size: 16.5px; font-weight: 600; color: #fff; }
.rollout-stop p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--muted); }
@media (max-width: 1000px) { .rollout { grid-template-columns: repeat(2, 1fr); } .rollout-stop:nth-child(2n)::before { display: none; } }
@media (max-width: 620px) { .rollout { grid-template-columns: 1fr; } .rollout-stop::before { display: none; } }

/* THE NAMES - printed, because we hold no permission to print anybody's logo */
.namechips { margin-top: 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.namechips span {
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  font-size: 14px;
  color: #fff;
}
.namechips .more { color: var(--muted); border-style: dashed; }

/* THE QUESTIONS - numbered, because six of them is a list somebody works through */
.qcards { margin-top: 34px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.qcard {
  padding: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--line);
  border-radius: 16px;
}
.qcard-n {
  display: block;
  margin-bottom: 12px;
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  background: linear-gradient(100deg, var(--blue-light), var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.qcard h3 { margin: 0 0 10px; font-size: 16.5px; font-weight: 600; color: #fff; line-height: 1.45; }
.qcard p { margin: 0; font-size: 14.5px; line-height: 1.75; color: var(--muted); }
@media (max-width: 1000px) { .qcards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .qcards { grid-template-columns: 1fr; } }