/*
 * Inrep Scholar — 2026 premium marketing design system
 * Loaded after inrep-public.css on every public (non-tenant) page.
 * Scoped to existing shared component classes (.ir-*) already used across
 * the public view tree, so this file upgrades header/footer/cards/buttons
 * site-wide without needing per-page markup rewrites.
 *
 * inrep-public.css has several stacked "generations" of rules for these
 * same selectors (nav/footer/cards/buttons), many using !important and a
 * few using html body.inrep-public-body specificity. To reliably win over
 * all of them regardless of source order, every rule below uses that same
 * maximum-specificity prefix plus !important on the visual properties
 * (background/border/radius/shadow/color) confirmed to be contested.
 *
 * Do NOT touch .page-hero / .mkt-hero / .hero-h1 / .hero-subtitle here —
 * those were deliberately fixed in the 2026-07-22 rounds 5-6 changelog.
 */

/* ============ 1. TOKENS ============ */
html body.inrep-public-body {
  --gx-ink: #0b1f17;
  --gx-ink-soft: #24352d;
  --gx-muted: #56675e;
  --gx-muted-2: #7c8b83;
  --gx-border: #e2ece5;
  --gx-border-soft: #ecf3ee;
  --gx-cream: #f7faf8;
  --gx-mint: #e9fbf0;
  --gx-mint-strong: #cdf3dc;
  --gx-white: #ffffff;
  --gx-green: #25c75a;
  --gx-green-deep: #0f7b3e;
  --gx-forest: #115241;
  --gx-night: #071c15;
  --gx-night-2: #0d281f;
  --gx-night-3: #123a2c;
  --gx-radius-sm: 6px;
  --gx-radius-md: 8px;
  --gx-radius-lg: 10px;
  --gx-radius-pill: 6px;
  --gx-radius-circle: 999px;
  --gx-shadow-sm: 0 1px 2px rgba(7,28,21,.06);
  --gx-shadow-md: 0 10px 30px -14px rgba(7,28,21,.22);
  --gx-shadow-lg: 0 24px 60px -20px rgba(7,28,21,.32);
  --gx-container: 1240px;
  --gx-section-y: clamp(56px, 7vw, 104px);
  --gx-font: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --gx-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ============ 2. ANNOUNCEMENT BAR ============ */
html body.inrep-public-body .ir-topbar {
  background: var(--gx-night) !important;
  color: #dff5e7 !important;
  font-family: var(--gx-font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: .01em;
  padding: 9px 44px !important;
  min-height: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
html body.inrep-public-body .ir-topbar p { color: inherit !important; }
html body.inrep-public-body .ir-topbar button {
  color: #b7d9c4 !important;
  opacity: .85;
  transition: opacity .15s, color .15s;
}
html body.inrep-public-body .ir-topbar button:hover { opacity: 1; color: #fff !important; }

/* ============ 3. STICKY HEADER ============ */
html body.inrep-public-body .ir-nav {
  background: #fff !important;
  border-bottom: none !important;
  box-shadow: none !important;
  font-family: var(--gx-font) !important;
  padding-inline: clamp(18px, 3.2vw, 40px);
  min-height: 68px;
}
/* inrep-public.css:10941 still puts a 1px border-bottom on the shell itself
   (2-class specificity) — beat it explicitly so no hairline survives under
   the nav on any page. */
html body.inrep-public-body.inrep-public-body .ir-sticky-shell {
  border-bottom: none !important;
  box-shadow: none !important;
}
html body.inrep-public-body .ir-brand span {
  font-weight: 700 !important;
  letter-spacing: -.01em;
  color: var(--gx-ink) !important;
}

/* .ir-sticky-shell-scoped selector needed: inrep-public.css:13049 sets
   font-weight 600 !important on nav-group buttons at 3-class specificity. */
html body.inrep-public-body .ir-nav-links > a,
html body.inrep-public-body .ir-nav-group > button,
html body.inrep-public-body .ir-sticky-shell .ir-nav-links > a,
html body.inrep-public-body .ir-sticky-shell .ir-nav-group > button {
  font-size: 14.5px !important;
  font-weight: 400 !important;
  color: var(--gx-ink-soft) !important;
  border-radius: var(--gx-radius-sm) !important;
  padding: 8px 12px;
  transition: background .15s, color .15s;
  background: transparent !important;
}
html body.inrep-public-body .ir-nav-links > a:hover,
html body.inrep-public-body .ir-nav-group > button:hover,
html body.inrep-public-body .ir-nav-group.is-open > button {
  background: var(--gx-mint) !important;
  color: var(--gx-forest) !important;
}
html body.inrep-public-body .ir-caret { transition: transform .15s ease; opacity: .6; }
html body.inrep-public-body .ir-nav-group.is-open .ir-caret { transform: rotate(180deg); opacity: 1; }

html body.inrep-public-body .ir-login {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--gx-ink-soft) !important;
  background: #fff !important;
  border: 1px solid var(--gx-border) !important;
  padding: 9px 14px;
  border-radius: var(--gx-radius-pill) !important;
}
html body.inrep-public-body .ir-login:hover { background: var(--gx-mint) !important; color: var(--gx-forest) !important; }
html body.inrep-public-body .ir-start {
  background: #0a0a0a !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 10px 20px;
  border-radius: var(--gx-radius-pill) !important;
  box-shadow: var(--gx-shadow-sm) !important;
  transition: background .15s, transform .15s;
}
html body.inrep-public-body .ir-start:hover { background: #222 !important; transform: translateY(-1px); }

html body.inrep-public-body .ir-nav-search-form {
  background: var(--gx-cream) !important;
  border: 1px solid var(--gx-border) !important;
  border-radius: var(--gx-radius-pill) !important;
}
html body.inrep-public-body .ir-nav-search-form:focus-within {
  border-color: var(--gx-green) !important;
  box-shadow: 0 0 0 3px rgba(37,199,90,.14) !important;
}

/* Mega menu panel */
html body.inrep-public-body .ir-mega {
  background: #fff !important;
  border: 1px solid var(--gx-border) !important;
  border-radius: var(--gx-radius-lg) !important;
  box-shadow: var(--gx-shadow-lg) !important;
  padding: 20px !important;
  gap: 4px;
}
/* inrep-public.css has 3+ stacked rule generations setting a 9-14px gap
   between the nav button and this panel (top: calc(100% + Npx)). That gap
   is painted by the ancestor <header>, not by .ir-nav-group or any of its
   descendants — moving the mouse from the button down into the panel
   crosses that unhoverable strip, firing mouseleave and closing the menu
   before a click can land. Flush positioning (zero gap) keeps hover
   continuous from trigger to panel. Every variant class is listed here at
   matching specificity so this reliably beats every earlier generation. */
html body.inrep-public-body .ir-mega,
html body.inrep-public-body .ir-mega.ir-mega-slim,
html body.inrep-public-body .ir-mega.ir-mega-small,
html body.inrep-public-body .ir-mega.ir-mega-about {
  top: 100% !important;
}
html body.inrep-public-body .ir-mega-label {
  font-family: var(--gx-font-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gx-muted-2) !important;
  padding: 4px 10px 8px;
}
html body.inrep-public-body .ir-mega a,
html body.inrep-public-body .ir-mega-col a {
  border-radius: var(--gx-radius-sm) !important;
  padding: 9px 10px;
  transition: background .14s;
  background: transparent !important;
}
html body.inrep-public-body .ir-mega a:hover { background: var(--gx-mint) !important; }
html body.inrep-public-body .ir-mega a > span:first-child,
html body.inrep-public-body .ir-mega-col a > span:first-child {
  background: var(--gx-mint) !important;
  color: var(--gx-forest) !important;
  border-radius: var(--gx-radius-sm) !important;
}
html body.inrep-public-body .ir-mega strong { color: var(--gx-ink) !important; font-weight: 500 !important; }
html body.inrep-public-body .ir-mega small { color: var(--gx-muted) !important; }

/* Mega-menu promo card (added markup slot in header partial) */
html body.inrep-public-body .ir-mega-slim:has(.ir-mega-promo) {
  grid-template-columns: 1fr 1fr 1.1fr !important;
  min-width: 720px !important;
  max-width: 820px !important;
}
html body.inrep-public-body .ir-mega-promo {
  background: linear-gradient(160deg, var(--gx-night) 0%, var(--gx-night-3) 100%) !important;
  border-radius: var(--gx-radius-md) !important;
  padding: 18px;
  color: #eafbf1 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 200px;
}
html body.inrep-public-body .ir-mega-promo strong { color: #fff !important; font-size: 14.5px !important; }
html body.inrep-public-body .ir-mega-promo p { color: #b7d9c4 !important; font-size: 12.5px; margin: 0; line-height: 1.5; }
html body.inrep-public-body .ir-mega-promo a {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gx-green) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 0 !important;
  background: transparent !important;
}
html body.inrep-public-body .ir-mega-promo a:hover { background: none !important; color: #6ee6a0 !important; }
/* The promo link inherits the mega-menu item styling (white box + icon/text
   grid columns) from higher-specificity base rules, which wraps every word
   onto its own line — force it back to a plain inline text link. */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-mega-promo a {
  display: inline-flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  white-space: nowrap !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: var(--gx-green) !important;
}

/* Mobile drawer */
html body.inrep-public-body .ir-mobile-drawer {
  background: #fff !important;
  font-family: var(--gx-font) !important;
}
html body.inrep-public-body .ir-mobile-label {
  font-family: var(--gx-font-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gx-muted-2) !important;
}
html body.inrep-public-body .ir-mobile-drawer a:not(.ir-brand) {
  border-radius: var(--gx-radius-sm) !important;
  color: var(--gx-ink-soft) !important;
  font-weight: 500 !important;
}
html body.inrep-public-body .ir-mobile-drawer a:hover { background: var(--gx-mint) !important; color: var(--gx-forest) !important; }
html body.inrep-public-body .ir-mobile-ctas .ir-start { text-align: center; }

/* ============ 4. BUTTONS & PILLS ============ */
html body.inrep-public-body .ir-btn,
html body.inrep-public-body .ir-hero-v2-btn {
  font-family: var(--gx-font) !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
  border-radius: var(--gx-radius-pill) !important;
  padding: 12px 22px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
html body.inrep-public-body .ir-btn-green,
html body.inrep-public-body .ir-hero-v2-btn.primary {
  background: var(--gx-green) !important;
  color: #06210f !important;
  box-shadow: var(--gx-shadow-sm) !important;
  border: none !important;
}
html body.inrep-public-body .ir-btn-green:hover,
html body.inrep-public-body .ir-hero-v2-btn.primary:hover {
  background: #1fae4c !important;
  transform: translateY(-1px);
  box-shadow: var(--gx-shadow-md) !important;
}
html body.inrep-public-body .ir-btn-dark { background: var(--gx-forest) !important; color: #fff !important; border: none !important; }
html body.inrep-public-body .ir-btn-dark:hover { background: var(--gx-night) !important; transform: translateY(-1px); }
html body.inrep-public-body .ir-btn-outline,
html body.inrep-public-body .ir-hero-v2-btn.outline {
  background: #fff !important;
  color: var(--gx-ink) !important;
  border: 1.5px solid var(--gx-border) !important;
}
html body.inrep-public-body .ir-btn-outline:hover,
html body.inrep-public-body .ir-hero-v2-btn.outline:hover {
  border-color: var(--gx-forest) !important;
  background: var(--gx-mint) !important;
}

html body.inrep-public-body .ir-pill {
  font-family: var(--gx-font-mono) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: var(--gx-mint) !important;
  color: var(--gx-forest) !important;
  border: 1px solid var(--gx-mint-strong) !important;
  border-radius: var(--gx-radius-pill) !important;
  padding: 6px 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ============ 5. SECTION HEAD ============ */
html body.inrep-public-body .ir-section-head {
  max-width: 700px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(32px, 4vw, 52px);
}
html body.inrep-public-body .ir-section-head h2 {
  font-family: var(--gx-font) !important;
  font-size: clamp(26px, 3vw, 38px) !important;
  font-weight: 600 !important;
  letter-spacing: -.01em;
  color: var(--gx-ink) !important;
  margin: 14px 0 10px;
  line-height: 1.15;
}
html body.inrep-public-body .ir-section-head p { color: var(--gx-muted) !important; font-size: 16px !important; line-height: 1.6; }

/* ============ 6. CARD FAMILY (shared across ~20 public pages) ============ */
html body.inrep-public-body .ir-bento-card,
html body.inrep-public-body .ir-product-card,
html body.inrep-public-body .ir-feature-card,
html body.inrep-public-body .ir-story-card,
html body.inrep-public-body .ir-resource-card,
html body.inrep-public-body .ir-form-card,
html body.inrep-public-body .ir-process-card,
html body.inrep-public-body .ir-solution-card,
html body.inrep-public-body .ir-case-card,
html body.inrep-public-body .ir-addon-card,
html body.inrep-public-body .ir-stat-card {
  background: #fff !important;
  border: 1px solid var(--gx-border) !important;
  border-radius: var(--gx-radius-md) !important;
  box-shadow: var(--gx-shadow-sm) !important;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
html body.inrep-public-body .ir-bento-card:hover,
html body.inrep-public-body .ir-product-card:hover,
html body.inrep-public-body .ir-feature-card:hover,
html body.inrep-public-body .ir-story-card:hover,
html body.inrep-public-body .ir-resource-card:hover,
html body.inrep-public-body .ir-process-card:hover,
html body.inrep-public-body .ir-solution-card:hover,
html body.inrep-public-body .ir-case-card:hover {
  box-shadow: var(--gx-shadow-md) !important;
  transform: translateY(-3px);
  border-color: var(--gx-mint-strong) !important;
}
@media (hover: none) {
  html body.inrep-public-body .ir-bento-card:hover,
  html body.inrep-public-body .ir-product-card:hover,
  html body.inrep-public-body .ir-feature-card:hover,
  html body.inrep-public-body .ir-story-card:hover,
  html body.inrep-public-body .ir-resource-card:hover,
  html body.inrep-public-body .ir-process-card:hover,
  html body.inrep-public-body .ir-solution-card:hover,
  html body.inrep-public-body .ir-case-card:hover { transform: none; }
}

html body.inrep-public-body .ir-bento-icon-wrap,
html body.inrep-public-body .ir-dark-card-icon,
html body.inrep-public-body .ir-addon-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--gx-radius-sm) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
html body.inrep-public-body .ir-bento-icon-green,
html body.inrep-public-body .ir-addon-icon { background: var(--gx-mint) !important; color: var(--gx-forest) !important; }
html body.inrep-public-body .ir-bento-icon-cream { background: #fff4dd !important; color: #8a5a00 !important; }

/* MIGRATION & ROLLOUT addon grid on /pricing — icon-left row layout instead
   of the plain icon-on-top tile, with a hover accent so the six services
   read as a considered list rather than six identical filler boxes. */
html body.inrep-public-body .ir-addon-card {
  padding: 20px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 14px !important;
  transition: border-color .18s ease, box-shadow .18s ease !important;
}
html body.inrep-public-body .ir-addon-card:hover {
  border-color: var(--gx-mint-strong) !important;
  box-shadow: var(--gx-shadow-md) !important;
}
html body.inrep-public-body .ir-addon-icon {
  flex: none;
  margin-top: 1px;
}
html body.inrep-public-body .ir-addon-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
html body.inrep-public-body .ir-addon-card strong {
  font-size: 14.5px !important;
  font-weight: 650 !important;
  color: var(--gx-ink) !important;
}
html body.inrep-public-body .ir-addon-card span {
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: var(--gx-muted) !important;
}

/* Dark card family (mosaic / impact sections) */
html body.inrep-public-body .ir-dark-card,
html body.inrep-public-body .ir-ib-card.ir-ib-dark,
html body.inrep-public-body .ir-ib-card.ir-ib-accent {
  background: linear-gradient(165deg, var(--gx-night) 0%, var(--gx-night-3) 100%) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: var(--gx-radius-md) !important;
  color: #eafbf1 !important;
}
html body.inrep-public-body .ir-dark-card strong,
html body.inrep-public-body .ir-ib-card.ir-ib-dark strong,
html body.inrep-public-body .ir-ib-card.ir-ib-accent > strong { color: #fff !important; }
html body.inrep-public-body .ir-dark-card p,
html body.inrep-public-body .ir-ib-card.ir-ib-dark p,
html body.inrep-public-body .ir-ib-card.ir-ib-accent p { color: #b7d9c4 !important; }
html body.inrep-public-body .ir-ib-card.ir-ib-accent .ir-ib-stat span { color: #9dc3ac !important; }
html body.inrep-public-body .ir-dci-green { background: rgba(37,199,90,.16) !important; color: #5be18b !important; }
html body.inrep-public-body .ir-dci-emerald { background: rgba(16,185,129,.16) !important; color: #4fd8ab !important; }
html body.inrep-public-body .ir-dci-teal { background: rgba(45,212,191,.16) !important; color: #6fe4d6 !important; }
html body.inrep-public-body .ir-dci-lime { background: rgba(163,230,53,.16) !important; color: #c8f26e !important; }

html body.inrep-public-body .ir-dark-cards--access-tail {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  margin-top: 16px;
}

@media (max-width: 900px) {
  html body.inrep-public-body .ir-dark-cards--access-tail {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* How it works: responsibility board */
html body.inrep-public-body .ir-how-flow-board {
  display: grid;
  gap: clamp(28px, 4vw, 44px);
}

html body.inrep-public-body .ir-how-flow-board__head {
  display: grid;
  gap: 14px;
  max-width: 820px;
}

html body.inrep-public-body .ir-how-flow-board__head .ds-editorial__title {
  max-width: 17ch;
  margin: 0;
}

html body.inrep-public-body .ir-how-flow-board__head .ds-editorial__lead {
  margin: 0;
  max-width: 64ch;
}

html body.inrep-public-body .ir-how-flow-board__roles {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 6px;
}

html body.inrep-public-body .ir-how-flow-board__roles span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--gx-border, #e2ece5);
  border-radius: var(--gx-radius-sm, 6px);
  background: #fff;
  color: var(--gx-forest, #115241);
  font-size: 13px;
  font-weight: 650;
}

html body.inrep-public-body .ir-how-flow-board__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: clamp(22px, 4vw, 40px);
  align-items: start;
}

html body.inrep-public-body .ir-how-stage-list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

html body.inrep-public-body .ir-how-stage-card {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 18px;
  min-width: 0;
  padding: clamp(18px, 2.4vw, 24px);
  border: 1px solid var(--gx-border, #e2ece5);
  border-radius: var(--gx-radius-lg, 10px);
  background: #fff;
  box-shadow: 0 16px 40px -30px rgba(7, 28, 21, .34);
}

html body.inrep-public-body .ir-how-stage-card__marker {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 10px;
  color: var(--gx-forest, #115241);
}

html body.inrep-public-body .ir-how-stage-card__marker > span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid #cae8d5;
  border-radius: var(--gx-radius-md, 8px);
  background: #effbf3;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

html body.inrep-public-body .ir-how-stage-card__marker i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--gx-radius-sm, 6px);
  background: var(--gx-forest, #115241);
  color: #fff;
  font-style: normal;
}

html body.inrep-public-body .ir-how-stage-card__body {
  min-width: 0;
}

html body.inrep-public-body .ir-how-stage-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

html body.inrep-public-body .ir-how-stage-card__top h3 {
  margin: 0;
  color: var(--gx-ink, #0b1f17);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.2;
  letter-spacing: -.01em;
}

html body.inrep-public-body .ir-how-stage-card__top > span,
html body.inrep-public-body .ir-how-stage-card__meta span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid #d8e9de;
  border-radius: var(--gx-radius-sm, 6px);
  background: #f7fbf8;
  color: #356451;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

html body.inrep-public-body .ir-how-stage-card p {
  margin: 0;
  color: var(--gx-muted, #56675e);
  font-size: 15px;
  line-height: 1.62;
}

html body.inrep-public-body .ir-how-stage-card__next {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  margin-top: 14px;
  padding: 13px 14px;
  border-radius: var(--gx-radius-md, 8px);
  background: #f3f8f5;
}

html body.inrep-public-body .ir-how-stage-card__next strong {
  color: var(--gx-forest, #115241);
  font-size: 13px;
}

html body.inrep-public-body .ir-how-stage-card__next span {
  color: #42594d;
  font-size: 13.5px;
  line-height: 1.5;
}

html body.inrep-public-body .ir-how-stage-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

html body.inrep-public-body .ir-how-flow-board__aside {
  position: sticky;
  top: calc(var(--ir-header-height, 112px) + 28px);
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid rgba(17, 82, 65, .12);
  border-radius: var(--gx-radius-lg, 10px);
  background: linear-gradient(180deg, #f8fcf9 0%, #eff8f2 100%);
}

html body.inrep-public-body .ir-how-flow-board__aside div {
  display: grid;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(17, 82, 65, .1);
}

html body.inrep-public-body .ir-how-flow-board__aside div > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--gx-radius-sm, 6px);
  background: #dff8e8;
  color: var(--gx-forest, #115241);
}

html body.inrep-public-body .ir-how-flow-board__aside strong {
  color: var(--gx-ink, #0b1f17);
  font-size: 15.5px;
  line-height: 1.35;
}

html body.inrep-public-body .ir-how-flow-board__aside p {
  margin: 0;
  color: var(--gx-muted, #56675e);
  font-size: 13.5px;
  line-height: 1.55;
}

html body.inrep-public-body .ir-how-flow-board__aside .ds-btn {
  width: 100%;
}

html body.inrep-public-body .ir-how-flow-board__actions {
  display: flex;
  justify-content: center;
  padding-top: clamp(4px, 1vw, 12px);
}

html body.inrep-public-body .ir-how-flow-board__actions .ds-btn {
  min-width: min(280px, 100%);
}

@media (max-width: 960px) {
  html body.inrep-public-body .ir-how-flow-board__layout {
    grid-template-columns: 1fr;
  }

  html body.inrep-public-body .ir-how-flow-board__aside {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html body.inrep-public-body .ir-how-flow-board__aside .ds-btn {
    grid-column: 1 / -1;
    width: fit-content;
  }
}

@media (max-width: 620px) {
  html body.inrep-public-body .ir-how-flow-board__head .ds-editorial__title {
    max-width: none;
  }

  html body.inrep-public-body .ir-how-flow-board__roles {
    display: grid;
    grid-template-columns: 1fr;
  }

  html body.inrep-public-body .ir-how-stage-card {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  html body.inrep-public-body .ir-how-stage-card__marker {
    grid-template-columns: auto auto;
    justify-content: start;
    justify-items: start;
    align-items: center;
  }

  html body.inrep-public-body .ir-how-stage-card__top {
    display: grid;
    gap: 8px;
  }

  html body.inrep-public-body .ir-how-stage-card__top > span {
    width: fit-content;
  }

  html body.inrep-public-body .ir-how-stage-card__next {
    grid-template-columns: 1fr;
  }

  html body.inrep-public-body .ir-how-flow-board__aside {
    grid-template-columns: 1fr;
  }

  html body.inrep-public-body .ir-how-flow-board__aside .ds-btn,
  html body.inrep-public-body .ir-how-flow-board__actions .ds-btn {
    width: 100%;
  }
}

@media (max-width: 560px) {
  html body.inrep-public-body .ir-dark-cards--access-tail {
    grid-template-columns: 1fr !important;
  }
}

html body.inrep-public-body .ir-ib-card { background: #fff !important; border: 1px solid var(--gx-border) !important; border-radius: var(--gx-radius-md) !important; box-shadow: var(--gx-shadow-sm) !important; }

/* The bento HERO card is a photo card (base design at inrep-public.css:16174:
   photo background + dark overlay + white text). The white card-family rule
   above must not strip its image — re-assert it at higher specificity. */
html body.inrep-public-body.inrep-public-body .ir-bento-card.ir-bento-card-hero {
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.68)), url('/assets/img/partner-hero-university-team.webp') center/cover !important;
  color: #fff !important;
}
html body.inrep-public-body.inrep-public-body .ir-bento-card.ir-bento-card-hero strong { color: #fff !important; }

/* Dark section wrapper used by home.php + industry/product pages —
   full-bleed band flush with the page edges (Greenly reference), NOT an
   inset rounded card. */
html body.inrep-public-body .ir-dark-section {
  background: linear-gradient(180deg, var(--gx-night) 0%, #051510 100%) !important;
  border-radius: 0 !important;
  margin-inline: 0 !important;
  width: 100% !important;
  max-width: none !important;
  color: #eafbf1 !important;
}
/* The dark impact-stats band: base CSS caps it at 1200px which makes it read
   as an inset card — stretch it full-bleed and fix the white stat cards'
   labels (base styles them white for a translucent-card design; the redesign
   makes the cards solid white, so the text must be dark). */
html body.inrep-public-body.inrep-public-body .ir-impact-stats {
  /* width:100% is required, not just max-width:none — the base section-rhythm
     rule (inrep-public.css:16152) sets width: var(--ir-page-width) with
     margin-inline:auto; killing only the margin left the band constrained AND
     pinned to the left edge. Full-bleed = full width + no margins. */
  width: 100% !important;
  max-width: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
html body.inrep-public-body.inrep-public-body .ir-stat-card p {
  color: var(--gx-muted) !important;
}
html body.inrep-public-body.inrep-public-body .ir-stat-card .ir-stat-num {
  color: var(--gx-ink) !important;
}
html body.inrep-public-body .ir-dark-section h2 { color: #fff !important; }
/* The --light variant's own rules keep inner headings dark at 3-class
   specificity — since every .ir-dark-section now gets the dark background,
   inner text must always be light. */
html body.inrep-public-body.inrep-public-body .ir-dark-section .ir-dark-section-inner h2,
html body.inrep-public-body.inrep-public-body .ir-dark-section .ir-dark-section-inner > p {
  color: #fff !important;
}

/* Solutions "govern research" band — plain highlights on the normal white
   section background, not a colored/dark band. Previously this reused
   .ir-dark-section--light, but the rule above now forces every
   .ir-dark-section dark (including that variant), which collided with the
   variant's own dark-card recolor and produced two mismatched dark boxes
   stacked on top of each other. solutions.php now renders this as a plain
   .ir-section with its own lightweight, chrome-free highlight tiles. */
html body.inrep-public-body .ir-plain-highlights {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  width: min(1180px, calc(100% - 48px));
  margin: 8px auto 36px;
}
html body.inrep-public-body .ir-plain-highlight {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
html body.inrep-public-body .ir-plain-highlight-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--gx-radius-md);
  display: grid;
  place-items: center;
  color: #fff;
}
html body.inrep-public-body .ir-phi-green { background: #16a34a; }
html body.inrep-public-body .ir-phi-emerald { background: #059669; }
html body.inrep-public-body .ir-phi-teal { background: #0d9488; }
html body.inrep-public-body .ir-phi-lime { background: #65a30d; }
html body.inrep-public-body .ir-plain-highlight strong {
  font-size: 16px;
  font-weight: 650;
  color: var(--gx-ink);
}
html body.inrep-public-body .ir-plain-highlight p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--gx-muted);
  margin: 0;
}
html body.inrep-public-body .ir-solutions-highlights-cta { text-align: center; }
@media (max-width: 900px) {
  html body.inrep-public-body .ir-plain-highlights { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  html body.inrep-public-body .ir-plain-highlights { grid-template-columns: 1fr; }
}

/* ============ 7. STANDARDS / LOGO STRIP ============ */
html body.inrep-public-body .ir-standards,
html body.inrep-public-body .ir-built-for-strip {
  text-align: center;
}
html body.inrep-public-body .ir-standards h2,
html body.inrep-public-body .ir-built-for-label {
  font-family: var(--gx-font-mono) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gx-muted-2) !important;
}
html body.inrep-public-body .ir-standards > div,
html body.inrep-public-body .ir-built-for-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
}
html body.inrep-public-body .ir-standards > div span,
html body.inrep-public-body .ir-built-for-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff !important;
  border: 1px solid var(--gx-border) !important;
  border-radius: var(--gx-radius-pill) !important;
  padding: 8px 16px;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--gx-ink-soft) !important;
}

/* ============ 8. STATS ============ */
html body.inrep-public-body .ir-stats-grid { gap: 18px; }
html body.inrep-public-body .ir-stat-card { padding: 24px 22px; }
html body.inrep-public-body .ir-stat-num {
  font-family: var(--gx-font) !important;
  font-size: clamp(30px, 3.4vw, 44px) !important;
  font-weight: 700 !important;
  color: var(--gx-ink) !important;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ============ 9. FAQ ACCORDION ============ */
html body.inrep-public-body .ir-faq-item {
  background: #fff !important;
  border: 1px solid var(--gx-border) !important;
  border-radius: var(--gx-radius-md) !important;
  padding: 4px 20px !important;
  margin-bottom: 10px;
  transition: border-color .15s;
}
html body.inrep-public-body .ir-faq-item[open] { border-color: var(--gx-mint-strong) !important; background: var(--gx-mint) !important; }
html body.inrep-public-body .ir-faq-item summary {
  font-family: var(--gx-font) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  color: var(--gx-ink) !important;
  padding: 16px 28px 16px 0;
  cursor: pointer;
  position: relative;
  list-style: none;
}
html body.inrep-public-body .ir-faq-item summary::-webkit-details-marker { display: none; }
html body.inrep-public-body .ir-faq-item summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 14px;
  font-size: 20px;
  font-weight: 400;
  color: var(--gx-forest);
  transition: transform .18s;
}
html body.inrep-public-body .ir-faq-item[open] summary::after { transform: rotate(45deg); }
html body.inrep-public-body .ir-faq-item p { color: var(--gx-muted) !important; font-size: 14.5px !important; line-height: 1.6; padding-bottom: 16px; margin: 0; }

/* ============ 10. PRICING ============ */
html body.inrep-public-body .ir-plan-grid { align-items: stretch; }
html body.inrep-public-body .ir-plan-card {
  background: #fff !important;
  border: 1px solid var(--gx-border) !important;
  border-radius: var(--gx-radius-lg) !important;
  box-shadow: var(--gx-shadow-sm) !important;
  padding: 26px !important;
  position: relative;
  transition: box-shadow .18s, border-color .18s;
}
html body.inrep-public-body .ir-plan-card.ir-plan-popular {
  border: 2px solid var(--gx-green) !important;
  box-shadow: var(--gx-shadow-md) !important;
}
html body.inrep-public-body .ir-plan-badge {
  position: absolute;
  top: -13px;
  left: 24px;
  background: var(--gx-green) !important;
  color: #06210f !important;
  font-family: var(--gx-font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--gx-radius-pill) !important;
}
html body.inrep-public-body .ir-plan-icon {
  width: 40px; height: 40px;
  border-radius: var(--gx-radius-sm) !important;
  background: var(--gx-mint) !important;
  color: var(--gx-forest) !important;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--gx-font-mono) !important; font-weight: 700 !important; font-size: 13px !important;
}
html body.inrep-public-body .ir-plan-name { font-family: var(--gx-font) !important; font-size: 17px !important; color: var(--gx-ink) !important; }
html body.inrep-public-body .ir-plan-label { font-size: 12.5px !important; color: var(--gx-muted) !important; }
html body.inrep-public-body .ir-plan-desc { color: var(--gx-muted) !important; font-size: 14px !important; line-height: 1.6; }
html body.inrep-public-body .ir-plan-price strong { font-family: var(--gx-font) !important; font-size: 30px !important; color: var(--gx-ink) !important; }
html body.inrep-public-body .ir-plan-price span { color: var(--gx-muted) !important; font-size: 13px !important; }
html body.inrep-public-body .ir-plan-actions { display: flex !important; gap: 10px; flex-wrap: wrap; margin: 16px 0; }
html body.inrep-public-body .ir-plan-features li {
  font-size: 13.5px !important;
  color: var(--gx-ink-soft) !important;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid var(--gx-border-soft);
}
html body.inrep-public-body .ir-plan-features li:first-child { border-top: none; }
html body.inrep-public-body .ir-plan-features svg { color: var(--gx-green-deep) !important; flex: none; margin-top: 3px; }

html body.inrep-public-body .ir-detailed-rate-bar {
  background: var(--gx-cream) !important;
  border: 1px solid var(--gx-border) !important;
  border-radius: var(--gx-radius-md) !important;
  padding: 20px 26px;
}
/* Base styles color this bar's text white for its original dark background;
   the cream background above needs dark text instead, or the heading and
   description are nearly invisible against it. The wrapping <div> also
   inherits center alignment from the hero, which centers the short heading
   over the longer paragraph below it instead of lining both up on the left. */
html body.inrep-public-body .ir-detailed-rate-bar > div {
  text-align: left;
}
html body.inrep-public-body .ir-detailed-rate-bar strong {
  color: var(--gx-ink) !important;
}
html body.inrep-public-body .ir-detailed-rate-bar span {
  color: var(--gx-muted) !important;
}

html body.inrep-public-body .ir-compare-wrap {
  border: 1px solid var(--gx-border) !important;
  border-radius: var(--gx-radius-md) !important;
  /* The comparison table's real rendered width (700px, 4 columns) is wider than any mobile
     viewport. overflow-x:auto + max-width:100% alone correctly clips/scrolls the table
     visually (confirmed: document.documentElement.clientWidth stays 375, nothing visibly
     spills over) but does NOT stop the table's own intrinsic min-content width from being
     counted when the mobile browser computes its layout viewport — window.innerWidth and
     document.documentElement.scrollWidth still measured 670 with this alone, which is what
     pushed the position:fixed nav's hamburger toggle off past the visible right edge (it
     lays out against the inflated viewport, not the 375px one actually shown). CSS
     containment explicitly isolates this box's internal layout from influencing anything
     outside it, which is the actual fix: verified live it brings scrollWidth back to 375. */
  contain: layout paint;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  background: #fff !important;
}
html body.inrep-public-body .ir-compare-table th {
  font-family: var(--gx-font-mono) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gx-muted-2) !important;
  background: var(--gx-cream) !important;
  padding: 14px 16px;
}
html body.inrep-public-body .ir-compare-table td { padding: 12px 16px; font-size: 14px !important; border-top: 1px solid var(--gx-border-soft); }
html body.inrep-public-body .ir-compare-table .ir-compare-group-row td {
  background: var(--gx-night) !important;
  color: #fff !important;
  font-family: var(--gx-font-mono) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 10px 16px;
  border-top: none;
}
html body.inrep-public-body .ir-compare-table tr:first-child.ir-compare-group-row td { border-top: none; }
html body.inrep-public-body .ir-compare-table .ir-col-highlight { background: var(--gx-mint) !important; }
html body.inrep-public-body .ir-compare-yes { color: var(--gx-green-deep) !important; }
html body.inrep-public-body .ir-compare-no { color: var(--gx-muted-2) !important; }

/* ============ 11. FINAL CTA BANNER ============ */
/* Final CTA: full-bleed dark band flush with the footer (Greenly reference),
   not an inset rounded card. */
html body.inrep-public-body .ir-final-cta {
  background: radial-gradient(120% 160% at 50% 0%, var(--gx-night-3) 0%, var(--gx-night) 60%, #04120d 100%) !important;
  border-radius: 0 !important;
  /* margin must be 0 on ALL sides — a base margin-bottom lets the light page
     background show as a white strip between this dark band and the dark
     footer that follows it on every page. */
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  padding: clamp(48px, 7vw, 88px) clamp(24px, 5vw, 60px) !important;
  text-align: center;
  color: #eafbf1 !important;
}
html body.inrep-public-body .ir-final-cta h2 { color: #fff !important; font-size: clamp(26px, 3.4vw, 40px) !important; font-weight: 600 !important; margin: 12px 0; }
html body.inrep-public-body .ir-final-cta .ir-cta-sub,
html body.inrep-public-body .ir-final-cta p { color: #b7d9c4 !important; max-width: 560px; margin-inline: auto; }
html body.inrep-public-body .ir-final-cta-points { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin: 18px 0; }
html body.inrep-public-body .ir-final-cta-points span { display: inline-flex; align-items: center; gap: 6px; color: #cdeedd !important; font-size: 13.5px !important; font-weight: 600 !important; }
html body.inrep-public-body .ir-final-cta-kicker { color: #6ee6a0 !important; }

/* ============ 12. FOOTER ============ */
html body.inrep-public-body .ir-footer {
  background: var(--gx-night) !important;
  color: #b7d9c4 !important;
  font-family: var(--gx-font) !important;
  padding-top: clamp(48px, 6vw, 76px) !important;
}
html body.inrep-public-body .ir-footer-main { gap: clamp(28px, 4vw, 56px); }
html body.inrep-public-body .ir-footer-brand .ir-brand span { color: #fff !important; }
html body.inrep-public-body .ir-footer-brand p { color: #9dc3ac !important; font-size: 14px !important; line-height: 1.6; max-width: 340px; }
/* Footer newsletter: stacked white input + full-width green button + small
   note (Greenly footer pattern). Matches the base stylesheet's grid layout —
   do NOT wrap these in an inline pill container again; the two layouts fight
   and the button breaks out of the wrapper. */
html body.inrep-public-body.inrep-public-body .ir-newsletter {
  display: grid !important;
  gap: 10px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  max-width: 320px;
  margin-top: 14px;
}
html body.inrep-public-body.inrep-public-body .ir-newsletter input {
  background: #fff !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: 6px !important;
  color: #10241b !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  width: 100% !important;
  min-height: 46px !important;
}
html body.inrep-public-body .ir-newsletter input::placeholder { color: #6b7f76; }
html body.inrep-public-body .ir-newsletter input:focus { outline: none; border-color: var(--gx-green) !important; }
html body.inrep-public-body.inrep-public-body .ir-newsletter button {
  background: var(--gx-green) !important;
  color: #06210f !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  border-radius: 6px !important;
  padding: 12px 18px !important;
  width: 100% !important;
  min-height: 46px !important;
  border: none !important;
}
html body.inrep-public-body .ir-newsletter button:hover { background: #1fae4c !important; }
html body.inrep-public-body.inrep-public-body .ir-newsletter small {
  display: block !important;
  color: #7ba591 !important;
  font-size: 12px !important;
  order: 3;
}

html body.inrep-public-body .ir-footer-cols h3 {
  color: #fff !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
  margin-bottom: 14px;
}
html body.inrep-public-body .ir-footer-cols a {
  /* 14.5px, not 13.5px: footer navigation is real navigation, and the base
     stylesheet drives it down to 13px !important. Sizing and rhythm are set here
     in one place — see the footer compaction block later in this file. */
  color: #c2ddd0 !important;
  font-size: 14.5px !important;
  line-height: 1.45 !important;
  display: block;
  padding: 4px 0;
  transition: color .15s;
}
html body.inrep-public-body .ir-footer-cols a:hover { color: #fff !important; }

html body.inrep-public-body .ir-cert-row {
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: clamp(28px, 4vw, 48px);
  padding: 20px clamp(20px, 4vw, 40px);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
html body.inrep-public-body .ir-cert-row span {
  font-family: var(--gx-font-mono) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .03em;
  color: #9dc3ac !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: var(--gx-radius-pill) !important;
  padding: 6px 14px;
  background: transparent !important;
}

html body.inrep-public-body .ir-footer-social {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 18px clamp(20px, 4vw, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
html body.inrep-public-body .ir-footer-social p { color: #7ba591 !important; font-size: 13px !important; margin: 0 !important; }
html body.inrep-public-body .ir-footer-social > div { display: flex; gap: 10px; }
html body.inrep-public-body .ir-footer-social > div span {
  width: 34px; height: 34px;
  border-radius: var(--gx-radius-circle) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #b7d9c4 !important;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
html body.inrep-public-body .ir-footer-social > div span:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; }

html body.inrep-public-body .ir-footer-legal {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 18px clamp(20px, 4vw, 40px) clamp(20px, 4vw, 32px);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 12.5px !important;
  color: #6f9280 !important;
}
html body.inrep-public-body .ir-footer-legal a { color: #9dc3ac !important; }
html body.inrep-public-body .ir-footer-legal a:hover { color: #fff !important; }

/* ============ 12b. SPECIFICITY OVERRIDE ============
 * inrep-public.css has several ".inrep-public-body .ir-sticky-shell .ir-start"
 * / ":where(...)"-style button-radius rules chained 3 classes deep with
 * !important (search "--inrep-button-radius" / "--ds-radius-button"). Those
 * beat the button rules above on class-count alone regardless of load order.
 * The repeated class below is a valid CSS specificity boost (no markup change
 * needed) that reliably wins against any of those without editing that file. */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-start,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-login,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-btn,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-v2-btn,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-plan-card .ir-btn,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-newsletter button,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-compare-ctas a {
  border-radius: var(--gx-radius-pill) !important;
}
/* .register-center form.auth-card.signup-form-grid (app.css:5104) is 3 classes
 * deep with !important — same specificity-boost trick needed here. */
html body.inrep-public-body.inrep-public-body.inrep-public-body .auth-card,
html body.inrep-public-body.inrep-public-body.inrep-public-body .register-center form.auth-card,
html body.inrep-public-body.inrep-public-body.inrep-public-body .auth-card--inrep,
html body.inrep-public-body.inrep-public-body.inrep-public-body .auth-center {
  border-radius: var(--gx-radius-lg) !important;
  box-shadow: var(--gx-shadow-lg) !important;
}

/* ============ 12c. SUBPAGE / PRODUCT HERO + BREADCRUMB + RATING ============ */
html body.inrep-public-body .ir-breadcrumb {
  font-family: var(--gx-font-mono) !important;
  font-size: 12px !important;
  color: var(--gx-muted-2) !important;
}
html body.inrep-public-body .ir-breadcrumb a { color: var(--gx-muted-2) !important; }
html body.inrep-public-body .ir-breadcrumb a:hover { color: var(--gx-forest) !important; }

html body.inrep-public-body .ir-rating {
  font-size: 13.5px !important;
  color: var(--gx-muted) !important;
  font-weight: 600 !important;
}
html body.inrep-public-body .ir-rating strong { color: var(--gx-ink-soft) !important; font-weight: 600 !important; }

html body.inrep-public-body .ir-illustration-card {
  background: var(--gx-cream) !important;
  border: 1px solid var(--gx-border) !important;
  border-radius: var(--gx-radius-lg) !important;
  box-shadow: var(--gx-shadow-md) !important;
  overflow: hidden;
}
html body.inrep-public-body .ir-illustration-card figcaption {
  background: #fff !important;
  border-top: 1px solid var(--gx-border) !important;
}
html body.inrep-public-body .ir-illustration-card figcaption strong { color: var(--gx-forest) !important; }
html body.inrep-public-body .ir-illustration-card figcaption span { color: var(--gx-muted) !important; }

/* ============ 12c-2. LIGHT SUBPAGE HERO SYSTEM (2026-08-06) ============
 * Every non-index page hero renders on a light ground: white page, dark
 * heading, muted supporting line, breadcrumb above, and the visual carried
 * entirely by the second column rather than by a coloured background.
 *
 * SUPERSEDES the dark-forest treatment this block previously carried (dark
 * green gradient + green glow + light text, added 2026-07-23 round 5).
 * Rewritten in place rather than overridden from a later section, so there is
 * only ever one hero system in this file — layering a light system on top of a
 * dark one leaves two contradictory sets of colour rules for every future
 * reader to reconcile.
 *
 * Child text rules stay scoped to the hero's copy column (> div:first-child on
 * the two-column families) exactly as before, so cards and panels inside the
 * hero's second column keep their own colours. */
html body.inrep-public-body .ir-product-hero,
html body.inrep-public-body .ir-subpage-hero,
html body.inrep-public-body .ir-partner-hero,
html body.inrep-public-body .ir-info-hero,
html body.inrep-public-body .ir-pricing-hero,
html body.inrep-public-body .mkt-hero.page-hero,
html body.inrep-public-body .page-hero:not(.section-white) {
  background: #fff !important;
  color: var(--gx-ink, #0a1a12) !important;
  font-family: var(--gx-font) !important;
}
/* Copy-column text — two-column hero families (copy in first div) */
html body.inrep-public-body.inrep-public-body .ir-product-hero > div:first-child h1,
html body.inrep-public-body.inrep-public-body .ir-subpage-hero > div:first-child h1,
html body.inrep-public-body.inrep-public-body .ir-partner-hero > div:first-child h1,
html body.inrep-public-body.inrep-public-body .ir-info-hero > div:first-child h1,
html body.inrep-public-body.inrep-public-body .ir-pricing-hero .ir-pricing-hero-inner h1 {
  color: var(--gx-ink, #0a1a12) !important;
  letter-spacing: -.02em;
}
html body.inrep-public-body.inrep-public-body .ir-product-hero > div:first-child p,
html body.inrep-public-body.inrep-public-body .ir-subpage-hero > div:first-child p,
html body.inrep-public-body.inrep-public-body .ir-partner-hero > div:first-child p,
html body.inrep-public-body.inrep-public-body .ir-info-hero > div:first-child p,
html body.inrep-public-body.inrep-public-body .ir-pricing-hero .ir-pricing-hero-inner p {
  color: var(--gx-muted, #62736b) !important;
}
/* Single-column centered page-hero family (trending, terms, privacy, etc.) */
html body.inrep-public-body.inrep-public-body .mkt-hero.page-hero h1,
html body.inrep-public-body.inrep-public-body .mkt-hero.page-hero .hero-h1,
html body.inrep-public-body.inrep-public-body .page-hero:not(.section-white) h1,
html body.inrep-public-body.inrep-public-body .page-hero:not(.section-white) .page-hero-h1 {
  color: var(--gx-ink, #0a1a12) !important;
}
html body.inrep-public-body.inrep-public-body .mkt-hero.page-hero .hero-subtitle,
html body.inrep-public-body.inrep-public-body .mkt-hero.page-hero > p,
html body.inrep-public-body.inrep-public-body .page-hero:not(.section-white) .page-hero-sub,
html body.inrep-public-body.inrep-public-body .page-hero:not(.section-white) > p {
  color: var(--gx-muted, #62736b) !important;
}
html body.inrep-public-body.inrep-public-body .mkt-hero.page-hero .eyebrow,
html body.inrep-public-body.inrep-public-body .mkt-hero.page-hero .hero-eyebrow,
html body.inrep-public-body.inrep-public-body .page-hero:not(.section-white) .eyebrow,
html body.inrep-public-body.inrep-public-body .page-hero:not(.section-white) .hero-eyebrow {
  color: var(--gx-forest, #115241) !important;
}
/* Breadcrumb sits above the heading as a quiet trail — the page's position in
   the site, not a decorative label. Muted by default, ink on hover. */
html body.inrep-public-body.inrep-public-body.inrep-public-body :is(.ir-product-hero, .ir-subpage-hero, .ir-partner-hero, .ir-info-hero, .ir-pricing-hero) .ir-breadcrumb,
html body.inrep-public-body.inrep-public-body.inrep-public-body :is(.ir-product-hero, .ir-subpage-hero, .ir-partner-hero, .ir-info-hero, .ir-pricing-hero) .ir-breadcrumb a {
  color: var(--gx-muted, #62736b) !important;
  background: transparent !important;
  font-size: 14px !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body :is(.ir-product-hero, .ir-subpage-hero, .ir-partner-hero, .ir-info-hero) .ir-breadcrumb a:hover {
  color: var(--gx-ink, #0a1a12) !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body :is(.ir-product-hero, .ir-subpage-hero, .ir-partner-hero, .ir-info-hero) .ir-rating,
html body.inrep-public-body.inrep-public-body.inrep-public-body :is(.ir-product-hero, .ir-subpage-hero, .ir-partner-hero, .ir-info-hero) .ir-rating strong {
  color: var(--gx-muted, #62736b) !important;
}
/* On a white hero the secondary action needs a visible edge, where on the old
   dark ground a plain white fill was enough to separate it. */
html body.inrep-public-body.inrep-public-body.inrep-public-body :is(.ir-product-hero, .ir-subpage-hero, .ir-partner-hero, .ir-info-hero) :is(.ir-btn-light, .ir-btn-outline) {
  background: #fff !important;
  color: var(--gx-ink) !important;
  border: 1px solid var(--gx-border, #e2ece5) !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body :is(.ir-product-hero, .ir-subpage-hero, .ir-partner-hero, .ir-info-hero) :is(.ir-btn-light, .ir-btn-outline):hover {
  border-color: var(--gx-forest, #115241) !important;
}
/* Pricing hero: billing-cycle tabs on the dark background. app.css gives
   .subscription-cycle-tabs a white card look (background/border/shadow) for
   its admin-dashboard context; on the dark hero that reads as a floating
   white box, and the tab text above was styled for a transparent/dark
   background so it went low-contrast against that white box. Strip the
   card chrome here so the tabs sit flush on the hero as a plain segmented
   control. */
html body.inrep-public-body.inrep-public-body .ir-pricing-hero .subscription-cycle-tabs {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* Tab colours follow the hero, which is now light — these were white-on-dark
   and would have been invisible on the new white ground. */
html body.inrep-public-body.inrep-public-body .ir-pricing-hero .subscription-cycle-tab {
  color: var(--gx-muted, #62736b) !important;
  border: 1px solid var(--gx-border, #e2ece5) !important;
  background: #fff !important;
}
html body.inrep-public-body.inrep-public-body .ir-pricing-hero .subscription-cycle-tab.is-active {
  background: var(--gx-forest, #115241) !important;
  color: #fff !important;
  border-color: var(--gx-forest, #115241) !important;
}
html body.inrep-public-body.inrep-public-body .ir-pricing-hero .subscription-cycle-tab.is-active span {
  color: #cdeedd !important;
}

/* ============ 12d. AUTH PAGES (login / register / verify / SSO) ============ */
html body.inrep-public-body .auth-center,
html body.inrep-public-body .auth-card,
html body.inrep-public-body .auth-card--inrep {
  background: #fff !important;
  border-radius: var(--gx-radius-lg) !important;
  box-shadow: var(--gx-shadow-lg) !important;
  border: 1px solid var(--gx-border) !important;
  font-family: var(--gx-font) !important;
}
html body.inrep-public-body .auth-logo { font-family: var(--gx-font) !important; color: var(--gx-ink) !important; font-weight: 700 !important; }
html body.inrep-public-body .auth-logo .inrep-mark { background: var(--gx-forest) !important; border-radius: var(--gx-radius-sm) !important; }
html body.inrep-public-body .auth-title { color: var(--gx-ink) !important; font-family: var(--gx-font) !important; }
html body.inrep-public-body .auth-subtitle,
html body.inrep-public-body .auth-note,
html body.inrep-public-body .auth-help,
html body.inrep-public-body .auth-links { color: var(--gx-muted) !important; }
html body.inrep-public-body .auth-links a,
html body.inrep-public-body .auth-forgot,
html body.inrep-public-body .auth-help a { color: var(--gx-forest) !important; font-weight: 600 !important; }
html body.inrep-public-body .auth-center input,
html body.inrep-public-body .auth-card input,
html body.inrep-public-body .auth-center select,
html body.inrep-public-body .auth-card select {
  border: 1.5px solid var(--gx-border) !important;
  border-radius: var(--gx-radius-sm) !important;
  font-family: var(--gx-font) !important;
}
html body.inrep-public-body .auth-center input:focus,
html body.inrep-public-body .auth-card input:focus,
html body.inrep-public-body .auth-center select:focus,
html body.inrep-public-body .auth-card select:focus {
  border-color: var(--gx-green) !important;
  box-shadow: 0 0 0 3px rgba(37,199,90,.14) !important;
  outline: none !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .auth-submit,
html body.inrep-public-body.inrep-public-body.inrep-public-body .auth-form button[type="submit"] {
  background: var(--gx-green) !important;
  color: #fff !important;
  border-radius: var(--gx-radius-pill) !important;
  font-weight: 600 !important;
  border: none !important;
}
html body.inrep-public-body .auth-sso-btn {
  border: 1.5px solid var(--gx-border) !important;
  border-radius: var(--gx-radius-sm) !important;
  color: var(--gx-ink-soft) !important;
}

/* Central login (/login): the guest layout's body (.auth-body, app.css:368)
   is display:grid + place-items:center, which shrink-wraps <main> to its
   content width — the login shell's dark background then only paints a
   narrow centered column instead of the full viewport. Scope with :has() so
   the other guest-layout auth views (register, forgot-password, ...) keep
   the centering grid they rely on. */
html body.inrep-auth-body:has(.ir-login-shell) {
  display: block !important;
  padding: 0 !important;
}
html body.inrep-auth-body:has(.ir-login-shell) > main {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-login-card {
  background: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 18px 50px rgba(3, 20, 14, .28) !important;
  border: none !important;
  /* Fixed width, not a % — the shell is a grid with an auto-sized track, so
     percentages here resolve against content size, not the viewport. */
  width: 500px !important;
  max-width: calc(100vw - 32px) !important;
  padding: 46px 48px 40px !important;
}
html body.inrep-public-body .ir-login-logo { color: var(--gx-ink) !important; font-family: var(--gx-font) !important; font-weight: 700 !important; }
/* Brand lockup must match the site header exactly — a base rule sets the
   span to an odd intermediate weight (430) that reads too thin. */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-login-logo span {
  font-family: var(--gx-font) !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  letter-spacing: -.01em;
  color: var(--gx-ink) !important;
}
/* Reference: "Login" is a modest, medium-weight heading — not a display
   headline. Triple-class + extra class = (0,4,3), beats the section-14
   heading-weight blanket at (0,3,3) regardless of source order. */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-login-card h1 {
  color: #1d2b25 !important;
  font-family: var(--gx-font) !important;
  font-size: 27px !important;
  font-weight: 500 !important;
  margin: 26px 0 24px !important;
  line-height: 1.2 !important;
}
html body.inrep-public-body.inrep-public-body .ir-login-field input {
  border: 1px solid #d7dee2 !important;
  border-radius: 6px !important;
  font-family: var(--gx-font) !important;
  min-height: 54px !important;
  font-size: 15px !important;
}
html body.inrep-public-body .ir-login-field input:focus {
  border-color: var(--gx-green) !important;
  box-shadow: 0 0 0 3px rgba(37,199,90,.14) !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-login-submit,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-login-continue {
  background: #2ba05a !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  border: none !important;
  width: 100% !important;
  min-height: 54px !important;
  margin-top: 18px !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-login-submit:hover,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-login-continue:hover { background: #24904f !important; }
/* Decorative illustrations peek out from behind the card, like the reference */
html body.inrep-public-body.inrep-public-body .ir-login-deco-left {
  left: calc(50% - 490px) !important;
  top: 24% !important;
  z-index: 1 !important;
}
html body.inrep-public-body.inrep-public-body .ir-login-deco-right {
  right: calc(50% - 480px) !important;
  top: 42% !important;
  z-index: 1 !important;
}
@media (max-width: 1050px) {
  html body.inrep-public-body.inrep-public-body .ir-login-deco-left,
  html body.inrep-public-body.inrep-public-body .ir-login-deco-right { display: none !important; }
}
html body.inrep-public-body .ir-login-forgot,
html body.inrep-public-body .ir-login-links a { color: var(--gx-forest) !important; font-weight: 600 !important; }
html body.inrep-public-body .ir-login-sso {
  border: 1.5px solid var(--gx-border) !important;
  border-radius: var(--gx-radius-sm) !important;
  color: var(--gx-ink-soft) !important;
}
/* Provider not configured yet: visibly inactive, not clickable. */
html body.inrep-public-body .ir-login-sso.is-unavailable {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============ 12e. DISCOVERY / SEARCH RESULT CARDS (repo-*-v3) ============ */
html body.inrep-public-body .repo-record-v3 {
  background: #fff !important;
  border: 1px solid var(--gx-border) !important;
  border-radius: var(--gx-radius-md) !important;
  box-shadow: var(--gx-shadow-sm) !important;
  transition: box-shadow .18s, border-color .18s;
}
html body.inrep-public-body .repo-record-v3:hover { box-shadow: var(--gx-shadow-md) !important; border-color: var(--gx-mint-strong) !important; }
html body.inrep-public-body .repo-access-pill-v3,
html body.inrep-public-body .repo-doc-pill-v3,
html body.inrep-public-body .repo-year-v3,
html body.inrep-public-body .repo-filter-chip,
html body.inrep-public-body .ir-doc-filter {
  font-family: var(--gx-font-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: var(--gx-radius-pill) !important;
  background: var(--gx-mint) !important;
  color: var(--gx-forest) !important;
  border: 1px solid var(--gx-mint-strong) !important;
}
html body.inrep-public-body .ir-doc-filter.is-active {
  background: var(--gx-forest) !important;
  color: #fff !important;
  border-color: var(--gx-forest) !important;
}
html body.inrep-public-body .repo-primary-action-v3 {
  color: var(--gx-forest) !important;
  font-weight: 700 !important;
}

/* ============ 12f. GENERIC PUBLIC CONTENT UTILITIES ============ */
html body.inrep-public-body .public-card,
html body.inrep-public-body .public-panel {
  background: #fff !important;
  border: 1px solid var(--gx-border) !important;
  border-radius: var(--gx-radius-md) !important;
  box-shadow: var(--gx-shadow-sm) !important;
}
html body.inrep-public-body .public-alert {
  border-radius: var(--gx-radius-sm) !important;
  border: 1px solid var(--gx-border) !important;
  font-family: var(--gx-font) !important;
}
html body.inrep-public-body .public-alert.success { background: var(--gx-mint) !important; border-color: var(--gx-mint-strong) !important; color: var(--gx-forest) !important; }
html body.inrep-public-body .public-empty-state {
  background: var(--gx-cream) !important;
  border: 1px dashed var(--gx-border) !important;
  border-radius: var(--gx-radius-md) !important;
  color: var(--gx-muted) !important;
  text-align: center;
}
html body.inrep-public-body .public-form input,
html body.inrep-public-body .public-form select,
html body.inrep-public-body .public-form textarea {
  border: 1.5px solid var(--gx-border) !important;
  border-radius: var(--gx-radius-sm) !important;
  font-family: var(--gx-font) !important;
}
html body.inrep-public-body .public-form input:focus,
html body.inrep-public-body .public-form select:focus,
html body.inrep-public-body .public-form textarea:focus {
  border-color: var(--gx-green) !important;
  box-shadow: 0 0 0 3px rgba(37,199,90,.14) !important;
  outline: none !important;
}

/* ============ 12g. SECOND FAQ VARIANT + LOGO STRIP + OPERATING CARDS ============ */
/* .ir-faq-list details (product-page.php etc.) has no .ir-faq-item class —
 * style the bare <details>/<summary> inside this container the same way. */
html body.inrep-public-body .ir-faq-list details {
  background: #fff !important;
  border: 1px solid var(--gx-border) !important;
  border-radius: var(--gx-radius-md) !important;
  padding: 4px 20px !important;
  margin-bottom: 10px;
}
html body.inrep-public-body .ir-faq-list details[open] { border-color: var(--gx-mint-strong) !important; background: var(--gx-mint) !important; }
html body.inrep-public-body .ir-faq-list details summary {
  font-family: var(--gx-font) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  color: var(--gx-ink) !important;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
}
html body.inrep-public-body .ir-faq-list details summary::-webkit-details-marker { display: none; }
html body.inrep-public-body .ir-faq-list details p { color: var(--gx-muted) !important; font-size: 14.5px !important; line-height: 1.6; padding-bottom: 16px; margin: 0; }

html body.inrep-public-body .ir-logo-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
html body.inrep-public-body .ir-logo-strip span {
  background: #fff !important;
  border: 1px solid var(--gx-border) !important;
  border-radius: var(--gx-radius-pill) !important;
  color: var(--gx-ink-soft) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  padding: 8px 16px;
}

html body.inrep-public-body .ir-operating-card {
  background: #fff !important;
  border: 1px solid var(--gx-border) !important;
  border-radius: var(--gx-radius-md) !important;
  box-shadow: var(--gx-shadow-sm) !important;
}
html body.inrep-public-body .ir-operating-command,
html body.inrep-public-body .ir-operating-card-accent {
  background: linear-gradient(165deg, var(--gx-night) 0%, var(--gx-night-3) 100%) !important;
  color: #eafbf1 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}
html body.inrep-public-body .ir-operating-command h3,
html body.inrep-public-body .ir-operating-card-accent h3 { color: #fff !important; }

/* ============ 12h. TOOLS PAGE (/tools) ============ */
/* Plain white, full-width — matches every other hero family (section 42);
   this one is styled locally rather than added to that shared selector list
   because its heading/paragraph are centered and width-capped, unlike the
   two-column hero families section 42 targets. */
html body.inrep-public-body .ir-tools-hero {
  background: #fff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: clamp(48px, 8vw, 84px) 24px clamp(56px, 9vw, 96px);
  text-align: center;
  color: var(--gx-ink, #0a1a12) !important;
}
html body.inrep-public-body .ir-tools-hero .ir-breadcrumb { color: var(--gx-muted, #62736b) !important; }
html body.inrep-public-body .ir-tools-hero h1 {
  color: var(--gx-ink, #0a1a12) !important;
  font-size: clamp(28px, 4vw, 42px) !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
  max-width: 720px;
  margin: 14px auto 12px;
  line-height: 1.15;
}
html body.inrep-public-body .ir-tools-hero p { color: var(--gx-muted, #62736b) !important; max-width: 560px; margin-inline: auto; font-size: 16px; }

html body.inrep-public-body .ir-tools-grid {
  width: min(var(--gx-container), calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 900px) { html body.inrep-public-body .ir-tools-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { html body.inrep-public-body .ir-tools-grid { grid-template-columns: 1fr; } }
html body.inrep-public-body .ir-tool-card {
  background: #fff !important;
  border: 1px solid var(--gx-border) !important;
  border-radius: var(--gx-radius-lg) !important;
  box-shadow: var(--gx-shadow-sm) !important;
  padding: 26px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
html body.inrep-public-body .ir-tool-card:hover {
  box-shadow: var(--gx-shadow-md) !important;
  transform: translateY(-3px);
  border-color: var(--gx-mint-strong) !important;
}
@media (hover: none) { html body.inrep-public-body .ir-tool-card:hover { transform: none; } }
html body.inrep-public-body .ir-tool-card-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--gx-radius-md) !important;
  background: var(--gx-mint) !important;
  color: var(--gx-forest) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
html body.inrep-public-body .ir-tool-card strong { color: var(--gx-ink) !important; font-size: 17px !important; font-weight: 700 !important; }
html body.inrep-public-body .ir-tool-card p { color: var(--gx-muted) !important; font-size: 14px !important; line-height: 1.6; margin: 4px 0 14px; }
html body.inrep-public-body .ir-tool-card .ir-btn { margin-top: auto; }
html body.inrep-public-body .ir-operating-command p,
html body.inrep-public-body .ir-operating-card-accent p { color: #b7d9c4 !important; }
html body.inrep-public-body .ir-operating-command span,
html body.inrep-public-body .ir-operating-card-accent span { color: #6ee6a0 !important; }

/* ============ 13. RESPONSIVE ============ */
@media (max-width: 1180px) {
  html body.inrep-public-body .ir-mega-promo { display: none !important; }
}
@media (max-width: 760px) {
  html body.inrep-public-body .ir-plan-grid { grid-template-columns: 1fr !important; }
  html body.inrep-public-body .ir-footer-social { flex-direction: column; align-items: flex-start; }
}

/* ============ 14. GLOBAL WEIGHT + LOGO SAFEGUARDS (late overrides) ============ */
/* Headings across the public site are semibold (600), never heavier — matches
   the reference typography. Triple-class boost beats every earlier 700/800
   !important heading rule in the base stylesheets. */
html body.inrep-public-body.inrep-public-body.inrep-public-body :is(h1, h2, .hero-h1, .page-hero-h1) {
  font-weight: 600 !important;
}
/* The brand mark must never be clipped: no border-radius, no overflow
   clipping, no background chip behind the raw logo image. */
html body.inrep-public-body.inrep-public-body .ir-brand-logo,
html body.inrep-public-body.inrep-public-body .ir-login-logo img {
  border-radius: 0 !important;
  overflow: visible !important;
}
html body.inrep-public-body.inrep-public-body .site-chatbot-logo {
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}
html body.inrep-public-body.inrep-public-body .site-chatbot-logo img {
  object-fit: contain !important;
  padding: 12px !important;
}

/* ==========================================================================
   17. HONEST DATA STATES  (added 2026-08-03)
   Components introduced when fabricated statistics, fake rankings, and empty
   grids were removed from the public pages. They exist so a surface with no
   data still reads as deliberate rather than broken.
   ========================================================================== */

/* --- 17.1 Empty / onboarding state panel ------------------------------- */
html body.inrep-public-body .ir-state-panel {
  max-width: 640px;
  margin: 8px auto 12px;
  padding: 40px 32px;
  text-align: center;
  background: var(--gx-cream, #f7faf8);
  border: 1px solid var(--gx-border, #dfe7e2);
  border-radius: var(--gx-radius-lg, 10px);
}
html body.inrep-public-body .ir-state-title {
  margin: 0 0 10px;
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.3;
  color: var(--gx-ink, #0f1c17);
}
html body.inrep-public-body .ir-state-body {
  margin: 0 auto 22px;
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--gx-muted, #4a5a53);
}
html body.inrep-public-body .ir-state-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* --- 17.2 Evidence / provenance note ----------------------------------- */
/* Marks illustrative content so it can never be mistaken for a customer result. */
html body.inrep-public-body .ir-evidence-note {
  margin: 14px 0 0;
  padding: 12px 14px;
  max-width: 62ch;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--gx-muted, #4a5a53);
  background: rgba(255, 255, 255, .06);
  border-left: 3px solid var(--gx-accent, #25c75a);
  border-radius: 0 6px 6px 0;
}
html body.inrep-public-body .ir-evidence-note strong { color: inherit; }

/* On the dark subpage heroes the note sits on a dark ground. */
html body.inrep-public-body .ir-subpage-hero .ir-evidence-note {
  color: #cfe3d8;
  background: rgba(0, 0, 0, .22);
}

/* --- 17.3 Evidence grid (replaces fabricated testimonials) ------------- */
html body.inrep-public-body .ir-evidence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 18px;
  margin: 0 0 24px;
}
html body.inrep-public-body .ir-evidence-grid article {
  padding: 22px 20px;
  background: #fff;
  border: 1px solid var(--gx-border, #dfe7e2);
  border-radius: var(--gx-radius-md, 8px);
}
html body.inrep-public-body .ir-evidence-grid strong {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 1.35;
  color: var(--gx-ink, #0f1c17);
}
html body.inrep-public-body .ir-evidence-grid p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--gx-muted, #4a5a53);
}

/* --- 17.4 Data tables: methodology note + numeric alignment ------------ */
html body.inrep-public-body .ir-table-intro { margin: 0 0 14px; }
html body.inrep-public-body .ir-table-heading {
  margin: 0 0 6px;
  font-size: clamp(18px, 1.9vw, 21px);
}
html body.inrep-public-body .ir-table-note {
  margin: 0;
  max-width: 78ch;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--gx-muted, #4a5a53);
}
/* Numeric columns align right so magnitudes are comparable down the column. */
html body.inrep-public-body .insight-table td.is-num,
html body.inrep-public-body .insight-table th.is-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
html body.inrep-public-body .insight-table th.is-name {
  text-align: left;
  font-weight: 500;
}
/* A horizontally scrollable table region must show a visible focus ring,
   because it is keyboard focusable (tabindex=0) for scrolling. */
html body.inrep-public-body .insight-table-wrap:focus-visible {
  outline: 3px solid var(--gx-accent, #25c75a);
  outline-offset: 2px;
}

/* --- 17.5 Sample-data tag on illustrative interface previews ----------- */
html body.inrep-public-body .ir-ib-sample-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #0f1c17;
  background: #e6f4ec;
  border: 1px solid #bcdcca;
  border-radius: 4px;
}
html body.inrep-public-body .ir-ib-row-head span {
  font-weight: 600;
  opacity: .78;
}

/* --- 17.6 Stats section supporting line -------------------------------- */
html body.inrep-public-body .ir-impact-stats-sub {
  max-width: 62ch;
  margin: -6px auto 26px;
  text-align: center;
  font-size: 16px;
  line-height: 1.6;
  opacity: .82;
}
/* The stat cards now lead with a figure and carry a label plus explanation. */
html body.inrep-public-body .ir-stat-card strong {
  display: block;
  margin: 6px 0 6px;
  font-size: 16.5px;
  line-height: 1.35;
}

@media (max-width: 640px) {
  html body.inrep-public-body .ir-state-panel { padding: 30px 20px; }
  html body.inrep-public-body .ir-state-actions .ir-btn { width: 100%; }
}

/* ==========================================================================
   18. MOBILE DRAWER — KEEP CLOSED MENU OUT OF THE TAB ORDER  (2026-08-03)
   The drawer was hidden only by transform: translateX(104%), so while closed
   it stayed display:grid / visibility:visible. Its 31 links therefore remained
   focusable: tabbing through a mobile page moved focus into invisible
   off-screen menu items, and those focusable elements sat inside a container
   marked aria-hidden="true" (an ARIA violation in its own right).
   visibility:hidden removes them from the tab order. The visibility transition
   is delayed by the slide duration on close so the slide-out is still seen,
   and applied instantly on open so focus can move in immediately.
   ========================================================================== */
/* Visibility is deliberately NOT transitioned here: a delayed visibility
   transition did not settle reliably after an open/close cycle, leaving the
   closed drawer focusable again. The tab-order fix is the `inert` attribute
   applied in inrep-public.js, which does not depend on a transition
   completing. This block only keeps motion honest for reduced-motion users. */
@media (prefers-reduced-motion: reduce) {
  html body.inrep-public-body .ir-mobile-drawer { transition: none; }
}

/* ==========================================================================
   19. FOOTER — COMPACT WITHOUT LOSING INFORMATION  (2026-08-03)
   The footer stood at 757px against 929px of content on a sparse page such as
   /takedown-policy — nearly as tall as the page itself. Almost a third of it
   was vertical chrome around three thin trailing rows rather than content.
   Nothing informational is removed here: every navigation link, standards tag,
   and legal link is retained. Only the rhythm is tightened, and footer link
   text is raised from 13.5px to 14.5px so it clears the readability floor.
   ========================================================================== */
html body.inrep-public-body .ir-footer {
  padding-top: 36px;
  padding-bottom: 14px;
}
html body.inrep-public-body .ir-footer-main {
  gap: 44px;
}
/* Column link sizing/rhythm lives with the other .ir-footer-cols a declarations
   earlier in this file so there is a single place to change it. */
html body.inrep-public-body .ir-footer-cols h3 {
  margin-bottom: 10px;
}
html body.inrep-public-body .ir-footer-brand p {
  font-size: 14.5px;
  line-height: 1.55;
}
/* Standards row: the chrome around it was larger than the row itself. */
html body.inrep-public-body .ir-cert-row {
  margin-top: 18px;
  padding-top: 12px;
  padding-bottom: 12px;
}
/* Legal row now also closes the footer, so it carries a little more top space
   and less bottom padding than when a social row sat above it. */
html body.inrep-public-body .ir-footer-legal {
  margin-top: 12px;
  padding-top: 12px;
  padding-bottom: 4px;
}
html body.inrep-public-body .ir-footer-legal a,
html body.inrep-public-body .ir-footer-legal span {
  font-size: 14px !important;
}
/* Legal links are real navigation targets and must meet the 24px minimum
   target size even though they sit on one dense line. */
html body.inrep-public-body .ir-footer-legal a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

@media (max-width: 720px) {
  html body.inrep-public-body .ir-footer { padding-top: 34px; }
  html body.inrep-public-body .ir-footer-main { gap: 30px; }
}

/* ==========================================================================
   20. MINIMUM TARGET SIZE — WCAG 2.2 AA (2.5.8)  (2026-08-03)
   Interactive controls must present at least a 24x24 CSS-pixel target. Audited
   at 375px, the mobile search submit rendered 44x22 with zero padding, and
   footer legal links sat on a single dense line. Inline links inside running
   prose are exempt under 2.5.8 and are deliberately not targeted here.
   ========================================================================== */
html body.inrep-public-body .ir-mobile-search button,
html body.inrep-public-body .site-search-form button,
html body.inrep-public-body .national-search-form button {
  min-height: 44px;   /* comfortable touch target, well above the 24px floor */
  min-width: 44px;
}
/* Icon-only controls carry no text to grow their box, so size them explicitly. */
html body.inrep-public-body .ir-doc-filter,
html body.inrep-public-body .ir-mobile-close,
html body.inrep-public-body [data-ir-mobile-toggle],
html body.inrep-public-body [data-ir-announce-close] {
  min-height: 32px;
  min-width: 32px;
}

/* ==========================================================================
   21. PUBLIC DESIGN SYSTEM — TOKENS  (2026-08-03)
   One place for the values the public pages share. Declared on :root so they
   are available to every layer, and mirrored under .inrep-public-body only
   where an existing token of the same name would otherwise win.
   ========================================================================== */
:root {
  /* -- Brand ------------------------------------------------------------ */
  --ds-forest:        #0b3b2e;   /* deep institutional green: dark bands   */
  --ds-forest-deep:   #07271e;   /* deepest ground, footer/hero            */
  --ds-forest-soft:   #115241;   /* mid green: headings on light           */
  /* --ds-accent measured 3.49:1 with white text at its original #1f9d55 — the
     button label is 17px/600, which does not qualify as WCAG "large text"
     (needs >=700 weight or >=24px), so it needed the full 4.5:1 AA threshold,
     not the 3:1 large-text one the original comment assumed. Darkened to the
     same green already verified passing (6.6:1) on nav/hero buttons elsewhere
     on the site, so every .ds-btn--primary now matches those. */
  --ds-accent:        #0f6b36;   /* action green — 6.6:1 with white text   */
  --ds-accent-strong: #0c5a2d;   /* hover/pressed — darker still           */
  --ds-accent-quiet:  #e8f5ee;   /* tint fill                              */

  /* -- Surfaces --------------------------------------------------------- */
  --ds-page:          #ffffff;
  --ds-surface:       #f6f8f7;   /* warm off-white section ground          */
  --ds-surface-warm:  #f4f1ea;   /* editorial cream                        */
  --ds-surface-sunk:  #eef2f0;

  /* -- Text ------------------------------------------------------------- */
  --ds-ink:           #0d1a15;   /* 16.5:1 on white                        */
  --ds-ink-soft:      #35463f;   /* 9.3:1  on white — body                 */
  --ds-ink-muted:     #4d5f57;   /* 6.8:1  on white — lowest allowed       */
  --ds-on-dark:       #ffffff;
  --ds-on-dark-soft:  #cfe3d8;   /* 9.9:1 on --ds-forest                   */

  /* -- Lines & focus ---------------------------------------------------- */
  --ds-line:          #dde5e1;
  --ds-line-strong:   #c3d1cb;
  --ds-line-dark:     rgba(255,255,255,.14);
  --ds-focus:         #0b7a3f;

  /* -- Status ----------------------------------------------------------- */
  --ds-success: #178044;
  --ds-warning: #8a5a00;
  --ds-error:   #a4232b;
  --ds-info:    #1c5f8a;

  /* -- Radius: restrained. Controls small, cards medium, panels large --- */
  --ds-r-sm:  4px;
  --ds-r-md:  8px;
  --ds-r-lg:  14px;
  --ds-r-pill: 999px;

  /* -- Spacing scale (4px base) ----------------------------------------- */
  --ds-1: 4px;   --ds-2: 8px;   --ds-3: 12px;  --ds-4: 16px;
  --ds-5: 24px;  --ds-6: 32px;  --ds-7: 48px;  --ds-8: 64px;
  --ds-9: 88px;  --ds-10: 120px;

  /* Section rhythm: narrative sections breathe, application pages do not. */
  --ds-section-y:        clamp(56px, 7vw, 104px);
  --ds-section-y-tight:  clamp(36px, 4.5vw, 64px);

  /* -- Containers ------------------------------------------------------- */
  --ds-container:       1200px;  /* default                                */
  --ds-container-wide:  1400px;  /* media-led                              */
  --ds-container-read:  68ch;    /* editorial reading width                */

  /* -- Type scale ------------------------------------------------------- */
  --ds-fs-display: clamp(38px, 5vw, 62px);
  --ds-fs-h1:      clamp(32px, 3.9vw, 48px);
  --ds-fs-h2:      clamp(26px, 2.9vw, 38px);
  --ds-fs-h3:      clamp(19px, 1.7vw, 23px);
  --ds-fs-lead:    clamp(17px, 1.4vw, 20px);
  --ds-fs-body:    16.5px;
  --ds-fs-sm:      14.5px;   /* floor for supporting copy                  */
  --ds-lh-tight:   1.14;
  --ds-lh-head:    1.24;
  --ds-lh-body:    1.62;

  /* -- Elevation: only where something genuinely floats ----------------- */
  --ds-shadow-raise: 0 1px 2px rgba(11,59,46,.06), 0 2px 6px rgba(11,59,46,.05);
  --ds-shadow-float: 0 10px 30px rgba(11,59,46,.10);
  --ds-shadow-over:  0 18px 48px rgba(7,39,30,.20);

  /* -- Motion ----------------------------------------------------------- */
  --ds-t-fast: .14s;
  --ds-t-base: .22s;
  --ds-ease:   cubic-bezier(.22,.61,.36,1);

  /* -- Z-index ---------------------------------------------------------- */
  --ds-z-base: 1;      --ds-z-sticky: 100;  --ds-z-header: 300;
  --ds-z-drawer: 400;  --ds-z-overlay: 500; --ds-z-toast: 600;
}
@media (prefers-reduced-motion: reduce) {
  :root { --ds-t-fast: 0s; --ds-t-base: 0s; }
}

/* ==========================================================================
   22. SECTION PRIMITIVES — BREAKING THE CARD FORMULA  (2026-08-03)
   The public pages repeated one shape: eyebrow, centred heading, centred
   paragraph, 3-4 equal cards, green button, inside a big white rounded box.
   These primitives give sections genuinely different structure. Most of them
   deliberately have NO outer container, NO border and NO radius — the section
   is carried by typography, measure and rhythm instead of a box.
   ========================================================================== */

/* --- 22.0 Shared shells ------------------------------------------------ */
.ds-sec        { padding-block: var(--ds-section-y); }
.ds-sec--tight { padding-block: var(--ds-section-y-tight); }
.ds-wrap       { width: min(100% - 40px, var(--ds-container)); margin-inline: auto; }
.ds-wrap--wide { width: min(100% - 40px, var(--ds-container-wide)); margin-inline: auto; }
.ds-read       { max-width: var(--ds-container-read); }

.ds-sec--surface { background: var(--ds-surface); }
.ds-sec--warm    { background: var(--ds-surface-warm); }
.ds-sec--dark    { background: var(--ds-forest); color: var(--ds-on-dark); }
.ds-sec--dark p  { color: var(--ds-on-dark-soft); }

/* --- 22.1 Editorial: left-aligned, no card, real measure --------------- */
.ds-editorial__kicker {
  display: block; margin: 0 0 var(--ds-3);
  font-size: 13px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ds-accent-strong);
}
.ds-sec--dark .ds-editorial__kicker { color: #6ee7a5; }
.ds-editorial__title {
  margin: 0 0 var(--ds-4);
  max-width: 20ch;
  font-size: var(--ds-fs-h2); line-height: var(--ds-lh-head); font-weight: 600;
  letter-spacing: -.015em; color: inherit;
  text-wrap: balance;
}
.ds-editorial__lead {
  margin: 0; max-width: 62ch;
  font-size: var(--ds-fs-lead); line-height: var(--ds-lh-body); color: var(--ds-ink-soft);
}
.ds-sec--dark .ds-editorial__lead { color: var(--ds-on-dark-soft); }

/* --- 22.2 Split: content one side, media the other --------------------- */
.ds-split {
  display: grid; gap: clamp(28px, 4vw, 68px); align-items: center;
  grid-template-columns: minmax(0,1fr) minmax(0,1.08fr);
}
.ds-split--reverse > :first-child { order: 2; }
.ds-split__media {
  margin: 0; border-radius: var(--ds-r-lg); overflow: hidden;
  background: var(--ds-surface-sunk);
}
.ds-split__media img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 4 / 3; object-fit: cover;
}
@media (max-width: 900px) {
  .ds-split { grid-template-columns: 1fr; }
  .ds-split--reverse > :first-child { order: 0; }
  .ds-split__media img { aspect-ratio: 16 / 10; }
}

/* --- 22.3 Alternating feature rows ------------------------------------ */
.ds-rows { display: grid; gap: clamp(48px, 6vw, 96px); }
.ds-row  { display: grid; gap: clamp(24px, 3.5vw, 60px); align-items: center;
           grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); }
.ds-row:nth-child(even) > :first-child { order: 2; }
@media (max-width: 900px) {
  .ds-row { grid-template-columns: 1fr; }
  .ds-row:nth-child(even) > :first-child { order: 0; }
}
.ds-row__list { margin: var(--ds-5) 0 0; padding: 0; list-style: none; display: grid; gap: var(--ds-3); }
.ds-row__list li {
  position: relative; padding-left: 26px;
  font-size: var(--ds-fs-body); line-height: 1.55; color: var(--ds-ink-soft);
}
.ds-row__list li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 8px; height: 8px; border-radius: 2px; background: var(--ds-accent);
}
.ds-sec--dark .ds-row__list li { color: var(--ds-on-dark-soft); }

/* --- 22.4 Inline statistics: a row of figures, not four boxes ---------- */
.ds-figures {
  display: grid; gap: clamp(20px, 3vw, 48px);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border-top: 1px solid var(--ds-line); padding-top: var(--ds-6);
}
.ds-sec--dark .ds-figures { border-top-color: var(--ds-line-dark); }
.ds-figure__num {
  display: block; font-size: clamp(34px, 4vw, 52px); line-height: 1;
  font-weight: 600; letter-spacing: -.02em; color: var(--ds-forest-soft);
  font-variant-numeric: tabular-nums;
}
.ds-sec--dark .ds-figure__num { color: #6ee7a5; }
.ds-figure__label {
  display: block; margin-top: var(--ds-3);
  font-size: var(--ds-fs-body); font-weight: 600; color: var(--ds-ink);
}
.ds-sec--dark .ds-figure__label { color: #fff; }
.ds-figure__note {
  margin: var(--ds-2) 0 0; max-width: 34ch;
  font-size: var(--ds-fs-sm); line-height: 1.55; color: var(--ds-ink-muted);
}
.ds-sec--dark .ds-figure__note { color: var(--ds-on-dark-soft); }

/* --- 22.5 Numbered workflow: a real sequence, not cards ---------------- */
.ds-flow { display: grid; gap: 0; counter-reset: dsflow; }
.ds-flow__step {
  display: grid; grid-template-columns: 56px minmax(0,1fr); gap: var(--ds-5);
  padding: var(--ds-6) 0; border-top: 1px solid var(--ds-line);
  counter-increment: dsflow;
}
.ds-flow__step:last-child { border-bottom: 1px solid var(--ds-line); }
.ds-sec--dark .ds-flow__step { border-color: var(--ds-line-dark); }
.ds-flow__step::before {
  content: counter(dsflow, decimal-leading-zero);
  font-size: 15px; font-weight: 600; color: var(--ds-accent-strong);
  font-variant-numeric: tabular-nums; padding-top: 2px;
}
.ds-sec--dark .ds-flow__step::before { color: #6ee7a5; }
.ds-flow__title { margin: 0 0 var(--ds-2); font-size: var(--ds-fs-h3); font-weight: 600; line-height: 1.3; }
.ds-flow__body  { margin: 0; max-width: 68ch; font-size: var(--ds-fs-body); line-height: var(--ds-lh-body); color: var(--ds-ink-soft); }
.ds-sec--dark .ds-flow__body { color: var(--ds-on-dark-soft); }
.ds-flow__meta { display: flex; flex-wrap: wrap; gap: var(--ds-2); margin-top: var(--ds-4); }
.ds-flow__tag {
  display: inline-flex; align-items: center; min-height: 24px; padding: 3px 9px;
  font-size: 13px; font-weight: 600; border-radius: var(--ds-r-sm);
  background: var(--ds-accent-quiet); color: var(--ds-forest-soft);
}
.ds-sec--dark .ds-flow__tag { background: rgba(255,255,255,.10); color: #d8efe2; }
@media (max-width: 620px) {
  .ds-flow__step { grid-template-columns: 1fr; gap: var(--ds-3); }
}

/* --- 22.6 Product UI frame: the real interface, not an illustration ---- */
.ds-ui {
  border-radius: var(--ds-r-lg); overflow: hidden;
  background: #fff; border: 1px solid var(--ds-line-strong);
  box-shadow: var(--ds-shadow-float);
}
.ds-sec--dark .ds-ui { border-color: rgba(255,255,255,.16); }
.ds-ui__bar {
  display: flex; align-items: center; gap: var(--ds-2);
  padding: 10px 14px; background: var(--ds-surface); border-bottom: 1px solid var(--ds-line);
}
.ds-ui__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ds-line-strong); }
.ds-ui__path {
  margin-left: var(--ds-2); font-size: 12.5px; color: var(--ds-ink-muted);
  font-family: ui-monospace, "IBM Plex Mono", monospace;
}
.ds-ui__body { padding: clamp(14px, 2vw, 22px); }

/* --- 22.7 Media band: full-bleed image with a readable scrim ----------- */
.ds-band { position: relative; isolation: isolate; overflow: hidden; }
.ds-band__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
.ds-band::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(7,39,30,.94) 0%, rgba(7,39,30,.86) 46%, rgba(7,39,30,.55) 100%);
}
@media (max-width: 900px) {
  .ds-band::after { background: linear-gradient(180deg, rgba(7,39,30,.88) 0%, rgba(7,39,30,.93) 100%); }
}
.ds-band__inner { position: relative; color: #fff; padding-block: clamp(64px, 8vw, 128px); }
.ds-band__inner p { color: #dbeee4; }

/* --- 22.8 Button hierarchy: one primary per view ----------------------- */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 20px;
  font-size: var(--ds-fs-body); font-weight: 600; line-height: 1;
  border-radius: var(--ds-r-sm); border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background var(--ds-t-fast) var(--ds-ease), color var(--ds-t-fast) var(--ds-ease);
}
.ds-btn--primary   { background: var(--ds-accent); color: #fff; }
.ds-btn--primary:hover { background: var(--ds-accent-strong); color: #fff; }
.ds-btn--secondary { background: transparent; color: var(--ds-ink); border-color: var(--ds-line-strong); }
.ds-btn--secondary:hover { background: var(--ds-surface); }
.ds-sec--dark .ds-btn--secondary,
.ds-band .ds-btn--secondary { color: #fff; border-color: rgba(255,255,255,.42); }
.ds-sec--dark .ds-btn--secondary:hover,
.ds-band .ds-btn--secondary:hover { background: rgba(255,255,255,.10); }
.ds-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 24px;
  font-size: var(--ds-fs-body); font-weight: 600; color: var(--ds-forest-soft);
  text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px;
}
.ds-link:hover { color: var(--ds-accent-strong); }
.ds-sec--dark .ds-link, .ds-band .ds-link { color: #8ef0b8; }

.ds-actions { display: flex; flex-wrap: wrap; gap: var(--ds-3); margin-top: var(--ds-6); }

/* --- 22.9 Focus: one visible treatment everywhere --------------------- */
.ds-btn:focus-visible, .ds-link:focus-visible, .ds-ui:focus-visible {
  outline: 3px solid var(--ds-focus); outline-offset: 3px;
}
.ds-sec--dark .ds-btn:focus-visible,
.ds-band .ds-btn:focus-visible { outline-color: #8ef0b8; }

/* ==========================================================================
   23. PRIMITIVE SPECIFICITY + CONTRAST CORRECTIONS  (2026-08-03)
   The base stylesheet sets `.inrep-public-body p, li, small { font-size: 14px }`
   at specificity (0,2,0), which beat the single-class primitives in section 22
   and dragged body copy back to 14px. These re-declare the text primitives at
   the (html body.inrep-public-body …) prefix this file already uses elsewhere,
   so the design-system type scale is what actually renders.
   ========================================================================== */
html body.inrep-public-body .ds-editorial__lead {
  font-size: var(--ds-fs-lead);
  line-height: var(--ds-lh-body);
  color: var(--ds-ink-soft);
  max-width: 62ch;
}
html body.inrep-public-body .ds-sec--dark .ds-editorial__lead { color: var(--ds-on-dark-soft); }

html body.inrep-public-body .ds-flow__body {
  font-size: var(--ds-fs-body);
  line-height: var(--ds-lh-body);
  color: var(--ds-ink-soft);
}
html body.inrep-public-body .ds-sec--dark .ds-flow__body { color: var(--ds-on-dark-soft); }

html body.inrep-public-body .ds-row__list li {
  font-size: var(--ds-fs-body);
  line-height: 1.55;
  color: var(--ds-ink-soft);
}
html body.inrep-public-body .ds-sec--dark .ds-row__list li { color: var(--ds-on-dark-soft); }

html body.inrep-public-body .ds-figure__note {
  font-size: var(--ds-fs-sm);
  line-height: 1.55;
  color: var(--ds-ink-muted);
}
html body.inrep-public-body .ds-sec--dark .ds-figure__note { color: var(--ds-on-dark-soft); }

html body.inrep-public-body .ds-figure__label { font-size: var(--ds-fs-body); }

/* Kicker measured 4.42:1 against the warm cream ground — just under AA for
   13px text. Darkened to a green that clears 4.5:1 on cream, white, and the
   sunk surface alike, while still reading as the brand accent rather than ink. */
html body.inrep-public-body .ds-editorial__kicker {
  font-size: 13px;
  color: #0f5c33;
}
html body.inrep-public-body .ds-sec--dark .ds-editorial__kicker { color: #6ee7a5; }

/* Small tags carry real information (role, status), so hold them at 13px and
   let the AA-checked tint pairing do the work rather than shrinking them. */
html body.inrep-public-body .ds-flow__tag { font-size: 13px; }

/* Solutions "By role" rows are the only place `.ds-editorial__kicker` holds
   an icon in front of its label (`mkt_icon($icon,13) . ' ' . $roleTitle`,
   solutions.php ~line 108) — every other use on the site is plain text. The
   base rule's `display:block` never accounted for an inline SVG, so the icon
   fell back to bare baseline alignment: a 13px glyph sitting slightly below
   the text baseline with no defined gap, reading as misaligned/broken rather
   than a deliberate icon+label pairing. Scoped to :has(svg) so every other
   plain-text kicker on the site is untouched. */
html body.inrep-public-body .ds-editorial__kicker:has(svg) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
html body.inrep-public-body .ds-editorial__kicker:has(svg) svg {
  flex: none;
  position: relative;
  top: -0.5px;
}

/* --- 23.1 Heading colour must be explicit, never inherited ------------- */
/* `.ds-editorial__title { color: inherit }` lost to a base h2 colour rule, so
   the heading on the dark band rendered near-black ink (#0a1a12) on dark green
   (#0b3b2e) — 1.44:1, effectively invisible. Inheritance is not reliable here
   while the base sheets colour headings by element; state both grounds. */
html body.inrep-public-body .ds-editorial__title,
html body.inrep-public-body .ds-flow__title {
  color: var(--ds-ink);
}
html body.inrep-public-body .ds-sec--dark .ds-editorial__title,
html body.inrep-public-body .ds-sec--dark .ds-flow__title,
html body.inrep-public-body .ds-band .ds-editorial__title {
  color: #ffffff;
}
html body.inrep-public-body .ds-sec--dark .ds-figure__label { color: #ffffff; }

/* ==========================================================================
   24. CONTRAST CORRECTIONS — MEASURED, NOT GUESSED  (2026-08-03)
   Each rule below fixes a pairing measured as failing WCAG 2.2 AA (1.4.3) on
   the rendered page. The failing ratio is recorded so a future change can tell
   whether it is still needed.
   ========================================================================== */

/* Skip link: white on #2ed66d measured 1.92:1. It is the first control a
   keyboard user meets, so it has to be legible. Dark ground, white text. */
html body.inrep-public-body a.skip-link,
html body.inrep-public-body .skip-link {
  background: var(--ds-forest-deep) !important;
  color: #ffffff !important;
  border: 1px solid #ffffff !important;
}

/* Mega-menu group labels measured 3.57:1 at 11px (#7c8b83 on white) — failing
   and below the readability floor. Darkened and raised to 12.5px. */
html body.inrep-public-body .ir-mega h4,
html body.inrep-public-body .ir-mega-slim h4,
html body.inrep-public-body .ir-mega-small h4,
html body.inrep-public-body .ir-mega-about h4,
html body.inrep-public-body .ir-mega-group-label {
  color: var(--ds-ink-muted) !important;
  font-size: 12.5px !important;
  letter-spacing: .07em;
}

/* "BUILT FOR" strip label measured 3.24:1 (#7c8b83 on #f3f4f1). */
html body.inrep-public-body .ir-built-for-label {
  color: var(--ds-ink-muted) !important;
  font-size: 12.5px !important;
}

/* The nav CTA is white-on-black at the element itself, but a nested span was
   inheriting body ink and measured 1.53:1 — invisible text inside the button. */
html body.inrep-public-body .ir-start,
html body.inrep-public-body .ir-start * {
  color: #ffffff !important;
}

/* Submit buttons on brand green measured 3.30:1 with white text (#16a34a).
   Deepened so white clears AA; still unmistakably the action colour. */
html body.inrep-public-body .ir-hero-v2-search-btn,
html body.inrep-public-body .ir-mobile-search button,
html body.inrep-public-body .national-search-form button[type="submit"] {
  background: #0f6b36 !important;
  color: #ffffff !important;
}

/* Green label text on near-white grounds measured 3.14:1 (#16a34a on #f8faf9).
   This affected the sample metadata table's status cells. Use the deep brand
   green for text on light surfaces; keep #16a34a for fills, not for type. */
html body.inrep-public-body .ir-ib-table .ir-ib-row span,
html body.inrep-public-body .ir-ib-row-head span {
  color: var(--ds-ink-soft) !important;
}
html body.inrep-public-body .ir-ib-row-head span { color: var(--ds-ink) !important; }

/* Hero trust line measured 4.23:1 (#68758a on #f3f4f1). Scoped to a direct
   child, not every descendant span — .ir-hero-v2-trust's other span
   descendants are the .ir-hero-v2-avatars circles two levels down, each with
   its own colored background (green/blue/green) and deliberately white
   initials; the original descendant selector caught those too and silently
   overrode their white text to this same soft dark ink, leaving "UL"/"RS"
   at 1.81:1/2.75:1 on their own circles — found via a full-page contrast
   sweep, not visible from reading this rule in isolation. */
html body.inrep-public-body .ir-hero-v2-trust > span {
  color: var(--ds-ink-soft) !important;
  font-size: var(--ds-fs-sm) !important;
}

/* --- 24.1 Corrections targeted at the ACTUAL elements ------------------ */
/* The previous block guessed at selectors. These were read off the rendered
   DOM, so they hit the elements that genuinely measured below AA. */

/* Mobile drawer group labels: .ir-mobile-label, 11px #7c8b83 on white = 3.57:1.
   (These are the drawer's section headings, not the desktop mega-menu.) */
html body.inrep-public-body .ir-mobile-label {
  color: var(--ds-ink-muted) !important;
  font-size: 12.5px !important;
}

/* Primary hero/social button: white on #109a56 = 3.63:1. */
html body.inrep-public-body .ir-hero-v2-btn.primary {
  background: #0f6b36 !important;
  color: #ffffff !important;
}

/* Standards strip heading: 12px #7c8b83 on near-white = 3.24:1. */
html body.inrep-public-body .ir-standards h2 {
  color: var(--ds-ink-muted) !important;
  font-size: 12.5px !important;
}

/* Footer copyright line: #5e6c64 on the dark footer ground = 3.21:1.
   Matches the legal links already corrected to 14px in the footer block. */
html body.inrep-public-body .ir-footer-legal span {
  color: #c2ddd0 !important;
}

/* --- 24.2 Final two pairings, at a specificity that actually wins ------ */
/* Both survived the previous block because an earlier rule with equal
   importance and higher specificity was still winning. The repeated body
   class is the escalation convention already used elsewhere in this file. */

/* Mobile drawer's "Request setup": #24352d on #0a0a0a measured 1.53:1 —
   invisible. The desktop instance of the same class already passes at 19.8:1;
   only the drawer copy was inheriting body ink. */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-mobile-ctas .ir-start,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-mobile-ctas .ir-start * {
  color: #ffffff !important;
  background: #0a0a0a !important;
}

/* Primary green button: white on #109a56 measured 3.63:1. */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-v2-btn.primary {
  background: #0f6b36 !important;
  color: #ffffff !important;
}

/* ==========================================================================
   25. DE-CARDING THE ENTIRE SITE  (2026-08-03)
   `inrep-public.css` "1a. Card sections" / "2. Dark sections" / "3. Final CTA"
   force ~26 different section classes — the vast majority of every section on
   every public page, light AND dark — into an inset rounded panel: fixed
   max-width, side margins, border-radius, overflow:hidden. That single system
   is the entire "big white rounded box" / "dark rounded card" pattern the
   reference screenshots do not use. None of Greenly's sections are inset
   panels; they run full width with an internal max-width container.
   This block reverts every one of those classes to a plain full-bleed
   section and gives it a normal centred container instead, using the
   ds-* tokens from section 21. It does not delete the base rules (a partial
   revert would be hard to audit later) — it wins with one higher-specificity,
   later-loaded block that undoes every property the base rule set.
   ========================================================================== */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-section,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-soft-section,
html body.inrep-public-body.inrep-public-body.inrep-public-body .mkt-section,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-feature-section:not(.ir-feature-section--review),
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-addons-section,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-benefit-carousel,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-data-section,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-testimonial-block,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-client-base,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-premium,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-partner-table,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-split,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-section,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-quote-strip,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-compare-section,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-home-bento,
html body.inrep-public-body.inrep-public-body.inrep-public-body .security-controls-section,
html body.inrep-public-body.inrep-public-body.inrep-public-body .cards-section,
html body.inrep-public-body.inrep-public-body.inrep-public-body .public-section,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-dark-section,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-ai-section,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-ai-panel,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-impact-stats,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-success-cards,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-feature-section--review,
html body.inrep-public-body.inrep-public-body.inrep-public-body .inrep-expert-band,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-final-cta {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  margin-block: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  padding-inline: 0 !important;
}
/* `.ir-ai-panel` (security.php's "Access modes" panel) is a single-level CSS
   Grid section — the background AND the two-column grid layout live on the
   same <section> element, unlike its de-panelled siblings above, which wrap
   their content in a separate inner div that the next rule block (below) can
   constrain to a readable width. `.ir-ai-panel` was never added to that
   child-width list, so zeroing its padding-inline above left the grid's text
   column flush against the raw viewport edge with no gutter at all. Restore
   its own side padding (matching the base stylesheet's `padding: 56px 8%`)
   instead of relying on the child-width mechanism the other sections use. */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-ai-panel {
  padding-inline: 8% !important;
}
/* Give each de-panelled section a normal readable container for its content,
   the way every other section on the page already gets one. Existing
   page-specific inner wrappers (e.g. `.ir-section-head`, `.ir-bento-grid`)
   keep whatever width rule they already had; this only targets the outer
   section element's own horizontal padding via a ::before-free contained
   child pattern, applied through a min-width guard on direct block children
   that don't already declare their own max-width. */
/* :not() exclusions added after this rule was found stretching small badge/pill/kicker
   spans (direct children of these sections on some pages) out to the full 1200px
   section-container width — e.g. `.ir-final-cta-kicker`, a small rounded eyebrow badge
   above the homepage's final-CTA heading, was rendering as a full-width flex bar instead
   of a compact centered pill. Excluding every known badge/pill/label class so this rule
   only ever widens genuine block-level content (headings, paragraphs, grids), never a
   small inline badge that should size to its own text.
   `.ir-btn` added to the exclusion 2026-08-05: any CTA anchor sitting as a direct child
   of one of these sections (e.g. security.php's `.ir-final-cta > a.ir-btn.ir-btn-green`,
   "Request university setup") hit the exact same bug — stretched to a ~1200px-wide green
   bar instead of the normal fit-content button used everywhere else on the site. */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-section > *:not(.ds-wrap):not(.ds-wrap--wide):not(.ir-pill):not(.ir-final-cta-kicker):not(.ir-btn),
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-soft-section > *:not(.ir-pill):not(.ir-btn),
html body.inrep-public-body.inrep-public-body.inrep-public-body .mkt-section > *:not(.ir-pill):not(.ir-btn),
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-feature-section:not(.ir-feature-section--review) > *:not(.ir-pill):not(.ir-btn),
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-testimonial-block > *:not(.ir-pill):not(.ir-btn),
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-split > *:not(.ir-pill):not(.ir-btn),
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-section > *:not(.ir-pill):not(.ir-btn),
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-compare-section > *:not(.ir-pill):not(.ir-btn),
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-home-bento > *:not(.ir-pill):not(.ir-btn),
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-dark-section > *:not(.ir-pill):not(.ir-btn),
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-ai-section > *:not(.ir-pill):not(.ir-btn),
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-impact-stats > *:not(.ir-pill):not(.ir-btn),
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-success-cards > *:not(.ir-pill):not(.ir-btn),
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-final-cta > *:not(.ir-pill):not(.ir-final-cta-kicker):not(.ir-btn) {
  width: min(100% - 40px, var(--ds-container));
  margin-inline: auto;
}
/* Small badges/pills/kickers/buttons that are direct children of a de-panelled section:
   size to their own content and stay centered, never stretch to the section's content
   width. */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-final-cta-kicker,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-dark-section > .ir-pill,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-final-cta > .ir-pill {
  display: inline-flex !important;
  width: fit-content !important;
  margin-inline: auto !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-section > .ir-btn,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-soft-section > .ir-btn,
html body.inrep-public-body.inrep-public-body.inrep-public-body .mkt-section > .ir-btn,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-feature-section > .ir-btn,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-testimonial-block > .ir-btn,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-split > .ir-btn,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-section > .ir-btn,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-compare-section > .ir-btn,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-home-bento > .ir-btn,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-dark-section > .ir-btn,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-ai-section > .ir-btn,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-impact-stats > .ir-btn,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-success-cards > .ir-btn,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-final-cta > .ir-btn {
  display: inline-flex !important;
  width: fit-content !important;
  margin-inline: auto !important;
}
/* Sections carrying real padding tokens already (most of them, per the base
   sheet's own section-rhythm rule) keep their vertical rhythm; this only
   removes the inset-panel geometry, never the padding-block values. */

/* ==========================================================================
   26. ONE FONT SYSTEM FOR THE WHOLE PUBLIC SITE  (2026-08-03)

   Two separate defects were producing visibly inconsistent typography across
   every public page ("fonts look scattered"):

   1. `--font-display` was referenced by ~60 selectors across the public
      stylesheets via `var(--font-display, <fallback>)`, but the custom
      property itself was never actually defined for `.inrep-public-body`.
      Every reference therefore fell through to ITS OWN hardcoded fallback —
      and different rules hardcoded different fallbacks (some `Sora`, some
      `'Hanken Grotesk'`). Sora is only loaded on tenant/institution pages
      (views/layouts/public.php only requests it when $tenantPage is true), so
      on ordinary marketing pages any element that fell back to "Sora" was
      silently substituting the browser's default system font instead —
      while its neighbour, falling back to "Hanken Grotesk", rendered
      correctly. Two different headings on the same page could render in two
      different typefaces purely by chance of which fallback its own rule
      happened to hardcode.

      Fix: define --font-display and --font-body once, scoped to the public
      body, resolving to the one family this layout actually always loads.
      Every var() reference in the cascade now resolves the same way,
      regardless of what fallback string was written after the comma.

   2. The sitewide base rule (originally at inrep-public.css ~16481) set EVERY
      <p>, <li>, <a>, and <span> to `font-weight: 430`, and every heading and
      <strong> to `font-weight: 650`. Neither value exists in the actual
      Google Fonts request (`Hanken+Grotesk:wght@400;500;600;700;800`), so the
      browser had to snap an unrequested weight to the nearest loaded face —
      a process that is not guaranteed identical across browsers/platforms,
      which is the literal mechanism behind text "looking scattered": the
      same declared weight could render slightly differently depending on the
      engine. The base rule and all 88 matching component-level overrides in
      inrep-public.css have been renumbered directly onto the loaded scale
      (650->600, 560->500, 430->400) — see the PHP one-off that performed
      this at the bottom of this session's work; nothing here needs to
      duplicate that.

   This block only needs to handle (1) — the font-family fallback collapse —
   plus the two public-facing app.css selectors that still requested Sora.
   ========================================================================== */
html body.inrep-public-body {
  --font-display: 'Hanken Grotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* app.css's `.faq-list summary` (used verbatim by views/public/contact.php)
   still requested the un-loaded 650 weight directly, not via a variable. */
html body.inrep-public-body .faq-list summary {
  font-weight: 600 !important;
}

/* Non-heading emphasis (<strong> inside running body copy) should read as
   emphasised, not as heavy as an actual heading — the instruction was
   explicit that only real header text may look "thick". Headings keep the
   600 semibold set above; inline strong emphasis sits one step lighter. */
html body.inrep-public-body p strong,
html body.inrep-public-body li strong,
html body.inrep-public-body .ds-figure__note strong,
html body.inrep-public-body .ds-flow__body strong {
  font-weight: 500;
}

/* --- 27. Pricing comparison table headers: 3.40:1 at 11.5px on white ---- */
html body.inrep-public-body .ir-compare-table thead th {
  color: var(--ds-ink-muted) !important;
}

/* ==========================================================================
   28. TIGHTEN VERTICAL RHYTHM — TOO MUCH DEAD AIR BETWEEN SECTIONS  (2026-08-03)

   Measured directly (getBoundingClientRect on every top-level section vs. its
   last visible content), not assumed: sections were NOT hiding an empty
   spacer element — the padding-block values themselves were large (78 to
   166px, several driven by a `--section-y: clamp(72px, 8vw, 124px)` token
   from app.css that was winning over this file's own `--ds-section-y` despite
   a lower-specificity selector, because it is set via a shorthand/logical
   property this file's other overrides did not target). Stacked with the
   ~24px inter-section margin and the FOLLOWING section's own top padding, the
   total blank run between one section's real content and the next section's
   real content was regularly 200-300px — which is what read as "plenty of
   empty spaces between sections" across the site, not a single isolated bug.

   This block wins regardless of which prior rule was the actual source, using
   the same triple-class-prefix escalation already established elsewhere in
   this file, and applies one consistent, tighter rhythm sitewide.
   ========================================================================== */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ds-sec,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-dark-section,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-standards,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-impact-bento,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-ai-section,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-section,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-section:not(.ir-records-preview),
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-final-cta {
  padding-block: clamp(40px, 5vw, 64px) !important;
}
/* The built-for strip is a thin logo/label row, not a narrative section — it
   only ever needed a small amount of breathing room, not section-scale
   padding. */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-built-for-strip {
  padding-block: clamp(20px, 2.5vw, 32px) !important;
}
/* Records-preview keeps slightly more room since it also carries its own
   filter row and card grid, which need a bit more separation from the
   section edge than a plain text section does. */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-records-preview {
  padding-block: clamp(48px, 5.5vw, 72px) !important;
}

/* ==========================================================================
   29. ZERO MARGIN ON EVERY TOP-LEVEL SECTION, SITEWIDE — FINAL, UNCONDITIONAL
   (2026-08-03)
   Five separate instances of the same bug were found and fixed individually
   this session (.inrep-expert-proof, the shared subpage-hero rule, and now
   .docs-intro-band / .help-panel.docs-help-panel) — a section had BOTH its own
   vertical padding (correct, for internal breathing room) AND a vertical
   margin (wrong — external spacing that stacks with the page's own
   inter-section rhythm), each one individually creating a visible grey gap
   between that section and its neighbour. Rather than keep hunting for the
   sixth, seventh, and further recurrences of the same pattern across ~380
   view files, this rule removes the possibility outright: every direct child
   of <main class="mkt-page"> — i.e. every top-level public-page section, on
   every public page — has its margin forced to zero. Padding is completely
   untouched, so every section keeps its own internal spacing; only the
   external margin that could open a gap between two sections is affected.
   ========================================================================== */
html body.inrep-public-body.inrep-public-body.inrep-public-body main.mkt-page > * {
  margin-block: 0 !important;
}

/* The public shell is fixed and therefore does not reserve space in document
   flow. Keep <main> aligned immediately after the measured shell height so the
   first page section begins at the nav edge instead of underneath it. This is
   structural clearance, not a visual gap: the first section paints its own
   background from that exact edge, and its own padding controls where the
   content begins. */
html body.inrep-public-body.inrep-public-body.inrep-public-body main.mkt-page {
  padding-top: var(--ir-header-height, 112px) !important;
}

/* ==========================================================================
   30. FINAL CTA: RESTORE OVERFLOW:HIDDEN FOR ITS OWN DECORATIVE GLOW
   (2026-08-03)
   Section 25's de-card fix forced `overflow: visible !important` on
   `.ir-final-cta` along with 20 other section classes, correctly for all of
   them EXCEPT this one. `.ir-final-cta::before` is a decorative radial-glow
   pseudo-element with a NEGATIVE bottom inset (verified: -196px to -208px
   depending on viewport), i.e. it is deliberately sized larger than the
   section and relies on the section clipping it via overflow:hidden. Forcing
   overflow:visible unclipped that glow, letting it bleed ~200-300px past the
   section's own bottom edge directly onto whatever sits below it — the
   footer, on every page ending with this CTA. That is what read as "the
   section is sliding/scrolling into the footer instead of cleanly merging
   with it": the glow itself, not the section box, was overrunning the
   boundary. Confirmed via a sweep of all 21 de-carded section classes on the
   homepage that .ir-final-cta is the only one with this pattern (scrollHeight
   897px vs clientHeight 594px, a 303px unclipped overflow) — no other class
   needs the same exception.
   ========================================================================== */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-final-cta {
  overflow: hidden !important;
}

/* ==========================================================================
   30b. FINAL CTA: MOBILE BUTTON PAIR STRETCHED EDGE-TO-EDGE (2026-08-06)
   inrep-public.css's blanket mobile rule (max-width:760px, "inrep-public.css
   .ir-actions { width:100% !important; ... }") forces EVERY .ir-actions
   element site-wide to 100% width on mobile — correct for the many places
   .ir-actions sits inside a padded hero, but .ir-final-cta is one of the 21
   de-carded classes with padding-inline:0 !important (section 25) — zero
   side padding of its own — so 100% of that container is the bare viewport
   width, with no inset. Confirmed live at 375px: the "Request university
   setup"/"View pricing" pair measured full 375px wide at left:0, touching
   both screen edges. This shared component renders on nearly every public
   page's closing CTA band, so the fix is effectively site-wide already by
   targeting the one component. ========================================== */
@media (max-width: 760px) {
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-final-cta .ir-actions {
    width: min(100% - 40px, 420px) !important;
    margin-inline: auto !important;
  }
}

/* ==========================================================================
   30c. MOBILE CTA BUTTONS RENDERED AS FULL-WIDTH BARS (2026-08-06)

   Two stacked blanket rules in inrep-public.css (max-width:760px ~11588 and
   max-width:520px ~14602) force `.ir-actions { flex-direction:column;
   align-items:stretch }` plus `.ir-actions a { width:100% !important }`. The
   result: every CTA pair on every public page renders as two edge-to-edge
   slabs, while the identical buttons in the page hero directly above them —
   and every other button on the platform — size to their own text. Measured at
   375px on /solutions: "Request university setup" and "View pricing" both
   335x46 starting at the same x, i.e. two identical bars.

   Buttons are sized to their content and centred instead, which is how the
   rest of the platform behaves. A floor of 220px keeps a short label ("Talk to
   us") from collapsing into a cramped chip next to a long one, and the cap of
   100% keeps a long label inside the container on narrow screens, so the pair
   still reads as a set without either becoming a full-bleed bar.
   ========================================================================== */
@media (max-width: 760px) {
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-actions {
    align-items: center !important;
  }
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-actions > .ir-btn,
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-actions > a,
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-actions > button {
    width: auto !important;
    min-width: min(220px, 100%) !important;
    max-width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* ==========================================================================
   31. HOMEPAGE MOTION & DEPTH PASS (2026-08-04)

   Five sections named directly by the user: the numbered workflow, the
   dark capability grid, the centered workflow-assistant band, the dark
   stat band, and the resources/guides teaser. Adds real depth (ambient
   3D shapes, cursor-tilt cards, a connected spine on the numbered flow,
   a truthful settle-emphasis on the enforced-facts figures) without restructuring any of
   these — every element already exists; this only adds motion and one
   new decorative layer inside the one section that had no visual at all.
   Everything here respects prefers-reduced-motion via the shared
   .ir-motion-ready gate already wired up in inrep-public.js, plus its own
   guard for the two continuous ambient animations below.
   ========================================================================== */

/* --- 31.0 Mobile drawer: sectioned/collapsible groups + search-bar sizing --
   The drawer previously rendered 26 links as one flat scrolling list under
   plain (non-interactive) section labels. Converted each group to a native
   <details>/<summary> — same disclosure pattern already used by the FAQ
   accordion (.ir-faq-item), so no new JS and no new visual language, just
   reused. "Product" opens by default; the rest start collapsed. */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-mobile-group {
  border-bottom: 1px solid var(--gx-border, #e2ece5) !important;
  margin: 0 !important;
}
/* The last group's border-bottom sat 22px above .ir-mobile-ctas's own
   border-top, drawing two parallel hairlines with a gap between them under the
   final ("Resources") heading. One divider is enough — the CTA block keeps
   its own, so the group drops the trailing one. */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-mobile-group:last-of-type {
  border-bottom: 0 !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-mobile-group summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 !important;
  /* 52px row clears the 44px WCAG 2.2 target minimum. */
  min-height: 52px !important;
  padding: 14px 4px !important;
  /* Was #6a7b74, which measures 4.37:1 on the white drawer — below the 4.5:1
     AA floor for 12.5px text. #46574f measures 8.0:1 and still reads as a
     muted section label rather than a link. */
  color: #46574f !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  list-style: none !important;
  -webkit-tap-highlight-color: transparent;
  transition: color .18s ease;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-mobile-group[open] summary,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-mobile-group summary:hover {
  color: var(--gx-forest, #115241) !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-mobile-group summary::-webkit-details-marker {
  display: none !important;
}
/* Same rotating-chevron control as the footer accordion, in the dark stroke
   this white drawer needs. */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-mobile-group summary::after {
  content: '';
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: rgba(17,82,65,.06);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%23115241' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transform: rotate(0deg);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1), background-color .18s ease;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-mobile-group[open] summary::after {
  transform: rotate(180deg);
  background-color: rgba(17,82,65,.12);
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-mobile-group-links {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding-bottom: 8px !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-mobile-group[open] .ir-mobile-group-links {
  animation: ir-accordion-reveal .3s cubic-bezier(.22, 1, .36, 1) both;
}
/* The a11y target-size fix (min-height/min-width: 44px) made the search
   button taller than its own container, so it broke out of the container's
   rounded corners with hard edges instead of sitting inset as a pill. Give
   the container enough padding to hold a 44px button comfortably, and give
   the button its own radius/padding so it reads as a real chip. */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-mobile-search {
  padding: 5px 5px 5px 16px !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-mobile-search button {
  border-radius: 8px !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* --- 31.0b Footer columns: same collapsible treatment on mobile, unchanged
   static columns on desktop. Each column is now <details class="ir-footer-group">
   with the <h3> replaced by <summary> — desktop forces the content visible
   regardless of the [open] attribute (a standard, valid override of the
   details:not([open]) UA rule) and neutralizes the summary's own interactivity,
   so desktop looks byte-for-byte like the original static columns; only the
   mobile breakpoint below turns it into a real accordion. */
/* The footer is DARK (.ir-footer background #071c15). When the columns were
   converted from <h3> to <summary>, the `.ir-footer-cols h3 { color:#fff }`
   rule that made the headings legible stopped matching, and the replacement
   summary rule inherited the LIGHT-footer ink colour (var(--ir-ink), #0a1a12)
   from an older generation of this stylesheet — dark text on a dark ground,
   measured at 1.02:1, i.e. the heading was rendered but completely invisible.
   Only the +/- marker (its own muted colour) showed, which is exactly what the
   reported screenshot shows: unlabelled rows with a lone +.
   The colour below matches what `.ir-footer-cols h3` used, so the desktop
   footer renders identically to before the <details> conversion. */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-footer-group summary {
  margin: 0 0 6px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  list-style: none !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-footer-group summary::-webkit-details-marker {
  display: none !important;
}
@media (min-width: 761px) {
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-footer-group summary {
    cursor: default !important;
    pointer-events: none !important;
  }
  /* Desktop must look byte-for-byte like the original static columns, so the
     content is forced visible regardless of the [open] attribute. */
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-footer-group-links {
    display: grid !important;
    gap: 8px;
  }
}
@media (max-width: 760px) {
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-footer-cols {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  /* A #e2ece5 hairline is a light-theme border — on the near-black footer it
     reads as a hard white rule. Use a translucent white so the divider sits
     back into the dark ground like every other rule in this footer. */
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-footer-group {
    border-bottom: 1px solid rgba(255,255,255,.09) !important;
  }
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-footer-group:last-of-type {
    border-bottom: 0 !important;
  }
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-footer-group summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    /* 52px row: comfortably clears the 44px WCAG 2.2 target minimum. */
    min-height: 52px !important;
    padding: 14px 2px !important;
    margin: 0 !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
    transition: color .18s ease;
  }
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-footer-group summary:hover,
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-footer-group[open] summary {
    color: #fff !important;
  }
  /* A rotating chevron rather than a +/- glyph swap: the same control animates
     between states instead of replacing one character with another. The
     circular chip gives it a visible hit area on the dark ground.
     The chevron is an inline SVG data URI (stroke hardcoded #ffffff, matching
     the heading colour above — a data URI cannot resolve currentColor). */
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-footer-group summary::after {
    content: '';
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: rgba(255,255,255,.07);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(0deg);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1), background-color .18s ease;
  }
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-footer-group[open] summary::after {
    transform: rotate(180deg);
    background-color: rgba(255,255,255,.14);
  }
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-footer-group-links {
    display: grid !important;
    gap: 2px;
    padding-bottom: 14px;
  }
  /* Native <details> cannot transition its own height, so the panel content is
     revealed with a short fade/slide instead of animating layout height. Same
     approach as the mobile drawer groups below — no JS, no layout thrash. */
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-footer-group[open] .ir-footer-group-links {
    animation: ir-accordion-reveal .3s cubic-bezier(.22, 1, .36, 1) both;
  }
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-footer-group-links a {
    padding: 9px 0 !important;
  }
}
@keyframes ir-accordion-reveal {
}
@media (prefers-reduced-motion: reduce) {
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-footer-group[open] .ir-footer-group-links,
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-mobile-group[open] .ir-mobile-group-links {
    animation: none !important;
  }
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-footer-group summary::after {
    transition: none !important;
  }
}

/* --- 31.1 "One governed path from submission to discovery": a real spine -- */
html body.inrep-public-body .ds-flow {
  position: relative;
}
html body.inrep-public-body .ds-flow::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--ds-line) 8%, var(--ds-line) 92%, transparent);
}
html body.inrep-public-body .ds-sec--dark .ds-flow::before {
  background: linear-gradient(to bottom, transparent, var(--ds-line-dark) 8%, var(--ds-line-dark) 92%, transparent);
}
html body.inrep-public-body .ds-flow__step::before {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--ds-page);
  border: 1.5px solid var(--ds-line);
  font-size: 12px;
  transition: background .4s ease, border-color .4s ease, transform .4s ease, color .4s ease;
}
html body.inrep-public-body .ds-sec--dark .ds-flow__step::before {
  background: var(--ds-forest-deep);
  border-color: var(--ds-line-dark);
}
html body.inrep-public-body.ir-motion-ready .ds-flow__step {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s var(--inrep-motion-ease, ease), transform .5s var(--inrep-motion-ease, ease);
  transition-delay: var(--inrep-motion-delay, 0ms);
}
html body.inrep-public-body.ir-motion-ready .ds-flow__step.inrep-in-view {
  opacity: 1;
  transform: none;
}
html body.inrep-public-body.ir-motion-ready .ds-flow__step.inrep-in-view::before {
  background: var(--ds-accent);
  border-color: var(--ds-accent);
  color: #fff;
  transform: scale(1.06);
}

/* --- 31.2 "We help universities...": cursor-tilt cards + ambient glow ---- */
/* .ir-dark-section is one of the 21 classes section 25's de-card fix forces to
   overflow:visible !important (line ~2173-2187) — the same pattern documented in
   section 30 for .ir-final-cta. This section's own ::before glow below has a
   negative top inset and depends on being clipped by its own element, so it needs
   the same overflow:hidden !important restore, at matching specificity, or the
   glow bleeds onto whatever section precedes it instead of staying ambient. */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-dark-section {
  position: relative;
  overflow: hidden !important;
}
html body.inrep-public-body .ir-dark-section::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 70%;
  background: radial-gradient(60% 60% at 30% 20%, rgba(37, 199, 90, .16), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
html body.inrep-public-body .ir-dark-section-inner,
html body.inrep-public-body .ir-dark-cards {
  position: relative;
  z-index: 1;
}
/* The tilt transform itself is set by JS as an inline !important style
   (see initDarkCardTilt in inrep-public.js) — inline !important beats any
   stylesheet rule regardless of specificity, which is what's actually
   needed to outrank the unconditional "production safety" rule
   (inrep-public.css ~16464-16486, transform:none !important on every
   [data-ir-anim] descendant card, load-bearing — do not weaken it). A
   stylesheet-only attempt at this (var() inside a !important transform
   declaration) measured as unreliable in testing even at higher
   specificity, so this only carries the transition. */
html body.inrep-public-body .ir-dark-card {
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
}
html body.inrep-public-body .ir-dark-card:hover {
  box-shadow: 0 20px 40px -18px rgba(0,0,0,.5);
  border-color: rgba(255,255,255,.22);
}

/* --- 31.3 "Less administrative drag...": ambient 3D shapes behind the copy - */
html body.inrep-public-body .ir-ai-section--centered {
  position: relative;
  overflow: hidden;
}
html body.inrep-public-body .ir-ai-depth {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
html body.inrep-public-body .ir-ai-inner {
  position: relative;
  z-index: 1;
}
html body.inrep-public-body .ir-ai-depth-shape {
  position: absolute;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(155deg, rgba(37,199,90,.14), rgba(255,255,255,.03));
  backdrop-filter: blur(2px);
}
html body.inrep-public-body .ir-ai-depth-shape-1 {
  width: 220px; height: 220px; left: 6%; top: 12%;
  transform: perspective(700px) rotate3d(1, 1, 0, 28deg) rotate(8deg);
}
html body.inrep-public-body .ir-ai-depth-shape-2 {
  width: 150px; height: 150px; right: 8%; top: 18%;
  border-radius: 999px;
  transform: perspective(700px) rotate3d(1, -1, 0, 22deg);
  background: radial-gradient(circle at 35% 30%, rgba(37,199,90,.22), rgba(255,255,255,.02) 70%);
}
html body.inrep-public-body .ir-ai-depth-shape-3 {
  width: 260px; height: 130px; right: 14%; bottom: 8%;
  transform: perspective(700px) rotate3d(1, 1, 0, -18deg) rotate(-6deg);
}
@media (prefers-reduced-motion: no-preference) {
  html body.inrep-public-body .ir-ai-depth-shape-1 { animation: ir-ai-float-1 13s ease-in-out infinite; }
  html body.inrep-public-body .ir-ai-depth-shape-2 { animation: ir-ai-float-2 16s ease-in-out infinite; }
  html body.inrep-public-body .ir-ai-depth-shape-3 { animation: ir-ai-float-3 19s ease-in-out infinite; }
}
@keyframes ir-ai-float-1 {
  0%, 100% { transform: perspective(700px) rotate3d(1, 1, 0, 28deg) rotate(8deg) translateY(0); }
  50% { transform: perspective(700px) rotate3d(1, 1, 0, 34deg) rotate(11deg) translateY(-14px); }
}
@keyframes ir-ai-float-2 {
  0%, 100% { transform: perspective(700px) rotate3d(1, -1, 0, 22deg) translateY(0); }
  50% { transform: perspective(700px) rotate3d(1, -1, 0, 16deg) translateY(12px); }
}
@keyframes ir-ai-float-3 {
  0%, 100% { transform: perspective(700px) rotate3d(1, 1, 0, -18deg) rotate(-6deg) translateY(0); }
  50% { transform: perspective(700px) rotate3d(1, 1, 0, -24deg) rotate(-9deg) translateY(-10px); }
}
@media (max-width: 760px) {
  html body.inrep-public-body .ir-ai-depth { display: none; }
}

/* --- 31.4 "Built around how universities...": figures land with their final
     value intact; JS marks the one-time emphasis as complete so a resize or
     re-render never restarts it. ----------------------------------------- */
html body.inrep-public-body .ds-figure__num {
  font-variant-numeric: tabular-nums;
}

/* --- 31.5 "Guides for every repository role": centered, scoped to this
     section only — .ir-section-head/.ir-feature-card are shared classes
     used across the rest of the site and must not be centered globally --- */
html body.inrep-public-body .ir-guides-section .ir-section-head {
  text-align: center;
  align-items: center;
  margin-inline: auto;
}
html body.inrep-public-body .ir-guides-section .ir-section-head > p {
  margin-inline: auto;
}
html body.inrep-public-body .ir-guides-section .ir-feature-grid-3 {
  justify-items: center;
}
html body.inrep-public-body .ir-guides-section .ir-feature-card {
  text-align: center;
  max-width: 360px;
}
html body.inrep-public-body .ir-guides-section .ir-feature-card .feature-card-icon {
  margin-inline: auto;
}
html body.inrep-public-body .ir-guides-section .ir-feature-card ul {
  justify-items: center;
  padding-left: 0;
  list-style: none;
}
html body.inrep-public-body .ir-guides-section .ir-feature-card-link {
  margin-inline: auto;
}
html body.inrep-public-body .ir-guides-section .ir-feature-card {
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
/* Same production-safety collision as the .ir-dark-card tilt above:
   .ir-feature-card is also in the [data-ir-anim] :where(...) safety list,
   and this section carries data-ir-anim="fade-up" — needs !important +
   the same triple-class prefix to actually show the hover lift. */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-guides-section .ir-feature-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--gx-shadow-md, 0 10px 30px -14px rgba(7,28,21,.22));
}

/* No reduced-motion override needed here: initDarkCardTilt() in
   inrep-public.js checks prefers-reduced-motion itself and never attaches
   the tilt listeners at all when it's set, so no inline transform is ever
   applied in that case — the element simply keeps its default (untilted). */

/* ==========================================================================
   32. ONE PILL/EYEBROW DESIGN, EVERYWHERE, ON ANY BACKGROUND  (2026-08-05)

   The small uppercase section-label badge (e.g. "ACCESS MODES", "STANDARDS",
   "JOURNAL PUBLISHING", "IMPLEMENTATION SUPPORT") existed as at least THREE
   independently-maintained designs across the public site, each with its own
   color-token family and its own radius:
     - `.ir-pill` (this file, section 4)      -> --gx-mint / --gx-forest / 6px
     - `.eyebrow` / `.section-eyebrow`         -> --ir-mint / --ir-green-dark / 10px
       (inrep-public.css ~9700, only inside .cards-section/.section-heading/
       .mkt-section/.public-section — every OTHER container fell through to
       app.css's plain, un-pilled `.eyebrow` with no background/border at all)
     - `.hero-eyebrow` (bare, outside .mkt-hero.page-hero)  -> --ds-green-50 /
       --ds-green-700 / a true 999px capsule (inrep-public.css ~17696) — a
       THIRD radius and a THIRD color-token family for the identical shape.
     - `.auth-eyebrow` (2 auth pages) had no dedicated rule at all.
   Spacing to the following heading was similarly inconsistent: `.ir-pill`
   only got a guaranteed margin-bottom when it happened to sit inside one of
   7 explicitly-listed parent containers (inrep-public.css ~8069) — e.g.
   `.contact-copy` (contact.php's "Implementation support" pill) was not on
   that list, so it had zero gap to the h2 right below it (global heading
   reset is `margin-top: 0`, app.css:78).

   Fixing this by making every one of these classes resolve to the exact
   same visual as `.ir-pill`, unconditionally, regardless of which container
   it sits in or what background that container has. The design is already
   background-agnostic by construction — background/border/color are all
   opaque and !important, so the badge paints its own light surface no
   matter what's behind it (dark hero, white section, whatever) — the only
   change needed is making every class NAME converge on the same rule.
   `.inst-*`-prefixed eyebrows (institution/tenant public pages) are
   deliberately excluded — tenant pages don't load this stylesheet at all
   (see views/layouts/public.php's `<?php if(!$tenantPage)` gate) and are a
   separate, institution-branded design system on purpose.
   ========================================================================== */
html body.inrep-public-body.inrep-public-body.inrep-public-body .eyebrow,
html body.inrep-public-body.inrep-public-body.inrep-public-body .hero-eyebrow,
html body.inrep-public-body.inrep-public-body.inrep-public-body .section-eyebrow,
html body.inrep-public-body.inrep-public-body.inrep-public-body .auth-eyebrow,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-pill {
  font-family: var(--gx-font-mono) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  background: var(--gx-mint) !important;
  color: var(--gx-forest) !important;
  border: 1px solid var(--gx-mint-strong) !important;
  border-radius: var(--gx-radius-pill) !important;
  padding: 6px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  line-height: 1.3 !important;
  float: none !important;
  width: max-content !important;
  max-width: 100% !important;
  white-space: normal !important;
  margin: 0 0 16px !important;
}
/* `.ir-pill-compact` stays a deliberate smaller modifier (features.php uses
   it stacked with `.ir-pill`, e.g. `class="ir-pill ir-pill-compact"`) — it
   only overrides size/padding, so it keeps the canonical colors above. */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-pill-compact {
  padding: 5px 10px !important;
  font-size: 10px !important;
  min-height: 0 !important;
}
/* Centering: an inline-flex element like this one already centers correctly
   via `text-align: center` on its ancestor (.ir-section-head, .ir-hero-copy,
   .ir-faq-intro, .mkt-hero.page-hero, etc. are all already text-align:center
   — inline-flex participates in inline layout for that purpose the same way
   inline-block does), so no separate margin-inline:auto rule is needed here.
   Left-aligned contexts (e.g. contact.php's `.contact-copy`, matching the
   reference screenshot) correctly keep the pill left-aligned by default. */

/* ==========================================================================
   33. ONE FAQ ACCORDION DESIGN, EVERYWHERE  (2026-08-05)

   Three different FAQ layouts exist (.ir-faq-section's centered intro+list on
   home/pricing/tools, .ir-faq-split's two-column layout on info/product-page,
   and a bare .ir-section-head + list on contact.php) — those three outer
   LAYOUTS are a reasonable, deliberate structural difference per page and are
   left alone. But the actual FAQ ITEM (the clickable <details>/<summary> row
   itself) rendered as three different designs, not one:
     - `.ir-faq-item` (home/pricing/tools): white card, mint highlight when
       open, a "+" that rotates into "x" on open.
     - `.ir-faq-list details` (info.php/product-page.php's .ir-faq-split):
       identical card/mint-highlight styling EXCEPT it never got the "+"/"x"
       expand indicator at all — summary padding left no room for one.
     - `.faq-list details` (contact.php, styled only by app.css): a
       completely different design — different radius token
       (--inrep-radius vs --gx-radius-mid), different padding, plain #fff
       with no mint open-state highlight, no expand icon, and app.css's
       admin-dashboard color tokens (--text-dark/--text-muted-dark) instead
       of the public design system's tokens.
   Bringing all three to the exact same card look, mint open-state, and "+"/
   "x" icon as `.ir-faq-item`. ========================================== */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-list details summary,
html body.inrep-public-body.inrep-public-body.inrep-public-body .faq-list details summary {
  padding: 16px 28px 16px 0 !important;
  position: relative !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-list details summary::after,
html body.inrep-public-body.inrep-public-body.inrep-public-body .faq-list details summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 14px;
  font-size: 20px;
  font-weight: 400;
  color: var(--gx-forest);
  transition: transform .18s;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-list details[open] summary::after,
html body.inrep-public-body.inrep-public-body.inrep-public-body .faq-list details[open] summary::after {
  transform: rotate(45deg);
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .faq-list {
  width: min(860px, calc(100% - 48px)) !important;
  margin: 0 auto !important;
  display: grid !important;
  gap: 10px !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .faq-list details {
  background: #fff !important;
  border: 1px solid var(--gx-border) !important;
  border-radius: var(--gx-radius-md) !important;
  padding: 4px 20px !important;
  margin-bottom: 0 !important;
  transition: border-color .15s;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .faq-list details[open] {
  border-color: var(--gx-mint-strong) !important;
  background: var(--gx-mint) !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .faq-list summary {
  font-family: var(--gx-font) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  color: var(--gx-ink) !important;
  cursor: pointer !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .faq-list p {
  color: var(--gx-muted) !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  padding-bottom: 16px !important;
  margin: 0 !important;
}

/* ==========================================================================
   34. /faq HUB + /trust CENTER  (2026-08-05)
   ========================================================================== */
html body.inrep-public-body .ir-faq-search-form {
  display: flex;
  gap: 10px;
  margin-top: 24px;
  max-width: 540px;
}
html body.inrep-public-body .ir-faq-search-form input[type="search"] {
  flex: 1;
  height: 48px;
  border-radius: var(--gx-radius-sm) !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  background: #fff !important;
  color: var(--gx-ink) !important;
  padding: 0 16px;
  font-size: 15px;
}
html body.inrep-public-body .ir-faq-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body a.ir-faq-filter {
  margin: 0 !important;
  cursor: pointer;
  text-decoration: none !important;
  transition: background .15s, color .15s, border-color .15s;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body a.ir-faq-filter.is-active {
  background: var(--gx-forest) !important;
  border-color: var(--gx-forest) !important;
  color: #fff !important;
}
html body.inrep-public-body .ir-faq-category-heading {
  font-family: var(--gx-font) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--gx-ink) !important;
  margin: 40px 0 16px !important;
}
html body.inrep-public-body .ir-faq-category-block:first-child .ir-faq-category-heading {
  margin-top: 0 !important;
}

/* Trust Center: policy document list + the two public request forms */
html body.inrep-public-body .ir-trust-doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 28px;
}
html body.inrep-public-body .ir-trust-doc-card {
  border: 1px solid var(--gx-border);
  border-radius: var(--gx-radius-md) !important;
  padding: 20px;
  background: #fff;
}
html body.inrep-public-body .ir-trust-doc-card h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--gx-ink);
}
html body.inrep-public-body .ir-trust-doc-card p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--gx-muted);
  margin: 0 0 10px;
}
html body.inrep-public-body .ir-trust-doc-card a {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gx-forest);
}
html body.inrep-public-body .ir-trust-request-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin-top: 28px;
  align-items: start;
}
html body.inrep-public-body .ir-trust-request-card {
  border: 1px solid var(--gx-border);
  border-radius: var(--gx-radius-md) !important;
  padding: 28px;
  background: #fff;
}
html body.inrep-public-body .ir-trust-request-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
}
html body.inrep-public-body .ir-trust-request-card > p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--gx-muted);
  margin: 0 0 18px;
}
html body.inrep-public-body .ir-trust-request-card form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
html body.inrep-public-body .ir-trust-request-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gx-ink);
}
html body.inrep-public-body .ir-trust-request-card input,
html body.inrep-public-body .ir-trust-request-card select,
html body.inrep-public-body .ir-trust-request-card textarea {
  height: 44px;
  border-radius: var(--gx-radius-sm) !important;
  border: 1px solid var(--gx-border);
  padding: 0 14px;
  font-size: 14px;
  font-family: var(--gx-font);
  color: var(--gx-ink);
}
html body.inrep-public-body .ir-trust-request-card textarea {
  height: auto;
  min-height: 110px;
  padding: 12px 14px;
  resize: vertical;
}
html body.inrep-public-body .ir-trust-request-card label.inline-check {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.45;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body.inrep-public-body .ir-trust-request-card label.inline-check input[type="checkbox"] {
  flex: 0 0 18px !important;
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  margin: 1px 0 0;
  padding: 0;
  accent-color: var(--gx-green, #25c75a);
}

/* Shared legal and rights pages: keep policy copy readable, scannable, and
   visually consistent with the public Trust Center. */
html body.inrep-public-body .public-legal-page {
  background:
    radial-gradient(circle at 88% 4%, rgba(37, 199, 90, .11), transparent 24rem),
    linear-gradient(180deg, #f8fcf9 0, #fff 34rem);
  padding: clamp(64px, 8vw, 108px) 24px clamp(80px, 9vw, 120px);
}
html body.inrep-public-body .public-legal-page .legal-shell {
  width: min(100%, 980px);
  margin: 0 auto;
}
html body.inrep-public-body .public-legal-page .hero-eyebrow {
  display: inline-flex;
  width: fit-content;
  margin: 0 0 20px;
  border: 1px solid #bfe9cf;
  border-radius: 7px;
  background: #eaf9ef;
  padding: 8px 13px;
  color: #07563e;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
html body.inrep-public-body .public-legal-page .legal-shell > h1 {
  max-width: 820px;
  margin: 0;
  color: var(--gx-ink, #0a1a12);
  font-size: clamp(38px, 5vw, 58px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.035em;
}
html body.inrep-public-body .public-legal-page .legal-lead {
  max-width: 760px;
  margin: 22px 0 10px;
  color: #40584d;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.7;
}
html body.inrep-public-body .public-legal-page .legal-shell > p > small {
  color: #63766c;
  font-weight: 600;
}
html body.inrep-public-body .public-legal-page .legal-card,
html body.inrep-public-body .public-legal-page .ir-trust-request-card {
  margin-top: 28px;
  border: 1px solid #dce8e0;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 24px 58px -48px rgba(6, 48, 31, .56);
  padding: clamp(26px, 4vw, 46px);
}
html body.inrep-public-body .public-legal-page .legal-card h2,
html body.inrep-public-body .public-legal-page .ir-trust-request-card h2 {
  margin: 38px 0 12px;
  color: var(--gx-ink, #0a1a12);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.018em;
}
html body.inrep-public-body .public-legal-page .legal-card h2:first-child,
html body.inrep-public-body .public-legal-page .ir-trust-request-card h2:first-child {
  margin-top: 0;
}
html body.inrep-public-body .public-legal-page .legal-card h3 {
  margin: 24px 0 8px;
  color: #173e31;
  font-size: 17px;
}
html body.inrep-public-body .public-legal-page .legal-card p,
html body.inrep-public-body .public-legal-page .legal-card li,
html body.inrep-public-body .public-legal-page .ir-trust-request-card > p {
  color: #40584d;
  font-size: 15.5px;
  line-height: 1.75;
}
html body.inrep-public-body .public-legal-page .legal-card ul,
html body.inrep-public-body .public-legal-page .legal-card ol {
  margin: 12px 0 18px;
  padding-left: 24px;
}
html body.inrep-public-body .public-legal-page .legal-card li + li {
  margin-top: 8px;
}
html body.inrep-public-body .public-legal-page :where(.legal-card, .ir-trust-request-card) a {
  color: #0a694a;
  font-weight: 650;
  text-underline-offset: 3px;
}
html body.inrep-public-body .public-legal-page :where(.legal-card, .ir-trust-request-card) a:hover {
  color: #064a35;
}
html body.inrep-public-body .public-legal-page .ir-trust-request-card form {
  margin-top: 22px;
}
html body.inrep-public-body .public-legal-page .ir-trust-request-card .ir-btn {
  width: fit-content;
  min-width: 220px;
}
@media (max-width: 640px) {
  html body.inrep-public-body .public-legal-page {
    padding: 48px 16px 72px;
  }
  html body.inrep-public-body .public-legal-page .legal-shell > h1 {
    font-size: clamp(34px, 11vw, 46px);
  }
  html body.inrep-public-body .public-legal-page .legal-card,
  html body.inrep-public-body .public-legal-page .ir-trust-request-card {
    padding: 24px 20px;
  }
  html body.inrep-public-body .public-legal-page .ir-trust-request-card .ir-btn {
    width: 100%;
    min-width: 0;
  }
}

/* ==========================================================================
   35. SITEWIDE MOTION PASS (2026-08-06)

   Extends the existing scroll-reveal system rather than introducing a second
   one. That system is [data-inrep-public-motion] + .inrep-in-view, both set
   by inrep-public.js, gated behind a .ir-motion-ready body class that the
   same script adds — so if JS never runs, nothing is ever set to opacity:0
   and the page renders fully. Every rule below inherits that safety
   property; none of them hides anything on its own.

   SPECIFICITY NOTE — the one non-obvious thing in this block.
   inrep-public.css (~16469-16490) carries three "production safety" rules of
   the form:
       .inrep-public-body [data-ir-anim] :where(<card list>)
       { opacity:1 !important; transform:none !important }
   Those exist because an OLDER, now-dead reveal system ([data-ir-anim] +
   .ir-visible) hides elements that nothing ever un-hides — the JS that set
   .ir-visible no longer exists. Those overrides are load-bearing and must
   not be weakened. As a side effect they also neutralise any transform on
   the cards they list whenever those cards sit inside a [data-ir-anim]
   section, which is most of them. So the reveal rules here are written at
   html body.inrep-public-body x3 (0,4,x) to outrank that (0,2,0) selector.
   That is safe precisely because this system, unlike [data-ir-anim], has a
   working un-hide path.
   ========================================================================== */

html body.inrep-public-body.inrep-public-body.inrep-public-body [data-inrep-public-motion] {
  opacity: 0 !important;
  transform: var(--ir-motion-from, translateY(16px)) !important;
  transition:
    opacity .55s cubic-bezier(.22, 1, .36, 1),
    transform .55s cubic-bezier(.22, 1, .36, 1) !important;
  transition-delay: var(--inrep-motion-delay, 0ms) !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body [data-inrep-public-motion].inrep-in-view {
  opacity: 1 !important;
  transform: none !important;
}

/* Motion profiles keep each section expressive without giving every element
   the same generic slide. They use transform/opacity only and inherit the
   no-JS visibility guarantee from the base selector above. */
html body.inrep-public-body.inrep-public-body.inrep-public-body [data-inrep-public-motion][data-ir-motion-profile="soft"] {
  --ir-motion-from: translate3d(0, 14px, 0);
}
html body.inrep-public-body.inrep-public-body.inrep-public-body [data-inrep-public-motion][data-ir-motion-profile="hero"] {
  --ir-motion-from: translate3d(0, 20px, 0);
  transition-duration: .62s !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body [data-inrep-public-motion][data-ir-motion-profile="label"] {
  --ir-motion-from: translate3d(0, 8px, 0) scale(.97);
  transition-duration: .38s !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body [data-inrep-public-motion][data-ir-motion-profile="card"] {
  --ir-motion-from: translate3d(0, 18px, 0) scale(.985);
}
html body.inrep-public-body.inrep-public-body.inrep-public-body [data-inrep-public-motion][data-ir-motion-profile="panel"] {
  --ir-motion-from: translate3d(0, 14px, 0) scale(.99);
}
html body.inrep-public-body.inrep-public-body.inrep-public-body [data-inrep-public-motion][data-ir-motion-profile="media"] {
  --ir-motion-from: translate3d(0, 14px, 0) scale(.975);
  transition-duration: .68s !important;
}

/* Direction variants. JS tags alternating rows and split halves so a section
   assembles from its own two sides instead of everything sliding up. */
html body.inrep-public-body.inrep-public-body.inrep-public-body [data-inrep-public-motion][data-ir-motion-dir="left"] {
  transform: translate3d(-26px, 8px, 0) !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body [data-inrep-public-motion][data-ir-motion-dir="right"] {
  transform: translate3d(26px, 8px, 0) !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body [data-inrep-public-motion][data-ir-motion-dir="scale"] {
  transform: scale(.965) !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body [data-inrep-public-motion][data-ir-motion-dir].inrep-in-view {
  transform: none !important;
}

/* will-change is a promise to the compositor that costs a layer for as long
   as it is set. The base rule declared it permanently on every revealed
   element, so a long page held dozens of live compositor layers forever. JS
   now adds .ir-motion-done once the reveal transition has finished, which
   releases them. */
html body.inrep-public-body.inrep-public-body.inrep-public-body [data-inrep-public-motion]:not(.ir-motion-done) {
  will-change: opacity, transform;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body [data-inrep-public-motion].ir-motion-done {
  will-change: auto;
  transition-delay: 0ms !important;
}

/* A non-layout reading-progress line gives long public pages a continuous,
   useful response to scrolling. JS only changes scaleX on this element. */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-scroll-progress {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #25c75a, #0f7a47 72%, #8ce4ac);
  box-shadow: 0 1px 8px rgba(37, 199, 90, .28);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
  will-change: transform;
}

/* Copy inside a revealed section follows the section hierarchy: label,
   heading, explanation, then action. The parent remains the only hidden layer,
   so there is no invisible-content failure if JS is unavailable. */
html body.inrep-public-body :is(
  .ir-section-head,
  .ir-ai-showcase__head,
  .ir-home-workflow__intro,
  .ir-home-lifecycle__intro,
  .ir-expert-panel__head,
  .ir-final-cta
).inrep-in-view > * {
  animation: ir-section-copy-in .42s cubic-bezier(.22, 1, .36, 1) both;
}
html body.inrep-public-body :is(
  .ir-section-head,
  .ir-ai-showcase__head,
  .ir-home-workflow__intro,
  .ir-home-lifecycle__intro,
  .ir-expert-panel__head,
  .ir-final-cta
).inrep-in-view > :nth-child(2) { animation-delay: 55ms; }
html body.inrep-public-body :is(
  .ir-section-head,
  .ir-ai-showcase__head,
  .ir-home-workflow__intro,
  .ir-home-lifecycle__intro,
  .ir-expert-panel__head,
  .ir-final-cta
).inrep-in-view > :nth-child(3) { animation-delay: 105ms; }
html body.inrep-public-body :is(
  .ir-section-head,
  .ir-ai-showcase__head,
  .ir-home-workflow__intro,
  .ir-home-lifecycle__intro,
  .ir-expert-panel__head,
  .ir-final-cta
).inrep-in-view > :nth-child(n+4) { animation-delay: 145ms; }

@keyframes ir-section-copy-in {
  from { opacity: 0; transform: translate3d(0, 9px, 0); }
  to { opacity: 1; transform: none; }
}

/* Verified facts remain truthful throughout their animation. Instead of
   counting through false intermediate values, the final number settles into
   place once its row enters the viewport. */
html body.inrep-public-body :is(.ds-figure__num, [data-ir-count]).ir-count-emphasis {
  animation: ir-count-emphasis .44s cubic-bezier(.2, .8, .2, 1) both;
  transform-origin: left center;
}
@keyframes ir-count-emphasis {
  0% { opacity: .42; transform: translate3d(0, 8px, 0) scale(.92); filter: saturate(.7); }
  70% { opacity: 1; transform: translate3d(0, -1px, 0) scale(1.025); filter: saturate(1.08); }
  100% { opacity: 1; transform: none; filter: none; }
}

/* The homepage proof strip has its own choreography: dividers draw first,
   numbers settle, then labels clarify what each number means. JS only adds
   .ir-lifecycle-facts-active when the row enters view; without JS the row is
   fully visible because these hidden states are gated by .ir-motion-ready. */
html body.inrep-public-body .ir-home-lifecycle__facts {
  --ir-fact-ease: cubic-bezier(.16, 1, .3, 1);
}
html body.inrep-public-body.ir-motion-ready .ir-home-lifecycle__facts > div:not(.ir-home-lifecycle__facts-rule) {
  opacity: 0;
  transform: translate3d(0, 16px, 0) scale(.985);
  will-change: opacity, transform;
}
html body.inrep-public-body.ir-motion-ready .ir-home-lifecycle__facts .ir-home-lifecycle__facts-rule {
  --ir-rule-scale-from: scaleY(.16);
  opacity: 0;
  transform: var(--ir-rule-scale-from);
  transform-origin: center;
  will-change: opacity, transform;
}
html body.inrep-public-body .ir-home-lifecycle__facts.ir-lifecycle-facts-active > div:not(.ir-home-lifecycle__facts-rule) {
  animation: ir-lifecycle-stat-in .56s var(--ir-fact-ease) both;
  animation-delay: calc(var(--ir-fact-index, 0) * 72ms);
  will-change: auto;
}
html body.inrep-public-body .ir-home-lifecycle__facts.ir-lifecycle-facts-active .ir-home-lifecycle__facts-rule {
  animation: ir-lifecycle-rule-draw .5s var(--ir-fact-ease) both;
  animation-delay: calc((var(--ir-rule-index, 0) * 72ms) + 52ms);
  will-change: auto;
}
html body.inrep-public-body .ir-home-lifecycle__facts.ir-lifecycle-facts-active dd {
  animation: ir-lifecycle-number-settle .52s cubic-bezier(.2, .9, .18, 1.12) both;
  animation-delay: calc((var(--ir-fact-index, 0) * 72ms) + 90ms);
  transform-origin: center bottom;
}
html body.inrep-public-body .ir-home-lifecycle__facts.ir-lifecycle-facts-active dt {
  animation: ir-lifecycle-label-in .38s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc((var(--ir-fact-index, 0) * 72ms) + 180ms);
}
@keyframes ir-lifecycle-stat-in {
  from { opacity: 0; transform: translate3d(0, 16px, 0) scale(.985); }
  to { opacity: 1; transform: none; }
}
@keyframes ir-lifecycle-rule-draw {
  from { opacity: .08; transform: var(--ir-rule-scale-from, scaleY(.16)); }
  to { opacity: 1; transform: none; }
}
@keyframes ir-lifecycle-number-settle {
  0% { opacity: .35; transform: translate3d(0, 10px, 0) scale(.9); }
  68% { opacity: 1; transform: translate3d(0, -2px, 0) scale(1.035); }
  100% { opacity: 1; transform: none; }
}
@keyframes ir-lifecycle-label-in {
  from { opacity: 0; transform: translate3d(0, 7px, 0); }
  to { opacity: 1; transform: none; }
}

/* --- 35.1 Micro-interactions -------------------------------------------- */

/* Cards lift on pointer devices only — on touch, :hover latches after a tap
   and leaves the card stuck in its raised state. */
@media (hover: hover) and (pointer: fine) {
  html body.inrep-public-body.inrep-public-body.inrep-public-body :is(
    .ir-feature-card, .ir-plan-card, .ir-addon-card, .ir-tool-card,
    .ir-resource-card, .ir-case-card, .ir-record-card, .ir-home-card,
    .ir-about-audience-card, .ir-about-impact-card, .ir-about-mission-card,
    .ir-operating-card, .ir-illustration-card, .ir-trust-request-card,
    .ir-solution-card, .ir-process-card, .ir-story-card, .ir-benefit-card,
    .ir-ai-showcase__card, .ir-trust-doc-card, .docs-card, .repo-record-v3,
    .public-card, .inst-quick-card, .inst-card, .inst-guide-card
  ) {
    transition: transform .3s cubic-bezier(.22, 1, .36, 1),
                box-shadow .3s cubic-bezier(.22, 1, .36, 1),
                border-color .2s ease;
  }
  html body.inrep-public-body.inrep-public-body.inrep-public-body :is(
    .ir-feature-card, .ir-plan-card, .ir-addon-card, .ir-tool-card,
    .ir-resource-card, .ir-case-card, .ir-record-card, .ir-home-card,
    .ir-about-audience-card, .ir-about-impact-card, .ir-about-mission-card,
    .ir-operating-card, .ir-illustration-card, .ir-trust-request-card,
    .ir-solution-card, .ir-process-card, .ir-story-card, .ir-benefit-card,
    .ir-ai-showcase__card, .ir-trust-doc-card, .docs-card, .repo-record-v3,
    .public-card, .inst-quick-card, .inst-card, .inst-guide-card
  ):hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 14px 34px -18px rgba(6, 32, 21, .34) !important;
  }

  /* The trailing arrow in a read-more link slides forward on hover. The link
     itself is already inline-flex with a nowrap gap (see the wrapping-arrow
     fix), so only the glyph needs to move. */
  html body.inrep-public-body.inrep-public-body.inrep-public-body :is(.ir-feature-card-link, .ds-link) svg {
    transition: transform .25s cubic-bezier(.22, 1, .36, 1);
  }
  html body.inrep-public-body.inrep-public-body.inrep-public-body :is(.ir-feature-card-link, .ds-link):hover svg {
    transform: translateX(3px);
  }

  /* Media responds as a contained layer; the surrounding layout never moves. */
  html body.inrep-public-body :is(
    .ir-story-media,
    .ir-hero-collage__photo,
    .ir-expert-panel__photo,
    .pricing-rollout-media,
    .ir-product-hero-visual
  ) img {
    transition: transform .48s cubic-bezier(.22, 1, .36, 1), filter .3s ease;
  }
  html body.inrep-public-body :is(
    .ir-story-media,
    .ir-hero-collage__photo,
    .ir-expert-panel__photo,
    .pricing-rollout-media,
    .ir-product-hero-visual
  ):hover img {
    transform: scale(1.025);
    filter: saturate(1.035);
  }

  html body.inrep-public-body :is(.ir-dark-card, .ir-ai-showcase__card, .ir-plan-card):hover :is(.ir-dark-card-icon, .ir-ai-showcase__icon, .ir-plan-icon) {
    transform: translateY(-2px) rotate(-3deg) scale(1.055);
  }

  /* Buttons rise slightly on hover and settle flat on press, so the control
     reads as physically depressed rather than merely recoloured. */
  html body.inrep-public-body.inrep-public-body.inrep-public-body :is(.ir-btn, .ds-btn, .ir-hero-v2-btn, .ir-start):hover {
    transform: translateY(-1.5px);
  }
}

html body.inrep-public-body.inrep-public-body.inrep-public-body :is(.ir-btn, .ds-btn, .ir-hero-v2-btn, .ir-start) {
  transition: transform .18s cubic-bezier(.22, 1, .36, 1),
              background-color .18s ease,
              border-color .18s ease,
              box-shadow .18s ease;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body :is(.ir-btn, .ds-btn, .ir-hero-v2-btn, .ir-start):active {
  transform: translateY(0) scale(.985);
}

html body.inrep-public-body :is(.ir-dark-card-icon, .ir-ai-showcase__icon, .ir-plan-icon) {
  transition: transform .28s cubic-bezier(.22, 1, .36, 1), background-color .2s ease;
}

/* Focus creates the same immediate response as hover without relying on hover
   as the only interaction signal. No dimensions change, so forms do not jump. */
html body.inrep-public-body :is(
  .ir-trust-request-card,
  .ir-form-card,
  .public-form,
  .repo-filter-v3
) :is(input:not([type="hidden"]), select, textarea) {
  transition: border-color .18s ease, box-shadow .18s ease,
              background-color .18s ease, transform .18s cubic-bezier(.22, 1, .36, 1);
}
html body.inrep-public-body :is(
  .ir-trust-request-card,
  .ir-form-card,
  .public-form,
  .repo-filter-v3
) :is(input:not([type="hidden"]), select, textarea):focus {
  transform: translateY(-1px);
}

/* Native details retain their keyboard and accessibility behavior; only the
   content exposed by the state change receives a short entrance. */
html body.inrep-public-body .repo-facet-v3[open] > :not(summary) {
  animation: ir-disclosure-in .28s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes ir-disclosure-in {
  from { opacity: 0; transform: translate3d(0, -5px, 0); }
  to { opacity: 1; transform: none; }
}

/* Photo benefit cards get one restrained light pass on pointer hover. */
html body.inrep-public-body .ir-benefit-card--photo::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: -45%;
  background: linear-gradient(110deg, transparent 43%, rgba(255,255,255,.13) 50%, transparent 57%);
  opacity: 0;
  transform: translate3d(-48%, 0, 0) rotate(7deg);
  transition: opacity .25s ease, transform .62s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  html body.inrep-public-body .ir-benefit-card--photo:hover::after {
    opacity: 1;
    transform: translate3d(48%, 0, 0) rotate(7deg);
  }
}

/* Footer link nudge: a 3px shift on hover reads as responsive without moving
   far enough to disturb the column rhythm. */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-footer-group-links a {
  transition: color .18s ease, transform .18s cubic-bezier(.22, 1, .36, 1);
}
@media (hover: hover) and (pointer: fine) {
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-footer-group-links a:hover {
    transform: translateX(3px);
  }
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-cert-row span:hover {
    transform: translateY(-2px);
  }
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-cert-row span {
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), background-color .2s ease;
}

/* --- 35.2 Reduced motion and print -------------------------------------- */

/* Both are hard guarantees that content is visible, so they carry the same
   maximum specificity as the reveal rules above. */
@media (prefers-reduced-motion: reduce) {
  html body.inrep-public-body.inrep-public-body.inrep-public-body [data-inrep-public-motion],
  html body.inrep-public-body.inrep-public-body.inrep-public-body [data-inrep-public-motion][data-ir-motion-dir] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html body.inrep-public-body .ir-scroll-progress {
    box-shadow: none;
    will-change: auto;
  }
  html body.inrep-public-body :is(
    .ir-section-head,
    .ir-ai-showcase__head,
    .ir-home-workflow__intro,
    .ir-home-lifecycle__intro,
    .ir-expert-panel__head,
    .ir-final-cta
  ).inrep-in-view > *,
  html body.inrep-public-body :is(.ds-figure__num, [data-ir-count]).ir-count-emphasis,
  html body.inrep-public-body .repo-facet-v3[open] > :not(summary) {
    animation: none !important;
  }
  html body.inrep-public-body .ir-benefit-card--photo::after {
    display: none;
  }
  html body.inrep-public-body.ir-motion-ready .ir-home-lifecycle__facts > div,
  html body.inrep-public-body .ir-home-lifecycle__facts.ir-lifecycle-facts-active > div,
  html body.inrep-public-body .ir-home-lifecycle__facts.ir-lifecycle-facts-active dd,
  html body.inrep-public-body .ir-home-lifecycle__facts.ir-lifecycle-facts-active dt {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}
@media print {
  html body.inrep-public-body.inrep-public-body.inrep-public-body [data-inrep-public-motion],
  html body.inrep-public-body.inrep-public-body.inrep-public-body [data-inrep-public-motion][data-ir-motion-dir] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   36. DESIGN-ERROR FIXES FOUND BY THE 2026-08-06 RENDERED-PAGE SWEEP

   Each entry below was measured on the rendered page, not inferred from the
   stylesheet, and the ratios quoted are from that measurement.
   ========================================================================== */

/* 36.1 — Homepage social-trust row: white text on the cream page background.

   `.ir-social-trust-row` is coloured rgba(255,255,255,.84) by
   inrep-public.css:16264, which was correct when the row only ever appeared
   inside a dark hero. The 2026-08-03 rebuild moved it into the light
   `.ds-sec` "Meet a repository expert" split, where every ancestor up to
   <body> is transparent — so the text renders white on #f3f4f1 at 1.10:1,
   i.e. invisible. There IS a light variant in the stylesheet
   (`.ir-social-proof--light .ir-social-trust-row span`) but the new markup
   is not inside a `.ir-social-proof` wrapper, so it never applied.

   Scoped to the light section primitives rather than reverting the base
   colour, because the dark-hero placements still need white. */
html body.inrep-public-body.inrep-public-body.inrep-public-body :is(.ds-sec, .ir-section, .ir-soft-section) .ir-social-trust-row,
html body.inrep-public-body.inrep-public-body.inrep-public-body :is(.ds-sec, .ir-section, .ir-soft-section) .ir-social-trust-row span {
  color: var(--ds-gray-700, #44524b) !important;
}
/* The star glyphs keep their amber, which reads fine on a light ground. */
html body.inrep-public-body.inrep-public-body.inrep-public-body :is(.ds-sec, .ir-section, .ir-soft-section) .ir-social-trust-row svg {
  color: #b45309 !important;
}

/* 36.2 — "Browse documentation" / "Read case studies" / "Browse help center"
   card links measured 4.18:1 at 13.5px (#0f8f3e on #fff), under the 4.5:1 AA
   floor for normal-size text. #0f6b36 is the accent already used for primary
   buttons elsewhere in this stylesheet and measures 6.62:1 on white, so this
   keeps one accent green across the site instead of introducing a third. */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-feature-card .ir-feature-card-link {
  color: #0f6b36 !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-feature-card .ir-feature-card-link:hover {
  color: #0a5429 !important;
}

/* ==========================================================================
   37. ONE BUTTON RADIUS EVERYWHERE (2026-08-06)

   Measured on /pricing alone, three different radii were in play at once:
     6px   .ir-btn family, nav Login / Request setup  <- the homepage look
     8px   skip link, hamburger, drawer Search, .tes__chip, chatbot FAB, .btn.tiny
     999px .subscription-cycle-tab (Monthly/Yearly and the term selector)

   The cause is two competing custom properties. `--inrep-button-radius` and
   `--inrep-radius` both resolve to 8px and drive the older "control radius
   lock" in inrep-public.css:13039, while redesign-2026.css separately sets
   the .ir-btn family from `--gx-radius-pill` (6px, despite the name — see
   the 2026-07-23 round 4 note about that token being repurposed from a true
   999px pill to a small squared rectangle). Anything the redesign layer did
   not name kept the older 8px, and .subscription-cycle-tab carried its own
   999px from app.css.

   6px wins because it is what the homepage hero buttons use, which is the
   reference the whole set is being matched to.

   Scoped to .inrep-public-body so the admin/dashboard surfaces, which are a
   deliberately separate design system, are untouched. Non-button round
   things (avatars, the accordion chevron chips, radio dots) are spans, divs
   or pseudo-elements and so are not matched by any selector here.
   ========================================================================== */
html body.inrep-public-body.inrep-public-body.inrep-public-body :is(
  .ir-btn, .ds-btn, .btn, .ir-start, .ir-login, .ir-hero-v2-btn,
  .ir-login-submit, .ir-login-continue, .ir-mobile-toggle,
  .subscription-cycle-tab, .tes__chip, .site-chatbot-toggle,
  .skip-link, .ir-doc-filter, .ir-faq-filter, .mkt-nav-signup,
  .repo-primary-action-v3,
  button, [role="button"],
  input[type="submit"], input[type="button"], input[type="reset"],
  a.btn, .ir-mobile-ctas a, .ir-actions > a, .ds-actions > a
) {
  border-radius: var(--gx-radius-pill, 6px) !important;
}

/* The two exceptions, both deliberate and neither a button in the CTA sense:
   a checkbox/radio must keep its native shape, and the newsletter/search
   input pairs read as one control, so an inner submit keeps square inner
   corners where it butts against the field. Listed explicitly rather than
   left to chance. */
html body.inrep-public-body.inrep-public-body.inrep-public-body :is(
  input[type="checkbox"], input[type="radio"]
) {
  border-radius: revert !important;
}

/* Sitewide checkbox/radio sizing fix (2026-08-09). The generic text-field rule
   (`input, select, textarea { width:100%; min-height:44px/48px; border:1px
   solid ...; padding:10px 14px; background:#fff; ... }`, in app.css/
   inrep-public.css) never excludes [type="checkbox"]/[type="radio"] — every
   checkbox and radio on the public site inherits width:100% from whatever
   flex/grid cell it happens to sit in, rendering as a huge blank square
   (confirmed live: 834x48px on a single-checkbox consent row on
   /proposals/{token}) instead of a normal ~18px control. The border-radius
   fix above already reverts one property from that same base rule for this
   exact reason; this extends the same revert to every property the base
   rule sets, restoring native checkbox/radio sizing everywhere on the site
   in one place, rather than patching each page's checkbox individually. */
html body.inrep-public-body.inrep-public-body.inrep-public-body :is(
  input[type="checkbox"], input[type="radio"]
) {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: revert !important;
  background: revert !important;
  flex: none !important;
}

/* ==========================================================================
   38. FULL-WIDTH DESKTOP MEGA MENU (2026-08-06)

   The dropdown was a floating rounded card centred under its trigger. The
   requested pattern is a full-bleed panel spanning the viewport, with the
   column headings on one rule across the top and vertical dividers running
   the full height between groups.

   HOW THE FULL BLEED IS ACHIEVED, and why it is done this way:
   .ir-mega is position:absolute. Its containing block was .ir-nav-group
   (position:relative), so it could never be wider than that trigger. It
   cannot simply be re-anchored to .ir-nav either — that element carries
   `padding: 0 47.52px`, and an absolutely positioned child resolves left/right
   against the PADDING box, so left:0 would sit ~48px in from each edge.
   Instead both .ir-nav-group and .ir-nav become static at this breakpoint, so
   the panel resolves against .ir-sticky-shell: position:fixed, padding:0,
   full viewport width. left/right:0 there is a true full bleed, and top:100%
   lands exactly on the shell's bottom edge — which stays correct when the
   announcement bar is dismissed and the shell gets shorter, unlike a hard
   var(--ir-header-height) offset would.

   Verified before making .ir-nav static that the ONLY absolutely positioned
   descendants of .ir-nav are the four .ir-mega panels themselves, so nothing
   else depends on it being a containing block.

   Scoped to min-width:1181px, the breakpoint at which .ir-nav-links stops
   being display:none and the desktop nav actually exists. Below that the
   mobile drawer is used and none of this applies.
   ========================================================================== */
@media (min-width: 1181px) {
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-nav-group,
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-nav-group:has(.ir-mega-slim),
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-nav-group:has(.ir-mega-small),
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-nav {
    position: static !important;
  }

  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-mega,
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-mega.ir-mega-slim,
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-mega.ir-mega-small,
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-mega.ir-mega-about {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    transform: none !important;
    background: #fff !important;
    border: 0 !important;
    border-top: 1px solid var(--gx-border, #e2ece5) !important;
    border-bottom: 1px solid var(--gx-border, #e2ece5) !important;
    border-radius: 0 !important;
    box-shadow: 0 26px 48px -26px rgba(8, 37, 29, .28) !important;
    /* There is no inner wrapper element in the markup, so the content is
       centred at container width with padding rather than an extra div. */
    padding: 0 max(28px, calc((100% - 1260px) / 2)) 22px !important;
    gap: 0 !important;
    align-items: stretch !important;
    max-height: calc(100vh - var(--ir-header-height, 104px)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  /* Columns carry their own padding so the vertical dividers between them run
     the full height of the panel rather than stopping at the text. */
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-mega .ir-mega-col {
    padding: 24px 30px 28px !important;
    gap: 0 !important;
    align-content: start !important;
  }
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-mega .ir-mega-col:first-child {
    padding-left: 0 !important;
  }
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-mega .ir-mega-col + .ir-mega-col,
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-mega .ir-mega-promo {
    border-left: 1px solid var(--gx-border, #e2ece5) !important;
  }

  /* Heading row. Every column starts with its label at the same y, so giving
     each label a bottom rule produces one continuous line across the panel,
     broken only by the vertical dividers — the reference layout. */
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-mega .ir-mega-label {
    grid-column: 1 / -1 !important;
    margin: 0 0 14px !important;
    padding: 0 0 14px !important;
    border-bottom: 1px solid var(--gx-border, #e2ece5) !important;
    font-family: var(--gx-font) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--gx-muted, #62736b) !important;
  }

  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-mega .ir-mega-col a {
    padding: 10px 10px 10px 8px !important;
    margin-left: -8px !important;
    border-radius: var(--gx-radius-sm, 6px) !important;
  }
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-mega .ir-mega-col a strong {
    font-size: 14.5px !important;
    font-weight: 600 !important;
  }
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-mega .ir-mega-col a small {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  /* Two-column menus would leave very wide, sparse columns once the panel is
     full width, so the link lists inside them run two-up. The single-column
     "Research tools" menu runs its links three-up for the same reason. */
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-mega.ir-mega-slim,
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-mega.ir-mega-about {
    grid-template-columns: 1fr 1fr auto !important;
  }
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-mega.ir-mega-about {
    grid-template-columns: 1.15fr 1fr !important;
  }
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-mega.ir-mega-about .ir-mega-col:first-child {
    grid-template-columns: 1fr 1fr !important;
  }
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-mega.ir-mega-small {
    grid-template-columns: 1fr !important;
  }
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-mega.ir-mega-small .ir-mega-col {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 18px !important;
  }

  /* The promo card sits as the last column instead of a floating tile. */
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-mega .ir-mega-promo {
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 24px 0 28px 30px !important;
    background: transparent !important;
    align-self: stretch !important;
    max-width: 300px !important;
  }
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-mega .ir-mega-promo strong {
    color: var(--gx-ink, #0a1a12) !important;
  }
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-mega .ir-mega-promo p {
    color: var(--gx-muted, #62736b) !important;
  }
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-mega .ir-mega-promo a {
    color: var(--gx-forest, #115241) !important;
    font-weight: 600 !important;
  }
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-mega .ir-mega-promo a:hover {
    color: #0f6b36 !important;
  }

  /* The panel fades and settles down rather than appearing instantly. */
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-nav-group:hover > .ir-mega,
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-nav-group.is-open > .ir-mega {
    animation: ir-mega-in .2s cubic-bezier(.22, 1, .36, 1) both;
  }
}
@keyframes ir-mega-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-nav-group:hover > .ir-mega,
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-nav-group.is-open > .ir-mega {
    animation: none !important;
  }
}

/* ==========================================================================
   39. ENFORCED-FACTS FIGURE ROW — REFERENCE STAT-GRID TREATMENT (2026-08-06)

   Requested for the homepage "Built around how universities actually publish
   research" section: oversized numerals with a rule above the row and full-
   height vertical dividers between each figure.

   ONE DELIBERATE DEPARTURE FROM THE REFERENCE, stated rather than silently
   applied: the reference renders this block on white. This section is
   .ds-sec--dark, and it is the only dark band between sections 8 and 11 of
   the homepage, all of which are light. Flipping it to white would put four
   consecutive light sections in a row and flatten the page rhythm — the exact
   thing the project's own UI rules call out. So the structure (rule above,
   vertical dividers, oversized numerals, quiet supporting copy) is adopted
   while the dark ground is kept. The same rules below cover the light case,
   so if this section is ever moved onto a light ground it still renders
   correctly.
   ========================================================================== */
html body.inrep-public-body .ds-figures {
  gap: 0 !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  border-top: 1px solid var(--ds-line, #e2ece5);
  padding-top: 0 !important;
}
html body.inrep-public-body .ds-sec--dark .ds-figures {
  border-top-color: rgba(255, 255, 255, .16);
}

/* Each cell owns its padding so the dividers run the full height of the row
   rather than stopping at the tallest text block. */
html body.inrep-public-body .ds-figures > * {
  padding: clamp(24px, 3vw, 38px) clamp(20px, 2.4vw, 34px);
}
html body.inrep-public-body .ds-figures > *:first-child {
  padding-left: 0;
}
html body.inrep-public-body .ds-figures > * + * {
  border-left: 1px solid var(--ds-line, #e2ece5);
}
html body.inrep-public-body .ds-sec--dark .ds-figures > * + * {
  border-left-color: rgba(255, 255, 255, .16);
}

/* The numeral is the whole point of the block, so it is sized well above the
   surrounding type and kept at a light weight so it reads as a figure rather
   than a heading. tabular-nums keeps figures aligned consistently across
   adjacent cards and future data refreshes. */
html body.inrep-public-body .ds-figure__num {
  font-size: clamp(44px, 5.4vw, 68px) !important;
  font-weight: 500 !important;
  letter-spacing: -.03em !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums;
}
html body.inrep-public-body .ds-figure__label {
  margin-top: 16px !important;
  font-size: 15.5px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}
html body.inrep-public-body .ds-figure__note {
  margin-top: 8px !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  max-width: 30ch;
}

/* Stacked on mobile the vertical rules become horizontal ones, so the row
   still reads as a divided set rather than three loose blocks. */
@media (max-width: 700px) {
  html body.inrep-public-body .ds-figures {
    grid-template-columns: 1fr;
  }
  html body.inrep-public-body .ds-figures > * {
    padding-left: 0;
    padding-right: 0;
  }
  html body.inrep-public-body .ds-figures > * + * {
    border-left: 0;
    border-top: 1px solid var(--ds-line, #e2ece5);
  }
  html body.inrep-public-body .ds-sec--dark .ds-figures > * + * {
    border-left: 0;
    border-top-color: rgba(255, 255, 255, .16);
  }
}

/* ==========================================================================
   40. CHATBOT LAUNCHER: SMALL AND CIRCULAR (2026-08-06)

   Requested to match the reference site's launcher, which is a small round
   badge rather than the 58px rounded square this was.

   This is the ONE deliberate exception to the single-button-radius rule in
   section 37, and it is called out here so it does not read as that rule
   leaking. A floating icon launcher is not a CTA button: it carries no label,
   sits outside the document flow, and is conventionally circular. Every
   button that is part of the page — anything with a text label — still
   resolves to the shared 6px.

   44px keeps it at the WCAG 2.2 AA target-size minimum while still reading as
   small, so shrinking it does not make it hard to hit.
   ========================================================================== */
/* Four repetitions, not the usual three. Section 37's selector ends in an
   :is() whose most specific argument is `input[type="submit"]`, so every match
   through it resolves at (0,4,3) — higher than the (0,4,2) a three-class
   prefix gives here, which meant the shared 6px was winning and this stayed a
   rounded square. Measured 6px before this change, 50% after. */
html body.inrep-public-body.inrep-public-body.inrep-public-body.inrep-public-body .site-chatbot-toggle {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 10px 24px -8px rgba(10, 107, 59, .42) !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .site-chatbot-toggle .site-chatbot-logo {
  width: 26px !important;
  height: 26px !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .site-chatbot-toggle .site-chatbot-logo img {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  object-fit: contain !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .site-chatbot-toggle > svg {
  width: 20px !important;
  height: 20px !important;
}

/* ==========================================================================
   41. FAQ SECTIONS — REFERENCE TREATMENT, APPLIED SITEWIDE (2026-08-06)

   The layout was already the right shape: .ir-faq-inner is a two-column grid
   with the intro on the left and the questions on the right. What differed
   from the requested reference was the rows themselves — each question was a
   bordered white card with a mint open state, where the reference uses
   borderless rows separated by a single hairline, with a larger question and a
   +/- at the far right.

   Applied to BOTH accordion implementations (.ir-faq-item, used by home /
   pricing / tools / security, and the bare `.ir-faq-list details` used by
   info.php and product-page.php) so the site keeps exactly one FAQ look —
   which was the point of the earlier unification pass, just with a different
   target design.
   ========================================================================== */

/* Left column: heading sized to the reference, actions side by side rather
   than stacked. */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-intro h2 {
  font-size: clamp(30px, 3.4vw, 42px) !important;
  /* Bumped from 600: the reference heading reads noticeably heavier than the
     sitewide 600-weight cap most public headings use (see section 26's "one
     font system" pass). This is a deliberate, narrowly-scoped exception for
     the FAQ intro only, not a change to the blanket rule. */
  font-weight: 700 !important;
  line-height: 1.12 !important;
  letter-spacing: -.02em !important;
  margin: 0 !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-intro p {
  font-size: 16px !important;
  line-height: 1.6 !important;
  max-width: 42ch;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-actions {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 12px;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-actions .ir-btn {
  width: auto !important;
  min-width: 0 !important;
  height: 46px !important;
  padding: 0 24px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

/* Right column: rows, not cards. */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-list {
  gap: 0 !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body :is(.ir-faq-item, .ir-faq-list details) {
  border: 0 !important;
  border-top: 1px solid var(--gx-border, #e2ece5) !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body :is(.ir-faq-item, .ir-faq-list details):last-child {
  border-bottom: 1px solid var(--gx-border, #e2ece5) !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body :is(.ir-faq-item, .ir-faq-list details)[open] {
  background: transparent !important;
  border-color: var(--gx-border, #e2ece5) !important;
}

html body.inrep-public-body.inrep-public-body.inrep-public-body :is(.ir-faq-item, .ir-faq-list details) summary {
  gap: 24px !important;
  /* 22px vertical keeps the row well past the 44px WCAG 2.2 target minimum. */
  padding: 22px 4px 22px 0 !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: var(--gx-ink, #0a1a12) !important;
  transition: color .18s ease;
}
@media (hover: hover) and (pointer: fine) {
  html body.inrep-public-body.inrep-public-body.inrep-public-body :is(.ir-faq-item, .ir-faq-list details) summary:hover {
    color: var(--gx-forest, #115241) !important;
  }
}

/* The marker is drawn on ::after rather than as a character so the two strokes
   can be animated independently — the vertical one scales away on open, which
   turns the + into a - instead of swapping glyphs. */
html body.inrep-public-body.inrep-public-body.inrep-public-body :is(.ir-faq-item, .ir-faq-list details) summary::after {
  content: '' !important;
  flex: none !important;
  width: 16px !important;
  height: 16px !important;
  background:
    linear-gradient(currentColor, currentColor) center / 16px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 16px no-repeat;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
  opacity: .75;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body :is(.ir-faq-item, .ir-faq-list details)[open] summary::after {
  /* Rotating the whole marker a quarter turn leaves the horizontal stroke
     where the vertical one was; the second gradient is hidden by the scale so
     what remains reads as a minus. */
  background:
    linear-gradient(currentColor, currentColor) center / 16px 1.5px no-repeat;
  transform: rotate(180deg);
  opacity: 1;
}

html body.inrep-public-body.inrep-public-body.inrep-public-body :is(.ir-faq-item, .ir-faq-list details) > :not(summary) {
  padding: 0 60px 22px 0 !important;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: var(--gx-muted, #62736b) !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body :is(.ir-faq-item, .ir-faq-list details)[open] > :not(summary) {
  animation: ir-accordion-reveal .3s cubic-bezier(.22, 1, .36, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  html body.inrep-public-body.inrep-public-body.inrep-public-body :is(.ir-faq-item, .ir-faq-list details)[open] > :not(summary) {
    animation: none !important;
  }
}

/* ==========================================================================
   42. HEROES ARE PLAIN FULL-WIDTH WHITE — NO CARD (2026-08-06)

   Measured on /about before this change: .ir-subpage-hero rendered at
   left:36px, width:1338 of a 1425px viewport, border-radius:20px,
   margin:0 36px, with a 1px #e1ebe5 border and max-width:min(1380px, 100% -
   24px). That is an inset rounded panel, i.e. a card — which is exactly what
   a hero must not be.

   Every hero family is listed so no page keeps the panel look. Section 25's
   "de-card" pass did the same job for mid-page sections but never covered the
   hero classes, which is why they still carried it.

   Content is re-centred with padding rather than max-width, so the white
   ground runs edge to edge while the copy still stops at container width —
   the same technique as the full-width mega menu in section 38. margin-inline
   has to be zeroed explicitly: section 29's blanket rule only zeroes
   margin-block.
   ========================================================================== */
html body.inrep-public-body.inrep-public-body.inrep-public-body :is(
  .ir-product-hero,
  .ir-subpage-hero,
  .ir-partner-hero,
  .ir-info-hero,
  .ir-pricing-hero,
  .ir-product-hero-pro,
  .ir-nd-hero,
  .ir-about-hero,
  .mkt-hero.page-hero,
  .page-hero:not(.section-white)
) {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-color: #fff !important;
  padding-inline: max(24px, calc((100% - 1260px) / 2)) !important;
}

/* The hero must also not sit on a tinted page ground that would read as a
   band behind it — the section paints its own white and nothing else shows. */
html body.inrep-public-body.inrep-public-body.inrep-public-body :is(
  .ir-product-hero,
  .ir-subpage-hero,
  .ir-partner-hero,
  .ir-info-hero,
  .ir-pricing-hero,
  .mkt-hero.page-hero,
  .page-hero:not(.section-white)
)::before {
  content: none !important;
}

@media (max-width: 760px) {
  html body.inrep-public-body.inrep-public-body.inrep-public-body :is(
    .ir-product-hero,
    .ir-subpage-hero,
    .ir-partner-hero,
    .ir-info-hero,
    .ir-pricing-hero,
    .mkt-hero.page-hero,
    .page-hero:not(.section-white)
  ) {
    padding-inline: 20px !important;
  }
}

/* ==========================================================================
   42c. HERO ILLUSTRATION: NO FRAMING CARD, LIGHT SHADOW ONLY (2026-08-06)

   Section 42 de-carded the hero SECTION itself, but the illustration/photo
   sitting inside each hero has its own separate framing box — measured on
   /about: .ir-product-hero-visual rendered with a translucent white+green
   radial-gradient fill, border-radius:18px, and a 0.8px white border; on
   /partners, .ir-partner-photo rendered a solid dark-green (#08251d) fill
   with border-radius:16px and a 0.8px white border. Both are still a "card"
   around the illustration, just one level deeper than section 42 reached.

   The illustration/photo itself is kept — only its own background fill,
   border, and border-radius are stripped, replaced with a single soft
   drop-shadow for depth (per explicit sign-off: keep the image, no visible
   card border or background fill, shadow only). Small content pieces INSIDE
   an illustration (e.g. .ir-about-doc-preview's floating "sample record"
   chip, or a stat-chip figcaption) are left untouched — those are the
   illustration's own content, not the outer frame being removed here.
   ========================================================================== */
html body.inrep-public-body.inrep-public-body.inrep-public-body :is(
  .ir-product-hero-visual,
  .ir-illustration-card,
  .ir-partner-photo,
  .mkt-hero-panel,
  .ir-video-tile.ir-video-tile-image,
  .ir-feat-dashboard,
  .ir-lock-card,
  .ir-home-hero-img
) {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: 0 18px 44px rgba(8,37,29,.10) !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body :is(
  .ir-product-hero-visual,
  .ir-illustration-card,
  .ir-partner-photo,
  .mkt-hero-panel,
  .ir-video-tile.ir-video-tile-image,
  .ir-feat-dashboard,
  .ir-lock-card,
  .ir-home-hero-img
)::before {
  content: none !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body :is(
  .ir-product-hero-visual,
  .ir-illustration-card,
  .ir-partner-photo,
  .mkt-hero-panel,
  .ir-video-tile.ir-video-tile-image,
  .ir-feat-dashboard,
  .ir-lock-card,
  .ir-home-hero-img
) img {
  border-radius: 0 !important;
}

/* ==========================================================================
   42d. PHOTO-LED HERO COLLAGE (2026-08-06)

   Reference: every Greenly product/industry hero puts a COLLAGE in the right
   column, not a single flat mockup — a row of small standard/certification
   tiles across the top, then a real photograph of people working paired with
   a dark data panel, with a white data card floating over the seam. The
   photograph carries most of the visual weight; the UI pieces are accents.

   This mirrors that structure with assets and facts this repo actually owns:
   the tiles are PlatformFacts::interoperabilityStandards() (four standards,
   each naming its implementing class, so the row cannot drift from what is
   really built), and the photograph is one of the repository's own images.
   Nothing here introduces a number that isn't code-derived.

   The collage opts OUT of 42c's wrapper shadow: 42c gives the hero-visual box
   a soft shadow because it is normally a single flat image, but a collage's
   wrapper is transparent, so a shadow there would render as a floating edge
   around nothing. Each collage child carries its own depth instead.
   ========================================================================== */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-product-hero-visual:has(.ir-hero-collage) {
  box-shadow: none !important;
}

html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-collage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  grid-template-rows: auto auto;
  gap: 14px;
  align-items: stretch;
}

/* Standards row — spans both columns, like the reference's certification strip. */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-collage__tiles {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-collage__tiles span {
  display: grid;
  place-items: center;
  min-height: 58px;
  padding: 8px 6px;
  border-radius: 10px;
  background: #f2f6f3;
  color: var(--gx-ink, #0b1f17);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}

/* Dark data panel (left) — holds the existing sample-record card. */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-collage__panel {
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 18px;
  border-radius: 14px;
  background: linear-gradient(150deg, #0d3d2b, #07271c);
}

/* Photograph (right) — the piece carrying the visual weight. */
/* overflow was `hidden` — meant only to round the photo's corners, but the
   rounding is already handled directly on the <img> itself two rules below
   (`border-radius: 14px !important`, since the img fills this figure exactly
   via width/height:100%). The figure's own overflow:hidden was therefore
   redundant for that purpose, and had a real side effect: .ir-hero-collage__
   float is a child of this figure, deliberately positioned `left:-34px` to
   spill over the seam onto the panel beside it (see round 5's own "a white
   card floating over the seam" description) — overflow:hidden clipped
   exactly that spillover, cutting the float card off mid-word on /about,
   /features, and /security-compliance alike. */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-collage__photo {
  position: relative;
  margin: 0;
  overflow: visible;
  border-radius: 14px;
  min-height: 240px;
  box-shadow: 0 18px 44px rgba(8,37,29,.16);
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-collage__photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  border-radius: 14px !important;
}

/* White card floating over the seam between panel and photo. */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-collage__float {
  position: absolute;
  left: -34px;
  bottom: 16px;
  display: grid;
  gap: 2px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(8,37,29,.20);
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-collage__float strong {
  font-size: 20px;
  line-height: 1.1;
  color: var(--gx-ink, #0b1f17);
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-collage__float span {
  font-size: 12px;
  color: var(--gx-muted, #56675e);
}

/* .ir-lock-card is shared with /webometrics-readiness, where it sits directly
   on that hero's own white background and its base dark-ink text (from
   inrep-public.css: `.ir-lock-card-head strong { color: var(--ir-ink) }`) is
   correctly readable there — do not change that base rule. Here on
   /security-compliance the same markup sits inside .ir-hero-collage__panel's
   own dark green gradient, and an earlier "de-card" pass (section 42c) had
   already stripped .ir-lock-card's own translucent white background to
   transparent, so that dark ink text renders directly on the dark gradient
   behind it — effectively invisible. Scoped to this one context only. */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-collage__panel .ir-lock-card-head strong {
  color: #fff !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-collage__panel .ir-lock-card-head span {
  color: #6ee7a5 !important;
}

/* Same bug, same root cause (section 42c's de-card pass stripped this card's
   own background to transparent too), on /features' "Librarian review
   queue" dashboard mock: every text colour inside it — the heading, all 4
   stat numbers, all 4 stat labels, and the 3 record-row captions — was tuned
   for a white card and renders as dark ink directly on the collage panel's
   dark green gradient. Confirmed via computed contrast ratios of 1.34-2.21
   against a 4.5:1 floor (effectively invisible). Borders (header rule,
   stat-column dividers) were also #e6e9e6 — a near-invisible hairline on
   this background — lightened to a translucent white, the pattern already
   used elsewhere for dark-panel dividers (e.g. .ir-feature-section--dark
   .ir-feature-card's border). Status pills (.ir-feat-status-pill.approved/
   .review/.draft) keep their own light backgrounds untouched — those are
   correct as-is, not part of this bug. */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-collage__panel .ir-feat-dash-header strong,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-collage__panel .ir-feat-dash-stats strong {
  color: #fff !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-collage__panel .ir-feat-dash-stats span,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-collage__panel .ir-feat-dash-item span:last-child {
  color: #b7d8c7 !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-collage__panel .ir-feat-dash-header,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-collage__panel .ir-feat-dash-stats,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-collage__panel .ir-feat-dash-stats > div + div {
  border-color: rgba(255,255,255,.14) !important;
}

@media (max-width: 900px) {
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-collage {
    grid-template-columns: 1fr;
  }
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-collage__tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* The float would hang off the page edge in a single column. */
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-collage__float {
    position: static;
    box-shadow: 0 10px 26px rgba(8,37,29,.14);
  }
}

/* ==========================================================================
   43. MEGA-MENU FOOTER ROW (2026-08-06)

   Reference: Greenly's nav dropdown ends every panel with a plain, borderless
   utility row below the columns — two links side by side, separated by a
   thin vertical divider, no card/background of its own. Only the Product
   dropdown had anything like this (a boxed "promo" card, a different look);
   the other three dropdowns had nothing after their columns at all. Added
   the same plain row to all four dropdowns, appended as the last child of
   .ir-mega so it naturally spans the full grid width on its own row.
   ========================================================================== */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-mega-foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--gx-border, #e2ece5);
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-mega-foot-divider {
  width: 1px;
  height: 14px;
  background: var(--gx-border, #e2ece5);
  flex: none;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-mega-foot a {
  display: inline-flex !important;
  align-items: center;
  gap: 8px !important;
  min-height: 36px !important;
  padding: 7px 11px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: #f6faf7 !important;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--gx-ink, #0b1f17) !important;
  line-height: 1 !important;
  white-space: nowrap;
  box-shadow: none !important;
  text-decoration: none !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-mega-foot a svg {
  width: 13px;
  height: 13px;
  flex: none;
  transform: translateY(1px);
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-mega-foot a:hover {
  border-color: #cfe1d7 !important;
  background: #eef7f1 !important;
  color: var(--gx-forest, #063f2a) !important;
  text-decoration: none !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-mega-foot a.ir-mega-foot-accent {
  background: #eef8f0 !important;
  color: var(--gx-accent, #0f6b36) !important;
  font-weight: 600;
}

/* --- 42b. The 15px strip down the right-hand edge --------------------------

   inrep-public.css:324 sets `.mkt-page { overflow-x: hidden }`. Per the CSS
   overflow spec, when one axis is not `visible` the other axis computes to
   `auto` — so that single declaration silently turned <main> into its own
   scroll container with its own scrollbar. Measured: main.offsetWidth 1425,
   main.clientWidth 1410.

   Because a child's `width:100%` resolves against the CONTENT box, every
   full-bleed section on every page was 15px narrower than the viewport,
   leaving a strip of page background exposed down the right edge — visible
   beside the hero, and beside every dark band below it.

   `overflow: visible` restores <main> to a normal, non-scrolling block, so the
   document scrolls (as it already did — main.scrollTop was 0) and 100% means
   the full viewport width again. Horizontal overflow stays contained because
   html and body both already carry `overflow-x: hidden` themselves; main was
   never the element doing that work.
   -------------------------------------------------------------------------- */
html body.inrep-public-body main.mkt-page {
  overflow: visible !important;
}

/* ==========================================================================
   44. AI REPOSITORY CHAT PAGE (/repository-chat, 2026-08-06)

   A dedicated, purpose-built hero for a single "ask anything" bar, plus a
   session-rendered conversation thread and citation cards. Deliberately not
   built on the shared .ir-product-hero / .mkt-hero.page-hero families — both
   resolve to a plain white background on this file's own live cascade
   (section 25 / 12c-2 — checked directly, not assumed from older changelog
   prose describing an earlier state), and this one page's dark, single-
   column, search-first layout does not match either family's shape anyway.
   A distinct, self-contained component avoids re-litigating that cascade.
   ========================================================================== */
html body.inrep-public-body .ir-ai-hero {
  background: linear-gradient(170deg, #052e16 0%, #0f2d1e 50%, #0a1f14 100%) !important;
  color: #fff !important;
  padding: clamp(64px, 8vw, 108px) 24px clamp(52px, 6vw, 80px) !important;
  text-align: center !important;
}
/* The shared main element no longer double-reserves the sticky-header height,
   so first-section heroes must stay at their natural position rather than
   being pulled under the navigation. */
html body.inrep-public-body.inrep-public-body.inrep-public-body main.mkt-page > .ir-ai-hero,
html body.inrep-public-body.inrep-public-body.inrep-public-body main.mkt-page > .ir-subpage-hero,
html body.inrep-public-body.inrep-public-body.inrep-public-body main.mkt-page > .ir-partner-hero,
html body.inrep-public-body.inrep-public-body.inrep-public-body main.mkt-page > .ir-pricing-hero,
html body.inrep-public-body.inrep-public-body.inrep-public-body main.mkt-page > .page-hero:not(.section-white) {
  margin-top: 0 !important;
}
html body.inrep-public-body .ir-ai-hero-inner { max-width: 720px; margin: 0 auto; }
html body.inrep-public-body .ir-ai-hero .ir-breadcrumb,
html body.inrep-public-body .ir-ai-hero .ir-breadcrumb a { color: rgba(255,255,255,.55) !important; background: transparent !important; }
html body.inrep-public-body .ir-ai-hero .ir-breadcrumb a:hover { color: #fff !important; }
html body.inrep-public-body .ir-ai-hero .ir-pill {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.2) !important;
  color: #d7f5e3 !important;
  margin: 0 0 16px !important;
}
html body.inrep-public-body .ir-ai-hero h1 {
  color: #fff !important;
  font-size: clamp(30px, 4.4vw, 48px) !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  line-height: 1.1 !important;
  margin: 0 0 12px !important;
}
html body.inrep-public-body .ir-ai-hero p {
  color: rgba(255,255,255,.72) !important;
  font-size: clamp(15px, 1.3vw, 17px) !important;
  line-height: 1.55 !important;
  max-width: 560px;
  margin: 0 auto !important;
}

.ir-ai-ask {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(640px, 100%);
  margin: 28px auto 0;
  background: #fff;
  border-radius: var(--gx-radius-lg, 10px);
  padding: 8px 8px 8px 18px;
  box-shadow: 0 20px 60px -18px rgba(0,0,0,.55);
}
.ir-ai-ask input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  min-height: 40px;
  font: inherit;
  font-size: 15px;
  color: var(--gx-ink, #0b1f17);
  background: transparent;
}
.ir-ai-ask button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border: 0;
  border-radius: var(--gx-radius-md, 8px);
  background: var(--gx-forest, #115241);
  color: #fff;
  cursor: pointer;
}
.ir-ai-ask button:hover { background: var(--gx-night-3, #123a2c); }

.ir-ai-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px auto 0; max-width: 640px; }
.ir-ai-chips form { margin: 0; }
.ir-ai-chip {
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.85);
  font-size: 13px;
  padding: 7px 13px;
  border-radius: var(--gx-radius-pill, 999px);
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.ir-ai-chip:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.34); }

/* Was margin-top:24px on the bare .ir-ai-trust selector (one class, no !important) — that
   never actually won: html body.inrep-public-body .ir-ai-hero p (an earlier rule, `margin: 0
   auto !important`) has one more type selector in its chain, which wins CSS specificity's
   element-count tiebreak over a same-!important, same-class-count rule with fewer type
   selectors, regardless of which rule "sounds" more targeted. Matching that exact
   specificity here (html body.inrep-public-body p.ir-ai-trust — same element+class counts)
   and coming later in the file lets this reduced, deliberate value actually apply instead of
   the 24px gap reading as too much empty space before a one-line disclosure note. */
html body.inrep-public-body p.ir-ai-trust { margin-top: 10px !important; font-size: 12.5px; color: rgba(255,255,255,.5); letter-spacing: .02em; }

/* -- Conversation thread + citation cards -- */
.ir-repo-thread-wrap { padding: clamp(40px, 5vw, 64px) 24px; }
.ir-repo-thread { width: min(760px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.ir-repo-thread-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: min(760px, 100%); margin: 0 auto 18px; }
.ir-repo-thread-head h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--gx-ink, #0b1f17); }
.ir-repo-msg { max-width: 88%; padding: 14px 18px; border-radius: 14px; font-size: 15px; line-height: 1.6; white-space: pre-wrap; }
.ir-repo-msg.user { align-self: flex-end; background: var(--gx-forest, #115241); color: #fff; border-bottom-right-radius: 4px; }
.ir-repo-msg.bot { align-self: flex-start; background: var(--gx-cream, #f7faf8); border: 1px solid var(--gx-border, #e2ece5); color: var(--gx-ink, #0b1f17); border-bottom-left-radius: 4px; }
.ir-repo-cites { display: grid; gap: 8px; margin-top: 12px; }
.ir-repo-cite { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 8px; background: #fff; border: 1px solid var(--gx-border, #e2ece5); text-decoration: none; color: var(--gx-ink, #0b1f17); font-size: 13.5px; }
.ir-repo-cite:hover { border-color: var(--gx-forest, #115241); }
.ir-repo-cite strong { font-weight: 600; }
.ir-repo-cite span { color: var(--gx-muted, #56675e); white-space: nowrap; flex: none; }

@media (max-width: 640px) {
  .ir-ai-ask { flex-direction: column; align-items: stretch; padding: 10px; border-radius: var(--gx-radius-md, 8px); }
  .ir-ai-ask input { padding: 6px 4px; }
  .ir-ai-ask button { width: 100%; height: 44px; border-radius: var(--gx-radius-sm, 6px); }
  .ir-repo-msg { max-width: 100%; }
}

/* ==========================================================================
   45. SCREENSHOT UI CORRECTIONS (2026-08-07)

   Narrow overrides for the supplied Solutions, Features, Security, Docs,
   API Docs, Pricing, How-it-works, mega-menu, and footer-adjacent states.
   These rules complete the partial 2026-08-06 pass without changing tenant
   layouts or dashboard components.
   ========================================================================== */

/* Final CTA headings and buttons share one centre line. Some views omitted
   an inline justify-content declaration, which left the actions at the far
   edge under a centred heading. */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-final-cta .ir-actions {
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap;
}

/* Solutions role headings are labels, not tiny eyebrow text. Give every icon
   the same optical box and keep the action at a stable 44px hit target. */
html body.inrep-public-body .ds-role-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--ds-ink, #0b1f17);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .045em;
  line-height: 1.25;
  text-transform: uppercase;
}
html body.inrep-public-body .ds-role-label__icon {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 1px solid var(--gx-mint-strong, #cdf3dc);
  border-radius: 8px;
  background: var(--gx-mint, #e9fbf0);
  color: var(--gx-forest, #115241);
}
html body.inrep-public-body .ds-role-actions {
  margin-top: var(--ds-5, 20px);
  align-items: flex-start;
}
html body.inrep-public-body .ds-role-action {
  min-height: 44px;
  width: fit-content;
  justify-content: center;
  gap: 8px;
  white-space: normal;
  text-align: left;
}

/* Hero collage panels must remain upright and readable. The older dashboard
   perspective transform and three-column stats layout squeezed four metrics
   into a broken 3+1 arrangement in the narrow collage column. */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-collage__panel :is(.ir-feat-dashboard, .ir-lock-card) {
  width: 100% !important;
  max-width: none !important;
  transform: none !important;
  box-shadow: none !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-collage__panel .ir-feat-dash-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 12px !important;
  padding: 4px 0 16px !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-collage__panel .ir-feat-dash-header > .ir-pill {
  grid-column: 1;
  justify-self: start;
  margin: 0 !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-collage__panel .ir-feat-dash-header > .ir-ib-sample-tag {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  max-width: 15ch;
  text-align: right;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-collage__panel .ir-feat-dash-header > strong {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: 16px !important;
  line-height: 1.3;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-collage__panel .ir-feat-dash-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-collage__panel .ir-feat-dash-stats > div {
  min-width: 0;
  border-left: 0 !important;
  border-top: 0;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-collage__panel .ir-feat-dash-stats > div:nth-child(even) {
  border-left: 1px solid rgba(255,255,255,.14) !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-collage__panel .ir-feat-dash-stats > div:nth-child(n+3) {
  border-top: 1px solid rgba(255,255,255,.14) !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-collage__panel .ir-lock-card-head {
  align-items: flex-start;
  gap: 12px;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-collage__panel .ir-lock-card-head :is(strong, span) {
  line-height: 1.35;
}

/* Keep the collage fact card wholly readable inside its photograph. The old
   negative left offset deliberately crossed the seam and was clipped in the
   supplied screenshots. */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-collage__float {
  left: 16px !important;
  right: 16px;
  bottom: 16px;
  max-width: calc(100% - 32px);
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   42d-2. COLLAGE PANEL: ROW SPACING + A LIVE CONTRAST BUG (2026-09-22)

   Two real defects, both found while extending the collage to /how-it-works:

   1. INVISIBLE ROW CAPTIONS. 42d above correctly recolours
      `.ir-feat-dash-item span:last-child` to #b7d8c7 for the dark panel — but
      `.ir-feat-dash-item`'s own `background: #fafcfb` (inrep-public.css) was
      never stripped by 42c's de-card pass (that pass only targets the
      `.ir-feat-dashboard` WRAPPER, not the rows inside it). So the light-green
      caption renders on a near-white row: measured 1.49:1, i.e. effectively
      invisible — live today on /features' three record-row captions. Darkening
      the row to match the panel it sits on takes that to 6.55:1. The status
      pills keep their own light backgrounds, which 42d already documents as
      correct, and now read as intended chips on a dark row.

   2. ROW/HEADER MISALIGNMENT. 42d sets the header to `padding: 4px 0 16px`
      (no horizontal padding, because the panel already provides 18px), but
      `.ir-feat-dash-items` keeps its original `padding: 8px` from the white-
      card design — so every row sat 8px further in than the heading above it.
      Zeroing it aligns rows flush to the header; the row gap goes 4px -> 8px
      because these are now separated blocks on a panel rather than tight rows
      inside a bordered card.
   -------------------------------------------------------------------------- */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-collage__panel .ir-feat-dash-item {
  background: rgba(255, 255, 255, .06) !important;
  border-color: rgba(255, 255, 255, .12) !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-collage__panel .ir-feat-dash-items {
  padding: 0 !important;
  gap: 8px !important;
}

/* 3. TRUNCATED ROW CAPTIONS. The base rule is
   `white-space: nowrap; overflow: hidden; text-overflow: ellipsis`, sized for
   the original 420px white card. In the narrower collage column every caption
   loses its ending ("Supervisor · approve…", "Librarian · metadata & a…"),
   which on a workflow panel throws away the part that carries the meaning.
   Wrapping keeps the row readable; the pill stays on its own line-start
   because the row is already a flex container with the pill flex-shrink:0. */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-collage__panel .ir-feat-dash-item {
  align-items: flex-start;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-collage__panel .ir-feat-dash-item span:last-child {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.4;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-collage__panel .ir-feat-dash-item > .ir-feat-status-pill {
  margin-top: 1px;
}

/* --------------------------------------------------------------------------
   42d-3. /solutions ROLE DIAGRAM INSIDE THE COLLAGE PANEL (2026-09-22)

   The page's own role diagram moves into the dark panel, the same way
   /features moved its review-queue mock and /security-compliance its lock
   card. Three things need adjusting for that context, scoped to the panel so
   the diagram is untouched anywhere else:

   - `max-width: 380px` was sized for a free-standing hero visual and would
     leave dead space inside the panel's own padding box.
   - `.ir-sol-central` uses `background: var(--ir-ink)` — a near-black that
     disappears against the panel's own dark gradient. A translucent white
     band separates it while keeping it visibly the "hub" of the diagram.
   - The role cards' 18px/16px padding and 36px icons were tuned for a wider
     column; at collage width they make the panel noticeably taller than the
     photograph beside it, so both come in one step.
   -------------------------------------------------------------------------- */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-collage__panel .ir-sol-roles-wrap {
  max-width: none;
  gap: 10px;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-collage__panel .ir-sol-central {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  padding: 12px 14px;
}
/* The hub bar's label wrapper carries no class of its own, so `strong` and
   `span` are both inline-level and run together on one line — at the wider
   original hero width they fit, but in the collage column the strapline wraps
   awkwardly onto the end of the name ("Inrep Scholar One platform, every /
   team"). Stacking them matches the role cards directly below. */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-collage__panel .ir-sol-central > div:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-collage__panel .ir-sol-role {
  padding: 14px 13px;
  gap: 5px;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-collage__panel .ir-sol-role-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}

/* Docs uses the same collage grammar as Features and Security, but the dark
   panel now contains a real, task-oriented guide directory preview. */
html body.inrep-public-body .ir-docs-preview {
  display: grid;
  gap: 10px;
  color: #fff;
}
html body.inrep-public-body .ir-docs-preview__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.16);
}
html body.inrep-public-body .ir-docs-preview__head span {
  font-size: 15px;
  font-weight: 650;
}
html body.inrep-public-body .ir-docs-preview__head small {
  color: #9ecdb3;
  font-size: 11px;
}
html body.inrep-public-body .ir-docs-preview__row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.06);
}
html body.inrep-public-body .ir-docs-preview__row > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: rgba(110,231,165,.12);
  color: #86efac;
}
html body.inrep-public-body .ir-docs-preview__row div {
  display: grid;
  min-width: 0;
  gap: 2px;
}
html body.inrep-public-body .ir-docs-preview__row strong {
  color: #fff !important;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
}
html body.inrep-public-body .ir-docs-preview__row small {
  color: #b7d8c7;
  font-size: 10.5px;
  line-height: 1.35;
}

/* Docs/API support CTAs are full-bleed sections with a constrained content
   row, not inset cards floating on the page's grey background. */
html body.inrep-public-body.inrep-public-body.inrep-public-body main.mkt-page > .help-panel.docs-help-panel {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(36px, 4.5vw, 58px) max(24px, calc((100% - 1260px) / 2)) !important;
  border: 0 !important;
  border-top: 1px solid var(--gx-border, #e2ece5) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}
html body.inrep-public-body main.mkt-page > .help-panel.docs-help-panel > div {
  max-width: 760px;
}
html body.inrep-public-body main.mkt-page > .help-panel.docs-help-panel h2 {
  margin-bottom: 8px;
}
html body.inrep-public-body main.mkt-page > .help-panel.docs-help-panel .ir-btn {
  flex: 0 0 auto;
  min-height: 44px;
}

/* Pricing rollout support keeps the editorial list but restores a relevant
   photograph on the right, using the shared two-column primitive. */
html body.inrep-public-body .pricing-rollout-split {
  align-items: stretch;
}
html body.inrep-public-body .pricing-rollout-list {
  margin-top: var(--ds-6, 24px);
}
html body.inrep-public-body .pricing-rollout-list strong {
  color: var(--ds-ink, #0b1f17);
  font-weight: 600;
}
html body.inrep-public-body .pricing-rollout-media {
  position: relative;
  min-height: 420px;
}
html body.inrep-public-body .pricing-rollout-media img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
}
html body.inrep-public-body .pricing-rollout-media figcaption {
  position: absolute;
  right: 16px;
  bottom: 16px;
  left: 16px;
  display: grid;
  gap: 3px;
  padding: 14px 16px;
  border-radius: 8px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 14px 36px rgba(8,37,29,.18);
}
html body.inrep-public-body .pricing-rollout-media figcaption strong {
  color: var(--gx-ink, #0b1f17);
  font-size: 14px;
  font-weight: 650;
}
html body.inrep-public-body .pricing-rollout-media figcaption span {
  color: var(--gx-muted, #56675e);
  font-size: 12px;
  line-height: 1.4;
}

@media (max-width: 900px) {
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-hero-collage__float {
    max-width: none;
  }
  html body.inrep-public-body .pricing-rollout-media,
  html body.inrep-public-body .pricing-rollout-media img {
    min-height: 300px;
  }
}

@media (max-width: 640px) {
  html body.inrep-public-body .ds-role-action {
    width: 100%;
    text-align: center;
  }
  html body.inrep-public-body.inrep-public-body.inrep-public-body main.mkt-page > .help-panel.docs-help-panel {
    align-items: stretch;
    padding-inline: 20px !important;
  }
  html body.inrep-public-body main.mkt-page > .help-panel.docs-help-panel .ir-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.inrep-public-body .ir-docs-preview__row,
  html body.inrep-public-body .pricing-rollout-media,
  html body.inrep-public-body .ds-role-action {
    transition: none !important;
    animation: none !important;
  }
}

/* ==========================================================================
   46. HERO CONTENT CLEARANCE BELOW THE NAV (2026-08-07)

   The sticky navigation stays in normal document flow, so <main> must not
   reserve its height again. The first hero background should therefore start
   directly below the nav, while the content inside that background needs a
   deliberate top gutter. Keep that distinction here: padding belongs to the
   hero; margin or main padding would recreate the empty band between them.
   ========================================================================== */
html body.inrep-public-body.inrep-public-body.inrep-public-body main.mkt-page > :is(
  .ir-home-hero-v2,
  .ir-home-hero,
  .ir-product-hero,
  .ir-subpage-hero,
  .ir-partner-hero,
  .ir-info-hero,
  .ir-pricing-hero,
  .ir-ai-hero,
  .mkt-hero.page-hero,
  .page-hero
) {
  padding-top: clamp(32px, 4vw, 56px) !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body main.mkt-page > [class*="-hero"]:first-child {
  padding-top: clamp(32px, 4vw, 56px) !important;
}

/* The homepage hero specifically had far too much empty air below the fixed
   nav (112px nav reservation + up to 104px more from the shared rule above =
   ~216px of blank space before the heading). Every OTHER hero on this list
   keeps the shared clearance above — this override is scoped to
   .ir-home-hero-v2 only, so no other page's hero spacing changes. */
html body.inrep-public-body.inrep-public-body.inrep-public-body.inrep-public-body main.mkt-page > .ir-home-hero-v2 {
  padding-top: clamp(20px, 2vw, 32px) !important;
}

/* Collage heroes are taller than the legacy single-image visual box. Do not
   let that old wrapper clip the tile row, panel shadows, photo, or fact card. */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-product-hero-visual:has(.ir-hero-collage) {
  min-height: 0 !important;
  overflow: visible !important;
}

@media (max-width: 760px) {
  html body.inrep-public-body.inrep-public-body.inrep-public-body main.mkt-page > :is(
    .ir-home-hero-v2,
    .ir-home-hero,
    .ir-product-hero,
    .ir-subpage-hero,
    .ir-partner-hero,
    .ir-info-hero,
    .ir-pricing-hero,
    .ir-ai-hero,
    .mkt-hero.page-hero,
    .page-hero
  ) {
    padding-top: 28px !important;
  }
  html body.inrep-public-body.inrep-public-body.inrep-public-body main.mkt-page > [class*="-hero"]:first-child {
    padding-top: 28px !important;
  }
  html body.inrep-public-body.inrep-public-body.inrep-public-body.inrep-public-body main.mkt-page > .ir-home-hero-v2 {
    padding-top: 18px !important;
  }
}

/* ==========================================================================
   47. PUBLIC NAV, FAQ, AND CASE-STUDY POLISH (2026-08-07)
   ========================================================================== */

/* A closed drawer must have no visual or interaction layer at all. Opacity is
   retained for the open transition, while visibility provides the hard closed
   state that prevents a faint page-wide shade on mobile and desktop. */
html body.inrep-public-body.inrep-public-body .ir-mobile-scrim {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
html body.inrep-public-body.inrep-public-body.ir-mobile-open .ir-mobile-scrim {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
/* The closed drawer still exists just beyond the right edge so its transform
   can animate. Suppress its left-facing shadow until the drawer is open;
   otherwise the 70px blur remains visible as a vertical band on mobile. */
html body.inrep-public-body.inrep-public-body .ir-mobile-drawer {
  box-shadow: none !important;
}
html body.inrep-public-body.inrep-public-body.ir-mobile-open .ir-mobile-drawer {
  box-shadow: -22px 0 70px rgba(5,31,25,.2) !important;
}
@media (min-width: 1181px) {
  html body.inrep-public-body .ir-mobile-scrim,
  html body.inrep-public-body .ir-mobile-drawer {
    display: none !important;
  }
}

/* This note sits on the current light hero system. The old pale-on-black rule
   belonged to a retired dark hero and left the disclosure too quiet. */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-subpage-hero .ir-evidence-note {
  max-width: 64ch;
  padding: 14px 16px !important;
  color: #34483f !important;
  background: #f3f8f5 !important;
  border: 1px solid #dbe9e0 !important;
  border-left: 3px solid var(--gx-green, #25c75a) !important;
  border-radius: 0 8px 8px 0 !important;
  box-shadow: 0 8px 22px rgba(8,37,29,.06);
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-subpage-hero .ir-evidence-note strong {
  color: var(--gx-ink, #0b1f17) !important;
  font-weight: 700;
}

/* The searchable FAQ directory keeps its filters, but each category uses the
   same intro-left / accordion-right rhythm as the Security FAQ. */
html body.inrep-public-body .ir-faq-directory .ir-faq-category-block {
  display: grid;
  grid-template-columns: minmax(200px, .62fr) minmax(0, 1.38fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
  padding-block: clamp(32px, 4vw, 52px);
  border-top: 1px solid var(--gx-border, #e2ece5);
}
html body.inrep-public-body .ir-faq-directory .ir-faq-category-heading {
  margin: 0 !important;
  color: var(--gx-ink, #0b1f17) !important;
  font-size: clamp(24px, 2.8vw, 34px) !important;
  line-height: 1.18;
}

/* Case-studies hero: a complete workflow board replaces the clipped legacy
   single-SVG card. Every label describes an existing repository stage. */
html body.inrep-public-body .ir-case-studies-visual {
  min-height: 0 !important;
  overflow: visible !important;
  align-self: center;
}
html body.inrep-public-body .ir-case-flow-board {
  display: grid;
  gap: 18px;
  padding: clamp(20px, 2.5vw, 28px);
  border-radius: 16px;
  background: linear-gradient(150deg, #0d3d2b, #061f17);
  color: #fff;
  box-shadow: 0 24px 56px rgba(8,37,29,.18);
}
html body.inrep-public-body .ir-case-flow-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
html body.inrep-public-body .ir-case-flow-head span {
  color: #fff;
  font-size: 15px;
  font-weight: 650;
}
html body.inrep-public-body .ir-case-flow-head strong {
  color: #8de7b0 !important;
  font-size: 12px;
  font-weight: 600;
}
html body.inrep-public-body .ir-case-flow-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
html body.inrep-public-body .ir-case-flow-steps li {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 2px 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  background: rgba(255,255,255,.06);
}
html body.inrep-public-body .ir-case-flow-index {
  position: absolute;
  top: 10px;
  right: 10px;
  color: rgba(255,255,255,.35);
  font: 600 10px/1 var(--gx-font-mono, monospace);
}
html body.inrep-public-body .ir-case-flow-icon {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: rgba(110,231,165,.12);
  color: #86efac;
}
html body.inrep-public-body .ir-case-flow-steps strong {
  align-self: end;
  color: #fff !important;
  font-size: 14px;
  line-height: 1.25;
}
html body.inrep-public-body .ir-case-flow-steps small {
  color: #b7d8c7;
  font-size: 11px;
  line-height: 1.35;
}
html body.inrep-public-body .ir-case-flow-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
html body.inrep-public-body .ir-case-flow-proof span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  color: #d6eee0;
  font-size: 11px;
  font-weight: 600;
}

/* In-practice section: one strong editorial photograph plus four consistent
   capability rows, instead of a mixed bento with unrelated card treatments. */
html body.inrep-public-body.inrep-public-body.inrep-public-body main.mkt-page > .ir-practice-section {
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(52px, 6vw, 84px) max(24px, calc((100% - 1260px) / 2)) !important;
  background: #f5f8f6;
}
html body.inrep-public-body .ir-practice-head {
  max-width: 720px;
  margin-bottom: clamp(28px, 4vw, 46px);
}
html body.inrep-public-body .ir-practice-head h2 {
  margin: 14px 0 12px;
  color: var(--gx-ink, #0b1f17) !important;
  font-size: clamp(30px, 3.6vw, 46px) !important;
  line-height: 1.08;
  letter-spacing: -.03em;
}
html body.inrep-public-body .ir-practice-head p {
  max-width: 62ch;
  margin: 0;
  color: var(--gx-muted, #56675e) !important;
  font-size: 16px;
  line-height: 1.65;
}
html body.inrep-public-body .ir-practice-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: stretch;
}
html body.inrep-public-body .ir-practice-media {
  position: relative;
  min-height: 480px;
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 20px 48px rgba(8,37,29,.14);
}
html body.inrep-public-body .ir-practice-media::after {
  content: '';
  position: absolute;
  inset: 35% 0 0;
  background: linear-gradient(180deg, transparent, rgba(5,29,21,.88));
}
html body.inrep-public-body .ir-practice-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 480px;
  object-fit: cover;
}
html body.inrep-public-body .ir-practice-media figcaption {
  position: absolute;
  z-index: 1;
  right: 24px;
  bottom: 24px;
  left: 24px;
  display: grid;
  gap: 6px;
}
html body.inrep-public-body .ir-practice-media figcaption strong {
  color: #fff !important;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.15;
}
html body.inrep-public-body .ir-practice-media figcaption span {
  max-width: 50ch;
  color: #d7e8de !important;
  font-size: 14px;
  line-height: 1.55;
}
html body.inrep-public-body .ir-practice-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
html body.inrep-public-body .ir-practice-grid article {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 20px;
  border: 1px solid var(--gx-border, #e2ece5);
  border-radius: 10px;
  background: #fff;
}
html body.inrep-public-body .ir-practice-grid article > span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 9px;
  background: var(--gx-mint, #e9fbf0);
  color: var(--gx-forest, #115241);
}
html body.inrep-public-body .ir-practice-grid article div {
  min-width: 0;
}
html body.inrep-public-body .ir-practice-grid strong {
  display: block;
  margin-bottom: 5px;
  color: var(--gx-ink, #0b1f17) !important;
  font-size: 17px;
  line-height: 1.3;
}
html body.inrep-public-body .ir-practice-grid p {
  margin: 0;
  color: var(--gx-muted, #56675e) !important;
  font-size: 14px;
  line-height: 1.55;
}

@media (max-width: 900px) {
  html body.inrep-public-body .ir-faq-directory .ir-faq-category-block,
  html body.inrep-public-body .ir-practice-layout {
    grid-template-columns: 1fr;
  }
  html body.inrep-public-body .ir-practice-media,
  html body.inrep-public-body .ir-practice-media img {
    min-height: 360px;
  }
}

@media (max-width: 560px) {
  html body.inrep-public-body .ir-case-flow-head {
    align-items: flex-start;
    flex-direction: column;
  }
  html body.inrep-public-body .ir-case-flow-steps {
    grid-template-columns: 1fr;
  }
  html body.inrep-public-body .ir-case-flow-proof span {
    width: 100%;
  }
  html body.inrep-public-body .ir-practice-media,
  html body.inrep-public-body .ir-practice-media img {
    min-height: 310px;
  }
  html body.inrep-public-body .ir-practice-media figcaption {
    right: 18px;
    bottom: 18px;
    left: 18px;
  }
}

/* ======================================================================
   48. HOME — GOVERNED WORKFLOW, OPERATING OUTCOMES, AND FAQ HANDOFF
   ====================================================================== */

/* The homepage workflow reads as an operational ledger: one framed record,
   five accountable hand-offs, and a closing evidence/action row. */
html body.inrep-public-body .ir-home-workflow {
  border-block: 1px solid #e0ebe4;
  background: #f4f8f5;
}
html body.inrep-public-body .ir-home-workflow__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: start;
  margin-bottom: clamp(30px, 4vw, 48px);
}
html body.inrep-public-body .ir-home-workflow__intro .ds-editorial__title {
  max-width: 16ch;
  margin-bottom: 18px;
}
html body.inrep-public-body .ir-home-workflow__intro .ds-editorial__lead {
  margin: 0;
  max-width: 58ch;
}
html body.inrep-public-body .ir-home-workflow__assurances {
  display: grid;
  gap: 0;
  margin: 4px 0 0;
  padding: 0;
  border-block: 1px solid #d5e4da;
  list-style: none;
}
html body.inrep-public-body .ir-home-workflow__assurances li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 2px 12px;
  padding: 15px 0;
  border-bottom: 1px solid #dfeae3;
  color: var(--gx-ink, #0b1f17);
}
html body.inrep-public-body .ir-home-workflow__assurances li:last-child {
  border-bottom: 0;
}
html body.inrep-public-body .ir-home-workflow__assurances li > span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--gx-radius-sm, 6px);
  background: #dff5e7;
  color: #0f6b36;
}
html body.inrep-public-body .ir-home-workflow__assurances strong {
  font-size: 14px;
  line-height: 1.35;
}
html body.inrep-public-body .ir-home-workflow__assurances small {
  color: var(--gx-muted, #56675e);
  font-size: 12.5px;
  line-height: 1.45;
}

html body.inrep-public-body .ir-home-workflow__board {
  display: grid;
  grid-template-columns: minmax(270px, .62fr) minmax(0, 1.9fr);
  overflow: clip;
  border: 1px solid #cfe0d5;
  border-radius: var(--gx-radius-sm, 6px);
  background: #fff;
  box-shadow: 0 18px 46px -42px rgba(7, 38, 27, .34);
}
html body.inrep-public-body .ir-home-workflow__rail {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(26px, 3vw, 38px);
  background: #0c392d;
  color: #fff;
}
html body.inrep-public-body .ir-home-workflow__board-head {
  display: grid;
  align-content: start;
  gap: 12px;
  width: 100%;
}
html body.inrep-public-body .ir-home-workflow__board-head > span:first-child {
  color: #9fd8b6;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
html body.inrep-public-body .ir-home-workflow__board-head strong {
  max-width: 13ch;
  font-size: clamp(24px, 2.35vw, 34px);
  line-height: 1.08;
}
html body.inrep-public-body .ir-home-workflow__board-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  min-height: 34px;
  margin-top: 10px;
  padding: 7px 0;
  border-top: 1px solid rgba(159, 216, 182, .34);
  border-bottom: 1px solid rgba(159, 216, 182, .34);
  color: #dff5e7;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

html body.inrep-public-body .ir-home-workflow__register {
  min-width: 0;
  background: #fff;
}
html body.inrep-public-body .ir-home-workflow__register-head,
html body.inrep-public-body .ir-home-workflow__stage {
  display: grid;
  grid-template-columns: 56px 120px minmax(260px, 1fr) minmax(150px, 190px);
  column-gap: 18px;
}
html body.inrep-public-body .ir-home-workflow__register-head {
  align-items: center;
  padding: 13px 24px;
  border-bottom: 1px solid #dbe7df;
  background: #f5f8f6;
  color: #70847a;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
html body.inrep-public-body .ir-home-workflow__stages {
  margin: 0;
  padding: 0;
  list-style: none;
}
html body.inrep-public-body .ir-home-workflow__stage {
  position: relative;
  align-items: center;
  min-width: 0;
  min-height: 108px;
  padding: 18px 24px;
  border-bottom: 1px solid #e0eae3;
  transition: background-color 180ms ease;
}
html body.inrep-public-body .ir-home-workflow__stage:last-child {
  border-bottom: 0;
}
@media (hover: hover) and (pointer: fine) {
  html body.inrep-public-body .ir-home-workflow__stage:hover {
    background: #f6faf7;
  }
}
html body.inrep-public-body .ir-home-workflow__stage-head {
  display: grid;
  justify-items: start;
  gap: 7px;
}
html body.inrep-public-body .ir-home-workflow__stage-head > span {
  color: #769084;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
html body.inrep-public-body .ir-home-workflow__stage-head i {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid #cde6d6;
  border-radius: 50%;
  background: #edf8f1;
  color: #0f6b36;
  font-style: normal;
}
html body.inrep-public-body .ir-home-workflow__owner {
  align-self: center;
  color: #167843;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
html body.inrep-public-body .ir-home-workflow__stage-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}
html body.inrep-public-body .ir-home-workflow__stage h3 {
  margin: 0;
  color: var(--gx-ink, #0b1f17);
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.2;
  letter-spacing: 0;
}
html body.inrep-public-body .ir-home-workflow__stage p {
  margin: 0;
  color: var(--gx-muted, #56675e);
  font-size: 13px;
  line-height: 1.48;
}
html body.inrep-public-body .ir-home-workflow__status {
  align-self: center;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  padding: 5px 0 5px 10px;
  border-left: 2px solid #20b55a;
  color: #315e4b;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

html body.inrep-public-body .ir-home-workflow__evidence {
  display: grid;
  gap: 0;
  margin: auto 0 0;
  padding: 28px 0 0;
  list-style: none;
}
html body.inrep-public-body .ir-home-workflow__evidence li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 2px 10px;
  min-width: 0;
  padding: 14px 0;
  border-top: 1px solid rgba(159, 216, 182, .2);
  color: #9fdeb9;
}
html body.inrep-public-body .ir-home-workflow__evidence li:last-child {
  padding-bottom: 0;
}
html body.inrep-public-body .ir-home-workflow__evidence li > svg {
  grid-row: 1 / 3;
  margin-top: 2px;
}
html body.inrep-public-body .ir-home-workflow__evidence span {
  display: grid;
  gap: 2px;
}
html body.inrep-public-body .ir-home-workflow__evidence strong {
  color: #fff;
  font-size: 13px;
  line-height: 1.35;
}
html body.inrep-public-body .ir-home-workflow__evidence small {
  color: #adc8bd;
  font-size: 12px;
  line-height: 1.4;
}

html body.inrep-public-body .ir-home-workflow__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding-top: clamp(24px, 3vw, 34px);
}
html body.inrep-public-body .ir-home-workflow__actions > div:first-child {
  display: grid;
  gap: 5px;
}
html body.inrep-public-body .ir-home-workflow__actions strong {
  color: var(--gx-ink, #0b1f17);
  font-size: 15px;
  line-height: 1.4;
}
html body.inrep-public-body .ir-home-workflow__actions span {
  color: var(--gx-muted, #56675e);
  font-size: 13.5px;
  line-height: 1.45;
}
html body.inrep-public-body .ir-home-workflow__actions .ds-actions {
  flex: 0 0 auto;
  margin-top: 0;
}
html body.inrep-public-body .ir-home-workflow__actions .ds-btn {
  white-space: nowrap;
}
html body.inrep-public-body .ir-home-workflow__actions .ds-btn svg {
  flex: 0 0 auto;
}

/* The lifecycle section is one flowing claim, not a two-column header
   fighting a stat block for the same vertical space: eyebrow, heading, lead,
   then the two numbers that back the lead sitting directly beneath it as a
   proof strip. The intro's own max-width controls heading wrap, so no
   separate ch-based override is needed per breakpoint. Four capabilities,
   standards, then one decisive CTA follow at full section width. */
html body.inrep-public-body .ir-home-lifecycle .ir-dark-section-inner {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
}
html body.inrep-public-body .ir-home-lifecycle__intro {
  max-width: 700px;
  margin-inline: auto;
  padding-bottom: clamp(32px, 4vw, 48px);
  border-bottom: 0;
  /* Centred per explicit request (2026-08-09) — was deliberately left-aligned
     before that (see the removed comment in git history), but every
     text-bearing descendant still needs its own explicit text-align rather
     than relying only on this one, for the same reason the old left-aligned
     version needed it: a per-line alignment mismatch reappears inside a
     positioned child box otherwise. */
  text-align: center;
}
html body.inrep-public-body .ir-home-lifecycle__intro * {
  text-align: center;
}
html body.inrep-public-body .ir-home-lifecycle__eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  margin-bottom: 14px;
  padding: 4px 9px;
  border: 1px solid rgba(104, 227, 152, .32);
  border-radius: 999px;
  color: #a5efc4;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
html body.inrep-public-body .ir-home-lifecycle h2 {
  /* margin-inline:auto (2026-08-09): this selector's specificity beats the
     generic `.ir-dark-section-inner h2` rule in inrep-public.css, so fixing
     that rule's margin alone was not enough — this one still won and put the
     left/right margin back to 0, leaving the 640px-capped heading flush
     against the left edge of its centered `.ir-home-lifecycle__intro` (max-
     width:700px) wrapper instead of centered inside it. Confirmed live: the
     heading's own box was ~30px left of true centre before this fix. */
  margin: 0 auto 16px;
  font-size: clamp(30px, 3.3vw, 46px);
  line-height: 1.12;
  letter-spacing: -.03em;
}
html body.inrep-public-body .ir-home-lifecycle .ir-ai-lead {
  max-width: 58ch;
  /* margin-inline:auto (2026-08-09): same bug as the h2 above — max-width
     without a centering margin left this ~520px-wide paragraph flush against
     the left edge of its 700px-wide centered parent, shifting its text ~90px
     left of true centre (confirmed live via getClientRects on the actual
     text lines) despite text-align:center already being set. */
  margin: 0 auto clamp(28px, 3.4vw, 40px);
  color: #c5ddcf !important;
  font-size: 16px;
  line-height: 1.65;
}
html body.inrep-public-body .ir-home-lifecycle__facts {
  display: flex;
  align-items: stretch;
  gap: clamp(24px, 3vw, 40px);
  /* Moved out of .ir-home-lifecycle__intro (2026-08-09): that block caps at
     max-width:700px for heading/paragraph readability, which also squeezed
     this row into a narrow left-aligned strip once it grew past 2 stats.
     As a sibling of the intro it now inherits the full section width from
     .ir-dark-section-inner, matching the card grid below it. */
  width: 100%;
  margin: clamp(28px, 3.5vw, 40px) 0 0;
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid rgba(202, 235, 216, .16);
}
html body.inrep-public-body .ir-home-lifecycle__facts > div {
  min-width: 0;
}
html body.inrep-public-body .ir-home-lifecycle__facts-rule {
  flex: 0 0 auto;
  width: 1px;
  background: rgba(202, 235, 216, .18);
}
html body.inrep-public-body .ir-home-lifecycle__facts dd {
  margin: 0;
  color: #fff;
  font-size: clamp(34px, 3.6vw, 46px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
html body.inrep-public-body .ir-home-lifecycle__facts dt {
  margin: 8px 0 0;
  color: #a9c9b7;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}
@media (hover: hover) and (pointer: fine) {
  html body.inrep-public-body .ir-home-lifecycle__facts > div:not(.ir-home-lifecycle__facts-rule) {
    transition:
      color .22s ease,
      transform .22s cubic-bezier(.22, 1, .36, 1);
  }
  html body.inrep-public-body .ir-home-lifecycle__facts > div:not(.ir-home-lifecycle__facts-rule):hover {
    transform: translate3d(0, -3px, 0);
  }
  html body.inrep-public-body .ir-home-lifecycle__facts > div:not(.ir-home-lifecycle__facts-rule):hover dd {
    color: #ffffff;
    text-shadow: 0 10px 28px rgba(104, 227, 152, .18);
  }
  html body.inrep-public-body .ir-home-lifecycle__facts > div:not(.ir-home-lifecycle__facts-rule):hover dt {
    color: #c8f5d8;
  }
}
html body.inrep-public-body .ir-home-lifecycle__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(32px, 4vw, 48px);
}
html body.inrep-public-body .ir-home-lifecycle__cards .ir-dark-card {
  position: relative;
  min-height: 190px;
  padding: 24px;
  border-radius: 12px;
  transition: background .2s, border-color .2s;
}
html body.inrep-public-body .ir-home-lifecycle__cards .ir-dark-card:hover {
  border-color: rgba(165, 239, 196, .38);
  background: rgba(255, 255, 255, .09);
}
html body.inrep-public-body .ir-home-lifecycle__card-index {
  position: absolute;
  top: 20px;
  right: 22px;
  color: rgba(255, 255, 255, .28);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
html body.inrep-public-body .ir-home-lifecycle__cards .ir-dark-card strong {
  display: block;
  margin-top: 18px;
  font-size: 18px;
  line-height: 1.3;
}
html body.inrep-public-body .ir-home-lifecycle__cards .ir-dark-card p {
  max-width: 45ch;
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.58;
}
html body.inrep-public-body .ir-home-lifecycle__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: clamp(30px, 4vw, 48px);
  padding-top: 24px;
  border-top: 1px solid rgba(202, 235, 216, .16);
}
html body.inrep-public-body .ir-home-lifecycle__standards {
  min-width: 0;
  /* The base .ir-dark-section-inner rule (inrep-public.css) sets
     text-align:center on this whole section as its ancestor default —
     .ir-home-lifecycle__intro above deliberately keeps that (it wants the
     header/lead centred), but this footer block must not inherit it: the
     "Aligned with..." line and its standard badges are meant to sit
     flush-left, matching the CTA button's own natural right-side position
     in the flex row above. */
  text-align: left;
}
html body.inrep-public-body .ir-home-lifecycle__standards * {
  text-align: left;
}
html body.inrep-public-body .ir-home-lifecycle__standards > p {
  margin: 0 0 10px;
  color: #d9eee1 !important;
  font-size: 13px;
  font-weight: 600;
}
html body.inrep-public-body .ir-home-lifecycle__standards > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
html body.inrep-public-body .ir-home-lifecycle__standards span {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 4px 9px;
  border: 1px solid rgba(202, 235, 216, .19);
  border-radius: 5px;
  color: #b8d9c5;
  font-size: 12px;
  line-height: 1.3;
}
html body.inrep-public-body .ir-home-lifecycle .ir-dark-section-cta {
  flex: 0 0 auto;
  margin: 0;
}

/* The FAQ needs air between its last answer and the launch decision, not a
   white strip after that decision. The parent padding is reset so the dark
   CTA hands directly to the dark footer. */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-home-faq {
  padding-bottom: 0 !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-home-faq__final {
  /* Section 25's blanket de-card rule sets `margin-block:0 !important` on the
     bare .ir-final-cta class at specificity (0,4,2) (triple `.inrep-public-body`
     prefix + the class itself) — this rule's own single-prefix selector was
     only (0,2,2), so it always lost and this margin never actually applied,
     leaving zero real gap between the FAQ list and the CTA's background
     (confirmed live: their edges measured pixel-identical). Matched to the
     same (0,4,2) specificity here so source order (this rule loads later)
     decides the tie in its favour. */
  margin-top: clamp(56px, 7vw, 88px) !important;
}

@media (max-width: 1100px) {
  html body.inrep-public-body .ir-home-workflow__intro {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  html body.inrep-public-body .ir-home-workflow__intro .ds-editorial__title {
    max-width: 18ch;
  }
  html body.inrep-public-body .ir-home-workflow__assurances {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  html body.inrep-public-body .ir-home-workflow__assurances li {
    align-content: start;
    padding: 16px;
    border-right: 1px solid #dfeae3;
    border-bottom: 0;
  }
  html body.inrep-public-body .ir-home-workflow__assurances li:first-child {
    padding-left: 0;
  }
  html body.inrep-public-body .ir-home-workflow__assurances li:last-child {
    padding-right: 0;
    border-right: 0;
  }
  html body.inrep-public-body .ir-home-workflow__board {
    grid-template-columns: 1fr;
  }
  html body.inrep-public-body .ir-home-workflow__rail {
    padding: 28px;
  }
  html body.inrep-public-body .ir-home-workflow__board-head strong {
    max-width: 18ch;
  }
  html body.inrep-public-body .ir-home-workflow__evidence {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 26px;
    padding-top: 0;
    border-top: 1px solid rgba(159, 216, 182, .2);
  }
  html body.inrep-public-body .ir-home-workflow__evidence li {
    align-content: start;
    padding: 16px;
    border-top: 0;
    border-right: 1px solid rgba(159, 216, 182, .2);
  }
  html body.inrep-public-body .ir-home-workflow__evidence li:first-child {
    padding-left: 0;
  }
  html body.inrep-public-body .ir-home-workflow__evidence li:last-child {
    padding-right: 0;
    border-right: 0;
  }
  html body.inrep-public-body .ir-home-workflow__actions {
    align-items: flex-start;
    flex-direction: column;
  }
  html body.inrep-public-body .ir-home-workflow__actions .ds-actions {
    width: 100%;
  }
}

@media (max-width: 900px) {
  html body.inrep-public-body .ir-home-lifecycle__intro {
    max-width: none;
  }
  html body.inrep-public-body .ir-home-lifecycle__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  html body.inrep-public-body .ir-home-workflow__intro {
    gap: 24px;
  }
  html body.inrep-public-body .ir-home-workflow__assurances {
    grid-template-columns: 1fr;
    margin: 0;
  }
  html body.inrep-public-body .ir-home-workflow__assurances li,
  html body.inrep-public-body .ir-home-workflow__assurances li:first-child,
  html body.inrep-public-body .ir-home-workflow__assurances li:last-child {
    padding: 14px 0;
    border-right: 0;
    border-bottom: 1px solid #dfeae3;
  }
  html body.inrep-public-body .ir-home-workflow__assurances li:last-child {
    border-bottom: 0;
  }
  html body.inrep-public-body .ir-home-workflow__rail {
    padding: 22px 18px;
  }
  html body.inrep-public-body .ir-home-workflow__board-head {
    gap: 10px;
  }
  html body.inrep-public-body .ir-home-workflow__board-head strong {
    font-size: 26px;
  }
  html body.inrep-public-body .ir-home-workflow__evidence {
    grid-template-columns: 1fr;
    margin-top: 22px;
  }
  html body.inrep-public-body .ir-home-workflow__evidence li,
  html body.inrep-public-body .ir-home-workflow__evidence li:first-child,
  html body.inrep-public-body .ir-home-workflow__evidence li:last-child {
    padding: 13px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(159, 216, 182, .2);
  }
  html body.inrep-public-body .ir-home-workflow__evidence li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }
  html body.inrep-public-body .ir-home-workflow__register-head {
    display: none;
  }
  html body.inrep-public-body .ir-home-workflow__stage {
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-areas:
      "marker owner"
      ". copy"
      ". status";
    gap: 8px 12px;
    padding: 20px 18px;
  }
  html body.inrep-public-body .ir-home-workflow__stage-head {
    grid-area: marker;
    gap: 7px;
  }
  html body.inrep-public-body .ir-home-workflow__stage-head i {
    width: 36px;
    height: 36px;
  }
  html body.inrep-public-body .ir-home-workflow__owner {
    grid-area: owner;
    align-self: start;
    margin-top: 2px;
  }
  html body.inrep-public-body .ir-home-workflow__stage-copy {
    grid-area: copy;
  }
  html body.inrep-public-body .ir-home-workflow__status {
    grid-area: status;
  }
  html body.inrep-public-body .ir-home-workflow__actions .ds-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  html body.inrep-public-body .ir-home-workflow__actions .ds-btn {
    width: 100%;
    white-space: normal;
  }
  html body.inrep-public-body .ir-home-lifecycle .ir-dark-section-inner {
    width: min(100% - 40px, 1180px);
  }
  html body.inrep-public-body .ir-home-lifecycle__facts {
    flex-direction: column;
    gap: 18px;
  }
  html body.inrep-public-body .ir-home-lifecycle__facts-rule {
    width: 100%;
    height: 1px;
    --ir-rule-scale-from: scaleX(.16);
  }
  html body.inrep-public-body.ir-motion-ready .ir-home-lifecycle__facts .ir-home-lifecycle__facts-rule {
    --ir-rule-scale-from: scaleX(.16);
  }
  html body.inrep-public-body .ir-home-lifecycle__cards {
    grid-template-columns: 1fr;
  }
  html body.inrep-public-body .ir-home-lifecycle__cards .ir-dark-card {
    min-height: 0;
  }
  html body.inrep-public-body .ir-home-lifecycle__footer {
    align-items: flex-start;
    flex-direction: column;
  }
  html body.inrep-public-body .ir-home-lifecycle .ir-dark-section-cta,
  html body.inrep-public-body .ir-home-lifecycle .ir-dark-section-cta .ir-hero-v2-btn {
    width: 100%;
  }
  html body.inrep-public-body .ir-home-lifecycle .ir-dark-section-cta .ir-hero-v2-btn {
    justify-content: center;
  }
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-home-faq__final {
    margin-top: 48px !important;
  }
}

/* ======================================================================
   49. API + CONTACT HERO VISUALS

   Both are page-specific product illustrations. They describe the actual
   task at hand rather than reusing a stock photo or a generic support SVG.
   ====================================================================== */
html body.inrep-public-body :is(.ir-api-hero-visual, .ir-contact-hero-visual) {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 390px;
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 22px 50px rgba(8, 37, 29, .16);
}

/* API: a compact, recognisable metadata gateway rather than a second generic
   workspace photograph. */
html body.inrep-public-body .ir-api-hero-visual {
  align-content: start;
  gap: 18px;
  padding: 24px;
  background:
    radial-gradient(circle at 92% 4%, rgba(37, 199, 90, .17), transparent 28%),
    #08241a;
  color: #e9f8ee;
}
html body.inrep-public-body .ir-api-hero-visual::after {
  content: '';
  position: absolute;
  right: -46px;
  bottom: -78px;
  width: 240px;
  height: 240px;
  border: 1px solid rgba(137, 240, 177, .16);
  border-radius: 50%;
  box-shadow: 0 0 0 38px rgba(137, 240, 177, .035), 0 0 0 76px rgba(137, 240, 177, .025);
  pointer-events: none;
}
html body.inrep-public-body .ir-api-hero-visual__topbar,
html body.inrep-public-body .ir-api-hero-visual__request,
html body.inrep-public-body .ir-api-hero-visual__formats,
html body.inrep-public-body .ir-api-hero-visual figcaption {
  position: relative;
  z-index: 1;
}
html body.inrep-public-body .ir-api-hero-visual__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #e9f8ee;
  font-size: 13px;
  font-weight: 650;
}
html body.inrep-public-body .ir-api-hero-visual__topbar > span:last-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 25px;
  padding: 4px 8px;
  border: 1px solid rgba(137, 240, 177, .26);
  border-radius: 999px;
  color: #9bf0bf;
  font-size: 11px;
  font-weight: 600;
}
html body.inrep-public-body .ir-api-hero-visual__request {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 14px 16px;
  border: 1px solid rgba(202, 235, 216, .16);
  border-radius: 8px;
  background: rgba(0, 0, 0, .18);
}
html body.inrep-public-body .ir-api-hero-visual__request > span,
html body.inrep-public-body .ir-api-hero-visual__request > strong {
  font-size: 12px;
  font-weight: 700;
}
html body.inrep-public-body .ir-api-hero-visual__request > span { color: #79ebb0; }
html body.inrep-public-body .ir-api-hero-visual__request > strong { color: #bdf5d3; }
html body.inrep-public-body .ir-api-hero-visual__request code {
  min-width: 0;
  overflow: hidden;
  color: #f2fbf5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html body.inrep-public-body .ir-api-hero-visual__formats {
  display: grid;
  gap: 9px;
}
html body.inrep-public-body .ir-api-hero-visual__formats > div {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 54px;
  padding: 10px 12px;
  border: 1px solid rgba(202, 235, 216, .11);
  border-radius: 7px;
  background: rgba(255, 255, 255, .045);
}
html body.inrep-public-body .ir-api-hero-visual__formats > div > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 6px;
  background: rgba(37, 199, 90, .14);
  color: #83edb4;
}
html body.inrep-public-body .ir-api-hero-visual__formats strong {
  color: #fff;
  font-size: 13px;
  font-weight: 650;
}
html body.inrep-public-body .ir-api-hero-visual__formats small {
  color: #b9d8c6;
  font-size: 11px;
  line-height: 1.35;
  text-align: right;
}
html body.inrep-public-body .ir-api-hero-visual figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(202, 235, 216, .14);
  color: #b9d8c6;
  font-size: 12px;
}
html body.inrep-public-body .ir-api-hero-visual figcaption span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
html body.inrep-public-body .ir-api-hero-visual figcaption strong {
  color: #fff;
  font-size: 13px;
}

/* Contact: the visitor sees the routing outcome, not a decorative support
   portrait. Each route maps directly to the real support areas below. */
html body.inrep-public-body .ir-contact-hero-visual {
  align-content: start;
  gap: 16px;
  padding: 26px;
  background:
    radial-gradient(circle at 94% 8%, rgba(37, 199, 90, .24), transparent 25%),
    linear-gradient(145deg, #0c4532, #082d21 62%, #071f17);
  color: #e9f8ee;
}
html body.inrep-public-body .ir-contact-hero-visual::before {
  content: '';
  position: absolute;
  right: 28px;
  top: 58px;
  width: 1px;
  height: 190px;
  background: linear-gradient(transparent, rgba(137, 240, 177, .32), transparent);
}
html body.inrep-public-body .ir-contact-hero-visual__heading,
html body.inrep-public-body .ir-contact-hero-visual__message,
html body.inrep-public-body .ir-contact-hero-visual__routes,
html body.inrep-public-body .ir-contact-hero-visual figcaption {
  position: relative;
  z-index: 1;
}
html body.inrep-public-body .ir-contact-hero-visual__heading {
  display: flex;
  align-items: center;
  gap: 10px;
}
html body.inrep-public-body .ir-contact-hero-visual__heading > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, .1);
  color: #a8f1c6;
}
html body.inrep-public-body .ir-contact-hero-visual__heading strong,
html body.inrep-public-body .ir-contact-hero-visual__message strong,
html body.inrep-public-body .ir-contact-hero-visual__routes strong {
  display: block;
  color: #fff;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.3;
}
html body.inrep-public-body .ir-contact-hero-visual :is(.ir-contact-hero-visual__heading small, .ir-contact-hero-visual__message small, .ir-contact-hero-visual__routes small) {
  display: block;
  margin-top: 2px;
  color: #c2ddcd;
  font-size: 11px;
  line-height: 1.4;
}
html body.inrep-public-body .ir-contact-hero-visual__message {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px;
  border: 1px solid rgba(202, 235, 216, .2);
  border-radius: 8px;
  background: rgba(0, 0, 0, .14);
}
html body.inrep-public-body .ir-contact-hero-visual__message > span { color: #98efbc; }
html body.inrep-public-body .ir-contact-hero-visual__routes {
  display: grid;
  gap: 8px;
}
html body.inrep-public-body .ir-contact-hero-visual__routes > div {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 54px;
  padding: 9px 11px;
  border: 1px solid rgba(202, 235, 216, .12);
  border-radius: 7px;
  background: rgba(255, 255, 255, .055);
}
html body.inrep-public-body .ir-contact-hero-visual__routes > div > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 6px;
  background: rgba(37, 199, 90, .15);
  color: #9bf0bf;
}
html body.inrep-public-body .ir-contact-hero-visual__routes i {
  color: #8beeb7;
  font-style: normal;
}
html body.inrep-public-body .ir-contact-hero-visual figcaption {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 17px;
  border-top: 1px solid rgba(202, 235, 216, .14);
  color: #bfe2cc;
  font-size: 12px;
  font-weight: 600;
}
html body.inrep-public-body .ir-contact-hero-visual figcaption svg { color: #8beeb7; }

@media (max-width: 760px) {
  html body.inrep-public-body :is(.ir-api-hero-visual, .ir-contact-hero-visual) {
    min-height: 0;
    border-radius: 10px;
  }
  html body.inrep-public-body .ir-api-hero-visual {
    gap: 14px;
    padding: 18px;
  }
  html body.inrep-public-body .ir-contact-hero-visual {
    gap: 13px;
    padding: 18px;
  }
  html body.inrep-public-body .ir-api-hero-visual__formats > div {
    grid-template-columns: 30px minmax(0, 1fr);
  }
  html body.inrep-public-body .ir-api-hero-visual__formats small {
    display: none;
  }
  html body.inrep-public-body .ir-api-hero-visual figcaption {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }
  html body.inrep-public-body .ir-contact-hero-visual::before { display: none; }
}

/* ==========================================================================
   48. CHATBOT WIDGET — REPOSITION AWAY FROM THE FOOTER, NEVER HIDE IT
   ==========================================================================
   .site-chatbot-toggle and .site-chatbot-panel are each independently
   position:fixed (inrep-public.css ~3081/~3097), always pinned to the
   bottom-right corner at every breakpoint — including while the footer's own
   "Support" column (Documentation/API docs/FAQ/Contact team/etc., see
   inrep-public-footer.php) occupies that exact same corner once the page is
   scrolled to the bottom. That silently covers those links behind the
   widget with no way to reach them.

   inrep-public.js computes how close the page is to its true bottom (not
   the footer's raw top edge — a tall mobile-stacked footer can be taller
   than the viewport, which made an earlier version of this fix lift the
   widget without bound) and writes the result to --ir-chatbot-lift. These
   rules add that lift on top of each breakpoint's own existing bottom
   offset — reposition, never display:none, so an open conversation is
   never abruptly hidden mid-chat, it just slides up out of the way and
   back down once scrolled away from the bottom. Max specificity +
   !important is required to beat inrep-public.css's own !important bottom
   overrides at 22px (desktop) and 12px (<=820px). */
html body.inrep-public-body.inrep-public-body.inrep-public-body .site-chatbot-toggle,
html body.inrep-public-body.inrep-public-body.inrep-public-body .site-chatbot-panel {
  bottom: calc(22px + var(--ir-chatbot-lift, 0px)) !important;
}
@media (max-width: 820px) {
  html body.inrep-public-body.inrep-public-body.inrep-public-body .site-chatbot-toggle,
  html body.inrep-public-body.inrep-public-body.inrep-public-body .site-chatbot-panel {
    bottom: calc(12px + var(--ir-chatbot-lift, 0px)) !important;
  }
}

/* ==========================================================================
   50. NOTICE / STATUS PAGE COMPONENT (2026-08-09)
   Shared card for one-off single-column notice pages (setup-status,
   quotation-status, onboarding-error, unsubscribe's confirmation state) that
   previously used a bare inline-styled <section> — functionally safe (it
   deliberately avoided .ir-product-hero/.ir-subpage-hero's two-column grid,
   which caused a left-pinned-content bug on exactly this kind of page, see
   the 2026-08-08 changelog entries) but visually looked unfinished next to
   the rest of the site. This is a real, dedicated component instead: a
   centered card with a real border/shadow, an icon whose colour actually
   matches the outcome (success/warning/error/info — not always a green
   checkmark), and consistent spacing. New classes only; nothing here is
   reused by any other part of the site, so it cannot reintroduce the old
   hero-grid bug. */
html body.inrep-public-body .ir-notice-page {
  padding: clamp(56px, 9vh, 112px) 20px;
  display: flex;
  justify-content: center;
}
html body.inrep-public-body .ir-notice-card {
  width: 100%;
  max-width: 560px;
  background: #fff;
  border: 1px solid var(--gx-border);
  border-radius: var(--gx-radius-lg);
  box-shadow: var(--gx-shadow-md);
  padding: clamp(36px, 5vw, 52px) clamp(28px, 5vw, 44px);
  text-align: center;
}
html body.inrep-public-body .ir-notice-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
  background: #eafaf0;
}
html body.inrep-public-body .ir-notice-icon svg { color: #16a34a; }
html body.inrep-public-body .ir-notice-icon.is-warning { background: #fff7e6; }
html body.inrep-public-body .ir-notice-icon.is-warning svg { color: #b45309; }
html body.inrep-public-body .ir-notice-icon.is-error { background: #fef2f2; }
html body.inrep-public-body .ir-notice-icon.is-error svg { color: #dc2626; }
html body.inrep-public-body .ir-notice-icon.is-info { background: #eef2ff; }
html body.inrep-public-body .ir-notice-icon.is-info svg { color: #4f46e5; }
html body.inrep-public-body .ir-notice-card .ir-pill {
  margin-bottom: 18px;
}
html body.inrep-public-body .ir-notice-card h1 {
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 600;
  margin: 0 0 14px;
  color: var(--gx-ink);
}
html body.inrep-public-body .ir-notice-msg {
  color: var(--gx-muted);
  font-size: 16px;
  line-height: 1.6;
  max-width: 440px;
  margin: 0 auto 20px;
}
html body.inrep-public-body .ir-notice-tip {
  background: var(--gx-border-soft);
  border: 1px solid var(--gx-border);
  border-radius: var(--gx-radius-md);
  padding: 12px 16px;
  font-size: 13px;
  color: var(--gx-ink-soft);
  margin: 0 auto 26px;
  max-width: 440px;
}
html body.inrep-public-body .ir-notice-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Proposal review/accept page (2026-08-09). Previously a bare inline-styled <section> whose
   terms table borrowed the admin dashboard's .admin-table class — a class whose first-column
   width (42px, meant for a leading checkbox column in a data table) forced every term label
   here into a vertically letter-wrapped sliver (confirmed live). Built as its own component
   instead of patching the admin class, since a public proposal page and an admin data table
   are genuinely different things that happened to share a class by accident. */
html body.inrep-public-body .ir-proposal-page {
  max-width: 720px;
  margin: clamp(32px, 6vw, 64px) auto;
  padding: 0 20px;
}
html body.inrep-public-body .ir-proposal-card {
  background: #fff;
  border: 1px solid var(--gx-border);
  border-radius: var(--gx-radius-lg);
  box-shadow: var(--gx-shadow-md);
  padding: clamp(24px, 4vw, 40px);
  margin-bottom: 22px;
}
html body.inrep-public-body .ir-terms-list {
  margin: 16px 0 0;
  border-top: 1px solid var(--gx-border);
}
html body.inrep-public-body .ir-terms-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--gx-border);
}
html body.inrep-public-body .ir-terms-row dt {
  color: var(--gx-muted);
  font-size: 14px;
  flex: 0 0 auto;
  margin: 0;
}
html body.inrep-public-body .ir-terms-row dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
  color: var(--gx-ink);
  font-size: 15px;
}

/* ==========================================================================
   FINAL CTA: BACKGROUND PHOTO, SITEWIDE (2026-08-09, generalised same day)

   Originally scoped to .ir-home-faq__final only (the homepage's closing CTA).
   User asked for every page's equivalent closing section to look like the
   homepage's, so this now targets the shared .ir-final-cta class directly —
   every page using this component (about/features/pricing/security/
   solutions/partners/case-studies/etc., see views/public/*.php) picks up the
   identical photo + scrim automatically, with zero per-page markup change.

   .ir-final-cta already carries a decorative ::before radial-glow pseudo
   element (section 30) clipped by overflow:hidden — the photo is applied to
   the element's own `background-image` instead of a second pseudo-element, so
   the two layer cleanly (glow renders on top of the photo, both inside the
   same clipped box). The scrim is a two-stop dark gradient baked into the
   same background-image property (not a separate overlay element), tuned
   dark enough that the existing white heading/light paragraph/button pair
   (all already styled for a dark background, see section 2's .ir-final-cta
   text-color rules) stay at a real contrast ratio against the photo rather
   than a flat colour. library-reading-room.jpg is an institutional
   library setting, directly on-topic for a repository platform's
   closing CTA on any page, not just the homepage. */
/* No seam between the closing band and the footer.
   - The homepage nests the band inside .ir-home-faq, which carries its own 1px light
     bottom border; that border showed as a pale line directly under the photo.
   - The footer overlaps the section above by 1px so a fractional-pixel boundary (zoom 125%/150%)
     can never expose the page background between them.
   - The band uses library-reading-room-cta.jpg: the original has a ~1.5% near-black frame baked in
     that showed as dark strips at the left and right edges when scaled to full width. */
html body.inrep-public-body .ir-home-faq { border-bottom: 0 !important; }
html body.inrep-public-body footer.ir-footer { margin-top: -1px; position: relative; }

html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-final-cta {
  background-image:
    linear-gradient(180deg, rgba(4, 16, 11, .80) 0%, rgba(4, 16, 11, .90) 100%),
    url('/assets/img/library-reading-room-cta.jpg') !important;
  background-size: cover !important;
  background-position: center 30% !important;
  background-repeat: no-repeat !important;
}

/* .ir-home-faq__final is NESTED inside .ir-home-faq (the FAQ section), as the
   last child after .ir-faq-inner — not a top-level main.mkt-page child, so
   section 29's sitewide zero-margin rule and section 27/28's section-level
   padding-block never apply to this seam at all. .ir-final-cta's own
   padding-top (64px) only pushes its INTERNAL heading down from its own top
   edge; it does not put any space between the FAQ section's light background
   and the CTA's dark background, which sat flush with zero gap — measured
   live: faqInner.bottom === cta.top, 0px apart. The CTA now had a busy photo
   background rather than a flat colour, so the abrupt cut read worse than a
   typical colour-block seam. Giving the FAQ side genuine bottom breathing
   room (matching the section's own top padding, for visual symmetry) instead
   of touching the CTA's padding, which exists for its own internal content. */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-home-faq .ir-faq-inner {
  padding-bottom: clamp(40px, 5vw, 64px);
}

/* ==========================================================================
   ABOUT PAGE: FOUR NEW COMPONENT PATTERNS (2026-08-09)

   Four card/section shapes not previously used anywhere on the site, so
   multi-card sections stop looking identical to each other. Every number and
   claim inside them is real (PlatformFacts or existing product behaviour) —
   none of the reference's own figures (its dollar amounts, named companies,
   or its "8.5+ out of 10" customer-satisfaction score with a named reviewer)
   are reproduced; a fabricated testimonial is a banned pattern in this
   codebase's own history (see CLAUDE.md's repeated "no fake reviews/stats"
   entries) and none of the source numbers apply to a repository platform.
   ========================================================================== */

/* 1) Benefit row — alternating photo / tint / dark / photo cards in one strip. */
html body.inrep-public-body .ir-benefit-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(28px, 3.5vw, 40px);
}
html body.inrep-public-body .ir-benefit-card {
  position: relative;
  min-height: 360px;
  border: 1px solid rgba(17, 82, 65, .10);
  border-radius: 16px;
  padding: clamp(24px, 2.4vw, 30px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 16px 34px -28px rgba(7, 28, 21, .42);
}
html body.inrep-public-body .ir-benefit-card strong {
  position: relative;
  z-index: 1;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 10px;
}
html body.inrep-public-body .ir-benefit-card p {
  position: relative;
  z-index: 1;
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0;
}
html body.inrep-public-body .ir-benefit-card--photo {
  background-size: cover;
  background-position: center;
  color: #fff;
  justify-content: flex-end;
}
html body.inrep-public-body .ir-benefit-card--photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 16, 11, .18) 0%, rgba(4, 16, 11, .52) 48%, rgba(4, 16, 11, .94) 100%);
  z-index: -1;
}
html body.inrep-public-body .ir-benefit-card--archive {
  background-image: url('/assets/img/archive-boxes.jpg');
}
html body.inrep-public-body .ir-benefit-card--lecture {
  background-image: url('/assets/img/lecture-hall.jpg');
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-benefit-card--photo strong,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-benefit-card--photo p {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .32);
}
html body.inrep-public-body .ir-benefit-card--tint {
  background: linear-gradient(145deg, #effbf3 0%, var(--gx-mint, #e3f6ea) 100%);
  color: var(--gx-ink, #0a1a12);
  justify-content: flex-start;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-benefit-card--tint p {
  color: #3d554a !important;
}
html body.inrep-public-body .ir-benefit-card--dark {
  background: linear-gradient(150deg, #0d3021 0%, var(--gx-night, #071c15) 100%);
  color: #fff;
  justify-content: flex-start;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-benefit-card--dark p {
  color: #d1e7da !important;
}
@media (max-width: 900px) {
  html body.inrep-public-body .ir-benefit-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  html body.inrep-public-body .ir-benefit-row {
    grid-template-columns: 1fr;
  }
  html body.inrep-public-body .ir-benefit-card {
    min-height: 220px;
  }
}

/* 2) Dark AI showcase — heading + CTA header row, 3 dark cards below. */
html body.inrep-public-body .ir-ai-showcase {
  background: linear-gradient(170deg, #052e16 0%, #0f2d1e 50%, #0a1f14 100%) !important;
  color: #fff;
}
html body.inrep-public-body .ir-ai-showcase__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: clamp(28px, 3.5vw, 40px);
}
html body.inrep-public-body .ir-ai-showcase__head h2 {
  margin: 0;
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 600;
  line-height: 1.2;
  max-width: 640px;
  color: #fff;
}
html body.inrep-public-body .ir-ai-showcase__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
html body.inrep-public-body .ir-ai-showcase__card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  padding: 24px;
}
html body.inrep-public-body .ir-ai-showcase__card .ir-ai-showcase__icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(165, 239, 196, .12);
  color: #a5efc4;
  margin-bottom: 16px;
}
html body.inrep-public-body .ir-ai-showcase__card strong {
  display: block;
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #fff;
}
html body.inrep-public-body .ir-ai-showcase__card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #a9c9b7;
}
@media (max-width: 760px) {
  html body.inrep-public-body .ir-ai-showcase__grid {
    grid-template-columns: 1fr;
  }
}

/* 3) Stat-accuracy row — heading + button header, then a divided stat strip
   (same visual grammar as the reference's "Unmatched Data Accuracy", built
   from the same PlatformFacts source the homepage's own stat row uses so
   the two pages can never disagree with each other). */
html body.inrep-public-body.inrep-public-body.inrep-public-body.inrep-public-body .ir-stat-accuracy {
  position: relative;
  overflow: hidden !important;
  background: linear-gradient(145deg, #f8fcf9 0%, #eef8f1 100%) !important;
  border: 1px solid #dcebe1 !important;
  border-radius: 20px !important;
  box-shadow: 0 28px 60px -48px rgba(6, 48, 31, .42) !important;
  padding: clamp(34px, 5vw, 64px) !important;
}
html body.inrep-public-body .ir-stat-accuracy::before {
  content: '';
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  right: -120px;
  top: -150px;
  background: radial-gradient(circle, rgba(37, 199, 90, .14), rgba(37, 199, 90, 0) 70%);
  pointer-events: none;
}
html body.inrep-public-body .ir-stat-accuracy__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
html body.inrep-public-body .ir-stat-accuracy__copy {
  max-width: 760px;
}
html body.inrep-public-body .ir-stat-accuracy__head h2 {
  margin: 14px 0 0;
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.025em;
}
html body.inrep-public-body .ir-stat-accuracy__head h2 span {
  color: var(--gx-muted, #62736b);
  font-weight: 500;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-stat-accuracy__copy > p {
  max-width: 62ch;
  margin: 14px 0 0;
  color: #435b50 !important;
  font-size: 15px;
  line-height: 1.65;
}
html body.inrep-public-body .ir-stat-accuracy__row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: clamp(30px, 4vw, 46px) 0 0;
  border: 1px solid rgba(17, 82, 65, .13);
  border-radius: 14px;
  background: rgba(255, 255, 255, .68);
  overflow: hidden;
}
html body.inrep-public-body .ir-stat-accuracy__row > div {
  min-width: 0;
  padding: clamp(24px, 3vw, 34px);
  border-right: 1px solid rgba(17, 82, 65, .12);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
}
html body.inrep-public-body .ir-stat-accuracy__row > div:last-child {
  border-right: 0;
}
html body.inrep-public-body .ir-stat-accuracy__row dd {
  order: -1;
  margin: 0;
  font-size: clamp(44px, 5vw, 64px);
  font-weight: 700;
  color: var(--gx-forest, #115241);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
html body.inrep-public-body .ir-stat-accuracy__row dt {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  color: #40584d;
  line-height: 1.45;
}
@media (max-width: 760px) {
  html body.inrep-public-body.inrep-public-body.inrep-public-body.inrep-public-body .ir-stat-accuracy {
    border-radius: 14px !important;
    padding: 30px 20px !important;
  }
  html body.inrep-public-body .ir-stat-accuracy__head {
    align-items: flex-start;
  }
  html body.inrep-public-body .ir-stat-accuracy__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html body.inrep-public-body .ir-stat-accuracy__row > div:nth-child(2n) {
    border-right: 0;
  }
  html body.inrep-public-body .ir-stat-accuracy__row > div {
    border-bottom: 1px solid var(--gx-border, #e2ece5);
    padding: 24px 18px;
  }
  html body.inrep-public-body .ir-stat-accuracy__row > div:nth-last-child(-n+2) {
    border-bottom: 0;
  }
}
@media (max-width: 480px) {
  html body.inrep-public-body .ir-stat-accuracy__row {
    grid-template-columns: 1fr;
  }
  html body.inrep-public-body .ir-stat-accuracy__row > div,
  html body.inrep-public-body .ir-stat-accuracy__row > div:nth-child(2n) {
    border-right: 0;
    border-bottom: 1px solid var(--gx-border, #e2ece5);
  }
  html body.inrep-public-body .ir-stat-accuracy__row > div:last-child {
    border-bottom: 0;
  }
}

/* 4) Expert panel — centred heading, then a light "how support works" mock
   card beside a real photo with a floating fact card over the seam. No
   customer name, quote, or star rating anywhere in this pattern. */
html body.inrep-public-body .ir-expert-panel__head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(28px, 3.5vw, 40px);
}
html body.inrep-public-body .ir-expert-panel__head h2 {
  margin: 0;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
}
html body.inrep-public-body .ir-expert-panel__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}
html body.inrep-public-body .ir-expert-panel__mock {
  background: var(--gx-cream, #f6f7f2);
  border-radius: 14px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
html body.inrep-public-body .ir-expert-panel__mock-figure {
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 700;
  color: var(--gx-ink, #0a1a12);
}
html body.inrep-public-body .ir-expert-panel__mock-label {
  font-size: 14px;
  color: var(--gx-muted, #62736b);
  margin-top: -12px;
}
html body.inrep-public-body .ir-expert-panel__thread {
  background: #fff;
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(10, 26, 18, .06);
}
html body.inrep-public-body .ir-expert-panel__thread p {
  margin: 0 0 10px;
  font-size: 13.5px;
  color: var(--gx-ink, #0a1a12);
  line-height: 1.5;
}
html body.inrep-public-body .ir-expert-panel__thread a.ir-btn {
  width: fit-content;
}
html body.inrep-public-body .ir-expert-panel__photo {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  min-height: 320px;
  margin: 0;
}
html body.inrep-public-body .ir-expert-panel__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
html body.inrep-public-body .ir-expert-panel__photo figcaption {
  position: absolute;
  left: 20px;
  bottom: 20px;
  right: 20px;
  background: rgba(4, 16, 11, .72);
  backdrop-filter: blur(6px);
  border-radius: 10px;
  padding: 16px 18px;
  color: #fff;
}
html body.inrep-public-body .ir-expert-panel__photo figcaption strong {
  display: block;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
}
html body.inrep-public-body .ir-expert-panel__photo figcaption span {
  font-size: 13px;
  color: #cdeedd;
}
@media (max-width: 760px) {
  html body.inrep-public-body .ir-expert-panel__grid {
    grid-template-columns: 1fr;
  }
}

/* Find Your University: directory hero visual and first-viewport spacing polish. */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-fu-hero-visual {
  background: transparent !important;
  display: block !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-fu-collage {
  width: 100%;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-fu-directory-panel {
  display: grid;
  gap: 14px;
  color: #fff;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-fu-directory-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-fu-directory-panel__head strong {
  color: #fff;
  font-size: 15px;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-fu-directory-panel__rows {
  display: grid;
  gap: 10px;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-fu-directory-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 10px;
  background: rgba(255,255,255,.08);
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-fu-directory-row > span.inst-logo:has(img:not([hidden])) {
  background: #fff;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-fu-directory-row > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(110, 231, 165, .16);
  color: #9df1bf;
  font-weight: 700;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-fu-directory-row strong,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-fu-directory-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-fu-directory-row strong {
  color: #fff;
  font-size: 13.5px;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-fu-directory-row small {
  margin-top: 2px;
  color: #b7d8c7;
  font-size: 12px;
}
@media (max-width: 900px) {
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-fu-directory-row strong,
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-fu-directory-row small {
    white-space: normal;
  }
}

/* ======================================================================
   PUBLIC FAQ SYSTEM - ONE ANSWER REGISTER ACROSS EVERY FAQ SURFACE
   ====================================================================== */

html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-section,
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-directory {
  background: #f5f8f6 !important;
  border-top: 1px solid #dce7e0 !important;
  border-bottom: 1px solid #dce7e0 !important;
}

html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-inner {
  width: min(1180px, calc(100% - 48px)) !important;
  margin-inline: auto !important;
  display: grid !important;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr) !important;
  gap: 72px !important;
  align-items: start !important;
}

html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-intro {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 16px !important;
  text-align: left !important;
}

html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-intro .ir-pill {
  margin: 0 0 4px !important;
}

html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-intro h2 {
  max-width: 100%;
  margin: 0 !important;
  color: var(--gx-ink, #0a1a12) !important;
  font-size: 40px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
}

html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-intro > p {
  max-width: 38ch !important;
  margin: 0 !important;
  color: #52665c !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
}

html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-actions {
  display: flex !important;
  flex-flow: row wrap !important;
  gap: 10px !important;
  margin-top: 10px !important;
}

html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-actions .ir-btn {
  width: auto !important;
  min-width: 0 !important;
  min-height: 44px !important;
  height: auto !important;
  padding: 11px 18px !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  white-space: normal !important;
}

html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  min-width: 0;
  counter-reset: inrep-faq-item;
}

html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-list > details.ir-faq-item {
  position: relative !important;
  counter-increment: inrep-faq-item;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-top: 1px solid #cfddd4 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  transition: background-color .2s ease, box-shadow .2s ease !important;
}

html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-list > details.ir-faq-item:last-child {
  border-bottom: 1px solid #cfddd4 !important;
}

html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-list > details.ir-faq-item[open] {
  border-color: #bcd1c4 !important;
  background: #fff !important;
  box-shadow: inset 3px 0 0 var(--gx-green, #25c75a) !important;
}

html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-list > details.ir-faq-item > summary {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 34px !important;
  gap: 16px !important;
  align-items: center !important;
  min-height: 78px !important;
  padding: 18px 16px 18px 18px !important;
  color: var(--gx-ink, #0a1a12) !important;
  font-family: var(--gx-font) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  list-style: none !important;
  cursor: pointer !important;
  transition: color .18s ease !important;
}

html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-list > details.ir-faq-item > summary::-webkit-details-marker {
  display: none !important;
}

html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-list > details.ir-faq-item > summary::before {
  content: counter(inrep-faq-item, decimal-leading-zero);
  color: #708279;
  font-family: var(--gx-font-mono) !important;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-list > details.ir-faq-item > summary::after {
  content: '' !important;
  position: static !important;
  display: block !important;
  width: 34px !important;
  height: 34px !important;
  border: 1px solid #b9cec1;
  border-radius: 50% !important;
  background:
    linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat !important;
  color: var(--gx-forest, #115241) !important;
  opacity: 1 !important;
  transform: none !important;
  transition: border-color .2s ease, background-color .2s ease, transform .25s ease !important;
}

html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-list > details.ir-faq-item[open] > summary {
  color: var(--gx-forest, #115241) !important;
}

html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-list > details.ir-faq-item[open] > summary::after {
  border-color: var(--gx-forest, #115241);
  background:
    linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat !important;
  transform: rotate(180deg) !important;
}

html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-list > details.ir-faq-item > summary:focus-visible {
  z-index: 1;
  outline: 3px solid rgba(37, 199, 90, .28) !important;
  outline-offset: -3px !important;
}

html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-list > details.ir-faq-item > :not(summary) {
  margin: 0 !important;
  padding: 0 70px 0 68px !important;
  color: #53675d !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}

html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-list > details.ir-faq-item > :not(summary) + :not(summary) {
  padding-top: 10px !important;
}

html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-list > details.ir-faq-item > :last-child:not(summary) {
  padding-bottom: 24px !important;
}

html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-list > details.ir-faq-item a {
  color: var(--gx-forest, #115241) !important;
  font-weight: 650;
  text-underline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-list > details.ir-faq-item:not([open]) > summary:hover {
    color: var(--gx-forest, #115241) !important;
    background: rgba(255, 255, 255, .62) !important;
  }
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-list > details.ir-faq-item > summary:hover::after {
    border-color: var(--gx-forest, #115241);
  }
}

/* The directory uses the same intro rail and answer rows as embedded FAQs. */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-hero {
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #dce7e0;
}

html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-hero__inner {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
  padding-block: 64px 56px;
}

html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-hero__inner h1 {
  max-width: 15ch;
  margin: 18px 0 14px !important;
  color: var(--gx-ink, #0a1a12) !important;
  font-size: 52px !important;
  line-height: 1.04 !important;
  letter-spacing: 0 !important;
}

html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-hero__inner > p {
  max-width: 68ch;
  margin: 0;
  color: #52665c;
  font-size: 17px;
  line-height: 1.65;
}

html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-hero__inner > p a {
  color: var(--gx-forest, #115241);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
}

html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-search-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px !important;
  width: min(680px, 100%);
  max-width: none !important;
  margin-top: 28px !important;
}

html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-search-form input[type="search"] {
  width: 100%;
  min-width: 0;
  height: 50px !important;
  border: 1px solid #bfcfc5 !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: var(--gx-ink, #0a1a12) !important;
  box-shadow: none !important;
}

html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-search-form input[type="search"]:focus {
  border-color: var(--gx-forest, #115241) !important;
  outline: 3px solid rgba(37, 199, 90, .2) !important;
  outline-offset: 1px;
}

html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-directory {
  padding-block: 42px 72px !important;
}

html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-directory > * {
  width: min(1180px, calc(100% - 48px)) !important;
  margin-inline: auto !important;
}

html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-filter-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 26px !important;
  padding-bottom: 22px;
  border-bottom: 1px solid #dce7e0;
}

html body.inrep-public-body.inrep-public-body.inrep-public-body a.ir-faq-filter {
  min-height: 38px;
  margin: 0 !important;
  padding: 8px 14px !important;
  justify-content: center;
  white-space: nowrap !important;
}

html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-directory .ir-faq-category-block {
  display: grid !important;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr) !important;
  gap: 72px !important;
  align-items: start !important;
  padding-block: 42px !important;
  border-top: 0 !important;
}

html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-directory .ir-faq-category-block + .ir-faq-category-block {
  border-top: 1px solid #dce7e0 !important;
}

html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-category-intro {
  display: grid;
  gap: 8px;
  align-content: start;
}

html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-category-kicker {
  color: var(--gx-forest, #115241);
  font-family: var(--gx-font-mono) !important;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0;
}

html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-directory .ir-faq-category-heading {
  max-width: 14ch;
  margin: 0 !important;
  color: var(--gx-ink, #0a1a12) !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
}

html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-category-intro p {
  margin: 0;
  color: #708279;
  font-size: 14px;
  line-height: 1.5;
}

@media (min-width: 961px) {
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-section .ir-faq-intro {
    position: sticky;
    top: calc(var(--ir-header-height, 104px) + 24px);
  }
}

@media (max-width: 960px) {
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-inner,
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-directory .ir-faq-category-block {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-intro h2,
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-directory .ir-faq-category-heading {
    max-width: 20ch;
  }
}

@media (max-width: 600px) {
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-inner,
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-hero__inner,
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-directory > * {
    width: min(100% - 32px, 1180px) !important;
  }
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-intro h2 {
    font-size: 32px !important;
  }
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-actions,
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-actions .ir-btn {
    width: 100% !important;
  }
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-actions .ir-btn {
    justify-content: center !important;
  }
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-list > details.ir-faq-item > summary {
    grid-template-columns: 26px minmax(0, 1fr) 32px !important;
    gap: 10px !important;
    min-height: 72px !important;
    padding: 16px 8px 16px 12px !important;
    font-size: 16px !important;
  }
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-list > details.ir-faq-item > summary::after {
    width: 32px !important;
    height: 32px !important;
  }
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-list > details.ir-faq-item > :not(summary) {
    padding-inline: 48px 12px !important;
    font-size: 14.5px !important;
  }
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-hero__inner {
    padding-block: 42px 40px;
  }
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-hero__inner h1 {
    font-size: 38px !important;
  }
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-search-form {
    grid-template-columns: 1fr;
  }
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-search-form .ir-btn {
    width: 100% !important;
    justify-content: center !important;
  }
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-directory {
    padding-block: 28px 52px !important;
  }
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-filter-row {
    width: 100% !important;
    padding-inline: 16px;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    scrollbar-width: thin;
  }
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-directory .ir-faq-category-block {
    padding-block: 34px !important;
  }
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-directory .ir-faq-category-heading {
    font-size: 26px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-list > details.ir-faq-item,
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-list > details.ir-faq-item > summary,
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-faq-list > details.ir-faq-item > summary::after {
    transition: none !important;
  }
}

/* ======================================================================
   HOME + HOW IT WORKS - CALMER CONTENT DENSITY
   ====================================================================== */

html body.inrep-public-body .ir-home-problem__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}

html body.inrep-public-body .ir-home-problem__copy {
  max-width: 620px;
}

/* The headline used to be capped at 14ch, which broke it into seven short lines beside a much
   wider column. Let it use the column and scale with the viewport instead. */
html body.inrep-public-body .ir-home-problem__copy .ds-editorial__title {
  max-width: none;
  margin: 14px 0 22px;
  font-size: clamp(32px, 3.3vw, 44px);
  line-height: 1.12;
  letter-spacing: 0;
  text-wrap: balance;
}

html body.inrep-public-body .ir-home-problem__copy .ds-editorial__lead {
  max-width: 54ch;
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
}

html body.inrep-public-body .ir-home-problem__copy .ds-actions {
  display: flex;
  flex-flow: row wrap;
  margin-top: 30px;
}

html body.inrep-public-body .ir-home-problem__media {
  position: relative;
  min-width: 0;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  border-radius: 6px;
  background: #dce7e0;
}

html body.inrep-public-body .ir-home-problem__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

html body.inrep-public-body .ir-home-problem__media figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  gap: 4px;
  padding: 18px 20px;
  background: rgba(5, 27, 20, .88);
  color: #fff;
}

html body.inrep-public-body .ir-home-problem__media figcaption span {
  color: #9fe3b9;
  font-family: var(--gx-font-mono) !important;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}

html body.inrep-public-body .ir-home-problem__media figcaption strong {
  color: #fff;
  font-size: 16px;
  line-height: 1.35;
}

html body.inrep-public-body .ir-home-problem__signals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 36px 0 0;
  border-top: 1px solid #cfddd4;
  border-bottom: 1px solid #cfddd4;
}

html body.inrep-public-body .ir-home-problem__signals > div {
  display: grid;
  gap: 5px;
  padding: 20px 24px;
}

html body.inrep-public-body .ir-home-problem__signals > div + div {
  border-left: 1px solid #cfddd4;
}

html body.inrep-public-body .ir-home-problem__signals dt {
  color: var(--gx-forest, #115241);
  font-family: var(--gx-font-mono) !important;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: uppercase;
}

html body.inrep-public-body .ir-home-problem__signals dd {
  margin: 0;
  color: var(--gx-ink, #0b1f17);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

html body.inrep-public-body .ir-home-workflow__intro {
  display: block;
  max-width: 760px;
  margin-bottom: 36px;
  text-align: left;
}

html body.inrep-public-body .ir-home-workflow__intro .ds-editorial__title {
  margin-bottom: 16px;
  font-size: 42px;
  line-height: 1.1;
  letter-spacing: 0;
}

html body.inrep-public-body .ir-home-workflow__board {
  grid-template-columns: minmax(250px, .58fr) minmax(0, 1.85fr);
}

html body.inrep-public-body .ir-home-workflow__rail {
  justify-content: flex-start;
  padding: 32px;
}

html body.inrep-public-body .ir-home-workflow__board-head strong {
  font-size: 30px;
  letter-spacing: 0;
}

html body.inrep-public-body .ir-home-workflow__board-head > p {
  max-width: 25ch;
  margin: 10px 0 0;
  color: #b7d4c3;
  font-size: 14px;
  line-height: 1.6;
}

html body.inrep-public-body .ir-home-workflow__stage {
  min-height: 94px;
  padding-block: 15px;
}

html body.inrep-public-body .ir-home-workflow__stage h3 {
  font-size: 18px;
}

html body.inrep-public-body .ir-home-workflow__actions {
  justify-content: flex-start;
  padding-top: 28px;
}

html body.inrep-public-body .ir-home-workflow__actions .ds-actions {
  display: flex;
  flex-flow: row wrap;
  margin: 0;
}

html body.inrep-public-body .ir-home-lifecycle__intro {
  max-width: 720px;
}

html body.inrep-public-body .ir-home-lifecycle__intro .ir-ai-lead {
  max-width: 54ch;
}

html body.inrep-public-body .ir-home-lifecycle__facts {
  max-width: none;
}

html body.inrep-public-body .ir-home-lifecycle__cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 38px;
}

html body.inrep-public-body .ir-home-lifecycle__cards .ir-dark-card {
  min-height: 168px;
}

/* The detailed workflow remains complete, but each stage is now one flat
   register row instead of a card containing another next-step panel. */
html body.inrep-public-body .ir-how-flow-board {
  gap: 34px;
}

html body.inrep-public-body .ir-how-flow-board__head {
  max-width: 720px;
  gap: 12px;
}

html body.inrep-public-body .ir-how-flow-board__head .ds-editorial__title {
  max-width: 15ch;
  font-size: 42px;
  line-height: 1.1;
  letter-spacing: 0;
}

html body.inrep-public-body .ir-how-stage-list {
  display: grid;
  gap: 0;
  max-width: 1040px;
  border-top: 1px solid #cfddd4;
}

html body.inrep-public-body .ir-how-stage-card {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  padding: 26px 0;
  border: 0;
  border-bottom: 1px solid #cfddd4;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html body.inrep-public-body .ir-how-stage-card__marker {
  display: grid;
  grid-template-columns: 22px 38px;
  gap: 10px;
  align-items: center;
  justify-content: start;
}

html body.inrep-public-body .ir-how-stage-card__marker > span {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #708279;
  font-family: var(--gx-font-mono) !important;
  font-size: 11px;
  letter-spacing: 0;
}

html body.inrep-public-body .ir-how-stage-card__marker i {
  width: 38px;
  height: 38px;
  border-radius: 50%;
}

html body.inrep-public-body .ir-how-stage-card__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  margin-bottom: 8px;
}

html body.inrep-public-body .ir-how-stage-card__top > div {
  display: grid;
  gap: 5px;
}

html body.inrep-public-body .ir-how-stage-card__role {
  color: #167843;
  font-family: var(--gx-font-mono) !important;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: uppercase;
}

html body.inrep-public-body .ir-how-stage-card__top h3 {
  font-size: 21px;
  letter-spacing: 0;
}

html body.inrep-public-body .ir-how-stage-card__top > span.ir-how-stage-card__status {
  align-self: start;
  max-width: 220px;
  white-space: normal;
  overflow-wrap: anywhere;
}

html body.inrep-public-body .ir-how-stage-card p {
  max-width: 64ch;
  font-size: 15px;
  line-height: 1.6;
}

html body.inrep-public-body .ir-how-flow-board__actions {
  justify-content: flex-start;
  padding-top: 4px;
}

@media (max-width: 960px) {
  html body.inrep-public-body .ir-home-problem__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  html body.inrep-public-body .ir-home-problem__copy {
    max-width: 720px;
  }
  html body.inrep-public-body .ir-home-problem__media {
    aspect-ratio: 16 / 9;
  }
  html body.inrep-public-body .ir-home-workflow__board {
    grid-template-columns: 1fr;
  }
  html body.inrep-public-body .ir-home-workflow__board-head > p {
    max-width: 48ch;
  }
}

@media (max-width: 720px) {
  html body.inrep-public-body .ir-home-problem__copy .ds-editorial__title,
  html body.inrep-public-body .ir-home-workflow__intro .ds-editorial__title,
  html body.inrep-public-body .ir-how-flow-board__head .ds-editorial__title {
    max-width: none;
    font-size: 34px;
  }
  html body.inrep-public-body .ir-home-problem__signals {
    grid-template-columns: 1fr;
  }
  html body.inrep-public-body .ir-home-problem__signals > div {
    grid-template-columns: 90px minmax(0, 1fr);
    align-items: baseline;
    padding-inline: 0;
  }
  html body.inrep-public-body .ir-home-problem__signals > div + div {
    border-top: 1px solid #cfddd4;
    border-left: 0;
  }
  html body.inrep-public-body .ir-home-lifecycle__cards {
    grid-template-columns: 1fr;
  }
  html body.inrep-public-body .ir-home-lifecycle__cards .ir-dark-card {
    min-height: 0;
  }
  html body.inrep-public-body .ir-how-stage-card {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 14px;
    padding-block: 22px;
  }
  html body.inrep-public-body .ir-how-stage-card__marker {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  html body.inrep-public-body .ir-how-stage-card__top {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  html body.inrep-public-body .ir-how-stage-card__top > span.ir-how-stage-card__status {
    width: fit-content;
  }
}

@media (max-width: 560px) {
  html body.inrep-public-body .ir-home-problem__copy .ds-actions,
  html body.inrep-public-body .ir-home-problem__copy .ds-btn {
    width: 100%;
  }
  html body.inrep-public-body .ir-home-problem__copy .ds-btn {
    justify-content: center;
    white-space: normal;
  }
  html body.inrep-public-body .ir-home-problem__media {
    aspect-ratio: 4 / 3;
  }
  html body.inrep-public-body .ir-home-problem__media figcaption {
    padding: 14px 16px;
  }
  html body.inrep-public-body .ir-home-workflow__rail {
    padding: 24px 20px;
  }
  html body.inrep-public-body .ir-home-workflow__board-head strong {
    font-size: 26px;
  }
  html body.inrep-public-body .ir-home-lifecycle__facts {
    gap: 16px;
  }
  html body.inrep-public-body .ir-how-flow-board__actions .ds-btn {
    width: 100%;
  }
}

/* 2026-10-07: homepage release-day responsive pass.
   The former 1180px hero breakpoint stacked the layout while preserving a
   560px right-aligned image, and the workflow stayed in its desktop register
   until 960px. That combination created large empty areas and clipped-looking
   rows on common laptop widths. Keep those intermediate widths composed, then
   move to purpose-built tablet and mobile layouts. */
html body.inrep-public-body .ir-home-hero-v2,
html body.inrep-public-body .ir-home-workflow,
html body.inrep-public-body .ir-home-lifecycle,
html body.inrep-public-body .ir-home-expert {
  overflow-x: clip;
}

html body.inrep-public-body .ir-home-hero-v2 *,
html body.inrep-public-body .ir-home-workflow *,
html body.inrep-public-body .ir-home-lifecycle *,
html body.inrep-public-body .ir-home-expert * {
  min-width: 0;
}

html body.inrep-public-body .ir-home-lifecycle__facts > div:not(.ir-home-lifecycle__facts-rule) {
  flex: 1 1 0;
}

html body.inrep-public-body .ir-home-workflow__actions > .ds-actions:first-child {
  display: flex;
  width: 100%;
  grid-template-columns: none;
  flex-flow: row wrap;
}

html body.inrep-public-body .ir-compare-wrap:focus-visible,
html body.inrep-public-body .public-table-wrap:focus-visible {
  outline: 3px solid var(--gx-accent, #25c75a);
  outline-offset: 3px;
}

html body.inrep-public-body .ir-home-lifecycle__intro {
  padding-bottom: 0;
}

html body.inrep-public-body .ir-home-lifecycle__intro .ir-ai-lead {
  margin-bottom: 0;
}

html body.inrep-public-body .ir-home-lifecycle__facts {
  margin-top: clamp(28px, 3vw, 36px);
  padding-top: clamp(24px, 2.5vw, 30px);
}

@media (min-width: 901px) and (max-width: 1180px) {
  html body.inrep-public-body .ir-home-hero-v2 .ir-hero-v2-inner {
    width: min(calc(100% - 48px), 1100px);
    grid-template-columns: minmax(0, 1.04fr) minmax(380px, .96fr);
    align-items: center;
    gap: clamp(30px, 4vw, 48px);
    min-height: 470px;
    padding-block: 20px;
  }

  html body.inrep-public-body .ir-home-hero-v2 .ir-hero-v2-copy {
    width: 100%;
    max-width: none;
  }

  html body.inrep-public-body .ir-home-hero-v2 .ir-hero-v2-copy h1,
  html body.inrep-public-body .ir-home-hero-v2 .ir-hero-v2-copy > p,
  html body.inrep-public-body .ir-home-hero-v2 .ir-hero-v2-search {
    max-width: 100%;
  }

  html body.inrep-public-body .ir-home-hero-v2 .ir-hero-v2-actions {
    justify-content: flex-start;
  }

  html body.inrep-public-body .ir-home-hero-v2 .ir-hero-v2-visual,
  html body.inrep-public-body .ir-home-hero-v2 .ir-hero-v2-photo {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  html body.inrep-public-body .ir-home-hero-v2 .ir-hero-v2-photo {
    aspect-ratio: 4 / 3;
  }

  html body.inrep-public-body .ir-home-hero-v2 .ir-hero-v2-photo img {
    height: 100%;
    min-height: 0;
  }

  html body.inrep-public-body .ir-home-workflow__board {
    grid-template-columns: 1fr;
  }

  html body.inrep-public-body .ir-home-workflow__rail {
    padding: 28px 30px;
  }

  html body.inrep-public-body .ir-home-workflow__board-head {
    display: grid;
    grid-template-columns: minmax(360px, .9fr) minmax(0, 1.1fr);
    grid-template-areas:
      "eyebrow state"
      "title copy";
    align-items: start;
    gap: 10px 34px;
  }

  html body.inrep-public-body .ir-home-workflow__board-head > span:first-child {
    grid-area: eyebrow;
  }

  html body.inrep-public-body .ir-home-workflow__board-head > strong {
    grid-area: title;
  }

  html body.inrep-public-body .ir-home-workflow__board-state {
    grid-area: state;
    justify-self: end;
    margin: 0;
  }

  html body.inrep-public-body .ir-home-workflow__board-head > p {
    grid-area: copy;
    max-width: 54ch;
    margin: 0;
  }

  html body.inrep-public-body .ir-home-workflow__actions {
    flex-direction: row;
    align-items: center;
  }

  html body.inrep-public-body .ir-home-workflow__actions > .ds-actions:first-child {
    display: flex;
    width: 100%;
    flex-flow: row nowrap;
    grid-template-columns: none;
  }

  html body.inrep-public-body .ir-home-workflow__actions .ds-btn {
    width: auto;
  }
}

@media (max-width: 900px) {
  html body.inrep-public-body .ir-home-hero-v2 .ir-hero-v2-inner {
    width: min(calc(100% - 40px), 760px);
    grid-template-columns: 1fr;
    gap: 30px;
    min-height: 0;
    padding-block: 24px;
  }

  html body.inrep-public-body .ir-home-hero-v2 .ir-hero-v2-copy,
  html body.inrep-public-body .ir-home-hero-v2 .ir-hero-v2-visual,
  html body.inrep-public-body .ir-home-hero-v2 .ir-hero-v2-photo {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  html body.inrep-public-body .ir-home-hero-v2 .ir-hero-v2-photo {
    aspect-ratio: 16 / 9;
  }

  html body.inrep-public-body .ir-home-hero-v2 .ir-hero-v2-photo img {
    height: 100%;
    min-height: 0;
  }

  html body.inrep-public-body .ir-home-expert .ds-split {
    grid-template-columns: 1fr;
  }

  html body.inrep-public-body .ir-home-expert .ds-split__media img {
    aspect-ratio: 16 / 10;
  }

  html body.inrep-public-body .ir-home-lifecycle__footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (min-width: 621px) and (max-width: 900px) {
  html body.inrep-public-body .ir-home-hero-v2 .ir-hero-v2-search {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    flex-wrap: nowrap;
  }

  html body.inrep-public-body .ir-home-hero-v2 .ir-hero-v2-search-input {
    flex-basis: auto;
  }

  html body.inrep-public-body .ir-home-hero-v2 .ir-hero-v2-search-btn {
    width: auto;
    margin: 0;
  }
}

@media (max-width: 820px) {
  html body.inrep-public-body .ir-home-workflow__register-head {
    display: none;
  }

  html body.inrep-public-body .ir-home-workflow__stage {
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-areas:
      "marker owner"
      ". copy"
      ". status";
    gap: 8px 12px;
    min-height: 0;
    padding: 20px 18px;
  }

  html body.inrep-public-body .ir-home-workflow__stage-head {
    grid-area: marker;
    gap: 7px;
  }

  html body.inrep-public-body .ir-home-workflow__stage-head i {
    width: 36px;
    height: 36px;
  }

  html body.inrep-public-body .ir-home-workflow__owner {
    grid-area: owner;
    align-self: start;
    margin-top: 2px;
  }

  html body.inrep-public-body .ir-home-workflow__stage-copy {
    grid-area: copy;
  }

  html body.inrep-public-body .ir-home-workflow__status {
    grid-area: status;
    width: fit-content;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 720px) {
  html body.inrep-public-body .ir-home-lifecycle__facts > div:not(.ir-home-lifecycle__facts-rule) {
    flex: 1 1 0;
  }
}

@media (max-width: 620px) {
  html body.inrep-public-body .ir-home-hero-v2 .ir-hero-v2-search {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
  }

  html body.inrep-public-body .ir-home-hero-v2 .ir-hero-v2-search-btn {
    grid-column: 1 / -1;
    width: 100%;
    margin: 8px 0 0;
  }

  html body.inrep-public-body .ir-home-hero-v2 .ir-hero-v2-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  html body.inrep-public-body .ir-home-hero-v2 .ir-hero-v2-btn,
  html body.inrep-public-body .ir-home-workflow__actions .ds-actions,
  html body.inrep-public-body .ir-home-workflow__actions .ds-btn {
    width: 100%;
  }

  html body.inrep-public-body .ir-home-workflow__actions > .ds-actions:first-child {
    display: grid;
    grid-template-columns: 1fr;
  }

  html body.inrep-public-body .ir-home-hero-v2 .ir-hero-v2-btn,
  html body.inrep-public-body .ir-home-workflow__actions .ds-btn {
    justify-content: center;
    white-space: normal;
  }

  html body.inrep-public-body .ir-home-lifecycle__facts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  html body.inrep-public-body .ir-home-lifecycle__facts-rule {
    width: 100%;
    height: 1px;
  }
}

@media (max-width: 560px) {
  html body.inrep-public-body .ir-home-hero-v2 .ir-hero-v2-inner {
    width: min(calc(100% - 32px), 760px);
    gap: 24px;
  }

  html body.inrep-public-body .ir-home-hero-v2 .ir-hero-v2-photo {
    aspect-ratio: 4 / 3;
  }
}

/* ---- Homepage trust row: real institution logos (replaces generated initials) ----------------
   Own class (not .ir-hero-v2-avatars) so the older circular-avatar rules cannot crop logos. */
html body.inrep-public-body .ir-hero-v2-trust { flex-wrap: wrap; row-gap: 10px; }
html body.inrep-public-body .ir-hero-v2-logos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; align-items: center; }
html body.inrep-public-body .ir-hero-v2-logos li { display: block; margin: 0; padding: 0; }
html body.inrep-public-body .ir-hero-v2-logos a { display: block; line-height: 0; border-radius: 8px; }
html body.inrep-public-body .ir-hero-v2-logos a:focus-visible { outline: 2px solid var(--ds-accent, #0f6b36); outline-offset: 2px; }
html body.inrep-public-body .ir-hero-v2-logos__mark img { display: block; width: 34px; height: 34px; padding: 5px; background: #fff; border: 1px solid rgba(15, 23, 42, .1); border-radius: 8px; object-fit: contain; }
html body.inrep-public-body .ir-hero-v2-logos .inst-logo { --inst-logo-size: 34px; }
html body.inrep-public-body .ir-hero-v2-logos__more { display: grid !important; place-items: center; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 8px; background: #115241; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; text-decoration: none; }

/* ======================================================================
   CREATE-ACCOUNT PAGES: same look as the login card
   (views/auth/signup-choice.php, student-register.php / researcher-register.php)

   Full-height forest-green page, one white card, the university's own logo and name at the top.
   No Inrep Scholar logo or link anywhere on a university's sign-up pages. The card width is a
   fixed px value (+ max-width) for the same grid-track reason the login card documents above.
   ====================================================================== */
html body.inrep-auth-body:has(.ir-auth-themed) {
  display: block !important;
  padding: 0 !important;
}
html body.inrep-auth-body:has(.ir-auth-themed) > main {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
}
html body.inrep-auth-body .ir-auth-themed {
  min-height: 100vh;
  display: grid;
  justify-items: center;
  align-content: start;
  padding: clamp(24px, 5vw, 56px) 16px 64px !important;
  background: var(--gx-forest, #115241) !important;
}
html body.inrep-auth-body .ir-auth-themed > .ir-sreg-inner,
html body.inrep-auth-body .ir-auth-themed > .ir-wizard-inner {
  width: 620px;
  max-width: calc(100vw - 32px);
  margin: 0 !important;
  padding: 40px 44px 36px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 18px 50px rgba(3, 20, 14, .28);
}
html body.inrep-auth-body .ir-auth-themed .ir-sreg-header {
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid #e3ebe6;
}
html body.inrep-auth-body .ir-auth-themed .ir-sreg-inst-name { font-size: 17px; font-weight: 700; color: #0a1f15; }
html body.inrep-auth-body .ir-auth-themed .ir-sreg-sub { font-size: 13px; color: #5b6b63; }
html body.inrep-auth-body .ir-auth-themed .ir-sreg-header-home { color: #5b6b63; }
html body.inrep-auth-body .ir-auth-themed .ir-sreg-header-home:hover { color: #0f6b36; }
html body.inrep-auth-body .ir-auth-themed .inst-logo,
html body.inrep-auth-body .ir-auth-themed .ir-sreg-brand-mark {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 8px; overflow: hidden;
  display: grid; place-items: center; background: #f1f5f3;
}
html body.inrep-auth-body .ir-auth-themed .inst-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
html body.inrep-auth-body .ir-auth-themed .inst-logo--initials { background: var(--gx-forest, #115241); color: #fff; font-weight: 700; font-size: 15px; }
@media (max-width: 560px) {
  html body.inrep-auth-body .ir-auth-themed > .ir-sreg-inner,
  html body.inrep-auth-body .ir-auth-themed > .ir-wizard-inner { padding: 28px 20px 26px; }
}

/* Header link on verify-email / registration-pending: university logo + name, side by side. */
html body.inrep-auth-body .auth-logo--institution {
  display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: #0a1f15; font-weight: 700; font-size: 17px;
}
html body.inrep-auth-body .auth-logo--institution .inst-logo {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: #f1f5f3;
}
html body.inrep-auth-body .auth-logo--institution .inst-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
html body.inrep-auth-body .auth-logo--institution .inst-logo--initials { background: var(--gx-forest, #115241); color: #fff; font-size: 15px; }

/* Header room for the "Create account" link. inrep-public.css pins the nav grid to a 420px links
   column and a 280px search column with !important, which overflows once a third action sits in the
   header. Between the point where the full nav appears (1181px) and 1440px the grid is made flexible,
   the search box narrows, and below 1280px it is hidden (search stays in the hero and mobile menu). */
@media (min-width: 1181px) and (max-width: 1440px) {
  html body.inrep-public-body .ir-nav,
  html body.inrep-public-body .ir-sticky-shell .ir-nav {
    grid-template-columns: auto minmax(0, 1fr) auto auto !important;
  }
  html body.inrep-public-body .ir-nav-search-form {
    width: clamp(130px, 11vw, 190px) !important;
    min-width: 130px !important;
    max-width: 190px !important;
  }
  html body.inrep-public-body .ir-nav-actions { gap: 8px !important; }
}
@media (min-width: 1181px) and (max-width: 1279px) {
  html body.inrep-public-body .ir-nav,
  html body.inrep-public-body .ir-sticky-shell .ir-nav {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
  }
  html body.inrep-public-body .ir-nav-search-form { display: none !important; }
}

/* ======================================================================
   ACCOUNT FLOW: create-account and every process page (verify, pending, invite, confirm)
   One shared look built on the login card. Pages use .ir-login-shell > .ir-login-card.ir-af-card
   and the .ir-af-* primitives below. The card width is a fixed px value for the same
   grid-track reason the login card documents above.
   ====================================================================== */
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-login-card.ir-af-card {
  width: 580px !important;
  padding: 40px 44px 36px !important;
}
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-login-card.ir-af-card--wide { width: 720px !important; }
html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-login-card.ir-af-card--narrow { width: 460px !important; }
html body.inrep-auth-body:has(.ir-af-card) .ir-login-shell { align-content: start; padding-block: clamp(24px, 5vw, 56px) 64px; }
@media (max-width: 560px) {
  html body.inrep-public-body.inrep-public-body.inrep-public-body .ir-login-card.ir-af-card { padding: 28px 20px 26px !important; }
}

/* Journey indicator: Create account > Verify email > Start */
.ir-af-steps { list-style: none; display: flex; gap: 0; margin: 4px 0 24px; padding: 0; counter-reset: af; }
.ir-af-steps li { flex: 1 1 0; display: grid; justify-items: center; gap: 6px; position: relative; font-size: 12px; font-weight: 600; color: #7a8a82; text-align: center; counter-increment: af; }
.ir-af-steps li::before { content: counter(af); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #eef3f0; color: #5b6b63; font-size: 13px; font-weight: 700; position: relative; z-index: 1; }
.ir-af-steps li:not(:last-child)::after { content: ""; position: absolute; top: 14px; left: calc(50% + 18px); right: calc(-50% + 18px); height: 2px; background: #e3ebe6; }
.ir-af-steps li.is-done { color: #0f6b36; }
.ir-af-steps li.is-done::before { content: "\2713"; background: #2ba05a; color: #fff; }
.ir-af-steps li.is-done:not(:last-child)::after { background: #2ba05a; }
.ir-af-steps li.is-current { color: #0a1f15; }
.ir-af-steps li.is-current::before { background: var(--gx-forest, #115241); color: #fff; box-shadow: 0 0 0 4px rgba(17, 82, 65, .14); }

/* Page heading block */
html body.inrep-public-body .ir-af-card .ir-af-head { margin: 22px 0 22px; }
html body.inrep-public-body .ir-af-card .ir-af-head h1 { margin: 6px 0 8px !important; }
html body.inrep-public-body .ir-af-card .ir-af-head p { margin: 0; color: #53645a; font-size: 15px; line-height: 1.55; }
.ir-af-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; background: var(--gx-mint, #e6f6ec); color: var(--gx-forest, #115241); font-family: var(--gx-font-mono, monospace); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

/* Form primitives */
.ir-af-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; align-items: start; }
.ir-af-form > .ir-af-span, .ir-af-span { grid-column: 1 / -1; }
.ir-af-field { display: grid; gap: 6px; margin: 0; min-width: 0; }
.ir-af-label { font-size: 13px; font-weight: 600; color: #1d2b25; }
.ir-af-opt { font-weight: 500; color: #7a8a82; }
html body.inrep-public-body .ir-af-card h2.ir-af-section { grid-column: 1 / -1; margin: 10px 0 0; padding-top: 18px; border-top: 1px solid #e3ebe6; font: 600 11.5px/1.2 var(--gx-font-mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--gx-forest, #115241); }
html body.inrep-public-body .ir-af-card .ir-af-form > .ir-af-hint + h2.ir-af-section { margin-top: 0; padding-top: 0; border-top: 0; }
html body.inrep-public-body.inrep-public-body .ir-af-card .ir-af-field textarea { width: 100%; min-height: 110px; padding: 12px 14px; border: 1px solid #d7dee2 !important; border-radius: 6px !important; background: #fff; color: #0a1f15; font: 500 15px/1.5 var(--gx-font, inherit); outline: 0; resize: vertical; }
html body.inrep-public-body.inrep-public-body .ir-af-card .ir-af-field textarea:focus { border-color: var(--gx-green, #25c75a) !important; box-shadow: 0 0 0 3px rgba(37, 199, 90, .14); }
html body.inrep-public-body.inrep-public-body .ir-af-card .ir-af-field input:not([type="checkbox"]):not([type="radio"]),
html body.inrep-public-body.inrep-public-body .ir-af-card .ir-af-field select {
  width: 100%; min-height: 52px; padding: 0 14px; border: 1px solid #d7dee2 !important; border-radius: 6px !important;
  background: #fff; color: #0a1f15; font: 500 15px/1.2 var(--gx-font, inherit); outline: 0; box-shadow: none;
}
html body.inrep-public-body.inrep-public-body .ir-af-card .ir-af-field input:focus,
html body.inrep-public-body.inrep-public-body .ir-af-card .ir-af-field select:focus { border-color: var(--gx-green, #25c75a) !important; box-shadow: 0 0 0 3px rgba(37, 199, 90, .14); }
html body.inrep-public-body .ir-af-card .ir-af-field input:disabled { background: #f3f6f4; color: #5b6b63; }
.ir-af-form .form-live-summary { grid-column: 1 / -1; margin: 0; padding: 10px 14px; border-radius: 6px; background: #f1f5f3; color: #3d5247; font-size: 13px; font-weight: 600; line-height: 1.45; }
.ir-af-form .form-live-summary.ok, .ir-af-form .form-live-summary.is-ready { background: #e6f6ec; color: #0f6b36; }
.ir-af-hint { margin: 0; font-size: 12.5px; line-height: 1.45; color: #66746b; }
.ir-af-hint.ok { color: #0f6b36; }
.ir-af-hint.error { color: #b42318; font-weight: 600; }
.ir-af-card .password-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: stretch; }
.ir-af-card .password-toggle { min-width: 64px; border: 1px solid #d7dee2; border-radius: 6px; background: #fff; color: #1d2b25; font-size: 13px; font-weight: 600; cursor: pointer; padding: 0 12px; }
.ir-af-card .password-toggle:hover, .ir-af-card .password-toggle:focus-visible { background: #eef7f1; border-color: #b7ebc8; }
.ir-af-card .password-checklist { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ir-af-card .password-checklist li { padding: 4px 9px; border-radius: 6px; background: #f1f5f3; color: #5b6b63; font-size: 12px; font-weight: 600; }
.ir-af-card .password-checklist li.passed { background: #e6f6ec; color: #0f6b36; }
.ir-af-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.55; color: #33443b; margin: 0; }
html body.inrep-public-body .ir-af-card .ir-af-check input[type="checkbox"] { flex: 0 0 18px; width: 18px; height: 18px; min-height: 18px; margin-top: 2px; accent-color: #2ba05a; }
.ir-af-check a, .ir-af-note a { color: #0f6b36; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ir-af-note { margin: 0; padding: 12px 14px; border-radius: 6px; background: #f1f8f4; border: 1px solid #d9eadf; color: #3d5247; font-size: 13.5px; line-height: 1.5; }
.ir-af-submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 54px; border: 0; border-radius: 6px; background: #2ba05a; color: #fff; font: 600 15px var(--gx-font, inherit); cursor: pointer; text-decoration: none; transition: background .15s, transform .15s; }
.ir-af-submit:hover { background: #24904f; }
.ir-af-submit:active { transform: translateY(1px); }
.ir-af-secondary { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; border: 1.5px solid #d7dee2; border-radius: 6px; background: #fff; color: #1d2b25; font: 600 14.5px var(--gx-font, inherit); cursor: pointer; text-decoration: none; transition: border-color .15s, background .15s; }
.ir-af-secondary:hover { border-color: var(--gx-forest, #115241); background: #f6faf8; }
.ir-af-actions { display: grid; gap: 10px; }
.ir-af-code { text-align: center; letter-spacing: .5em; font-size: 26px !important; font-weight: 600 !important; font-variant-numeric: tabular-nums; }

/* Outcome pages (verified, pending, done) */
.ir-af-status { display: grid; justify-items: center; text-align: center; gap: 4px; margin: 18px 0 8px; }
.ir-af-status-icon { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: #e6f6ec; color: #0f6b36; margin-bottom: 10px; }
.ir-af-status-icon.is-warn { background: #fdf3d6; color: #a15c07; }
.ir-af-status-icon.is-info { background: #e5f0fb; color: #1e5fa8; }
html body.inrep-public-body .ir-af-card .ir-af-status h1 { margin: 0 0 6px !important; }
.ir-af-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ir-af-list li { position: relative; padding-left: 26px; font-size: 14px; line-height: 1.5; color: #3d5247; }
.ir-af-list li::before { content: "\2713"; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: #e6f6ec; color: #0f6b36; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.ir-af-panel { padding: 16px 18px; border-radius: 8px; background: #f6faf8; border: 1px solid #e3ebe6; text-align: left; }
.ir-af-panel h2 { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: #0a1f15; }

/* Choice tiles (Get started) */
.ir-af-choice { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 12px; }
html body.inrep-public-body .ir-af-choice a { display: grid; grid-template-columns: 48px minmax(0, 1fr) 20px; gap: 16px; align-items: center; padding: 16px 18px; border: 1.5px solid #dfe7e2; border-radius: 8px; background: #fff; color: #0a1f15; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
html body.inrep-public-body .ir-af-choice a:hover, html body.inrep-public-body .ir-af-choice a:focus-visible { border-color: var(--gx-forest, #115241); box-shadow: 0 6px 22px rgba(17, 82, 65, .12); transform: translateY(-1px); }
.ir-af-choice-icon { width: 48px; height: 48px; border-radius: 8px; display: grid; place-items: center; background: var(--gx-mint, #e6f6ec); color: var(--gx-forest, #115241); }
.ir-af-choice strong { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 700; }
html body.inrep-public-body .ir-af-choice span.ir-af-choice-text { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.45; color: #5b6b63; }
.ir-af-choice-arrow { color: #8a9a92; transition: transform .15s, color .15s; }
.ir-af-choice a:hover .ir-af-choice-arrow { transform: translateX(3px); color: var(--gx-forest, #115241); }
.ir-af-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0 0; color: #7a8a82; font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.ir-af-divider::before, .ir-af-divider::after { content: ""; flex: 1; height: 1px; background: #e3ebe6; }
@media (max-width: 560px) {
  .ir-af-form { grid-template-columns: 1fr; }
  .ir-af-choice a { grid-template-columns: 40px minmax(0, 1fr) 16px; gap: 12px; padding: 14px; }
  .ir-af-choice-icon { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .ir-af-choice a, .ir-af-choice-arrow, .ir-af-submit { transition: none; }
  .ir-af-choice a:hover { transform: none; }
}