/*
  medicalatm.co - 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; }


/* ---------------------------------------------------------------------------
   medicalatm.co 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 SHEET - the report set out the way it prints, rather than as a fourth
   grid of cards. The punched edge on the left is a repeating radial gradient,
   so there is no image to load and it survives any width. */
.sheet {
  margin-top: 34px;
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 8px 30px 26px 46px;
  overflow: hidden;
}
/* One hole per row, punched level with that row's title.
   The first version was a strip of holes at a fixed 46px pitch, which is a
   rhythm the rows do not keep - they are as tall as their own words - so the
   holes drifted against the lines they were meant to sit beside. Each row
   carries its own now, and cannot drift. */
.sheet-row::before,
.sheet-head::before {
  content: '';
  position: absolute;
  left: -28px;
  top: 24px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}
.sheet-head::before { top: 22px; }
.sheet-head {
  position: relative;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
  padding: 18px 0 12px;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.sheet-row {
  position: relative;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 4px 20px;
  padding: 18px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
}
.sheet-row:last-of-type { border-bottom: 0; }
/* The family name, with the dotted leader that makes the row read as a printed
   index rather than as a table cell: the dots are a repeating gradient filling
   whatever is left of the column after the words. */
.sheet-row b {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}
.sheet-row b::after {
  content: '';
  flex: 1;
  height: 1px;
  transform: translateY(-3px);
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.28) 1px, transparent 1.2px);
  background-size: 6px 2px;
}
.sheet-row > span { font-size: 14.5px; color: var(--blue-light); align-self: baseline; }
.sheet-row p { grid-column: 1 / -1; margin: 2px 0 0; font-size: 14px; line-height: 1.7; color: var(--muted); }
.sheet-foot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--muted);
}
@media (max-width: 760px) {
  .sheet { padding: 8px 20px 22px 34px; }
  .sheet-head { display: none; }
  .sheet-row { grid-template-columns: 1fr; padding: 16px 0; }
}

/* THE ASKER - a question on the left, an honest verdict on the right. Not the
   tab strip telemedkiosk uses: there the tabs are a tour, here each question
   has a colour-coded answer and two of the three colours mean "not here". */
/* stretch, not start: the panel is shorter than the six questions beside it,
   and a card that stops 60px above the column next to it reads as a mistake */
.asker { margin-top: 34px; display: grid; grid-template-columns: 330px 1fr; gap: 22px; align-items: stretch; }
.asker-qs { display: grid; gap: 8px; }
.asker-q {
  text-align: left;
  padding: 14px 16px;
  font: inherit;
  font-size: 15px;
  color: var(--muted);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s, transform 0.18s;
}
.asker-q:hover { color: #fff; border-color: var(--blue-light); transform: translateX(3px); }
.asker-q.on { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--blue), var(--blue-deep, #16528a)); }
.asker-as { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 30px; min-height: 260px; }
.asker-a[hidden] { display: none; }
.asker-a h3 { margin: 14px 0 12px; font-size: 22px; font-weight: 600; color: #fff; }
.asker-a p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.8; color: var(--muted); }
.asker-note {
  margin-top: 16px !important;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 14px !important;
}
/* the verdict, which is the whole point of the section */
.verdict {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}
.verdict.measured { background: rgba(116, 194, 240, 0.16); color: var(--blue-light); }
.verdict.flagged { background: rgba(249, 87, 127, 0.14); color: var(--pink); }
.verdict.lab { background: rgba(255, 255, 255, 0.08); color: #fff; }
.verdict.doctor { background: rgba(116, 194, 240, 0.1); color: #fff; border: 1px solid var(--line); }
@media (max-width: 900px) {
  .asker { grid-template-columns: 1fr; }
  .asker-qs { grid-template-columns: repeat(2, 1fr); }
  .asker-q:hover { transform: none; }
  .asker-as { padding: 22px; }
}
@media (max-width: 560px) { .asker-qs { grid-template-columns: 1fr; } }

/* THE RAIL - where the report goes, in order. Cards have no order; this does.
   The line is a pseudo-element behind the stops, and it turns vertical with the
   layout rather than disappearing. */
.rail {
  --rail-gap: 26px;
  margin-top: 40px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--rail-gap);
}
/* The line runs from the centre of the first dot to the centre of the last,
   which is arithmetic rather than a guess: four equal columns and three gaps
   put the last dot 75% + three-quarters of a gap along, and the dot's own
   centre is 8px in. Inset percentages had it starting and stopping in mid-air
   beside the end dots. */
.rail::before,
.rail::after {
  content: '';
  position: absolute;
  top: 7px;
  left: 8px;
  width: calc(75% + 0.75 * var(--rail-gap));
  height: 2px;
}
.rail::before {
  background: linear-gradient(90deg, var(--pink), var(--blue-light));
  opacity: 0.5;
}
/* and a pulse travelling along it, the same idea as the heartbeat divider
   under the hero: the report moving from one stop to the next. */
.rail::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
  background-size: 26% 100%;
  background-repeat: no-repeat;
  animation: railpulse 4.5s linear infinite;
}
@keyframes railpulse {
  0% { background-position: -26% 0; }
  100% { background-position: 126% 0; }
}
.rail-stop { position: relative; padding-top: 34px; }
.rail-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg, #0d2b4a);
  border: 2px solid var(--pink);
  box-shadow: 0 0 0 5px rgba(249, 87, 127, 0.12);
}
.rail-stop:nth-child(n + 3) .rail-dot { border-color: var(--blue-light); box-shadow: 0 0 0 5px rgba(116, 194, 240, 0.12); }
.rail-stop h3 { margin: 0 0 8px; font-size: 17px; font-weight: 600; color: #fff; }
.rail-stop p { margin: 0; font-size: 14.5px; line-height: 1.75; color: var(--muted); }
.rail-if {
  display: block;
  margin-top: 12px;
  padding-left: 12px;
  border-left: 2px solid var(--pink);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--muted);
  opacity: 0.9;
}
@media (max-width: 900px) {
  .rail { grid-template-columns: 1fr; gap: 22px; padding-left: 28px; }
  /* the same line, stood up: from the first dot's centre to the last one's */
  .rail::before,
  .rail::after {
    top: 12px;
    bottom: 12px;
    left: 7px;
    width: 2px;
    height: auto;
  }
  .rail::before { background: linear-gradient(180deg, var(--pink), var(--blue-light)); }
  .rail::after {
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.85), transparent);
    background-size: 100% 22%;
    animation-name: railpulse-y;
  }
  .rail-stop { padding-top: 0; padding-left: 0; }
  .rail-dot { left: -28px; top: 4px; }
}
@keyframes railpulse-y {
  0% { background-position: 0 -22%; }
  100% { background-position: 0 122%; }
}
/* Somebody who has asked for less movement gets the line and none of the
   travelling. */
@media (prefers-reduced-motion: reduce) {
  .rail::after { animation: none; opacity: 0; }
}


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