/* lb portal (Testing Laboratories) — own stylesheet, not shared with
   apply/portal chrome (see docs/LB-PORTAL-TECHNICAL-SPEC.md section 5.1:
   visible styling belongs to the lb zone; this file is served from the
   shared /css static mount, which is a technical delivery detail only).
   Also reused as-is by the nb portal (controllers/nb_portal_views.js) —
   the "lb-" class prefix is a leftover of which vertical was built first,
   not a brand marker; nothing in here is Testing-Laboratories-specific.
   A 3rd/4th vertical should keep reusing this file rather than forking it.

   Colors are taken directly from the apply zone's own design spec
   (public/css/prov.css's :root comment: "EU Commission style — neutral,
   data-first. primary #003399 · body text #333333 · accent #FFB81C (CTA
   only)") — not an lb-invented palette. Header/footer visual identity is
   copied from apply's real chrome (public/css/main.css's
   header.header-container: #0d2f6e background, #FFB81C bottom border).
   Everything apply-specific that doesn't apply to lb's plain server-rendered
   pages was left out: the SPA splice router (data-action/showStaticPage),
   data-i18n keys (lb has no i18n runtime yet), the .requires-access
   login-gated menu items (lb has no login of its own), and the
   fixed-header/overflow:hidden SPA-shell scroll architecture. */

:root {
  --lb-ink: #1a1a1a;        /* prov.css --text-dark */
  --lb-ink-soft: #333333;   /* prov.css --text */
  --lb-line: #d9d9d9;       /* prov.css --border */
  --lb-bg: #ffffff;
  --lb-bg-soft: #f5f5f5;    /* prov.css --bg-alt */
  --lb-blue: #003399;       /* prov.css --blue — links, headings highlight, primary accent */
  --lb-blue-dark: #00246b;  /* prov.css --blue-dark */
  --lb-cta: #FFB81C;        /* prov.css --accent — CTA buttons only */
  --lb-cta-ink: #1a1a1a;
  --lb-cta-hover: #e6a400;
  --lb-header-bg: #0d2f6e;    /* apply header background (main.css header.header-container) */
  --lb-header-trim: #FFB81C;  /* apply header bottom border */
  --lb-footer-bg: rgba(2, 6, 23, 0.72); /* apply footer background */
  --lb-footer-ink: rgba(255, 255, 255, 0.76);
  --lb-footer-ink-hover: rgba(255, 255, 255, 0.95);
  --lb-max: 1080px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding-top: 80px; /* offsets the fixed .lb-header below, same convention as the hub's fixed header.header-container */
  overflow-x: hidden; /* .lb-section.lb-alt's full-bleed trick below uses 50vw, which includes the scrollbar's own width unlike 50%, so it overshoots the real viewport by a few px and would otherwise trigger a horizontal scrollbar */
  font-family: 'Inter', 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--lb-ink-soft);
  background: var(--lb-bg);
  line-height: 1.6;
}
h1, h2, h3, h4 { color: var(--lb-ink); font-weight: 700; }
a { color: var(--lb-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
.lb-container { max-width: var(--lb-max); margin: 0 auto; padding: 0 1.25rem; }

/* Header — copied from apply's header.header-container look (navy bar,
   amber trim, stacked-kicker logo lockup), including its fixed positioning
   (main.css's header.header-container: position:fixed, always visible while
   scrolling — body's padding-top above offsets it). */
.lb-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: var(--lb-header-bg); border-bottom: 1px solid var(--lb-header-trim); }
/* No max-width/centering here on purpose — the hub's header.header-container
   spans the full bar edge to edge (logo pinned left, nav+language pinned
   right via padding alone), unlike the rest of lb's content which stays
   inside --lb-max. */
.lb-header-inner { display: flex; align-items: center; gap: 1rem; padding: 0.85rem 1.5rem; flex-wrap: wrap; }
.lb-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: 0 0 auto; }
.lb-logo img { height: 44px; width: auto; }
.lb-logo .lb-logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.lb-logo .lb-logo-kicker { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #facc15; opacity: 0.9; }
.lb-logo .lb-logo-title { font-size: 1.05rem; font-weight: 800; letter-spacing: 0.02em; color: #fff; white-space: nowrap; }
/* Nav fills the middle and right-aligns its own items, same as the hub's
   #mainMenu (flex:1 1 0) + .nav-list (justify-content:flex-end) — so Pricing
   and FAQ end up hugging the language selector at the right edge instead of
   floating in the middle. */
.lb-nav { display: flex; flex: 1 1 0; min-width: 0; justify-content: flex-end; gap: 1.25rem; flex-wrap: wrap; }
.lb-nav a { text-decoration: none; color: rgba(255,255,255,0.85); font-size: 0.92rem; }
.lb-nav a:hover { color: #fff; }

/* Language selector — copied from apply's header selector (main.css
   "LANGUAGE SELECTOR" block), same markup/classes so it looks and behaves
   identically (public/js/lb-language-selector.js builds the DOM). */
.language-selector-container { flex: 0 0 auto; margin-left: 0; }
.language-selector { position: relative; display: flex; align-items: center; font-size: 1rem; }
.language-dropdown {
  cursor: pointer; user-select: none; background: rgba(255,255,255,0.14); border-radius: 12px;
  padding: 0 1em; height: 36px; display: flex; align-items: center; position: relative;
  border: 1px solid rgba(255,255,255,0.18); min-width: 100px; box-sizing: border-box; color: #fff;
}
.language-dropdown:hover, .language-dropdown.open { background: rgba(255,255,255,0.24); }
.language-current { display: flex; align-items: center; gap: 0.3em; width: 100%; }
.language-arrow { margin-left: auto; font-size: 1.1em; transition: transform 0.3s ease; }
.language-dropdown.open .language-arrow { transform: rotate(180deg); }
.language-dropdown .language-name, .language-dropdown .language-arrow { color: inherit; }
.language-name { flex: 1; font-size: 0.9em; font-weight: 500; }
.language-options {
  position: absolute; top: calc(100% + 8px); right: 0; left: auto; width: max-content; min-width: 140px;
  background: #fff; color: #1e293b; box-shadow: 0 8px 24px rgba(17,24,39,0.15); border-radius: 10px;
  z-index: 5000; display: none; overflow: hidden; border: 1px solid rgba(0,0,0,0.1);
  animation: lb-lang-slide-down 0.2s ease-out;
}
.language-dropdown.open .language-options { display: block; }
.language-option {
  display: flex; align-items: center; gap: 0.7em; padding: 0.6em 1em; cursor: pointer;
  border-bottom: 1px solid #f3f4f6; font-size: 0.95em; transition: background 0.16s; white-space: nowrap; color: inherit;
}
.language-option:last-child { border-bottom: none; }
.language-option.selected, .language-option:hover { background: var(--lb-blue); color: #fff; }
.language-option .language-name { font-size: 0.9em; font-weight: 500; }
@keyframes lb-lang-slide-down { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* Hero — plain, no card/box background (matches prov.css's .hero: just
   padding, no border, no fill) */
.lb-hero { padding: 2.75rem 0 2.5rem; }
.lb-hero h1 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 1rem; max-width: 900px; }
.lb-hero p.lead { color: var(--lb-ink-soft); max-width: 60ch; margin: 0 0 1.5rem; font-size: 1.1rem; }

/* Filter form */
.lb-filter-form { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: end; margin: 1.5rem 0; }
.lb-filter-form label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--lb-ink); margin-bottom: 0.25rem; }
.lb-filter-form select, .lb-filter-form button {
  font-size: 0.95rem; padding: 0.5rem 0.75rem; border-radius: 4px; border: 1px solid var(--lb-line);
}
.lb-filter-form button { background: var(--lb-cta); color: var(--lb-cta-ink); border-color: var(--lb-cta); cursor: pointer; font-weight: 600; }
.lb-filter-form button:hover { background: var(--lb-cta-hover); }

/* CTA buttons — btn-accent (amber, primary) / btn-blue (solid blue,
   secondary) from prov.css, not an lb-invented outline style */
.lb-cta-row { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
.lb-cta-row[hidden] { display: none; }
.lb-selection-count { font-size: 0.9rem; font-weight: 600; color: var(--lb-ink-soft); }

/* Fixed bottom selection bar (search results page) — position:fixed keeps
   it out of normal flow entirely, so it never shifts the footer as it
   appears/disappears; z-index above .guide-nav-btns (999) so it draws over
   those scroll-to-top/bottom buttons rather than fighting them for the
   same corner — body.lb-has-selection-bar (toggled by lb-search.js) shifts
   those buttons up clear of the bar's own height instead. */
.lb-selection-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  background: #fff; border-top: 1px solid var(--lb-line);
  padding: 0.9rem 1.5rem; box-shadow: 0 -2px 12px rgba(0,0,0,0.1);
}
.lb-selection-bar[hidden] { display: none; }
body.lb-has-selection-bar .guide-nav-btns { bottom: 92px; }
.lb-btn { display: inline-block; padding: 0.65rem 1.25rem; border-radius: 4px; text-decoration: none; font-weight: 600; font-size: 0.95rem; border: none; cursor: pointer; }
.lb-btn:hover { text-decoration: none; }
.lb-btn-primary { background: var(--lb-cta); color: var(--lb-cta-ink); }
.lb-btn-primary:hover { background: var(--lb-cta-hover); }
.lb-btn-secondary { background: var(--lb-blue); color: #fff; }
.lb-btn-secondary:hover { background: var(--lb-blue-dark); }

/* Sections — alternating background bands, like prov.css's `section.alt`
   (var(--bg-alt) every other section). lb's page body sits inside one
   shared <main class="lb-container"> (see layout() in lb_views.js), unlike
   the hub's per-section <div class="container">, so .lb-alt breaks out to
   full viewport width with a full-bleed trick (negative margin + matching
   padding) instead of restructuring every page's HTML. */
.lb-section { padding: 2.5rem 0; }
.lb-section.lb-alt {
  background: var(--lb-bg-soft);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50% + 1.25rem);
  padding-right: calc(50vw - 50% + 1.25rem);
}
.lb-section h2 { font-size: 1.5rem; margin: 0 0 1rem; }
.lb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }

/* Lab cards — bordered cards are part of the hub's own design language too
   (path-card/price-card/guide-card in prov.css), kept here for the same
   reason: a list of distinct items, not decorative hero "blocks". */
/* Slightly off-white so cards read as distinct items against the page's
   pure-white background (was the same white as the page, only a 1px border
   separated them) — deliberately lighter than --lb-bg-soft (#f5f5f5), which
   stays reserved for the tag chips sitting on top of the card, so those
   still stand out from the card itself. */
/* Column flex so the tags/contacts/actions block (.lb-tags' margin-top:auto
   below) always anchors to the card's bottom edge, regardless of how much
   title/description text sits above it — .lb-grid already stretches every
   card in a row to the same height, this is what makes that height actually
   used instead of leaving ragged internal alignment. */
.lb-card { background: #fafafa; border: 1px solid var(--lb-line); border-radius: 6px; padding: 1.1rem; display: flex; flex-direction: column; }
/* Landing-page content tables (e.g. find-notified-body-mdr/'s device-class
   breakdown) — plain, no card chrome, matches the rest of the portal's flat
   editorial style. */
.lb-table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: 0.92rem; }
.lb-table th, .lb-table td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--lb-line); }
.lb-table th { font-weight: 700; color: var(--lb-ink); background: #fafafa; }
.lb-result-card { transition: box-shadow 0.15s ease, transform 0.15s ease; }
.lb-result-card:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); transform: translateY(-2px); }
.lb-card h3 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.lb-card h3 a { color: var(--lb-ink); text-decoration: none; }
.lb-card h3 a:hover { text-decoration: underline; }
.lb-card .lb-meta { font-size: 1rem; font-weight: 700; color: var(--lb-ink); margin: 0 0 0.5rem; }
.lb-card p { margin: 0 0 0.5rem; font-size: 0.9rem; color: var(--lb-ink-soft); }
/* Clamped to exactly 4 lines with a visible "…" at the cut-off point —
   more reliable than capping by word count (word length and card width
   both vary, so a fixed word count doesn't map to a fixed line count).
   Full text is only ever shown in the profile modal. */
.lb-card-description {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* margin-top:auto pushes this (and everything after it — contact
   indicators, Add to Request/View Profile) down to the card's bottom edge
   as one group, regardless of how much title/description text sits above
   in that particular card — see .lb-card's comment. Only takes effect
   inside a flex column parent (.lb-card); harmless no-op anywhere .lb-tags
   is used outside one. */
.lb-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: auto; padding-top: 0.75rem; }
.lb-tag {
  font-size: 0.8rem; font-weight: 600; background: #e8edfa; border: 1px solid #c7d3f0;
  border-radius: 4px; padding: 0.25rem 0.6rem; color: var(--lb-blue);
}
/* Accreditation body codes (PCA, DAkkS, …) — deliberately distinct from
   .lb-tag (standards/testing areas): a rounded pill in the same green used
   for the "Verified" badge elsewhere, so it reads as a certification mark
   rather than another capability tag. */
.lb-acc-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0 0 0.4rem; }
.lb-acc-badge {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
  background: #e7f6ec; border: 1px solid #b8e0c4; border-radius: 999px; padding: 0.2rem 0.55rem; color: #1a7a3d;
}

/* Active-filter chips above the results grid — public/js/lb-search.js's
   renderActiveFilters(). Clicking one removes just that filter. */
.lb-active-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; }
.lb-active-filters:empty { display: none; }
.lb-filter-chip {
  font: inherit; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 0.35rem;
  background: #fff; border: 1px solid var(--lb-line); border-radius: 999px; padding: 0.3rem 0.7rem;
  color: var(--lb-ink); cursor: pointer;
}
.lb-filter-chip:hover { border-color: var(--lb-blue); color: var(--lb-blue); }
.lb-filter-chip span { font-weight: 700; }
.lb-link-btn {
  font: inherit; background: none; border: none; padding: 0; color: var(--lb-blue); text-decoration: underline; cursor: pointer;
}

/* Pagination */
.lb-pagination { display: flex; gap: 0.5rem; margin-top: 1.5rem; flex-wrap: wrap; }
.lb-pagination a, .lb-pagination span { padding: 0.4rem 0.75rem; border: 1px solid var(--lb-line); border-radius: 4px; text-decoration: none; color: var(--lb-ink); font-size: 0.9rem; }
.lb-pagination .is-current { background: var(--lb-blue); color: #fff; border-color: var(--lb-blue); }

/* Profile (used inside the modal now — public/js/lb-search.js's
   renderProfileModalBody — there's no separate profile page anymore) */
.lb-profile-header { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: start; margin-bottom: 1.5rem; }
.lb-badge { display: inline-block; font-size: 0.8rem; padding: 0.2rem 0.6rem; border-radius: 4px; }
.lb-badge-verified { background: #e6ecf7; color: var(--lb-blue); }
dl.lb-facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1rem; margin: 0 0 1.5rem; }
dl.lb-facts dt { color: var(--lb-ink-soft); font-size: 0.9rem; }
dl.lb-facts dd { margin: 0; font-size: 0.95rem; }

/* Search page (services/lb_search_service.js) — plain, no box background
   (matches prov.css's .hero-micro/.trust-row: unboxed text lines) */
.lb-lead-strong { font-weight: 600; color: var(--lb-ink); max-width: 60ch; }
.hl { color: var(--lb-blue); font-weight: 700; }
.lb-trust-line { font-size: 0.82rem; color: var(--lb-ink-soft); margin-top: -0.25rem; }
/* Search form fields — copied from apply's own hero-form/search-form look
   (prov.css .hero-form on top of main.css's global input/select/button
   reset — prov.css never resets main.css's border-radius, so both the
   fields (0.8em, main.css) and the submit button (1.4em, main.css) end up
   rounded even though prov.css's own rules never mention border-radius). */
.lb-search-form { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; margin: 1.5rem 0; }
.lb-search-form > div { display: flex; flex-direction: column; gap: 6px; }
.lb-search-form label { font-size: 0.8125rem; font-weight: 600; color: var(--lb-ink); }
.lb-search-form input[type="text"] {
  font-family: inherit; font-size: 1rem; color: var(--lb-ink);
  padding: 12px 14px; border: 1px solid var(--lb-line); border-radius: 0.8em; background: #fff; min-width: 260px;
}
.lb-search-form input[type="text"]:focus { outline: 2px solid var(--lb-blue); outline-offset: -1px; }
.lb-search-form select {
  font-family: inherit; font-size: 1rem; color: var(--lb-ink);
  padding: 12px 40px 12px 14px; border: 1px solid var(--lb-line); border-radius: 0.8em; background: #fff; min-width: 200px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath stroke='%23666' stroke-width='1.5' d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.lb-search-form select:focus { outline: 2px solid var(--lb-blue); outline-offset: -1px; }
.lb-search-form button {
  font-family: inherit; font-size: 1.0625rem; font-weight: 600; padding: 14px 32px; border-radius: 999px;
  background: var(--lb-cta); color: var(--lb-cta-ink); border: none; cursor: pointer;
}
.lb-search-form button:hover { background: var(--lb-cta-hover); }
.lb-verify-cta { padding: 1rem 0; margin: 1rem 0; border-top: 1px solid var(--lb-line); border-bottom: 1px solid var(--lb-line); }
.lb-verify-cta p { margin: 0 0 0.6rem; }
.lb-form-inline { display: flex; flex-direction: row; gap: 0.5rem; max-width: none; margin-top: 0; }
.lb-form-inline input { flex: 1; }
.lb-contact-indicators { display: flex; gap: 0.6rem; flex-wrap: wrap; font-size: 0.78rem; color: var(--lb-ink-soft); margin: 0.35rem 0; }
.lb-contact-indicators span { display: inline-flex; align-items: center; gap: 0.25rem; }
.lb-result-card .lb-score { font-size: 1rem; color: var(--lb-blue); font-weight: 700; }
/* Bottom of the card: Add to Request (primary chip, toggles to "Remove from
   Request" once checked) + View Profile (secondary link) side by side. */
.lb-card-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.75rem; }
.lb-result-card label.lb-pick {
  display: flex; align-items: center; gap: 0.4rem; width: fit-content;
  font-size: 0.82rem; font-weight: 600; color: var(--lb-ink-soft);
  padding: 0.3rem 0.7rem; margin: 0;
  border: 1px solid var(--lb-line); border-radius: 999px; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.lb-result-card label.lb-pick:hover { border-color: var(--lb-blue); color: var(--lb-blue); }
.lb-result-card label.lb-pick:has(input:checked) { background: var(--lb-blue); border-color: var(--lb-blue); color: #fff; }
.lb-view-profile-btn { padding: 0.3rem 0.7rem; font-size: 0.82rem; font-weight: 600; border-radius: 999px; background: transparent; color: var(--lb-ink-soft); border: 1px solid var(--lb-line); }
.lb-view-profile-btn:hover { border-color: var(--lb-blue); color: var(--lb-blue); background: transparent; }
/* Laboratory name as a plain button styled like the old <h3><a> heading link
   (public/js/lb-search.js's card()) — no real href anymore, opens the modal. */
.lb-result-card h3 { margin: 0 0 0.6rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--lb-line); }
.lb-profile-link { background: none; border: none; padding: 0; margin: 0; font: inherit; font-weight: 700; color: var(--lb-blue); cursor: pointer; text-align: left; }
.lb-profile-link:hover { text-decoration: underline; }

/* Secondary "prefer to contact directly" disclosure, in the profile modal
   (public/js/lb-search.js's renderProfileModalBody). */
.lb-contact-disclosure { padding: 1rem 0 0; margin-top: 0.5rem; }
.lb-contact-disclosure-prompt { font-size: 0.88rem; color: var(--lb-ink-soft); margin: 0 0 0.5rem; }
.lb-contact-details { margin-top: 0.75rem; font-size: 0.9rem; }
.lb-contact-details p { margin: 0.3rem 0; }
.lb-form { display: flex; flex-direction: column; gap: 0.6rem; max-width: 420px; margin-top: 1rem; }
.lb-form[hidden] { display: none; }
.lb-form label { font-size: 0.85rem; color: var(--lb-ink-soft); }
.lb-form input[type="text"], .lb-form input[type="email"], .lb-form textarea, .lb-form select {
  font-size: 0.95rem; padding: 0.5rem 0.65rem; border-radius: 4px; border: 1px solid var(--lb-line); font-family: inherit; width: 100%; box-sizing: border-box;
}
.lb-form textarea { resize: vertical; }
.lb-form .lb-form-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.lb-form .lb-checkbox-group { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.lb-form .lb-checkbox-group label { display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--lb-ink); }
.lb-form button { align-self: start; }
.lb-form-msg { font-size: 0.88rem; color: var(--lb-ink-soft); margin: 0; }
#lb-edit-modal .lb-form { max-width: none; }

/* Breadcrumbs */
.lb-breadcrumbs { font-size: 0.85rem; color: var(--lb-ink-soft); margin: 1rem 0; }
.lb-breadcrumbs a { color: var(--lb-ink-soft); }

/* Footer — copied from apply's .site-footer look (dark translucent bar,
   column dividers, muted link color) */
.lb-footer { background: var(--lb-footer-bg); padding: 1.5rem 0; margin-top: 2rem; }
.lb-footer > .lb-container > div:first-child { color: var(--lb-footer-ink); font-size: 0.9rem; }
.lb-footer nav[aria-label="Footer"] { margin-top: 0.6rem; font-size: 0.85rem; }
.lb-footer nav[aria-label="Footer"] a { color: var(--lb-footer-ink); text-decoration: none; }
.lb-footer nav[aria-label="Footer"] a:hover { color: var(--lb-footer-ink-hover); text-decoration: underline; }
.lb-footer .lb-editorial { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); font-size: 0.8rem; }

/* Faq */
.lb-faq dt { font-weight: 600; margin-top: 1rem; color: var(--lb-ink); }
.lb-faq dd { margin: 0.25rem 0 0; color: var(--lb-ink-soft); }

/* ── Homepage marketing sections — ported from the apply zone's own
   homepage (public/html/prov/index.html), same section pattern
   (section-label / h2 / lead), LAB-only content. ────────────────────────── */
.lb-section-label { display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lb-cta-ink); background: var(--lb-cta); padding: 0.2rem 0.7rem; border-radius: 3px; margin-bottom: 0.75rem; }
.lb-section h2 { max-width: 50ch; }
.lb-transition-line { font-size: 1.05rem; font-weight: 600; color: var(--lb-ink); margin-top: 1.5rem; }

/* Included with your access — path cards */
.lb-paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; }
.lb-path-card h3 { font-size: 1.1rem; margin: 0 0 0.5rem; }
.lb-path-card p { font-size: 0.92rem; color: var(--lb-ink-soft); margin: 0; }

/* Platform preview — mock tabs */
.lb-mock-tabs-nav { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 1.5rem 0 1rem; }
.lb-mock-tab-btn { font-size: 0.85rem; font-weight: 600; padding: 0.55rem 1rem; border: 1px solid var(--lb-line); background: #fff; color: var(--lb-ink-soft); cursor: pointer; border-radius: 4px; }
.lb-mock-tab-btn.is-active { background: var(--lb-blue); color: #fff; border-color: var(--lb-blue); }
.lb-screenshot-frame { border: 1px solid var(--lb-line); border-radius: 6px; overflow: hidden; }
.lb-screenshot-frame-bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.75rem; background: var(--lb-bg-soft); border-bottom: 1px solid var(--lb-line); }
.lb-screenshot-frame-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--lb-line); display: inline-block; }
.lb-screenshot-frame-url { margin-left: 0.5rem; font-size: 0.78rem; color: var(--lb-ink-soft); font-family: monospace; }
.lb-mock-tab-panel { display: none; padding: 1.5rem; }
.lb-mock-tab-panel.is-active { display: block; }
.lb-example-note { font-size: 0.8rem; color: var(--lb-ink-soft); text-align: center; padding: 0.75rem; }

/* Real product screenshots (search card / agent chat / cabinet), one per
   mock tab panel above — replaced the hand-built mock markup so this section
   shows what the product actually looks like. */
.lb-preview-screenshot { display: block; max-width: 100%; height: auto; margin: 0 auto; }

/* Sample request modal — its own highlighted box within the (plain-background)
   platform-preview section, so it reads as a distinct callout, not more
   running section copy. */
.lb-samples-block { margin-top: 2rem; padding: 1.5rem; background: var(--lb-bg-soft); border-radius: 8px; }
.lb-samples-block h3 {
  display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--lb-cta-ink); background: var(--lb-cta); padding: 0.2rem 0.7rem; border-radius: 3px; margin: 0 0 0.75rem;
}
.lb-sample-btn { font-size: 0.9rem; padding: 0.6rem 1.25rem; border: 1px solid var(--lb-blue); background: #fff; color: var(--lb-blue); border-radius: 4px; cursor: pointer; font-weight: 600; }
.lb-sample-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: none; align-items: center; justify-content: center; z-index: 2000; }
.lb-sample-modal.is-open { display: flex; }
.lb-sample-modal-box { position: relative; width: 90%; max-width: 900px; height: 85vh; background: #fff; border-radius: 6px; overflow: hidden; }
.lb-sample-modal-box iframe { width: 100%; height: 100%; border: none; }
.lb-sample-modal-close { position: absolute; top: 0.5rem; right: 0.75rem; font-size: 1.5rem; background: none; border: none; cursor: pointer; color: var(--lb-ink); z-index: 1; }

/* Laboratory profile card modal (public/js/lb-search.js's openProfileModal) —
   the real /laboratories/{id}-{slug}/ page stays the crawlable SEO URL; this
   is the in-page "View Profile" experience so the selection in progress
   isn't lost by navigating away. */
.lb-profile-modal[hidden] { display: none; }
.lb-profile-modal { position: fixed; inset: 0; z-index: 2100; }
.lb-profile-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.lb-profile-modal-box { position: relative; margin: 5vh auto; width: 90%; max-width: 640px; max-height: 88vh; overflow-y: auto; background: #fff; border-radius: 8px; padding: 2rem; }
.lb-profile-modal-close { position: absolute; top: 0.75rem; right: 0.9rem; font-size: 1.5rem; line-height: 1; background: none; border: none; cursor: pointer; color: var(--lb-ink); }

/* Pricing cards */
.lb-price-cards-row { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 1.5rem; }
.lb-price-card {
  background: #fff; border: 1px solid var(--lb-line); border-left: 4px solid var(--lb-cta);
  border-radius: 8px; padding: 2rem 1.5rem; flex: 1 1 260px; text-align: center;
}
.lb-price-plan-label { display: block; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.02em; color: var(--lb-blue); margin-bottom: 0.6rem; }
.lb-price-value { display: block; font-size: 2.8rem; font-weight: 700; color: var(--lb-ink); line-height: 1.1; }
.lb-price-terms { font-size: 0.9rem; font-weight: 600; color: var(--lb-ink); margin: 1.25rem 0 0; }
.lb-price-card .lb-price-btn { display: block; width: 100%; border-radius: 999px; padding: 0.85rem 1.5rem; margin-top: 1.25rem; }
.lb-anti-pricing { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.85rem; color: var(--lb-ink-soft); margin-top: 1rem; }

/* The data — stats */
.lb-stats-primary { display: flex; align-items: baseline; gap: 2rem; flex-wrap: wrap; margin: 1.5rem 0; }
.lb-stat-hero .lb-num { font-size: 2.6rem; font-weight: 700; color: var(--lb-blue); }
.lb-stat-hero .lb-desc { display: block; font-size: 0.95rem; color: var(--lb-ink-soft); }

/* Each breakdown (by testing area / by standard / by country) is its own
   bordered card, clearly separated from the others — not one long
   undifferentiated flex-wrap list. */
.lb-stats-breakdown-group {
  background: #fff;
  border: 1px solid var(--lb-line);
  border-top: 4px solid var(--lb-stats-accent, var(--lb-blue));
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}
/* Each group gets its own accent color — a quick visual cue for which
   breakdown you're looking at, instead of three identical gray blocks. */
.lb-stats-breakdown-group--area { --lb-stats-accent: var(--lb-blue); --lb-stats-tile-bg: #eef2fb; }
.lb-stats-breakdown-group--standard { --lb-stats-accent: #0f766e; --lb-stats-tile-bg: #eafaf6; }
.lb-stats-breakdown-group--country { --lb-stats-accent: #6d28d9; --lb-stats-tile-bg: #f4f0fc; }
.lb-stats-breakdown-label { font-size: 0.9rem; font-weight: 700; color: var(--lb-ink); margin-bottom: 0.9rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--lb-line); }
/* minmax lower bound tuned so 5 columns fit across the section's max width
   (992px content width inside .lb-stats-breakdown-group's padding) instead
   of 7 cramped-looking ones — auto-fill still drops to fewer on narrower
   viewports. */
.lb-stats-breakdown { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.75rem; }
.lb-stats-breakdown-item {
  background: var(--lb-stats-tile-bg, var(--lb-bg-soft));
  border-radius: 6px;
  padding: 0.5rem 0.9rem;
}
.lb-stats-breakdown-item .lb-num { display: block; font-size: 1.3rem; font-weight: 700; color: var(--lb-ink); }
.lb-stats-breakdown-item .lb-desc { display: flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; font-weight: 600; color: var(--lb-stats-accent, var(--lb-blue)); margin-top: 0.15rem; }
/* Emoji icon (testing-area / legislation) sits next to the count, not inline
   with the label text — the label can wrap to 3-4 lines on narrow tiles
   (long legislation names especially), which left the icon looking stranded
   mid-paragraph when it lived inside .lb-desc instead. */
.lb-stats-num-row { display: flex; align-items: center; gap: 0.35rem; }
.lb-stats-icon { font-size: 1.425rem; line-height: 1; }
.lb-country-flag { border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.1); flex-shrink: 0; vertical-align: middle; margin-right: 0.35rem; }
.lb-stats-footer { font-size: 0.85rem; color: var(--lb-ink-soft); margin-top: 1rem; }

/* Floating scroll-to-top/bottom widget — same classes/markup contract as the
   hub's shared public/js/back-scroll-nav.js (see guides.css's identical
   rules), reused unmodified rather than forking the script. No back-link
   button here (unlike guide pages) — there's no single "back to X" this
   page's buttons should point to. */
.guide-nav-btns { position: fixed; right: 20px; bottom: 30px; z-index: 999; display: flex; flex-direction: column; gap: 10px; }
.guide-nav-btn { box-sizing: border-box; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15); background: var(--lb-header-bg); color: #fff; font-size: 1.1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,0.25); text-decoration: none; opacity: 1; transition: opacity .2s ease, transform .2s ease, background .2s ease; }
.guide-nav-btn.guide-nav-scroll { opacity: 0; pointer-events: none; }
.guide-nav-btn.guide-nav-scroll.visible { opacity: 1; pointer-events: auto; }
.guide-nav-btn:hover { transform: translateY(-2px); background: var(--lb-blue-dark); }
@media (max-width: 768px) {
  .guide-nav-btns { right: 10px; bottom: 16px; gap: 8px; }
  .guide-nav-btn { width: 38px; height: 38px; font-size: 1rem; }
}

/* "Open Request" — floats fixed on the right, above the scroll-nav-btns
   stack, instead of sitting in normal flow after the results grid (where it
   was invisible without scrolling all the way past the last row of cards). */
#lb-open-request-row { position: fixed; right: 20px; bottom: 100px; z-index: 998; margin: 0; }
#lb-open-request-row .lb-btn { box-shadow: 0 4px 14px rgba(0,0,0,0.25); border-radius: 999px; padding: 0.85rem 1.75rem; }
@media (max-width: 768px) {
  #lb-open-request-row { right: 10px; bottom: 78px; }
}

/* Mobile */
@media (max-width: 480px) {
  .lb-header-inner { flex-direction: column; align-items: flex-start; }
  body { padding-top: 220px; } /* stacked header (logo/nav/language rows) is taller than the desktop offset */
  .lb-profile-header { flex-direction: column; }
  .lb-mock-tabs-nav { flex-direction: column; }
}