/* ============================================================
   landing.css — page-specific styles for landing.php ONLY
   ------------------------------------------------------------
   Loaded AFTER main.css / style.css / main-design.css, so these
   rules win without !important.

   RULES FOR THIS FILE
   1. Everything is scoped under .lp-page. No bare element
      selectors (h1, a, img, body) — they would leak sitewide.
   2. Every class is prefixed .lp- so nothing collides with the
      ~5,000 rules already in the common stylesheets.
      (.hero alone has 30 rules in common CSS.)
   3. Structure only: layout, spacing, sizing, breakpoints.
      Colour and type come from common tokens.

   TYPE + COLOUR ALIGNMENT
   • Fonts: var(--nav-font) / var(--heading-font) / var(--default-font),
     all Nunito, already loaded by header2-links.php.
   • Sizes: px on the repo's 10/11/12/13/14/16/17/20/26/36/40 rhythm.
   • Colour: repo tokens wherever one exists.

   ---- BREAKPOINTS -------------------------------------------
   Realigned to the repo's Bootstrap 5 grid. The old values
   (620 / 840 / 900 / 1000) matched nothing in the codebase, so
   layouts shifted between the repo's own breakpoints.

       1199.98px  xl   desktop -> laptop
        991.98px  lg   the busiest repo breakpoint (29 blocks)
        767.98px  md   tablet  (25 blocks)
        575.98px  sm   phone   (14 blocks)

   Every desktop value above 1200px is unchanged. The tiers below
   are additive: they only reduce padding, collapse grids and
   fix things that previously held a desktop value all the way
   down to 320px.
   ============================================================ */

/* ---------- page-local tokens ----------
   Scoped to .lp-page, NOT :root, so the global palette is
   untouched. Only values with NO repo equivalent live here.   */
.lp-page {
  /* Severity scale — functional data colours. The repo has no
     danger/warning/neutral tokens, so these stay local.        */
  --lp-crit: #b3382f;
  --lp-high: #c6862a;
  --lp-med: #98a0b5;

  /* Stats-band semantics — "cost of standing still" vs "what
     automation changes". Same story: no repo equivalent, and
     repo blues would not read on the dark navy band.           */
  --lp-warn: #ffb65c;
  --lp-good: #8bf3dc;
  --lp-good-deep: #1fc3a6;

  /* neutrals, derived from repo values */
  --lp-line: rgba(33, 33, 33, 0.1); /* from --default-color #212121 */
  --lp-muted: var(--inverse-color, #494b5b);
  --lp-haze: var(--bg-grey, #edf1ef);
  --lp-surface: var(--img-bg-light-blue, #effaff);

  /* radii + elevation */
  --lp-r-md: 16px;
  --lp-r-lg: 24px;
  --lp-r-xl: 32px;
  --lp-sh-s:
    0 1px 2px rgba(33, 33, 33, 0.06), 0 4px 16px rgba(33, 33, 33, 0.05);
  --lp-sh-m:
    0 2px 6px rgba(33, 33, 33, 0.06), 0 18px 50px rgba(33, 33, 33, 0.1);
  --lp-sh-l: 0 30px 90px rgba(33, 33, 33, 0.18);

  /* vertical rhythm — every section reads from this, so the whole
     page tightens from one place at each breakpoint below */
  --lp-pad: 96px;
}

/* ---------- shared bits ---------- */
.lp-page .lp-section {
  padding: var(--lp-pad) 0;
}
.lp-page .lp-section-tight {
  padding-top: 0;
}

.lp-page .lp-eyebrow {
  font-family: var(--nav-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-color);
  display: block;
}

.lp-page .lp-lede {
  max-width: 56ch;
}

.lp-page .lp-head {
  max-width: 780px;
}
.lp-page .lp-head h2 {
  margin-top: 14px;
}
.lp-page .lp-head .lp-lede {
  margin-top: 18px;
}

/* ============================================================
   HERO
   mockup-header.php is position:fixed, so the top padding
   clears the floating pill (top:14px + ~60px tall).
   ============================================================ */
.lp-page .lp-hero {
  position: relative;
  padding: 150px 0 96px;
  text-align: center;
  overflow: hidden;
}
.lp-page .lp-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--lp-surface);
}
.lp-page .lp-hero-bg::before,
.lp-page .lp-hero-bg::after {
  content: "";
  position: absolute;
}

/* Decorative gradient mesh. These four stops are the mockup's own
   and have no repo equivalent — the palette carries no violet,
   peach or mint. Left as-is so the hero reads as designed.      */
.lp-page .lp-hero-bg::before {
  inset: -20%;
  background:
    radial-gradient(48% 55% at 12% 6%, #4b6bff 0%, rgba(75, 107, 255, 0) 62%),
    radial-gradient(46% 50% at 88% 10%, #a78bfa 0%, rgba(167, 139, 250, 0) 62%),
    radial-gradient(52% 46% at 78% 88%, #ffd9a8 0%, rgba(255, 217, 168, 0) 60%),
    radial-gradient(46% 44% at 14% 86%, #a7f3e4 0%, rgba(167, 243, 228, 0) 60%);
}
/* inset:0 so the fade lands on pure white exactly at the hero edge */
.lp-page .lp-hero-bg::after {
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 26%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0.72) 70%,
    rgba(255, 255, 255, 0.93) 86%,
    #fff 97%,
    #fff 100%
  );
}
.lp-page .lp-hero > .container {
  position: relative;
  z-index: 1;
}
.lp-page .lp-hero h1 {
  margin: 0 auto;
  max-width: 16ch;
}
.lp-page .lp-hero .lp-lede {
  margin: 20px auto 0;
}

.lp-page .lp-hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 36px;
}

.lp-page .lp-hero-shot {
  margin: 52px auto 0;
  max-width: 980px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: #fff;
  box-shadow:
    0 2px 6px rgba(33, 33, 33, 0.06),
    0 44px 110px rgba(33, 33, 33, 0.24);
}
.lp-page .lp-hero-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 1082 / 694;
  object-fit: contain;
  object-position: top center;
}

/* ============================================================
   TRUST ROW / SECTORS
   ============================================================ */
.lp-page .lp-trust {
  /* --lp-trust-top is the breathing room between the hero and this row.
     The hero already carries 96px of bottom padding, so this sits on top
     of that. Tune here. */
  --lp-trust-top: 56px;
  padding: var(--lp-trust-top) 0 10px;
  text-align: center;
}
.lp-page .lp-sectors {
  display: flex;
  justify-content: center;
  gap: 34px;
  margin-top: 26px;
  flex-wrap: wrap;
  padding: 0;
  list-style: none;
}
.lp-page .lp-sector {
  width: 96px;
}
/* Each tile is a link to its industry page. Anchor wraps the disc and
   the name so the whole tile is one target, not just the text. */
.lp-page .lp-sector-link {
  display: block;
  padding: 4px 2px 6px;
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.lp-page .lp-sector-link:hover,
.lp-page .lp-sector-link:focus-visible {
  color: var(--accent-color);
  text-decoration: none;
}
.lp-page .lp-sector-link:focus-visible {
  outline: 3px solid var(--accent-color);
  outline-offset: 2px;
}
.lp-page .lp-sector-disc {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--lp-line);
  box-shadow: var(--lp-sh-s);
  display: grid;
  place-items: center;
  color: var(--accent-color);
  font-size: 24px;
  transition: transform 0.2s ease;
}
.lp-page .lp-sector-link:hover .lp-sector-disc,
.lp-page .lp-sector-link:focus-visible .lp-sector-disc {
  transform: translateY(-3px);
  border-color: rgba(5, 58, 195, 0.25);
  box-shadow:
    0 2px 6px rgba(33, 33, 33, 0.06),
    0 10px 24px rgba(5, 58, 195, 0.16);
}
.lp-page .lp-sector-name {
  display: block;
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.35;
  margin: 0;
}
/* The CFR code line under each sector is switched off here so the row is
   correct with the CSS alone. */
.lp-page .lp-sector-code {
  display: none;
}

/* ============================================================
   VIDEO
   ============================================================ */
.lp-page .lp-video {
  padding: 56px 0 90px;
}
.lp-page .lp-browser {
  border-radius: var(--lp-r-lg);
  overflow: hidden;
  box-shadow: var(--lp-sh-l);
  border: 1px solid var(--lp-line);
  background: #fff;
  max-width: 900px;
  margin: 0 auto;
}
.lp-page .lp-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  background: var(--lp-haze);
  border-bottom: 1px solid var(--lp-line);
}
/* Traffic lights — functional OS chrome, deliberately literal. */
.lp-page .lp-chrome-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}
.lp-page .lp-chrome-dot-r {
  background: #ff5f57;
}
.lp-page .lp-chrome-dot-y {
  background: #febc2e;
}
.lp-page .lp-chrome-dot-g {
  background: #28c840;
}
.lp-page .lp-urlbar {
  flex: 1;
  max-width: 340px;
  margin: 0 auto;
  background: #fff;
  border-radius: 999px;
  padding: 4px 12px;
  font-family: var(--nav-font);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--lp-muted);
  text-align: center;
}
.lp-page .lp-stage {
  --lp-poster: url("../images/global/landing/video-thumbnail.png");

  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    var(--lp-poster) center / cover no-repeat,
    var(--lp-surface);
}
.lp-page .lp-stage video,
.lp-page .lp-stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 3;
  object-fit: cover;
}
/* Added by the play handler once the film is swapped in: the poster,
   the button and the caption all step aside for the player. */
.lp-page .lp-stage-playing {
  background: #000;
}
.lp-page .lp-stage-playing .lp-playbtn,
.lp-page .lp-stage-playing .lp-ph-label {
  display: none;
}
.lp-page .lp-playbtn {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  position: relative;
  z-index: 2;
  background: var(--contrast-color, #fff);
  color: var(--accent-color);
  display: grid;
  place-items: center;
  /* neutral shadow, not the blue one — a blue glow under a white button
     reads as a stray halo now that the fill is no longer accent-coloured */
  box-shadow: 0 18px 40px rgba(33, 33, 33, 0.28);
  transition: transform 0.2s ease;
}
.lp-page .lp-playbtn .bi {
  font-size: 32px;
  line-height: 1;
}
.lp-page .lp-playbtn:hover {
  transform: scale(1.06);
}
.lp-page .lp-playbtn:focus-visible {
  outline: 3px solid var(--accent-color);
  outline-offset: 4px;
}
.lp-page .lp-ph-label {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--nav-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lp-muted);
  background: #ffffff;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--lp-line);
  white-space: nowrap;
}

/* ============================================================
   CERTIFICATION TRAINING RECORDER
   ============================================================ */
.lp-page .lp-rec {
  padding: 10px 0 104px;
}
.lp-page .lp-rec-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 64px;
  align-items: center;
}
.lp-page .lp-pill-new {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 5px 12px 5px 6px;
  border-radius: 999px;
  background: rgba(5, 58, 195, 0.07);
  border: 1px solid rgba(5, 58, 195, 0.16);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.lp-page .lp-pill-new b {
  font-family: var(--nav-font);
  font-size: 10px;
  letter-spacing: 0.1em;
  background: var(--accent-color);
  color: var(--contrast-color, #fff);
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 700;
}
.lp-page .lp-pill-new span {
  font-family: var(--nav-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-color);
}
.lp-page .lp-rec-list {
  list-style: none;
  display: grid;
  gap: 14px;
  margin: 28px 0 30px;
  padding: 0;
}
.lp-page .lp-rec-list li {
  display: flex;
  gap: 12px;
  line-height: 1.5;
}
.lp-page .lp-rec-list .bi {
  flex: none;
  margin-top: 3px;
  font-size: 15px;
  line-height: 1;
  color: var(--accent-color);
}

/* ---- UI preview panel ---- */
.lp-page .lp-ui {
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-lg);
  background: #fff;
  box-shadow: var(--lp-sh-m);
  padding: 22px;
  overflow: hidden;
}
.lp-page .lp-ui-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.lp-page .lp-ui-num {
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: 40px;
  letter-spacing: -0.05em;
  color: var(--accent-color);
  margin: 0;
}
.lp-page .lp-ui-num span {
  font-family: var(--default-font);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
  margin-left: 9px;
  color: var(--lp-muted);
}
.lp-page .lp-ui-scope {
  font-family: var(--nav-font);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--lp-muted);
}
.lp-page .lp-ui-bar {
  display: flex;
  gap: 3px;
  margin: 16px 0 12px;
}
.lp-page .lp-ui-seg {
  height: 8px;
  border-radius: 999px;
}
.lp-page .lp-ui-seg-crit {
  background: var(--lp-crit);
}
.lp-page .lp-ui-seg-high {
  background: var(--lp-high);
}
.lp-page .lp-ui-seg-med {
  background: var(--lp-med);
}
.lp-page .lp-ui-legend {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.lp-page .lp-ui-legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 7px;
}
.lp-page .lp-ui-search {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 18px 0 10px;
  padding: 10px 14px;
  border: 1px solid var(--lp-line);
  border-radius: 12px;
  color: var(--lp-muted);
  font-size: 13px;
  background: var(--lp-haze);
}
.lp-page .lp-ui-search .bi {
  font-size: 14px;
  line-height: 1;
}
.lp-page .lp-ui-chips {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.lp-page .lp-ui-chip {
  font-size: 12px;
  border: 1px solid var(--lp-line);
  background: #fff;
  padding: 5px 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.lp-page .lp-ui-chip-on {
  border-color: rgba(5, 58, 195, 0.35);
  background: rgba(5, 58, 195, 0.06);
  color: var(--accent-color);
  font-weight: 600;
}
.lp-page .lp-ui-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.lp-page .lp-ui-card {
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-md);
  padding: 15px;
  background: #fff;
}
.lp-page .lp-ui-cardtop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 11px;
  gap: 8px;
  flex-wrap: wrap;
}
.lp-page .lp-ui-cfr {
  font-family: var(--nav-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--accent-color);
  color: var(--contrast-color, #fff);
  padding: 3px 8px;
  border-radius: 6px;
}
.lp-page .lp-ui-sev {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  color: var(--contrast-color, #fff);
  white-space: nowrap;
}
.lp-page .lp-ui-sev-crit {
  background: var(--lp-crit);
}
.lp-page .lp-ui-sev-high {
  background: var(--lp-high);
}
.lp-page .lp-ui-card h4 {
  font-family: var(--heading-font);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.28;
  margin: 0;
}
.lp-page .lp-ui-sub {
  font-size: 11px;
  color: var(--lp-muted);
  margin: 5px 0 11px;
}
.lp-page .lp-ui-meta {
  display: grid;
  gap: 7px;
  font-size: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-page .lp-ui-meta li {
  display: flex;
  gap: 7px;
  align-items: flex-start;
}
.lp-page .lp-ui-meta .bi {
  flex: none;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1;
  color: var(--lp-muted);
}
.lp-page .lp-ui-prov {
  margin: 12px 0 0;
  padding: 9px 11px;
  border-radius: 10px;
  background: var(--lp-haze);
  font-size: 11px;
  line-height: 1.4;
}
.lp-page .lp-ui-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--lp-line);
  font-family: var(--nav-font);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--lp-muted);
}

/* ============================================================
   FEATURE THREE-UP
   ============================================================ */
.lp-page .lp-three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
  margin-top: 64px;
}
.lp-page .lp-feat-ico {
  width: 46px;
  height: 46px;
  font-size: 22px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--contrast-color, #fff);
  background: var(--accent-color);
  margin-bottom: 18px;
}
.lp-page .lp-feat h3 {
  margin-bottom: 8px;
  font-size: 17px;
}

/* ============================================================
   OSHA PANEL
   ============================================================ */
.lp-page .lp-osha {
  padding: 0 0 110px;
}
.lp-page .lp-osha-panel {
  background: var(--lp-haze);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-xl);
  padding: 52px 52px 46px;
}
.lp-page .lp-osha-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
}
.lp-page .lp-osha-head h2 {
  margin-top: 14px;
  max-width: 20ch;
}
.lp-page .lp-osha-head .lp-lede {
  margin-top: 16px;
  max-width: 52ch;
}
.lp-page .lp-osha-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 44px;
  background: var(--lp-line);
  border-radius: 18px;
  overflow: hidden;
  padding: 0;
  list-style: none;
}
.lp-page .lp-osha-metric {
  background: #fff;
  padding: 26px 28px;
}
.lp-page .lp-osha-metric b {
  display: block;
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: 40px;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--accent-color);
}
.lp-page .lp-osha-metric span {
  display: block;
  margin-top: 10px;
  font-size: 14px;
}
.lp-page .lp-osha-blocks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 46px;
}
.lp-page .lp-osha-block {
  border-top: 1px solid rgba(33, 33, 33, 0.13);
  padding-top: 20px;
}
.lp-page .lp-osha-block .lp-idx {
  font-family: var(--nav-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent-color);
  display: block;
  margin-bottom: 12px;
}
.lp-page .lp-osha-block h3 {
  margin-bottom: 9px;
  font-size: 17px;
}

/* ============================================================
   STATS BAND
   ============================================================ */
.lp-page .lp-band {
  background: var(--dark-blue, #1c274c);
  color: var(--contrast-color, #fff);
  padding: 88px 0 88px;
  position: relative;
  overflow: hidden;
}
/* scrolling CFR ticker — the audit-trail motif */
/* .lp-page .lp-band::after {
  content: "29 CFR 1910 · 40 CFR 262 · 45 CFR 164 · 29 CFR 1904 · 40 CFR 60 · 29 CFR 1926 · 21 CFR 11 · ";
  position: absolute;
  bottom: 16px;
  left: 0;
  white-space: nowrap;
  font-family: var(--nav-font);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.13);
  animation: lp-slide 42s linear infinite;
}
@keyframes lp-slide {
  to {
    transform: translateX(-50%);
  }
} */

.lp-page .lp-band h2 {
  color: var(--contrast-color, #fff);
  max-width: 20ch;
  margin-top: 14px;
}
.lp-page .lp-band .lp-lede {
  color: rgba(255, 255, 255, 0.62);
  margin-top: 16px;
}
.lp-page .lp-band-eyebrow {
  color: var(--lp-warn);
}

.lp-page .lp-groups {
  display: grid;
  gap: 54px;
  margin-top: 60px;
}
.lp-page .lp-glabel {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}
.lp-page .lp-glabel i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}
.lp-page .lp-glabel span {
  font-family: var(--nav-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.lp-page .lp-glabel .lp-rule {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.13);
}
/* group semantics — replaces the inline hex that was in landing.php */
.lp-page .lp-dot-warn {
  background: var(--lp-warn);
}
.lp-page .lp-dot-good {
  background: var(--lp-good-deep);
}
.lp-page .lp-lbl-warn {
  color: var(--lp-warn);
}
.lp-page .lp-lbl-good {
  color: var(--lp-good);
}

.lp-page .lp-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.lp-page .lp-stat {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: 18px;
}
.lp-page .lp-stat-n {
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: 36px;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--contrast-color, #fff);
  margin: 0;
}
.lp-page .lp-stat-l {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.62);
  margin: 10px 0 0;
  line-height: 1.5;
}
.lp-page .lp-stat-s {
  font-family: var(--nav-font);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.32);
  margin: 12px 0 0;
}
/* outcome stats read in the accent, so the colour means "this is the upside" */
.lp-page .lp-stat-up {
  border-top-color: rgba(31, 195, 166, 0.42);
}
.lp-page .lp-stat-up .lp-stat-n {
  color: var(--lp-good);
}
.lp-page .lp-stat-up .lp-stat-s {
  color: rgba(139, 243, 220, 0.45);
}

.lp-page .lp-band-close {
  margin-top: 60px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  max-width: 66ch;
}
.lp-page .lp-band-close b {
  color: var(--contrast-color, #fff);
  font-weight: 600;
}

/* ============================================================
   PRODUCTS
   ============================================================ */
.lp-page .lp-prods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 56px;
}
.lp-page .lp-prod {
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-xl);
  padding: 34px;
  background: var(--lp-haze);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;
}
.lp-page .lp-prod:hover {
  transform: translateY(-4px);
  box-shadow: var(--lp-sh-m);
}
.lp-page .lp-prod-tag {
  font-family: var(--nav-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-color);
  display: block;
}
.lp-page .lp-prod h3 {
  font-size: 26px;
  margin: 12px 0 10px;
}
.lp-page .lp-prod p {
  margin-bottom: 22px;
}
.lp-page .lp-prod ul {
  list-style: none;
  display: grid;
  gap: 9px;
  margin: 0 0 26px;
  padding: 0;
}
.lp-page .lp-prod li {
  font-size: 14px;
  display: flex;
  gap: 9px;
  align-items: flex-start;
}
.lp-page .lp-prod li .bi {
  flex: none;
  margin-top: 3px;
  font-size: 15px;
  line-height: 1;
  color: var(--accent-color);
}
.lp-page .lp-prod-soon {
  background: var(--lp-surface);
}

/* ============================================================
   CLOSING CTA
   ============================================================ */
.lp-page .lp-cta {
  text-align: center;
  border-radius: var(--lp-r-xl);
  padding: 78px 32px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--lp-line);
  background:
    radial-gradient(50% 90% at 10% 0%, #d9e1ff 0%, rgba(217, 225, 255, 0) 65%),
    radial-gradient(
      50% 90% at 90% 100%,
      #f6e3c8 0%,
      rgba(246, 227, 200, 0) 65%
    ),
    var(--lp-surface);
}
.lp-page .lp-cta h2 {
  max-width: 18ch;
  margin: 14px auto 0;
}
.lp-page .lp-cta .lp-lede {
  margin: 16px auto 28px;
}
.lp-page .lp-cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   xl — 1199.98px : desktop down to laptop
   The recorder grid used to stay 2-up until 1000px, so the UI
   panel rendered its 2-up cards inside a 55%-wide column at
   exactly the laptop widths most people use.
   ============================================================ */
@media (max-width: 1199.98px) {
  .lp-page {
    --lp-pad: 88px;
  }
  .lp-page .lp-rec-grid {
    gap: 44px;
  }
  .lp-page .lp-three {
    gap: 34px;
    margin-top: 56px;
  }
  .lp-page .lp-osha-panel {
    padding: 46px 40px 40px;
  }
  .lp-page .lp-osha-blocks {
    gap: 32px;
  }
  .lp-page .lp-stats {
    gap: 22px;
  }
}

/* ============================================================
   lg — 991.98px : the repo's busiest breakpoint (29 blocks)
   Everything that used to break at 1000px and 900px lands here.
   ============================================================ */
@media (max-width: 991.98px) {
  .lp-page {
    --lp-pad: 72px;
  }
  .lp-page .lp-hero {
    padding: 132px 0 72px;
  }
  .lp-page .lp-hero-shot {
    margin-top: 44px;
  }
  .lp-page .lp-trust {
    --lp-trust-top: 48px;
  }

  .lp-page .lp-video {
    padding: 48px 0 72px;
  }

  .lp-page .lp-rec {
    padding: 10px 0 80px;
  }
  .lp-page .lp-rec-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .lp-page .lp-ui-cards {
    grid-template-columns: 1fr;
  }

  .lp-page .lp-osha {
    padding: 0 0 88px;
  }
  .lp-page .lp-osha-panel {
    padding: 38px 26px 34px;
  }
  .lp-page .lp-osha-metrics {
    grid-template-columns: 1fr;
  }
  .lp-page .lp-osha-blocks {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .lp-page .lp-band {
    padding: 72px 0 72px;
  }
  .lp-page .lp-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .lp-page .lp-band-close {
    margin-top: 48px;
  }
}

/* ============================================================
   md — 767.98px : tablet
   ============================================================ */
@media (max-width: 767.98px) {
  .lp-page {
    --lp-pad: 64px;
  }
  .lp-page .lp-hero {
    padding: 124px 0 64px;
  }
  .lp-page .lp-sectors {
    gap: 24px;
  }

  .lp-page .lp-video {
    padding: 40px 0 64px;
  }
  .lp-page .lp-rec {
    padding: 10px 0 64px;
  }
  .lp-page .lp-ui {
    padding: 18px;
  }

  .lp-page .lp-three {
    grid-template-columns: 1fr;
    gap: 34px;
    margin-top: 48px;
  }

  .lp-page .lp-osha {
    padding: 0 0 72px;
  }
  .lp-page .lp-osha-head {
    gap: 28px;
  }

  .lp-page .lp-band {
    padding: 64px 0 64px;
  }
  .lp-page .lp-groups {
    gap: 44px;
    margin-top: 48px;
  }

  .lp-page .lp-prods {
    grid-template-columns: 1fr;
  }
  .lp-page .lp-prod {
    padding: 28px;
  }

  .lp-page .lp-cta {
    padding: 56px 24px;
  }
}

/* ============================================================
   sm — 575.98px : phone

   Three things below 576px previously held a desktop value all
   the way down to 320px and are fixed here:
     • .lp-stats stopped at 2 columns — two 36px figures plus a
       two-line label in ~150px does not fit a small phone
     • .lp-ph-label is white-space:nowrap at ~52 characters, so
       .lp-stage's overflow:hidden clipped both ends
     • section padding never dropped below its desktop value
   ============================================================ */
@media (max-width: 575.98px) {
  .lp-page {
    --lp-pad: 56px;
  }
  .lp-page .lp-hero {
    padding: 112px 0 56px;
  }
  .lp-page .lp-hero-shot {
    border-radius: 16px;
    margin-top: 38px;
  }
  .lp-page .lp-trust {
    --lp-trust-top: 36px;
  }
  .lp-page .lp-sectors {
    gap: 14px 18px;
    margin-top: 22px;
  }
  .lp-page .lp-sector {
    width: 84px;
  }
  .lp-page .lp-sector-disc {
    width: 48px;
    height: 48px;
    font-size: 21px;
    margin-bottom: 9px;
  }

  .lp-page .lp-video {
    padding: 32px 0 56px;
  }
  .lp-page .lp-browser {
    border-radius: var(--lp-r-md);
  }
  .lp-page .lp-urlbar {
    font-size: 10px;
  }
  .lp-page .lp-playbtn {
    width: 64px;
    height: 64px;
  }
  .lp-page .lp-playbtn .bi {
    font-size: 24px;
  }
  /* let the caption wrap instead of being clipped by overflow:hidden */
  .lp-page .lp-ph-label {
    white-space: normal;
    max-width: calc(100% - 24px);
    text-align: center;
    line-height: 1.4;
    border-radius: 14px;
    letter-spacing: 0.08em;
    bottom: 12px;
  }

  .lp-page .lp-rec {
    padding: 10px 0 56px;
  }
  .lp-page .lp-ui {
    padding: 15px;
    border-radius: var(--lp-r-md);
  }
  .lp-page .lp-ui-num {
    font-size: 34px;
  }
  .lp-page .lp-ui-legend {
    gap: 8px 14px;
  }
  .lp-page .lp-ui-foot {
    gap: 6px;
  }

  .lp-page .lp-osha {
    padding: 0 0 56px;
  }
  .lp-page .lp-osha-panel {
    padding: 28px 18px 24px;
    border-radius: var(--lp-r-lg);
  }
  .lp-page .lp-osha-metric {
    padding: 20px 20px;
  }
  .lp-page .lp-osha-metric b {
    font-size: 34px;
  }

  .lp-page .lp-band {
    padding: 56px 0 56px;
  }
  .lp-page .lp-groups {
    gap: 36px;
    margin-top: 40px;
  }
  .lp-page .lp-glabel {
    gap: 10px;
    margin-bottom: 20px;
  }
  /* one column — the real fix for this breakpoint */
  .lp-page .lp-stats {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .lp-page .lp-stat-n {
    font-size: 30px;
  }
  .lp-page .lp-band-close {
    margin-top: 40px;
    padding-top: 24px;
    font-size: 15px;
  }

  .lp-page .lp-prod {
    padding: 24px;
    border-radius: var(--lp-r-lg);
  }
  .lp-page .lp-prod h3 {
    font-size: 22px;
  }

  .lp-page .lp-cta {
    padding: 44px 18px;
    border-radius: var(--lp-r-lg);
  }
  .lp-page .lp-cta-row .btn {
    width: 100%;
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  /* .lp-page .lp-band::after {
    animation: none;
  } */
  .lp-page .lp-prod:hover,
  .lp-page .lp-sector-link:hover .lp-sector-disc,
  .lp-page .lp-sector-link:focus-visible .lp-sector-disc,
  .lp-page .lp-playbtn:hover {
    transform: none;
  }
}