/* Volutracer OPUS - info page (QR on the simulator's main screen).
   Palette measured from the approved mockup (chatgpt_mockup_1.png):
   light blue page, white cards, navy titles, bright blue actions.
   Phone first; desktop from 900px. */

:root {
    --header-from: #1860c4;
    --header-to: #58a4f4;
    --navy: #0b2a7a;          /* h1, strong text */
    --title: #0b49b8;         /* h2 */
    --ink: #1c2b4f;           /* body text */
    --muted: #66718a;         /* secondary text */
    --blue: #0a6fc6;          /* buttons, links */
    --blue-hover: #085aa3;
    --icon: #0b63cc;          /* icons (stroke / solid) */
    --icon-tint: #bad7fb;     /* icons (light fill) */
    --bg: #edf4fc;
    --hero-bg: #e3eefc;
    --card: #ffffff;
    --soft: #f4f8fe;
    --line: #e4ecf7;
    --pill: #e2eefc;
    --pill-ink: #2f6cc4;
    --radius: 14px;
    --shadow: 0 1px 2px rgba(20, 60, 130, 0.04), 0 6px 20px rgba(20, 70, 150, 0.07);
    --wrap: 1200px;
    --gutter: 16px;
}

* { box-sizing: border-box; }
/* No grey/blue flash over tapped controls on phones (the page has its own states). */
html { -webkit-tap-highlight-color: transparent; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
    margin: 0;
    font-family: "Noto Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; }
h2 { color: var(--title); font-size: 1.4rem; font-weight: 800; letter-spacing: -0.01em; }
a { color: var(--blue); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* Icons: stroked; solid / tinted parts set their fill in the <symbol>. */
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic { width: 32px; height: 32px; color: var(--icon); flex: none; }
.ic-lg { width: 44px; height: 44px; color: var(--icon); stroke-width: 1.5; }
.ic-sm { width: 16px; height: 16px; }

/* Buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 42px; padding: 0 18px; border-radius: 8px;
    font: inherit; font-weight: 700; font-size: 0.95rem; text-decoration: none; cursor: pointer;
    border: 1.5px solid transparent; transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}
.btn-lg { min-height: 52px; padding: 0 30px; font-size: 1.02rem; }
.btn-block { width: 100%; }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 4px 12px rgba(10, 111, 198, 0.28); }
.btn-primary:hover { background: var(--blue-hover); }
.btn-outline { background: #fff; color: var(--blue); border-color: var(--blue); }
.btn-outline:hover { background: var(--soft); }
.btn-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.9); }
.btn-light:hover { background: rgba(255, 255, 255, 0.15); }
.btn-solid-on-blue { background: #fff; color: var(--blue); box-shadow: 0 2px 6px rgba(10, 50, 120, 0.15); }
.btn-solid-on-blue:hover { background: var(--soft); }
.link-btn { background: none; border: 0; padding: 4px 0; font: inherit; font-weight: 600; font-size: 0.92rem; color: var(--blue); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }

/* Header */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: linear-gradient(90deg, var(--header-from), var(--header-to));
    box-shadow: 0 2px 12px rgba(16, 70, 150, 0.18);
}
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 60px; }
.brand { display: flex; align-items: center; }   /* no inline line box: the logo sits truly centred */
.brand img { width: 74px; height: auto; display: block; }   /* trimmed file: no empty band under the logo */
.header-actions { display: flex; gap: 8px; }
.header-actions .btn { min-height: 34px; padding: 0 11px; font-size: 0.8rem; border-radius: 7px; }

/* Hero: photo on the right, faded into the light background. */
.hero { background: linear-gradient(180deg, var(--hero-bg) 0%, var(--bg) 100%); }
.hero-band { position: relative; overflow: hidden; }
.hero-band > .wrap { position: relative; }
.hero-photo {
    /* Phones: top-right, fading out to the left and at the bottom (as the mockup). */
    position: absolute; top: 0; bottom: 0; right: calc(-1 * var(--gutter)); width: 66%; max-height: 300px;
    background: url("assets/hero.webp") 78% center / cover no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.6) 18%, #000 40%), linear-gradient(180deg, #000 70%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.6) 18%, #000 40%), linear-gradient(180deg, #000 70%, transparent 100%);
    mask-composite: intersect;
}
.hero-text { position: relative; padding: 26px 0 22px; max-width: 62%; }
.hero h1 { color: var(--navy); font-size: 1.62rem; line-height: 1.18; font-weight: 800; letter-spacing: -0.015em; }
.lead { margin: 10px 0 18px; color: #42506e; font-size: 0.98rem; font-weight: 500; line-height: 1.45; }
.hero-actions { display: grid; gap: 10px; }
.hero-actions .btn-lg { min-height: 46px; padding: 0 18px; font-size: 0.98rem; }

/* Stats */
.stats {
    position: relative; list-style: none; margin: 0; padding: 16px 4px;
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
}
.stats li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 2px 4px; }
.stats li + li { border-left: 1px solid var(--line); }
.stats div { display: flex; flex-direction: column; }
.stats strong { color: var(--navy); font-size: 1rem; font-weight: 800; line-height: 1.25; white-space: nowrap; }
.stats strong b { display: block; font-weight: 700; font-size: 0.8rem; white-space: normal; }
.stats span { font-size: 0.74rem; font-weight: 500; color: var(--muted); line-height: 1.3; margin-top: 1px; }
/* Tappable stats: the whole cell is the button; a small chevron after the label. */
.stats li { position: relative; }
.stat {
    all: unset; box-sizing: border-box; cursor: pointer; width: 100%; height: 100%;
    display: flex; flex-direction: inherit; align-items: inherit; justify-content: inherit; text-align: inherit; gap: inherit;
    border-radius: 10px; padding: 2px 4px; transition: background 0.15s;
}
.stat:hover { background: var(--soft); }
.stat:focus-visible { outline: 3px solid rgba(10, 111, 198, 0.45); outline-offset: 2px; }
.stats li:has(> .stat) { padding: 0; }
/* Institutions popup: logo wall. */
.inst-panel { max-width: 1240px; }
.inst-grid { list-style: none; margin: 0; padding: 2px; display: grid; align-items: start; min-height: 0; grid-template-columns: repeat(2, 1fr); gap: 10px; overflow-y: auto; }
.inst { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; min-width: 0; }
.inst-logo { width: 100%; height: 92px; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); padding: 10px 12px; overflow: hidden; }
.inst-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.inst-name { font-size: 0.74rem; font-weight: 600; color: var(--navy); line-height: 1.25; }
.inst small { font-size: 0.68rem; color: var(--muted); font-weight: 500; margin-top: -2px; }
@media (min-width: 640px) { .inst-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .inst-grid { grid-template-columns: repeat(6, 1fr); } }
/* Full HD: all of them at once, no scrolling (10 across, smaller tiles). */
@media (min-width: 1400px) {
    .inst-panel { max-width: 1400px; }
    .inst-grid { grid-template-columns: repeat(11, 1fr); gap: 6px 8px; }   /* 61 logos: 6 rows of 11 */
    .inst-logo { height: 58px; padding: 5px 8px; border-radius: 8px; }   /* taller now there's no country line */
    .inst-name { font-size: 0.66rem; }
    .inst small { font-size: 0.6rem; }
}

/* World map popup. */
.map-panel { max-width: 1240px; }
.map-box { background: var(--soft); border-radius: 12px; padding: 10px; overflow: hidden; }   /* the zoomed-in start never shows scrollbars */
.map-zoom { transform-origin: 0 0; }
/* The DB-IP credit sits inside the map, bottom left. */
.map-frame { position: relative; }
.map-credit { position: absolute; left: 10px; bottom: 6px; font-size: 0.62rem; color: var(--muted); background: rgba(244, 248, 254, 0.85); padding: 1px 5px; border-radius: 4px; }
.map-credit a { color: inherit; }
.map-box svg { display: block; width: 100%; min-width: 560px; height: auto; max-height: calc(100dvh - 250px); }
/* Pins drop in when the popup opens (delays set per pin in the SVG). */
.map-box .drop { opacity: 0; }
.map-box.go .drop { animation: pin-drop 0.55s cubic-bezier(0.3, 0.9, 0.4, 1.25) both; }
@keyframes pin-drop {
    0% { opacity: 0; transform: translateY(-40px); }
    60% { opacity: 1; }
    100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .map-box .drop, .map-box.go .drop { animation: none; opacity: 1; } }
.stat-chev { width: 12px; height: 12px; margin-left: 3px; vertical-align: -1px; color: var(--blue); stroke-width: 2.6; }

/* Sections */
.section { padding: 26px 0 0; }
.section h2 { margin-bottom: 14px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.section-head h2 { margin: 0; }
.panel { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 16px; }
.sub { margin: 6px 0 0; color: var(--muted); font-size: 0.95rem; font-weight: 500; line-height: 1.45; }

/* What you can train */
.areas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.areas li {
    grid-column: span 2;
    background: var(--card); border-radius: 12px; box-shadow: var(--shadow);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    min-height: 108px; padding: 12px 8px; text-align: center;
    font-size: 0.86rem; font-weight: 600; color: var(--navy); line-height: 1.25;
}
.areas li:nth-child(4) { grid-column: 2 / span 2; }
.areas li:nth-child(5) { grid-column: 4 / span 2; }

/* "Explore all categories" tile: like the others, with a blue hint (border,
   tint, blue text) since it opens the categories modal. */
.area-more {
    width: 100%; height: 100%; min-height: inherit; border: 1.5px solid #bcd6f5; border-radius: inherit; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 12px 8px;
    background: #f5f9ff; color: var(--blue); font: inherit; font-size: 0.86rem; font-weight: 700; line-height: 1.25;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.area-more:hover { transform: translateY(-2px); border-color: var(--blue); box-shadow: 0 8px 20px rgba(20, 70, 150, 0.14); }
.areas li:has(.area-more) { padding: 0; overflow: hidden; }

/* Modal (course categories). */
.modal { position: fixed; inset: 0; z-index: 110; background: rgba(12, 30, 70, 0.55); display: flex; align-items: flex-end; justify-content: center; }
.modal[hidden] { display: none; }
.modal-panel {
    background: #fff; width: 100%; max-width: 1240px; max-height: 90vh; display: flex; flex-direction: column;
    border-radius: 16px 16px 0 0; padding: 18px 16px 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.modal-head h3 { color: var(--title); font-size: 1.25rem; font-weight: 800; }
.modal-close { background: none; border: 0; color: var(--muted); width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer; }
.modal-sub { margin: 4px 0 12px; color: var(--muted); font-size: 0.9rem; font-weight: 500; }
.cat-grid { list-style: none; margin: 0; padding: 2px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; overflow-y: auto; }
.cat { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; background: var(--soft); min-width: 0; }
/* The admin icons are drawn on #4078c0 edge to edge: a rounded square of that
   blue around them. */
.cat img { width: 48px; height: 48px; object-fit: contain; flex: none; background: #4078c0; padding: 5px; border-radius: 10px; }
.cat span { display: flex; flex-direction: column; min-width: 0; }
.cat strong { font-size: 0.86rem; font-weight: 700; color: var(--navy); line-height: 1.2; }
.cat small { font-size: 0.76rem; color: var(--muted); font-weight: 500; }
.other-input {
    display: block; width: 100%; max-width: 420px; margin-top: 10px; font: inherit; font-size: 1rem; color: var(--ink);
    border: 1px solid #d6e1ef; border-radius: 8px; padding: 11px 12px; height: 46px; background: #fff;
}
.other-input[hidden] { display: none; }
.other-input:focus { outline: 3px solid rgba(10, 111, 198, 0.18); border-color: var(--blue); }
.modal-foot { padding-top: 12px; display: flex; justify-content: flex-end; }

/* Kit details popup: render + what's in the kit. */
.kit-panel { max-width: 1100px; }
.kit-body { display: grid; gap: 16px; overflow-y: auto; padding-top: 6px; }
/* Grey gradient behind the renders, same as the AccuNeedle stand picture. */
.kit-hero { width: 100%; max-height: 300px; object-fit: contain; background: linear-gradient(180deg, #4c5160 0%, #3f4553 45%, #7e8596 100%); border-radius: 12px; padding: 10px; }
.kit-info .modal-sub { margin-top: 0; }
.kit-group { margin: 14px 0 8px; font-size: 0.8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.kit-parts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.kit-hero { max-height: 240px; }
.kit-part { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 0.74rem; min-width: 0; font-weight: 600; color: var(--navy); line-height: 1.2; }
.kit-part img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); border-radius: 10px; padding: 8px; }
/* Shared Service picture: the WH kit + "+" + the two extra probes. */
.kit-hero--combo { display: flex; align-items: center; justify-content: center; gap: 12px; overflow: hidden; }
.kit-hero--combo .combo-kit { width: 58%; min-width: 0; max-height: 100%; object-fit: contain; }
.combo-plus { font-size: 2.6rem; font-weight: 800; color: #fff; line-height: 1; }
.combo-extras { display: flex; align-items: flex-end; gap: 6px; height: 38%; flex: none; }
.combo-extras img { height: 100%; width: auto; object-fit: contain; }
.kit-hero--combo { height: 240px; }
/* AccuNeedle stand panel: the whole tall picture, rounded, no padding box. */
.kit-hero--panel { padding: 0; background: none; border-radius: 14px; width: auto; margin: 0 auto; justify-self: start; }
/* The parts the Shared Service adds over Women's Health. */
.kit-part.is-added img { outline: 2px solid var(--blue); outline-offset: -2px; }
.kit-row > .kit-parts + .kit-parts { margin-top: 8px; }
.kit-part.is-added span::after { content: " (added)"; color: var(--blue); font-weight: 700; }
.kit-list { margin: 0; padding-left: 20px; color: var(--ink); font-weight: 500; line-height: 1.7; }

/* Training packages */
.pkg-viewport { position: relative; margin: 0 calc(-1 * var(--gutter)); }
.pkg-track {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 4px var(--gutter) 12px; scroll-padding: 0 var(--gutter);
    scrollbar-width: none;
}
.pkg-track::-webkit-scrollbar { display: none; }
.pkg-card {
    flex: 0 0 76%; scroll-snap-align: start; scroll-snap-stop: always;   /* one card per swipe */
    background: var(--card); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden;
    border: 0; padding: 0; text-align: left; font: inherit; color: inherit; cursor: pointer;
    display: flex; flex-direction: column; transition: transform 0.15s, box-shadow 0.15s;
}
.pkg-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(20, 70, 150, 0.13); }
.pkg-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--soft); border-bottom: 1px solid var(--line); }
/* Package details as real text (the cover's own text is too small on a card). */
.pkg-body { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; flex: 1; }
.pkg-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; min-height: 2.6em; font-size: 0.9rem; }
.pkg-title strong { color: var(--navy); font-weight: 800; margin-right: 6px; }
.pkg-title span { color: var(--ink); font-weight: 600; }
.pkg-by { color: var(--muted); font-size: 0.78rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* One row, always at the bottom of the card; a long level badge shortens with "...". */
.pkg-meta { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; min-width: 0; }
.pkg-meta .pill { flex: none; }
.pkg-meta .pill-blue { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pill { font-size: 0.76rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink); white-space: nowrap; }
.pill-blue { background: var(--pill); border-color: var(--pill); color: var(--pill-ink); }
.pkg-go { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--blue); color: var(--blue); display: grid; place-items: center; flex: none; }
.pkg-go svg { width: 16px; height: 16px; stroke-width: 2.2; }
.pkg-nav { display: none; }
.pkg-dots { display: flex; justify-content: center; gap: 6px; margin-top: 4px; }
.pkg-dots i { width: 7px; height: 7px; border-radius: 50%; background: #c9d8ec; }
.pkg-dots i.on { background: var(--blue); }
/* "Show all": the row becomes a grid. */
.pkg-viewport.is-grid { margin: 0; }
.is-grid .pkg-track { display: grid; grid-template-columns: repeat(2, 1fr); overflow: visible; padding: 4px 0 0; }
.is-grid .pkg-card { flex: none; }
.is-grid .pkg-nav { display: none !important; }
.is-grid + .pkg-dots { display: none; }

/* For teachers */
.teachers { display: grid; gap: 18px; }
.teachers h2 { margin: 0; }
.feature-current { display: none; }
.features { list-style: none; margin: 14px 0 0; padding: 0; display: grid; }
.features li + li .feature { border-top: 1px solid var(--line); border-radius: 0; }
.feature {
    width: 100%; display: flex; align-items: center; gap: 14px; text-align: left;
    background: none; border: 0; padding: 12px 8px;
    font: inherit; color: inherit; cursor: pointer; transition: background 0.15s;
}
.feature:hover { background: var(--soft); }
.feature.is-active { background: var(--soft); }
.feature-ic {
    width: 46px; height: 46px; border-radius: 10px; background: #fff; color: var(--icon);
    display: grid; place-items: center; flex: none;
    box-shadow: 0 1px 2px rgba(20, 60, 130, 0.06), 0 4px 12px rgba(20, 70, 150, 0.1);
}
.feature.is-active { box-shadow: inset 3px 0 0 var(--blue); }
.feature strong { display: block; font-size: 0.95rem; font-weight: 700; color: var(--navy); }
.feature small { display: block; color: var(--muted); font-size: 0.85rem; font-weight: 500; margin-top: 2px; }
.browser { border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(20, 60, 130, 0.16); background: #fff; align-self: center; }
.browser-bar { height: 22px; background: #eef3fa; display: flex; align-items: center; gap: 8px; padding: 0 10px; }
/* Browser address bar: back / forward, the site address with a padlock. */
.bb-nav { display: flex; gap: 6px; color: #9aa4b6; flex: none; }
.bb-nav svg { width: 11px; height: 11px; stroke-width: 2; }
.bb-url {
    flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 5px; height: 20px; padding: 0 10px;
    border-radius: 999px; background: #fff; border: 1px solid var(--line);
    font-size: 0.72rem; font-weight: 500; color: #4a5670; white-space: nowrap; overflow: hidden;
}
.bb-url svg { width: 10px; height: 10px; flex: none; stroke: #2e8b57; stroke-width: 2; }
.browser img { width: 100%; aspect-ratio: var(--shot-ratio, 1920 / 929); object-fit: cover; object-position: top left; transition: opacity 0.2s; }
/* Screenshot slideshow (teachers section). */
.shot-caption { margin-left: auto; padding-left: 8px; font-size: 0.74rem; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browser-bar { height: 30px; }
.shot-viewport { position: relative; }
.shot-track {
    display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
    scrollbar-width: none; cursor: grab; user-select: none; -webkit-user-select: none;
}
.shot-track::-webkit-scrollbar { display: none; }
.shot-track.dragging { scroll-snap-type: none; cursor: grabbing; }
.browser .shot { cursor: zoom-in; flex: 0 0 100%; width: 100%; scroll-snap-align: start; scroll-snap-stop: always; aspect-ratio: var(--shot-ratio, 1920 / 929); object-fit: cover; object-position: top left; }
.shot-nav {
    position: absolute; top: 50%; margin-top: -18px; width: 36px; height: 36px; border-radius: 50%; border: 0;
    background: rgba(255, 255, 255, 0.95); color: var(--blue); display: grid; place-items: center; cursor: pointer;
    box-shadow: 0 2px 8px rgba(20, 60, 130, 0.25); opacity: 0.9;
}
.shot-nav svg { width: 20px; height: 20px; stroke-width: 2.4; }
.shot-nav[disabled] { opacity: 0; pointer-events: none; }
.shot-prev { left: 8px; }
.shot-next { right: 8px; }
.shot-dots { display: flex; justify-content: center; gap: 7px; padding: 9px 0 10px; background: #fff; border-top: 1px solid var(--line); }
.shot-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #c9d8ec; cursor: pointer; }
.shot-dot.on { background: var(--blue); width: 20px; border-radius: 4px; transition: width 0.2s; }

/* Kits */
.kits { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kit {
    width: 100%; height: 100%; background: var(--card); border: 0; border-radius: 12px; box-shadow: var(--shadow);
    display: flex; align-items: center; gap: 14px; padding: 12px 14px; text-align: left; font: inherit; color: inherit; cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}
.kit:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(20, 70, 150, 0.13); }
.kit-img { width: 84px; height: 84px; border-radius: 12px; background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); flex: none; object-fit: contain; padding: 6px; }
.kit-text { display: flex; flex-direction: column; min-width: 0; }
.kit-text strong { font-size: 1.05rem; font-weight: 800; color: var(--title); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kit-text small { margin-top: 3px; color: var(--muted); font-size: 0.86rem; font-weight: 500; line-height: 1.4; }
.kit-chev { margin-left: auto; color: var(--blue); width: 22px; height: 22px; flex: none; stroke-width: 2.2; }
.badge { font-style: normal; font-size: 0.7rem; font-weight: 600; color: var(--pill-ink); background: var(--pill); border-radius: 999px; padding: 2px 8px; }

/* Contact form */
.contact-head { margin-bottom: 16px; }
.grid-2 { display: grid; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 0.86rem; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.field input, .field select, .field textarea {
    font: inherit; font-weight: 400; font-size: 1rem; color: var(--ink);
    border: 1px solid #d6e1ef; border-radius: 8px; padding: 11px 12px; background: #fff; width: 100%; min-width: 0;
}
.field textarea { resize: vertical; }

/* Country picker (country_picker.js): looks like the other fields. */
.cp { position: relative; min-width: 0; }
.cp-trigger {
    width: 100%; height: 46px; display: flex; align-items: center; gap: 10px; text-align: left;
    font: inherit; font-weight: 400; font-size: 1rem; color: var(--ink);
    border: 1px solid #d6e1ef; border-radius: 8px; padding: 0 12px; background: #fff; cursor: pointer;
}
.cp-trigger:focus-visible { outline: 3px solid rgba(10, 111, 198, 0.18); border-color: var(--blue); }
.cp-trigger.is-placeholder .cp-label { color: var(--muted); }
.cp-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-chev { width: 18px; height: 18px; color: var(--muted); flex: none; }
.cp-trigger-flag { display: inline-flex; flex: none; }
.cp-flag { width: 22px; height: 16px; border-radius: 2px; object-fit: cover; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); }
.cp-flag--none { display: inline-flex; align-items: center; justify-content: center; box-shadow: none; color: var(--muted); }
.cp-flag--none svg { width: 18px; height: 18px; }
.cp-menu {
    position: fixed; z-index: 120; display: flex; flex-direction: column; overflow: hidden;
    background: #fff; border: 1px solid #d6e1ef; border-radius: 10px; padding: 8px;
    box-shadow: 0 12px 30px rgba(20, 60, 130, 0.18);
}
.cp-menu[hidden] { display: none; }
.cp-search { display: flex; align-items: center; gap: 8px; border: 1px solid #d6e1ef; border-radius: 8px; padding: 0 10px; margin-bottom: 6px; }
.cp-search svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.field .cp-search input { flex: 1; min-width: 0; border: 0; outline: 0; height: 40px; padding: 0; border-radius: 0; font: inherit; font-size: 1rem; color: var(--ink); background: none; }
.cp-list { overflow-y: auto; overscroll-behavior: contain; }
.cp-item {
    width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; min-height: 40px;
    padding: 6px 10px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 0.95rem; color: var(--ink); cursor: pointer;
}
.cp-item.is-focus { background: var(--soft); }
.cp-item.is-selected { color: var(--blue); font-weight: 600; }
.cp-empty { padding: 10px; color: var(--muted); font-size: 0.9rem; }
.field input, .field select { height: 46px; }   /* same height side by side */
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid rgba(10, 111, 198, 0.18); border-color: var(--blue); }
.chips-group { border: 0; padding: 0; margin: 18px 0 0; min-width: 0; }
.chips-group legend { font-size: 0.86rem; font-weight: 700; color: var(--navy); margin-bottom: 8px; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
    display: inline-flex; align-items: center; min-height: 38px; padding: 0 15px;
    border: 1.5px solid #d3dff0; border-radius: 999px; background: #fff; font-size: 0.9rem; font-weight: 500; color: var(--ink);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.chip:hover span { border-color: #a9c4e8; }
.chip input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid rgba(10, 111, 198, 0.3); outline-offset: 2px; }
#contactForm > .field { margin-top: 18px; }
#contactForm .btn-block { margin-top: 22px; }
.form-submit .btn-block { margin-top: 22px; }
.form-note { margin: 8px 0 0; color: var(--muted); font-size: 0.85rem; font-weight: 500; text-align: center; }
.field-error { color: #c62828; font-size: 0.8rem; font-weight: 600; min-height: 0; }
.field-error:empty { display: none; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-error { color: #c62828; font-size: 0.9rem; margin: 14px 0 0; }
.field.is-invalid input { border-color: #c62828; }
.form-done { text-align: center; padding: 30px 10px; }
.form-done h3 { color: var(--title); }
.done-ic { width: 56px; height: 56px; border-radius: 50%; background: #e3f4ea; color: #2e8b57; display: grid; place-items: center; margin: 0 auto 12px; }
.done-ic svg { width: 30px; height: 30px; stroke-width: 2.4; }
.form-done p { color: var(--muted); }

/* Footer */
.site-footer { margin-top: 36px; background: linear-gradient(90deg, var(--header-from), var(--header-to)); color: #fff; }
.footer-row { display: flex; align-items: center; justify-content: center; min-height: 64px; }
.footer-links { display: flex; gap: 24px; }
.footer-links a { color: #fff; display: grid; place-items: center; }
.footer-links svg { width: 22px; height: 22px; }

/* Package viewer: full-screen strip of cards (admin Recommended Packages zoom).
   A card is the cover at its own aspect ratio, sized so it never needs
   vertical scrolling, with the chapters strip laid over the cover's empty
   bottom band (same placement as the admin page: left 10%, bottom 4%,
   width 80%, height 19%) and the title below. */
.viewer {
    --vcard-w: min(860px, calc(100vw - 32px), calc((100dvh - 150px) * 1023 / 993));
    position: fixed; inset: 0; z-index: 100; background: rgba(12, 30, 70, 0.55);
    user-select: none; -webkit-user-select: none;   /* dragging never highlights */
    display: flex; align-items: center;
}
.viewer[hidden] { display: none; }
.viewer-strip {
    display: flex; align-items: center; gap: 24px; width: 100%; height: 100%;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
    padding: 0 calc((100vw - var(--vcard-w)) / 2);
    scrollbar-width: none;
}
.viewer-strip::-webkit-scrollbar { display: none; }
.vcard {
    flex: 0 0 var(--vcard-w); scroll-snap-align: center; scroll-snap-stop: always;   /* one card per swipe */
    background: #fff; border-radius: 14px; overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    transform: scale(0.92); transition: transform 0.18s ease;
    cursor: pointer;
}
.vcard.is-focused { transform: scale(1); cursor: default; }
/* Only the centre card's chapters scroll; on side cards a drag moves the cards. */
.vcard:not(.is-focused) .vcard-chapters { pointer-events: none; }
.viewer-strip.dragging { scroll-snap-type: none; cursor: grabbing; }
.vcard-body { position: relative; aspect-ratio: 1023 / 993; background: var(--soft); }
.vcard-outer { width: 100%; height: 100%; display: block; }
.vcard-chapters {
    position: absolute; left: 10%; bottom: 4%; width: 80%; height: 19%;
    overflow-x: auto; overflow-y: hidden; cursor: grab; z-index: 2;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.vcard-chapters::-webkit-scrollbar { display: none; }
.vcard-chapters.dragging { cursor: grabbing; }
.vcard-chapters img { display: block; height: 100%; width: auto; max-width: none; }
.vcard-foot { padding: 12px 16px 14px; border-top: 1px solid var(--line); }
.vcard-foot h3 { font-size: 1rem; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vcard-foot h3 strong { color: var(--navy); font-weight: 800; }
.vcard-by { display: block; color: var(--muted); font-size: 0.85rem; font-weight: 500; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Screenshot cards: the screenshot at its own ratio, caption below. */
/* Screenshot cards: the same browser window as the small slideshow, the
   caption as its title in the top bar. */
/* Screenshot viewer: its card width drives the strip's side padding too, so
   the first / last screenshot centre like the others. */
#shotViewer { --vcard-w: min(1600px, calc(100vw - 32px), calc((100dvh - 120px) * var(--shot-ratio, 1920 / 929))); }
.vcard--shot { flex-basis: var(--vcard-w); border-radius: 10px; }
.vcard--shot .browser-bar { height: 38px; gap: 10px; padding: 0 14px; }
.vcard--shot .bb-url { height: 24px; font-size: 0.8rem; }
.vcard--shot .browser-bar h3 { margin: 0 0 0 auto; padding-left: 10px; font-size: 0.95rem; font-weight: 700; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vcard-shot { display: block; width: 100%; aspect-ratio: var(--shot-ratio, 1920 / 929); object-fit: cover; object-position: top left; }
.viewer-close {
    position: fixed; top: 12px; right: 12px; z-index: 3; width: 40px; height: 40px; border-radius: 50%;
    border: 0; background: rgba(255, 255, 255, 0.95); color: var(--ink); display: grid; place-items: center; cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.viewer-nav {
    position: fixed; top: 50%; z-index: 3; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%;
    border: 0; background: rgba(255, 255, 255, 0.95); color: var(--blue); display: none; place-items: center; cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.viewer-nav svg { stroke-width: 2.4; }
.viewer-nav[disabled] { opacity: 0; pointer-events: none; }
.viewer-prev { left: 16px; }
.viewer-next { right: 16px; }
@media (min-width: 900px) {
    .viewer-nav { display: grid; }
    .kit-body { grid-template-columns: 1.1fr 1fr; align-items: start; gap: 26px; }
    .kit-hero { max-height: 460px; }
    .kit-hero--combo { height: 420px; }
    .kit-parts { gap: 10px; }
    .modal { align-items: center; }
    .modal-panel { border-radius: 16px; padding: 24px 26px 18px; }
    .cat-grid { grid-template-columns: repeat(5, 1fr); }
}
/* Shared Service, render beside the parts (900px+): same popup size as the
   other kits. Every tile small and the same size: In the kit = the Women's
   Health parts (3 x 3) + the two added probes stacked; Optional to the right. */
@media (min-width: 900px) {
    .kit-panel--wide .kit-parts-box { --tile: 82px; display: flex; gap: 18px; align-items: flex-start; }
    .kit-panel--wide .kit-grp { flex: none; }
    .kit-panel--wide .kit-row { display: flex; gap: 6px; align-items: flex-start; }
    .kit-panel--wide .kit-row > .kit-parts { margin-top: 0; }
    .kit-panel--wide .kit-parts { grid-template-columns: var(--tile); gap: 6px; }
    .kit-panel--wide .kit-parts--small { grid-template-columns: repeat(3, var(--tile)); }
    .kit-panel--wide .kit-part { font-size: 0.64rem; gap: 3px; }
    .kit-panel--wide .kit-part img { padding: 4px; border-radius: 7px; }
    /* AccuNeedle: the popup as wide as its (tall) picture needs, so its
       margins match the other kits. */
    .kit-panel--fit { max-width: 980px; }
    .kit-panel--fit .kit-body { grid-template-columns: auto 1fr; }
}
body.no-scroll { overflow: hidden; }

/* Keyboard focus, visible on every control. */
a:focus-visible, button:focus-visible, select:focus-visible { outline: 3px solid rgba(10, 111, 198, 0.45); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; }
}

/* Very narrow phones: one header button. */
@media (max-width: 359px) {
    .header-actions .btn-light { display: none; }
}

/* Desktop */
@media (min-width: 900px) {
    :root { --gutter: 32px; }
    h2 { font-size: 1.55rem; }
    .header-row { height: 70px; }
    .footer-row { min-height: 38px; }        /* well under the 70px header */
    .footer-links svg { width: 18px; height: 18px; }
    .brand img { width: 92px; }
    .header-actions { gap: 14px; }
    .header-actions .btn { min-height: 40px; padding: 0 20px; font-size: 0.92rem; }

    /* Inside the content width (no spill past it on wide screens), fading
       out to the left and at the bottom (no hard edge beside the stats). */
    .hero-photo {
        top: 0; bottom: 0; right: var(--gutter); height: auto; width: 60%; background-position: right center;
        max-height: none;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%), linear-gradient(180deg, #000 72%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0%, #000 14%), linear-gradient(180deg, #000 72%, transparent 100%);
    }
    .hero-text { padding: 54px 0 70px; max-width: 560px; }
    .hero h1 { font-size: 2.55rem; }
    .lead { font-size: 1.18rem; margin: 12px 0 28px; }
    .hero-actions { display: flex; gap: 14px; }
    .hero-actions .btn-lg { min-height: 52px; padding: 0 30px; font-size: 1.02rem; }

    .stats { margin-top: -26px; padding: 20px 8px; }
    .stats li { flex-direction: row; text-align: left; justify-content: center; gap: 16px; }
    .stats strong { font-size: 1rem; }
    .stats strong b { display: inline; font-size: inherit; font-weight: 700; }
    .stats span { font-size: 0.92rem; }

    .section { padding-top: 38px; }
    .areas { grid-template-columns: repeat(5, 1fr); gap: 14px; }
    .areas li, .areas li:nth-child(4), .areas li:nth-child(5) { grid-column: auto; min-height: 112px; font-size: 0.92rem; }
    .area-more { font-size: 0.92rem; }

    .pkg-viewport { margin: 0; }
    .pkg-track { padding: 4px 2px 14px; scroll-padding: 0; gap: 14px; }
    .pkg-card { flex: 0 0 calc((100% - 3 * 14px) / 4); }
    .pkg-nav {
        display: grid; place-items: center; position: absolute; top: 38%; z-index: 2;
        width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; color: var(--blue);
        box-shadow: 0 4px 14px rgba(16, 50, 100, 0.2); cursor: pointer;
    }
    .pkg-nav svg { stroke-width: 2.2; }
    .pkg-nav[disabled] { opacity: 0; pointer-events: none; }
    .pkg-prev { left: -18px; }
    .pkg-next { right: -18px; }
    .pkg-dots { display: none; }
    .is-grid .pkg-track { grid-template-columns: repeat(4, 1fr); gap: 16px; }

    .panel { padding: 30px 32px; }
    .teachers { grid-template-columns: 0.9fr 1.1fr; gap: 36px; }

    .kits { grid-template-columns: repeat(3, 1fr); gap: 14px; }

    /* Full content width like the other sections: three fields per row. */
    .grid-2 { grid-template-columns: repeat(3, 1fr); gap: 14px 18px; }
    .field-wide { grid-column: span 2; }
    #contactForm .btn-block { width: auto; min-width: 240px; }
    .form-submit { display: flex; align-items: center; gap: 16px; }
    .form-submit .form-note { margin: 22px 0 0; text-align: left; }

}

/* ---- Phones (below 900px), 2026-10-15 mobile pass. Everything here is
   phone-only; the desktop block above is untouched. ---- */
.lbl-short { display: none; }
@media (max-width: 899px) {
    /* Admin web phone spacing: 8px page margins, 12px inside cards. */
    :root { --gutter: 8px; }
    .lbl-long { display: none; }
    .lbl-short { display: inline; }
    .panel { padding: 16px 12px; }

    /* Header: smaller logo, short "Quote" / "Info" buttons. */
    .header-row { height: 54px; padding: 0 20px; }   /* the admin web's phone header side padding */
    .brand img { width: 60px; }
    .header-actions .btn { min-height: 32px; padding: 0 14px; font-size: 0.82rem; }

    /* Hero: the photo zoomed out (whole height of the picture, right part
       shown), a stronger white fade on the left so the text reads; title
       in 3 lines, subtitle in 2. */
    .hero-photo {
        /* As the mockup: the photo fills the hero's right side from the top
           down past the buttons (they sit over it), white fade on the left
           for the text, no fade at the bottom. */
        top: 0; bottom: 0; right: var(--gutter); width: 70%; height: auto; max-height: none;   /* ends where the stats card ends */
        background-size: cover; background-position: 50% top;   /* phones: the scene shifted right, clear of the text */
        /* White fade on the left (text) + a short fade at the bottom, into the stats card. */
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.25) 22%, rgba(0, 0, 0, 0.8) 45%, #000 60%), linear-gradient(180deg, #000 78%, transparent 100%);
        -webkit-mask-composite: source-in;
        mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.25) 22%, rgba(0, 0, 0, 0.8) 45%, #000 60%), linear-gradient(180deg, #000 78%, transparent 100%);
        mask-composite: intersect;
    }
    .hero-text { padding: 20px 0 30px; max-width: 80%; }   /* room for the stats card overlapping the photo */
    .hero h1 { font-size: 1.42rem; line-height: 1.16; text-shadow: 0 0 14px rgba(237, 244, 252, 0.9); }
    .lead { font-size: 0.8rem; margin: 8px 0 16px; max-width: 68%; text-shadow: 0 0 10px rgba(237, 244, 252, 0.95); }
    .hero-actions { max-width: 58%; gap: 8px; }
    .hero { overflow-x: clip; }        /* the photo runs to the screen edge, never past it */
    .hero-actions .btn-lg { min-height: 42px; font-size: 0.92rem; }

    /* Stats: icon, one-line title, one-line subtitle. */
    .stats { padding: 12px 2px; margin-top: -16px; }   /* overlaps the photo a little, like desktop */
    .stats li { gap: 5px; }
    .stats .ic { width: 26px; height: 26px; }
    .stats strong { font-size: 0.92rem; }
    .stats strong b { display: none; }
    .stats span { font-size: 0.7rem; white-space: nowrap; }
    .stat { padding: 2px; }
    .stat-chev { width: 10px; height: 10px; margin-left: 1px; }

    /* Featured packages: no "Show all", one-line subtitle. */
    #pkgToggle { display: none; }
    .section-head .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* Kit popups: the render and the description side by side (the render
       box no longer mostly background), the parts full width below. */
    .kit-body { grid-template-columns: 46% 1fr; align-items: center; column-gap: 12px; }
    .kit-info { display: contents; }
    .kit-body > .kit-hero { grid-column: 1; grid-row: 1; }
    .kit-info > .modal-sub { grid-column: 2; grid-row: 1; margin: 0; }
    .kit-info > .kit-parts-box { grid-column: 1 / -1; grid-row: 2; }
    img.kit-hero:not(.kit-hero--panel) { height: auto !important; aspect-ratio: 1; width: 100%; }
    .kit-hero--combo { height: auto !important; aspect-ratio: 1; gap: 4px; padding: 6px; }
    .kit-hero--combo .combo-plus { font-size: 1.2rem; }
    .kit-hero--panel { width: 100%; height: auto !important; max-height: 220px !important; object-fit: contain; justify-self: center; }

    /* Kit popups: everything smaller so they fit without scrolling. */
    .kit-panel .modal-panel, .modal-panel.kit-panel { padding: 12px 12px 10px; }
    .kit-panel .modal-head h3 { font-size: 1.1rem; }
    .kit-panel .modal-close { width: 32px; height: 32px; }
    .kit-body { gap: 8px; padding-top: 2px; }
    .kit-hero { max-height: 168px; padding: 6px; }
    img.kit-hero:not(.kit-hero--panel) { height: 168px; padding: 2px; }   /* the render fills its box */
    .kit-hero--combo { height: 168px; gap: 8px; }
    .combo-plus { font-size: 1.8rem; }
    .kit-hero--panel { max-height: 200px; padding: 0; }
    .kit-info .modal-sub { font-size: 0.8rem; margin-bottom: 4px; line-height: 1.4; }
    .kit-group { margin: 8px 0 5px; font-size: 0.68rem; }
    .kit-parts { grid-template-columns: repeat(5, 1fr); gap: 5px; }
    .kit-part { font-size: 0.6rem; gap: 3px; line-height: 1.15; }
    .kit-part img { padding: 4px; border-radius: 7px; }
    .kit-part.is-added span::after { content: none; }   /* the blue outline marks them */
    /* Shared Service: the WH parts and the two added probes in one grid. */
    .kit-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
    .kit-row > .kit-parts { display: contents; }
    .kit-list { font-size: 0.82rem; line-height: 1.55; padding-left: 18px; }
    .kit-panel .modal-foot { padding-top: 8px; }
    .kit-panel .modal-foot .btn { min-height: 38px; font-size: 0.88rem; }

    /* "For teachers": phone screenshots in a narrower, centred frame. */
    .browser.shots { width: min(calc(100% - 76px), 300px); justify-self: center; margin: 0 auto; }   /* room for the arrows outside */

    /* "For teachers": no subtitle; the 4 items as a row of icon buttons, the
       picked one's title + line below, then its screenshots. Arrows sit
       outside the screenshot, on the frame's sides. */
    .teachers { gap: 12px; }
    .teachers-text > .sub { display: none; }
    .features { margin-top: 12px; grid-template-columns: repeat(4, 1fr); gap: 8px; }   /* the 4 buttons share the whole row */
    .features li + li .feature { border-top: 0; border-radius: 12px; }
    .feature { flex-direction: column; justify-content: center; padding: 8px 4px; border-radius: 12px; box-shadow: none; }
    .feature > span:last-child { display: none; }
    .feature.is-active { background: var(--pill); box-shadow: inset 0 0 0 1.5px var(--blue); }
    .feature-current { display: block; margin-top: 10px; text-align: left; }   /* left like the title; only the screenshots are centred */
    .feature-current strong { display: block; font-size: 0.98rem; font-weight: 800; color: var(--navy); }
    .feature-current small { display: block; margin-top: 2px; font-size: 0.82rem; color: var(--muted); font-weight: 500; }
    /* Phone outline (thin dark bezel + camera notch) instead of a browser
       window; the caption above the phone, the dots under it. */
    .browser.shots { overflow: visible; position: relative; display: flex; flex-direction: column; background: none; box-shadow: none; border-radius: 0; }
    .shots .shot-viewport { order: 2; }
    .shots .browser-bar { order: 1; height: auto; background: none; justify-content: center; padding: 0 0 8px; }   /* caption above the phone */
    .shots .shot-dots { order: 3; background: none; border-top: 0; padding: 6px 0 0; }
    .shots .bb-nav, .shots .bb-url { display: none; }
    .shots .shot-caption { margin: 0; padding: 0; font-size: 0.8rem; color: var(--navy); }
    .shots .shot-track { border: 3px solid #2a3245; border-radius: 22px; background: #2a3245; box-shadow: 0 8px 22px rgba(20, 40, 80, 0.22); }
    .shots .shot { border-radius: 19px; }
    .shots .shot-viewport::before {
        content: ""; position: absolute; z-index: 2; top: 7px; left: 50%; width: 40px; height: 9px; margin-left: -20px;
        border-radius: 999px; background: #2a3245; pointer-events: none;
    }
    .shots .shot-viewport { position: relative; }
    .shots .shot-viewport { overflow: visible; }
    .shot-nav { top: 50%; width: 30px; height: 30px; margin-top: -15px; box-shadow: 0 2px 6px rgba(20, 60, 130, 0.2); }
    .shot-nav svg { width: 16px; height: 16px; }
    .shot-prev { left: -38px; }
    .shot-next { right: -38px; }

    /* Viewers: the cards start below the close button. */
    .viewer { padding-top: 58px; padding-bottom: 8px; box-sizing: border-box; }
    #shotViewer { --vcard-w: min(calc(100vw - 40px), calc((100dvh - 170px) * 400 / 700)); }
    /* Zoomed phone screenshots: the same phone outline, caption below in white. */
    .vcard--shot { display: flex; flex-direction: column; background: none; box-shadow: none; overflow: visible; position: relative; }
    .vcard--shot .vcard-shot { border: 3px solid #2a3245; border-radius: 26px; background: #2a3245; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4); }
    .vcard--shot::before {
        content: ""; position: absolute; z-index: 2; top: 49px; left: 50%; width: 48px; height: 11px; margin-left: -24px;   /* 40px caption + 9px */
        border-radius: 999px; background: #2a3245; pointer-events: none;
    }
    .vcard--shot .browser-bar { order: -1; height: 40px; box-sizing: border-box; align-items: flex-start; background: none; justify-content: center; padding: 0; }   /* caption above the phone */
    .vcard--shot .bb-nav, .vcard--shot .bb-url { display: none; }
    .vcard--shot .browser-bar h3 { margin: 0; padding: 5px 12px; border-radius: 999px; background: rgba(12, 30, 70, 0.75); color: #fff; font-size: 0.85rem; }

    /* Popups: a centred card with a margin all round (not a sheet glued
       to the bottom), sized to their content. */
    .modal { align-items: center; padding: 12px var(--gutter); }
    .modal-panel { border-radius: 16px; max-height: calc(100dvh - 24px); padding: 14px 14px 12px; }
    .modal-head h3 { font-size: 1.12rem; line-height: 1.25; }
    .modal-sub { font-size: 0.82rem; margin: 2px 0 10px; }
    .modal-foot { padding-top: 10px; }
    .modal-foot .btn { min-height: 40px; font-size: 0.9rem; }
    /* Map: the whole world at the popup's width (no sideways scroll). */
    .map-box { padding: 4px; overflow: hidden; }
    .map-box svg { min-width: 0; max-height: none; }
    /* Logo wall: 3 across, compact. */
    .inst-grid { grid-template-columns: repeat(3, 1fr); gap: 8px 6px; }
    .inst-logo { height: 62px; padding: 6px; border-radius: 8px; }
    .inst-name { font-size: 0.64rem; }
    .inst small { font-size: 0.58rem; }
    .cat-grid { gap: 6px; }

    .map-credit { font-size: 0.34rem; left: 5px; bottom: 3px; padding: 0 3px; }   /* about half size: clear of South America */

    /* Footer: no taller than the header. */
    .site-footer { margin-top: 20px; }
    .footer-row { min-height: 30px; }
    .footer-links { gap: 18px; }
    .footer-links svg { width: 16px; height: 16px; }
}
/* Short phones: a smaller kit picture so the popups still fit. */
@media (max-width: 899px) and (max-height: 760px) {
    .kit-hero, .kit-hero--combo { max-height: 140px; height: auto; }
    .kit-hero--combo { height: 140px; }
    .kit-hero--panel { max-height: 170px; }
}
@media (max-width: 899px) and (max-height: 680px) {
    .kit-hero, .kit-hero--combo { max-height: 118px; }
    .kit-hero--combo { height: 118px; }
    .kit-hero--panel { max-height: 150px; }
}
/* Pinch-zoomed viewer card: the image may move past its frame (clipped). */
.vcard.is-zoomed { cursor: grab; }
.vcard-body, .vcard-shot { will-change: transform; }
/* Narrow phones: the subtitle a bit wider so it stays on 2 lines. */
@media (max-width: 380px) { .lead { max-width: 74%; } }