/* ============================================================
   UserChecks marketing site
   Brand system taken from the UserChecks van livery (2026-09):
   deep black panels, vivid brand green, white, bold diagonal
   slashes, a subtle halftone dot texture and a rounded-square
   tick mark. No teal, no frosted glass, no gradients-for-show.
   Colour rules:
     --green        vivid brand green — accents, on black, fills
     --green-ink    darkened green — green TEXT on light surfaces (AA)
     --ink / --black text and panels
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&family=Caveat:wght@600;700&display=swap');

:root {
  /* --- brand green (sampled from the van wordmark / body panels) --- */
  --green: #4ACC1E;
  --green-bright: #6FD810;
  --green-dark: #37A414;
  --green-ink: #2C7C0F;
  --green-deep: #1D5A0A;
  --green-subtle: #EEFCE6;
  --green-subtle-2: #DEF8CE;
  --emphasis: #8AE85C;

  /* --- black / neutral --- */
  --black: #0B0B0B;
  --black-2: #141414;
  --black-3: #1F1F1F;

  --red: #cf3535;
  --red-wash: #fdeaea;
  --red-ink: #9a1c1c;
  --yellow: #eda708;
  --yellow-wash: #fbf1d6;
  --yellow-ink: #7d5804;
  --purple: #9F4978;

  --ink: #0B0B0B;
  --muted: #5b615c;
  --hairline: #e4e6e3;
  --hairline-2: #d4d7d2;
  --paper: #ffffff;
  --wash: #f5f7f4;
  --wash-2: #eef1ec;

  --font: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --script: Caveat, "Segoe Script", cursive;

  --maxw: 1200px;
  --gut: clamp(20px, 5vw, 64px);
  --radius: 6px;
  --radius-lg: 10px;

  /* diagonal livery stripe used across dividers, bands and cards */
  --slash-angle: 115deg;
  --halftone: radial-gradient(rgba(255,255,255,0.075) 1px, transparent 1.5px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-weight: 700; line-height: 1.1; color: var(--ink); margin: 0; }
h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); letter-spacing: -0.015em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); letter-spacing: -0.015em; }
h3 { font-size: 1.35rem; }
p { margin: 0; }
a { color: var(--green-ink); text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }
.section { padding-block: clamp(56px, 9vw, 120px); }
.section.tight { padding-block: clamp(40px, 6vw, 72px); }

/* ---------- Livery primitives ---------- */
/* Diagonal slash rule — the van's chevron motif as a section divider */
.slash-rule {
  height: 8px;
  background: repeating-linear-gradient(var(--slash-angle),
    var(--green) 0 22px,
    var(--black) 22px 30px,
    var(--green-bright) 30px 38px,
    var(--black) 38px 60px);
}

/* Rounded-square tick mark (the logo mark, in CSS) */
.tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex: 0 0 22px;
  border: 2px solid var(--green); border-radius: 6px;
  color: var(--green); font-size: 11px; line-height: 1;
}
.tick.solid { background: var(--green); border-color: var(--green); color: var(--black); }
.tick.lg { width: 30px; height: 30px; flex-basis: 30px; font-size: 15px; border-radius: 8px; }

/* Handwritten van line */
.script-line { font-family: var(--script); font-weight: 700; line-height: 1.05; color: #fff; }
.script-line .u { display: block; }
.script-line::after {
  content: ""; display: block; width: 84px; height: 4px; border-radius: 2px;
  background: var(--green); margin-top: 10px;
}

/* Black livery panel: halftone texture + angular green slashes */
.livery { position: relative; background: var(--black); color: #fff; overflow: hidden; isolation: isolate; }
.livery > * { position: relative; z-index: 3; }
.livery::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background-image: var(--halftone);
  background-size: 7px 7px;
  pointer-events: none;
}
.livery-slashes { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.livery-slashes span { position: absolute; display: block; }
.livery-slashes .sl-1 {
  top: -12%; right: -10%; width: 34%; height: 130%;
  background: var(--green);
  clip-path: polygon(58% 0, 100% 0, 46% 100%, 4% 100%);
}
.livery-slashes .sl-2 {
  top: -20%; right: 22%; width: 15%; height: 150%;
  background: var(--green-bright); opacity: 0.9;
  clip-path: polygon(66% 0, 100% 0, 40% 100%, 6% 100%);
}
/* readability scrim so headline/step text never sits on the green */
.livery-slashes::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(95deg,
    rgba(11,11,11,0.97) 0 30%,
    rgba(11,11,11,0.72) 48%,
    rgba(11,11,11,0.10) 68%,
    rgba(11,11,11,0) 80%);
}
.livery-slashes .sl-3 {
  bottom: -30%; left: -8%; width: 34%; height: 90%;
  background: var(--green); opacity: 0.16;
  clip-path: polygon(52% 0, 96% 0, 44% 100%, 0 100%);
}
.livery-slashes .sl-4 {
  top: -10%; left: 30%; width: 8%; height: 120%;
  background: #fff; opacity: 0.07;
  clip-path: polygon(62% 0, 100% 0, 38% 100%, 0 100%);
}
@media (max-width: 880px) {
  .livery-slashes .sl-1 { width: 62%; right: -20%; }
  .livery-slashes .sl-2 { display: none; }
  /* stacked layout: scrim runs top-to-bottom so copy never sits on green */
  .livery-slashes::after {
    background: linear-gradient(180deg,
      rgba(11,11,11,0.40) 0 18%,
      rgba(11,11,11,0.86) 42%,
      rgba(11,11,11,0.95) 60%,
      rgba(11,11,11,0.97) 100%);
  }
}

/* text helpers on dark */
.on-dark, .livery .lead { color: rgba(255,255,255,0.86); }
.livery h1, .livery h2, .livery h3, .livery h4 { color: #fff; }
.livery .eyebrow { color: var(--green); }
.livery .eyebrow::before { background: var(--green); }
.g { color: var(--green); }

/* ---------- Eyebrow ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--green-ink);
  margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 24px; height: 3px; background: var(--green); transform: skewX(-24deg); }
.eyebrow.center { justify-content: center; }

.lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--muted); font-weight: 400; max-width: 60ch; }

.section-head { max-width: 64ch; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head.center { margin-inline: auto; text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font); font-size: 15px; font-weight: 700;
  letter-spacing: 0.02em;
  padding: 13px 22px; border-radius: var(--radius);
  border: 2px solid transparent; cursor: pointer; line-height: 1;
  transition: background-color .15s, border-color .15s, color .15s, transform .05s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--green); color: var(--black); border-color: var(--green); }
.btn-primary:hover { background: var(--green-bright); border-color: var(--green-bright); color: var(--black); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--hairline-2); }
.btn-ghost:hover { background: var(--wash); border-color: var(--green); color: var(--ink); }
.btn-white { background: #fff; color: var(--black); border-color: #fff; }
.btn-white:hover { background: var(--green); border-color: var(--green); color: var(--black); }
/* legacy class name — now "ghost on a dark livery panel" */
.btn-onteal-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.45); }
.btn-onteal-ghost:hover { background: rgba(255,255,255,0.10); border-color: var(--green); color: var(--green); }
.btn-lg { padding: 16px 28px; font-size: 16px; }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--black);
  border-bottom: 0;
}
.site-header::after {
  content: ""; display: block; height: 4px;
  background: repeating-linear-gradient(var(--slash-angle),
    var(--green) 0 18px, var(--black) 18px 24px, var(--green-bright) 24px 30px, var(--black) 30px 52px);
}
.nav {
  display: flex; align-items: center; gap: 28px;
  height: 68px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 1.2rem; color: #fff; letter-spacing: -0.01em;
}
.brand img { width: 32px; height: 32px; border-radius: 6px; }
.brand .wordmark { font-weight: 700; }
.brand b { font-weight: 700; color: var(--green); }
.nav-links { display: flex; gap: 26px; margin-left: 14px; }
.nav-links a { color: rgba(255,255,255,0.82); font-size: 15px; font-weight: 500; padding: 6px 0; position: relative; }
.nav-links a:hover { color: var(--green); }
.nav-links a.active { color: var(--green); }
.nav-links a.active::after {
  content: ""; position: absolute; left: -2px; right: -2px; bottom: -2px; height: 3px;
  background: var(--green); transform: skewX(-24deg);
}
.nav-spacer { flex: 1; }
.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-cta .signin { font-size: 15px; color: rgba(255,255,255,0.82); font-weight: 500; }
.nav-cta .signin:hover { color: var(--green); }
.nav-mobile-only { display: none; }
.nav-toggle { display: none; background: none; border: 0; font-size: 22px; color: var(--green); cursor: pointer; }

@media (max-width: 860px) {
  .nav-links, .nav-cta .signin { display: none; }
  .nav-toggle { display: block; }
  .nav-links.open {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 68px; left: 0; right: 0;
    background: var(--black-2); border-bottom: 4px solid var(--green);
    padding: 8px var(--gut) 16px; z-index: 101;
  }
  .nav-links.open a { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.10); }
  .nav-links.open .nav-mobile-only { display: block; color: var(--green); font-weight: 700; }
  .nav-links.open .nav-mobile-cta { border-bottom: 0; }
}

/* very narrow: the header CTA moves into the burger menu so the bar can't overflow */
@media (max-width: 620px) {
  .nav { gap: 14px; }
  .nav-cta .btn { display: none; }
  .brand { font-size: 1.05rem; }
}

/* ---------- Hero shared ---------- */
.hero { position: relative; overflow: hidden; }

/* Direction A — split, light */
.hero-a { padding-block: clamp(48px, 7vw, 96px); }
.hero-a .grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 72px); align-items: center;
}
.hero-a h1 { margin-bottom: 22px; }
.hero-a .lead { margin-bottom: 30px; }
.hero-cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero-note { display: flex; align-items: center; gap: 9px; margin-top: 22px; color: var(--muted); font-size: 14px; }
.hero-note i { color: var(--green-ink); }

/* Direction B — full-bleed black livery */
.hero-b { background: var(--black); color: #fff; padding-block: clamp(56px, 8vw, 104px); }
.hero-b::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--halftone); background-size: 7px 7px; pointer-events: none;
}
.hero-b .wrap { position: relative; }
.hero-b h1 { color: #fff; }
.hero-b .eyebrow { color: var(--green); }
.hero-b .eyebrow::before { background: var(--green); }
.hero-b .lead { color: rgba(255,255,255,0.86); }
.hero-b .grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero-b .hero-note { color: rgba(255,255,255,0.8); }
.hero-b .hero-note i { color: var(--green); }

@media (max-width: 880px) {
  .hero-a .grid, .hero-b .grid { grid-template-columns: minmax(0, 1fr); }
  .hero-visual { order: -1; }
}

/* ---------- HERO — van livery (home) ---------- */
.hero-livery { padding-block: clamp(48px, 7vw, 88px) 0; }
.hero-livery-grid {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
.livery-h1 {
  font-weight: 900; letter-spacing: 0.005em; line-height: 1.02;
  text-transform: uppercase; font-size: clamp(2.1rem, 5.6vw, 4.1rem);
  margin-bottom: 20px;
}
.livery-h1 .w { color: #fff; display: block; }
.livery-h1 .g { color: var(--green); display: block; }
.hero-livery .lead { margin-bottom: 28px; }
.hero-livery .hero-note { color: rgba(255,255,255,0.78); }
.hero-livery .hero-note i { color: var(--green); }

/* Category tick list (the van's side-panel list) */
.cat-ticks {
  list-style: none; padding: 0; margin: 30px 0 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 22px;
}
.cat-ticks li {
  display: flex; align-items: center; gap: 11px;
  font-size: 13.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.92);
}
@media (max-width: 620px) { .cat-ticks { grid-template-columns: 1fr; } }

/* Phone mockup (HTML/CSS, mirrors the van artwork) */
.hero-livery-visual { position: relative; display: flex; align-items: center; justify-content: center; gap: 18px; }
.phone {
  width: min(300px, 78vw); border-radius: 34px; background: #d9dbd6;
  padding: 9px; box-shadow: 0 30px 70px -24px rgba(0,0,0,0.85);
  border: 1px solid rgba(255,255,255,0.35);
}
.phone-screen { background: #fff; border-radius: 26px; overflow: hidden; padding: 14px 12px 18px; }
.phone-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.phone-brand .wordmark { font-weight: 700; font-size: 17px; color: var(--ink); letter-spacing: -0.01em; }
.phone-brand .wordmark b { color: var(--green-ink); font-weight: 700; }
.phone-sub { font-size: 10px; color: var(--muted); margin: 0 0 12px 38px; letter-spacing: 0.02em; }
.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.check-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid var(--hairline); border-radius: 8px;
  padding: 9px 10px; font-size: 13px; font-weight: 500; color: var(--ink);
}
.check-list li .tick.solid { border-radius: 50%; width: 20px; height: 20px; flex-basis: 20px; font-size: 10px; color: #fff; }
.script-tag {
  font-family: var(--script); font-weight: 700; color: #fff;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.0;
  transform: rotate(-4deg); white-space: nowrap;
}
.script-tag::after { content: ""; display: block; width: 70%; height: 4px; border-radius: 2px; background: var(--green); margin-top: 8px; }
@media (max-width: 880px) {
  .hero-livery-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-livery-visual { order: -1; margin-bottom: 12px; }
}
@media (max-width: 520px) { .script-tag { display: none; } }

/* SCAN · CHECK · RECORD · STAY COMPLIANT */
.step-row {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  border-top: 1px solid rgba(255,255,255,0.14);
  margin-top: clamp(36px, 5vw, 56px);
  padding-block: clamp(24px, 3.5vw, 34px);
}
.step-row::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -100vw; right: -100vw;
  background: var(--black); z-index: -1;
}
.step-row .s { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.step-row .s i { font-size: 26px; color: var(--green); }
.step-row .s span {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: #fff;
}
.van-panel .step-row::before { display: none; }
@media (max-width: 620px) { .step-row { grid-template-columns: repeat(2, 1fr); gap: 26px 12px; } }

/* ---------- Hero visual: product mockup frame ---------- */
.mock-frame {
  min-width: 0; max-width: 100%;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 24px 60px -28px rgba(11,11,11,0.45);
  overflow: hidden;
}
.hero-b .mock-frame, .livery .mock-frame { box-shadow: 0 30px 70px -24px rgba(0,0,0,0.7); }
.mock-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px; background: var(--wash); border-bottom: 1px solid var(--hairline);
}
.mock-bar .dot { width: 11px; height: 11px; border-radius: 50%; background: #cfd4cd; }
.mock-bar .url {
  margin-left: 10px; font-size: 12px; color: var(--muted);
  background: #fff; border: 1px solid var(--hairline); border-radius: 20px;
  padding: 4px 12px;
}
.hero-photo-slot { width: 100%; height: 100%; }

/* hero floating product card */
.hero-float-card { position: absolute; left: -18px; bottom: -28px; width: 292px; background: #fff; }
.hero-float-card .am-card { border: 0; }
.hero-float-card .am-card .b { font-size: 13px; }
.hero-float-card .kv { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; color: var(--muted); margin-bottom: 8px; }
.hero-float-card .kv span { white-space: nowrap; }
.hero-float-card .kv strong { color: var(--ink); font-weight: 500; white-space: nowrap; }
.hero-float-card .pass { color: var(--green-ink); font-weight: 500; }
@media (max-width: 880px) {
  .hero-float-card { left: auto; right: 12px; bottom: -22px; width: 270px; }
}

/* ---------- App mockup primitives (reused for product shots) ---------- */
.app-mock { display: flex; min-height: 320px; font-size: 13px; min-width: 0; }
.app-mock .am-side {
  width: 168px; background: var(--black); color: #fff; flex: 0 0 168px; padding: 0;
}
.app-mock .am-brand { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: rgba(255,255,255,0.06); font-size: 13px; font-weight: 700; }
.app-mock .am-brand img { width: 22px; height: 22px; }
.app-mock .am-brand b { color: var(--green); font-weight: 700; }
.app-mock .am-nav { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.app-mock .am-nav a { color: rgba(255,255,255,0.72); padding: 8px 10px; border-radius: 4px; display: flex; gap: 9px; align-items: center; font-weight: 500; font-size: 12.5px; }
.app-mock .am-nav a i { width: 15px; text-align: center; }
.app-mock .am-nav a.on { background: var(--green); color: var(--black); }
.app-mock .am-main { flex: 1 1 0; overflow-x: auto; background: #fff; padding: 16px 18px; min-width: 0; }
.app-mock .am-toolbar { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--hairline); margin-bottom: 14px; }
.app-mock .am-toolbar .am-title { font-size: 17px; color: var(--ink); font-weight: 700; margin: 0; }
.app-mock .am-toolbar .am-title i { color: var(--green-ink); margin-right: 8px; }

.am-grid { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.am-grid th { text-align: left; color: var(--muted); font-weight: 700; padding: 7px 6px; border-bottom: 1px solid var(--hairline); font-size: 11.5px; }
.am-grid td { padding: 9px 6px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.am-grid .ic { text-align: center; font-size: 17px; }
.c-pass { color: var(--green-ink); } .c-obs { color: var(--green-ink); }
.c-adv { color: var(--yellow); } .c-fail { color: var(--red); }
.c-na { color: var(--purple); } .c-pend { color: var(--muted); }

/* status card */
.am-card { border: 1px solid var(--green); border-radius: 6px; overflow: hidden; }
.am-card.err { border-color: var(--red); }
.am-card .h { background: var(--green); color: var(--black); padding: 8px 12px; font-weight: 700; font-size: 13px; }
.am-card.err .h { background: var(--red); color: #fff; }
.am-card .b { padding: 10px 12px; background: #fff; }

/* ---------- Stats band ---------- */
.stats { background: var(--black); color: #fff; position: relative; overflow: hidden; }
.stats::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--halftone); background-size: 7px 7px; pointer-events: none;
}
.stats .row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; position: relative; }
.stats .num { font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 900; color: var(--green); line-height: 1; }
.stats .lbl { font-size: 13.5px; color: rgba(255,255,255,0.78); margin-top: 8px; font-weight: 400; }
@media (max-width: 720px) { .stats .row { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; } }

/* ---------- Logo strip ---------- */
.logos { border-bottom: 1px solid var(--hairline); }
.logos .row { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.logos .cap { font-size: 13px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; }
.logo-mark { display: flex; align-items: center; gap: 9px; color: #7d857e; font-weight: 700; font-size: 16px; letter-spacing: 0.02em; }
.logo-mark i { font-size: 19px; color: var(--green-ink); }

/* ---------- How it works ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); }
.step { position: relative; }
.step .n {
  width: 46px; height: 46px; border-radius: 10px;
  background: var(--black); color: var(--green);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 900; margin-bottom: 18px;
}
.step h3 { margin-bottom: 8px; }
.step p { color: var(--muted); font-weight: 400; font-size: 15.5px; }
@media (max-width: 760px) { .steps { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* ---------- Feature rows ---------- */
.feature {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.feature + .feature { margin-top: clamp(48px, 7vw, 96px); }
.feature.flip .feature-text { order: 2; }
.feature h2 { margin-bottom: 16px; }
.feature p { color: var(--muted); font-weight: 400; margin-bottom: 20px; }
.feature-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.feature-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; }
.feature-list li i { color: var(--green-ink); margin-top: 4px; flex: 0 0 18px; }
@media (max-width: 820px) {
  .feature { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .feature.flip .feature-text { order: 0; }
}

/* ---------- Feature cards grid (services) ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.f-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  padding: 26px 24px; background: #fff; transition: border-color .15s, box-shadow .15s;
}
.f-card::before {
  content: ""; position: absolute; top: 0; left: 0; width: 74px; height: 5px;
  background: var(--green); transform: skewX(-30deg) translateX(-8px);
}
.f-card:hover { border-color: var(--green); box-shadow: 0 14px 36px -22px rgba(11,11,11,0.5); }
.f-card .ico {
  width: 46px; height: 46px; border-radius: 10px; background: var(--black);
  color: var(--green); display: flex; align-items: center; justify-content: center;
  font-size: 20px; margin-bottom: 18px;
}
.f-card h3 { font-size: 1.2rem; margin-bottom: 9px; }
.f-card p { color: var(--muted); font-weight: 400; font-size: 15px; }
@media (max-width: 860px) { .card-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Testimonials ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.quote {
  border: 1px solid var(--hairline); border-left: 5px solid var(--green);
  border-radius: var(--radius); padding: 26px 24px; background: #fff;
}
.quote p { font-size: 16px; font-weight: 400; color: var(--ink); margin-bottom: 18px; }
.quote .who { display: flex; align-items: center; gap: 12px; }
.quote .av { width: 40px; height: 40px; border-radius: 50%; background: var(--black); color: var(--green); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.quote .who b { display: block; font-weight: 700; font-size: 14.5px; }
.quote .who span { font-size: 13px; color: var(--muted); }
@media (max-width: 860px) { .quotes { grid-template-columns: 1fr; } }

/* ---------- Pricing ---------- */
.price-toggle { display: inline-flex; align-items: center; gap: 0; border: 2px solid var(--black); border-radius: 999px; padding: 4px; background: #fff; }
.price-toggle button { border: 0; background: transparent; padding: 9px 20px; border-radius: 999px; cursor: pointer; font-family: var(--font); font-size: 14px; color: var(--muted); font-weight: 700; }
.price-toggle button.on { background: var(--black); color: var(--green); }
.price-toggle .save { font-size: 11px; color: var(--green-ink); margin-left: 6px; }
.price-toggle button.on .save { color: var(--green); }

.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: start; }
.tier {
  border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  padding: 30px 28px; background: #fff; display: flex; flex-direction: column;
}
.tier.featured { border-color: var(--green); border-width: 2px; box-shadow: 0 20px 50px -28px rgba(11,11,11,0.55); }
.tier .badge { align-self: flex-start; background: var(--green); color: var(--black); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; margin-bottom: 14px; }
.tier .tname { font-size: 1.3rem; font-weight: 700; color: var(--ink); }
.tier .tdesc { color: var(--muted); font-size: 14.5px; font-weight: 400; margin-top: 6px; min-height: 42px; }
.tier .price { margin: 20px 0 4px; display: flex; align-items: baseline; gap: 6px; }
.tier .price .amt { font-size: 2.8rem; font-weight: 900; color: var(--ink); line-height: 1; }
.tier .price .per { color: var(--muted); font-size: 14px; }
.tier .price-sub { font-size: 13px; color: var(--muted); min-height: 18px; }
.tier .btn { margin: 22px 0; justify-content: center; }
.tier ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.tier ul li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; font-weight: 400; }
.tier ul li i { color: var(--green-ink); margin-top: 4px; flex: 0 0 16px; font-size: 13px; }
.tier ul li.off { color: #9aa39b; } .tier ul li.off i { color: #c6cdc6; }
.tier .grp { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 18px 0 4px; font-weight: 700; }
@media (max-width: 920px) { .tiers { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--hairline); padding: 6px 0; }
.faq summary {
  list-style: none; cursor: pointer; padding: 18px 0;
  display: flex; justify-content: space-between; gap: 20px; align-items: center;
  font-size: 17px; font-weight: 700; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { color: var(--green-ink); transition: transform .2s; flex: 0 0 auto; }
.faq details[open] summary .pm { transform: rotate(45deg); }
.faq details p { color: var(--muted); font-weight: 400; padding: 0 0 20px; max-width: 70ch; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--black); color: #fff; position: relative; overflow: hidden; }
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--halftone); background-size: 7px 7px;
}
.cta-band::after {
  content: ""; position: absolute; top: -20%; right: -10%; width: 44%; height: 140%;
  background: var(--green); opacity: 0.14;
  clip-path: polygon(58% 0, 100% 0, 46% 100%, 4% 100%);
}
.cta-band .wrap { position: relative; z-index: 2; text-align: center; }
.cta-band h2 { color: #fff; margin-bottom: 16px; }
.cta-band .lead { color: rgba(255,255,255,0.88); margin-inline: auto; margin-bottom: 30px; }
.cta-band .row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-band .kicker {
  font-family: var(--script); font-weight: 700; color: var(--green);
  font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 6px;
}

/* ---------- Footer ---------- */
.site-footer { background: var(--black); color: rgba(255,255,255,0.72); font-size: 14.5px; position: relative; }
.site-footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8px;
  background: repeating-linear-gradient(var(--slash-angle),
    var(--green) 0 22px, var(--black) 22px 30px, var(--green-bright) 30px 38px, var(--black) 38px 60px);
}
.site-footer .top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; padding-block: clamp(48px, 6vw, 76px) clamp(36px, 5vw, 56px); }
.site-footer .brand { color: #fff; margin-bottom: 14px; }
.site-footer .brand b { color: var(--green); }
.site-footer p { font-weight: 400; max-width: 34ch; }
.site-footer h5 { color: #fff; font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 16px; }
.site-footer h5::after { content: ""; display: block; width: 22px; height: 3px; background: var(--green); margin-top: 8px; transform: skewX(-24deg); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.site-footer ul a { color: rgba(255,255,255,0.72); }
.site-footer ul a:hover { color: var(--green); }
/* Footer contact line. The global link colour (--green-ink) is a light-surface
   colour, so on the black footer the phone link follows the footer nav links. */
.site-footer .contact-line { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.site-footer .contact-line i { color: var(--green); font-size: 13px; }
.site-footer .contact-line a { color: rgba(255,255,255,0.72); }
.site-footer .contact-line a:hover { color: var(--green); }
.site-footer .strap {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,0.12); padding-block: 22px;
}
.site-footer .strap .claim {
  font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--green);
}
.site-footer .strap .script-line { font-size: 1.7rem; }
.site-footer .strap .script-line::after { display: none; }
.site-footer .bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-block: 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: rgba(255,255,255,0.55);
}
.site-footer .bottom .social { display: flex; gap: 16px; font-size: 16px; }
.site-footer .bottom .social a { color: rgba(255,255,255,0.6); }
.site-footer .bottom .social a:hover { color: var(--green); }
@media (max-width: 780px) { .site-footer .top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .site-footer .top { grid-template-columns: 1fr; } }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; font-family: var(--font); font-size: 15px; padding: 12px 14px;
  border: 1px solid var(--hairline-2); border-radius: var(--radius); background: #fff; color: var(--ink);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: 2px solid var(--green-ink); border-color: var(--green-ink);
}
.form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 520px) { .form-row { grid-template-columns: minmax(0, 1fr); } }
.contact-info { background: var(--wash); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 30px 28px; }
.contact-info .item { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.contact-info .item:last-child { border-bottom: 0; }
.contact-info .item i { width: 38px; height: 38px; border-radius: 9px; background: var(--black); color: var(--green); display: flex; align-items: center; justify-content: center; flex: 0 0 38px; }
.contact-info .item b { display: block; color: var(--ink); font-weight: 700; font-size: 14px; }
.contact-info .item span { color: var(--muted); font-size: 14.5px; font-weight: 400; }

/* ---------- About ---------- */
.values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 720px) { .values { grid-template-columns: 1fr; } }
.value { display: flex; gap: 16px; align-items: flex-start; }
.value i { width: 44px; height: 44px; border-radius: 10px; background: var(--black); color: var(--green); display: flex; align-items: center; justify-content: center; font-size: 19px; flex: 0 0 44px; }
.value h3 { font-size: 1.2rem; margin-bottom: 6px; }
.value p { color: var(--muted); font-weight: 400; font-size: 15px; }

.timeline { border-left: 2px solid var(--hairline); padding-left: 28px; display: flex; flex-direction: column; gap: 30px; margin-left: 6px; }
.tl-item { position: relative; }
.tl-item::before { content: ""; position: absolute; left: -36px; top: 4px; width: 14px; height: 14px; border-radius: 4px; background: var(--green); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--green); }
.tl-item .yr { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; color: var(--green-ink); text-transform: uppercase; }
.tl-item h3 { font-size: 1.2rem; margin: 4px 0 6px; }
.tl-item p { color: var(--muted); font-weight: 400; font-size: 15px; }

/* Van "on the road" panel */
.van-panel { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(28px, 5vw, 56px); align-items: center; }
.van-shot { border-radius: var(--radius-lg); overflow: hidden; border: 2px solid var(--green); box-shadow: 0 26px 60px -30px rgba(0,0,0,0.8); }
.van-shot img { width: 100%; height: auto; display: block; }
@media (max-width: 880px) { .van-panel { grid-template-columns: minmax(0, 1fr); } }

/* Page hero (interior pages) */
.page-hero { background: var(--wash); border-bottom: 1px solid var(--hairline); padding-block: clamp(48px, 7vw, 84px); }
.page-hero .lead { margin-top: 16px; }

/* ---------- Full-bleed photo hero (interior pages) ---------- */
.hero-photo {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 480px;
  overflow: hidden;
  background: var(--black);
  border-bottom: 0;
}
.hero-photo.tall { min-height: 620px; }
.hero-photo .hero-photo-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
}
/* Heroes are a pure-SSR <picture> (WebP source + PNG fallback). The
   <img.hero-photo-bg> carries the cover-fit. */
.hero-photo .hero-photo-pic { position: absolute; inset: 0; z-index: 0; display: block; }
.hero-photo img.hero-photo-bg { object-fit: cover; display: block; filter: grayscale(0.45) contrast(1.02) brightness(0.62); }
.hero-photo .scrim {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(11,11,11,0.97) 0%,
    rgba(11,11,11,0.90) 26%,
    rgba(11,11,11,0.72) 60%,
    rgba(11,11,11,0.58) 100%);
}
/* green livery slash across the photo hero */
.hero-photo .slash {
  position: absolute; z-index: 1; top: -15%; right: -10%; width: 26%; height: 130%;
  background: var(--green); opacity: 0.82; pointer-events: none;
  clip-path: polygon(62% 0, 100% 0, 44% 100%, 6% 100%);
}
.hero-photo .slash.thin {
  right: 20%; width: 9%; background: var(--green-bright); opacity: 0.75;
}
@media (max-width: 880px) { .hero-photo .slash.thin { display: none; } .hero-photo .slash { width: 48%; right: -20%; } }
.hero-photo > .wrap {
  position: relative; z-index: 2; width: 100%;
  padding-block: clamp(40px, 6vw, 76px);
}
.hero-photo .page-hero-text { max-width: 60ch; }
.hero-photo .eyebrow { color: var(--green); }
.hero-photo .eyebrow::before { background: var(--green); }
.hero-photo h1 { color: #fff; }
.hero-photo .lead { color: rgba(255,255,255,0.90); }
.hero-photo .hero-cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 30px; }
.hero-photo .hero-note { display: flex; align-items: center; gap: 9px; margin-top: 22px; color: rgba(255,255,255,0.82); font-size: 14px; }
.hero-photo .hero-note i { color: var(--green); }

.bg-wash { background: var(--wash); }
/* Diagonal livery divider replaces the old hairline rule */
.divider-top { position: relative; }
.divider-top::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8px;
  background: repeating-linear-gradient(var(--slash-angle),
    var(--green) 0 22px, var(--black) 22px 30px, var(--green-bright) 30px 38px, var(--black) 38px 60px);
}

/* ---------- Legal pages (compact hero + prose) ---------- */
.hero-compact { padding: 76px 0 56px; }
.hero-compact.light { background: var(--wash); border-bottom: 1px solid var(--hairline); }
.hero-compact.livery { padding-block: clamp(64px, 8vw, 96px) clamp(48px, 6vw, 64px); }
.hero-compact .lead { margin-top: 18px; }

.legal-prose { max-width: 760px; }
.legal-prose .legal-section { padding-top: 40px; }
.legal-prose .legal-section:first-of-type { padding-top: 8px; }
.legal-prose h2 { font-size: 1.5rem; margin-bottom: 14px; color: var(--ink); }
.legal-prose p { color: var(--muted); line-height: 1.7; margin: 0 0 16px; font-weight: 400; }
.legal-prose p:last-child { margin-bottom: 0; }
.legal-prose ul { margin: 0 0 16px; padding-left: 22px; }
.legal-prose li { color: var(--muted); line-height: 1.55; margin-bottom: 8px; font-weight: 400; }
.legal-prose a { color: var(--green-ink); font-weight: 700; text-decoration: none; }
.legal-prose a:hover { text-decoration: underline; }
.legal-prose strong { color: var(--ink); font-weight: 700; }
.legal-prose .legal-table-wrap { overflow-x: auto; margin: 0 0 16px; }
.legal-prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.legal-prose th, .legal-prose td { border: 1px solid var(--hairline); padding: 10px 12px; text-align: left; color: var(--muted); font-weight: 400; }
.legal-prose thead th { background: var(--wash); color: var(--ink); font-weight: 700; }
.livery .legal-effective, .hero-compact.livery .legal-effective { color: rgba(255,255,255,0.72); }
.legal-prose .legal-effective { display: inline-block; margin-top: 18px; font-size: 14px; color: var(--muted); }
.legal-prose .legal-address { display: block; margin-top: 8px; font-style: normal; color: var(--muted); line-height: 1.7; font-weight: 400; }

/* Third-party certificate mark (Blockmark widget) on /legal/cyber-essentials.

   The widget sizes itself off the frame, not the other way round: its own stylesheet sets
   #logo { width: calc(100% - 32px) } and, with tooltip_position=bottom, stacks the 30px BM
   tick underneath. That only resolves correctly if the framed document has a definite
   viewport. Pinning the size in CSS alone was not enough on mobile Safari, which sizes an
   iframe with no width/height *attributes* to its content: the framed document then laid
   out against the artwork's 600px intrinsic width, so the 132px window showed the top-left
   corner and the mark appeared cut off. The width/height attributes on the iframe fix the
   framed viewport at 132x132 everywhere; this rule keeps the visible frame responsive so it
   can never exceed the 20px page gutter, and the wrapper clips any residual blow-out
   instead of pushing the page sideways. Desktop is unchanged - the max-width is the same
   132px square the artwork is drawn for. Transparent theme, so it inherits the page wash. */
.legal-prose .cert-mark { margin: 24px 0 0; width: 100%; max-width: 132px; overflow: hidden; }
.legal-prose .cert-mark iframe {
  display: block;
  /* iOS Safari ignores a CSS width on an iframe and grows it to the framed document's
     intrinsic size; it does honour min-width. The 1px/min-width:100% pair is the standard
     workaround - it pins the frame to the 132px container on WebKit while resolving to the
     same 132px square in Chrome, so desktop is untouched. #logo is calc(100% - 32px) of
     that, i.e. 100px, with the 30px BM tick stacked under it: 131px inside a 132px box. */
  width: 1px;
  min-width: 100%;
  max-width: 132px;
  height: 132px;
  border: 0;
  color-scheme: normal;
}

/* ---------- Blog ----------
   Deliberately thin: the index reuses .card-grid/.f-card, the heroes reuse
   .hero-photo / .hero-compact.livery, buttons reuse .btn, and post bodies reuse
   .legal-prose. Only what those don't already provide lives here. */

/* Post card = an .f-card with an image band and a footer CTA. */
.f-card.post { padding: 0; display: flex; flex-direction: column; }
.f-card.post .post-media { position: relative; display: block; overflow: hidden; background: var(--black); }
.f-card.post .post-media img {
  width: 100%; height: 200px; object-fit: cover; display: block;
  /* same treatment the photo heroes give imagery, so card art reads van-livery */
  filter: grayscale(0.45) contrast(1.02) brightness(0.62);
}
.f-card.post .post-media-slash {
  position: absolute; z-index: 1; top: -15%; right: -6%; width: 26%; height: 130%;
  background: var(--green); opacity: 0.82; pointer-events: none;
  clip-path: polygon(62% 0, 100% 0, 44% 100%, 6% 100%);
}
.f-card.post .post-body { padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.f-card.post h3 { margin: 0; }
.f-card.post h3 a { color: var(--ink); }
.f-card.post h3 a:hover { color: var(--green-ink); }
.f-card.post .post-cta { align-self: flex-start; margin-top: auto; }

/* Date · author line. */
.post-meta {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted);
}
.post-meta.on-dark, .livery .post-meta, .hero-photo .post-meta { color: rgba(255,255,255,0.82); margin-top: 22px; }

/* Tag pills — black chip, green label (livery rule: a green fill takes black text). */
.tag-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tag-chip {
  display: inline-flex; align-items: center; padding: 5px 13px; border-radius: 999px;
  background: var(--black); color: var(--green);
  font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
}
.tag-chip:hover { background: var(--green); color: var(--black); }

/* Post footer strip + pagination. */
.post-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.post-pager { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: clamp(32px, 5vw, 56px); flex-wrap: wrap; }
.post-pager-count { font-size: 14px; color: var(--muted); }

/* Post body: .legal-prose sets the type scale; these are the extras a post needs. */
.blog-prose h3 { font-size: 1.25rem; color: var(--ink); margin: 30px 0 10px; }
.blog-prose blockquote { margin: 0 0 18px; padding: 18px 22px; background: var(--wash); border-left: 5px solid var(--green); }
.blog-prose blockquote p { margin: 0; color: var(--ink); }
.blog-prose img { border-radius: var(--radius-lg); border: 2px solid var(--green); margin: 0 0 20px; }
.blog-prose code { background: var(--wash-2); border-radius: 4px; padding: 1px 6px; font-size: 14.5px; }
.blog-prose pre { background: var(--black); color: #fff; padding: 18px 20px; border-radius: var(--radius-lg); overflow-x: auto; margin: 0 0 20px; }
.blog-prose pre code { background: none; color: inherit; padding: 0; }

@media (max-width: 860px) { .f-card.post .post-media img { height: 190px; } }

/* ============================================================
   Uses page (/uses)
   Intro split, category index chips with counts, frequency
   distribution bar on the black band, per-category headers,
   two-column check lists with frequency tags, "Why it matters"
   as text beside a black "How UserChecks fits" livery panel.
   Livery tokens only — no new colours.
   ============================================================ */
.uses-intro {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px); align-items: end; margin-bottom: clamp(36px, 5vw, 56px);
}
.uses-intro h2 { margin: 0 0 18px; max-width: 18ch; text-wrap: balance; }
.uses-intro-aside { display: flex; flex-direction: column; gap: 14px; }
.uses-intro-aside p { color: var(--muted); font-weight: 400; font-size: 15.5px; max-width: 48ch; }
.uses-intro-aside b { color: var(--ink); }
@media (max-width: 860px) { .uses-intro { grid-template-columns: minmax(0, 1fr); align-items: start; } }

.uses-index { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; scroll-margin-top: 84px; }
.uses-chip {
  display: flex; align-items: center; gap: 10px; position: relative;
  padding: 12px 14px; border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  background: #fff; color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1.25;
  transition: border-color .15s, color .15s, transform .15s, box-shadow .15s;
}
.uses-chip:hover { border-color: var(--green); color: var(--green-ink); transform: translateY(-1px); box-shadow: 0 10px 24px -18px rgba(11,11,11,0.5); }
.uses-chip:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.uses-chip .ico {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 8px;
  background: var(--black); color: var(--green);
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.uses-chip .n {
  margin-left: auto; flex: 0 0 auto; min-width: 26px; height: 22px; padding: 0 7px;
  border-radius: 999px; background: var(--green-subtle-2); color: var(--green-ink);
  font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
@media (max-width: 1080px) { .uses-index { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .uses-index { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .uses-chip { font-size: 13px; padding: 10px 12px; gap: 8px; } .uses-chip .ico { width: 30px; height: 30px; flex-basis: 30px; font-size: 13px; } }
@media (max-width: 360px) { .uses-index { grid-template-columns: minmax(0, 1fr); } }

/* Frequency distribution on the black band */
.uses-freq-head { max-width: 64ch; margin-bottom: clamp(28px, 4vw, 40px); }
.uses-freq-head .eyebrow { color: var(--green); }
.uses-freq-head h2 { margin: 0 0 14px; max-width: 20ch; text-wrap: balance; }
.uses-stat-note { max-width: 62ch; color: rgba(255,255,255,0.78); font-size: 15.5px; font-weight: 400; }
.uses-bar {
  display: flex; height: 26px; border-radius: 6px; overflow: hidden; gap: 3px;
  transform: skewX(-12deg); margin-inline: 6px;
}
.uses-bar span { display: block; flex: 0 0 auto; }
.uses-bar .b1, .uses-legend .b1 { background: var(--green); }
.uses-bar .b2, .uses-legend .b2 { background: var(--green-dark); }
.uses-bar .b3, .uses-legend .b3 { background: var(--green-ink); }
.uses-bar .b4, .uses-legend .b4 { background: var(--green-deep); }
.uses-bar .b5, .uses-legend .b5 { background: var(--black-3); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14); }
.uses-legend {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px 24px;
}
.uses-legend li { display: grid; grid-template-columns: 14px auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; }
.uses-legend .sw { width: 14px; height: 14px; border-radius: 3px; grid-row: 1 / span 2; align-self: start; margin-top: 6px; }
.uses-legend .num { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 900; color: #fff; line-height: 1; }
.uses-legend .lbl { font-size: 13px; color: rgba(255,255,255,0.72); margin-top: 6px; font-weight: 400; }
@media (max-width: 860px) { .uses-legend { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .uses-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } .uses-bar { height: 20px; } }

/* Anchor targets clear the sticky header (68px bar + 4px slash rule). */
.uses-cat { scroll-margin-top: 84px; }
.uses-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.uses-head .ico {
  width: 52px; height: 52px; flex: 0 0 52px; border-radius: 10px;
  background: var(--black); color: var(--green);
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.uses-cat > .wrap > .lead { max-width: 62ch; }
.uses-sub {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--muted); font-weight: 700; margin: clamp(28px, 4vw, 40px) 0 18px;
}
.uses-sub::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }

/* Two-column on desktop, one column on mobile. */
.uses-checks {
  list-style: none; padding: 0; margin: 0 0 clamp(28px, 4vw, 40px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 40px;
}
.uses-checks li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 15.5px; font-weight: 400; color: var(--muted); line-height: 1.5;
  padding-bottom: 12px; border-bottom: 1px solid var(--hairline);
}
.uses-checks li > span { display: block; }
.uses-checks li b { color: var(--ink); font-weight: 700; }
.uses-checks li i { color: var(--green-ink); margin-top: 5px; flex: 0 0 16px; font-size: 13px; }
.uses-checks .freq {
  display: inline-block; vertical-align: 1px; margin-left: 6px;
  padding: 1px 8px; border-radius: 999px;
  background: var(--green-subtle); color: var(--green-ink);
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
}
.uses-checks .what { display: block; margin-top: 3px; }
.uses-checks .what::first-letter { text-transform: uppercase; }
@media (max-width: 820px) { .uses-checks { grid-template-columns: minmax(0, 1fr); gap: 10px; } }

/* ---------- Standards & legal reference tokens ----------
   Inline tokens inside the "Why it matters" prose. Two variants:
   .law   — Acts, SIs / Regulations, Orders (set in law): ink token, gavel
   .guide — HSE ACOPs & HSG/INDG guidance, British Standards, DVSA / IET
            codes (guidance): green token, book
   Never colour alone — the leading icon and the fill/outline difference
   carry the distinction too. Inline display + box-decoration-break keeps
   the token intact across a line wrap, and vertical padding on an inline
   box does not alter the paragraph's line-height. Livery tokens only. */
.std {
  display: inline; font-weight: 700; font-size: 0.95em;
  padding: 1px 7px 1px 6px; border-radius: 4px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.std::before {
  font-family: "Font Awesome 6 Free"; font-weight: 900;
  font-size: 0.85em; margin-right: 5px; vertical-align: 1px;
}
.std.law {
  background: var(--wash-2); color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--hairline-2);
}
.std.law::before { content: "\f0e3"; color: var(--muted); }
.std.guide {
  background: var(--green-subtle); color: var(--green-ink);
  box-shadow: inset 0 -2px 0 var(--green-subtle-2);
}
.std.guide::before { content: "\f02d"; color: var(--green-ink); }

/* One-line key under the intro. */
.uses-key {
  margin: 0 0 clamp(28px, 4vw, 40px); max-width: 82ch;
  color: var(--muted); font-weight: 400; font-size: 15px; line-height: 1.9;
  padding: 12px 16px; border-left: 3px solid var(--green);
  background: var(--wash); border-radius: 0 var(--radius) var(--radius) 0;
}
@media (max-width: 720px) { .uses-key { font-size: 14px; line-height: 2; padding: 12px 14px; } }

/* "Why it matters" reads as text; "How UserChecks fits" is a livery panel */
.uses-notes { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.uses-note-label {
  display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.09em;
  font-weight: 700; color: var(--green-ink); margin-bottom: 10px;
}
.uses-why p { color: var(--muted); font-weight: 400; font-size: 15.5px; margin: 0; max-width: 62ch; }
.uses-fit {
  position: relative; overflow: hidden; background: var(--black); color: #fff;
  border-radius: var(--radius-lg); padding: 22px 24px 24px;
  box-shadow: 0 18px 40px -28px rgba(11,11,11,0.55);
}
.uses-fit::before { content: ""; position: absolute; inset: 0; background-image: var(--halftone); background-size: 7px 7px; pointer-events: none; }
.uses-fit::after {
  content: ""; position: absolute; top: -20%; right: -14%; width: 34%; height: 140%;
  background: var(--green); transform: skewX(-18deg); opacity: 0.14; pointer-events: none;
}
.uses-fit > * { position: relative; z-index: 1; }
.uses-fit .uses-note-label { color: var(--green); }
.uses-fit p { color: rgba(255,255,255,0.88); font-weight: 400; font-size: 15.5px; margin: 0; }
@media (max-width: 820px) { .uses-notes { grid-template-columns: minmax(0, 1fr); } }

.uses-back {
  display: inline-flex; align-items: center; gap: 8px; margin-top: clamp(24px, 3vw, 36px);
  font-size: 13.5px; font-weight: 600; color: var(--muted); transition: color .15s;
}
.uses-back:hover { color: var(--green-ink); }
.uses-back i { font-size: 11px; }

/* ---------- Scroll reveal (progressive enhancement) ----------
   Elements carrying [data-reveal] fade+rise once when they scroll into view;
   [data-reveal-stagger="<ms>"] does the same to its DIRECT CHILDREN with an
   incremental delay. The hidden state is gated on html.js (set by an inline
   head script) so nothing is invisible if JS never runs, and on
   prefers-reduced-motion: no-preference so reduced-motion users see it static.
   The hidden state uses :not(.is-visible) deliberately — once revealed the
   element carries NO transform of its own, so existing hover transforms
   (e.g. .uses-chip:hover) keep working untouched.
   The reveal delay comes in as --reveal-delay (set inline by site-behaviour.js
   and removed again once the reveal has finished, so it can't delay hovers). */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal],
  html.js [data-reveal-stagger] > * {
    transition: opacity .6s ease-out, transform .6s ease-out;
  }
  html.js [data-reveal]:not(.is-visible),
  html.js [data-reveal-stagger]:not(.is-visible) > * {
    opacity: 0;
    transform: translateY(20px);
  }
  html.js [data-reveal].is-visible,
  html.js [data-reveal-stagger].is-visible > * {
    transition-delay: var(--reveal-delay, 0ms);
  }
}

/* Carve-out: a stagger child that owns a hover transition would otherwise have
   it replaced wholesale by the blanket reveal transition above. Re-declare the
   element's own properties alongside the reveal ones. Only needed where the
   hover animates something other than transform (a transform hover can't have
   two durations, so those elements are left off the stagger instead). */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal-stagger] > .f-card {
    transition: opacity .6s ease-out, transform .6s ease-out,
                border-color .15s, box-shadow .15s;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}