/* ── Reset & Custom Properties ─────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --brand:        #bc4a2d;
  --brand-dark:   #8e3520;
  --brand-light:  #fce8e4;
  --accent:       #bc4a2d;
  --accent-hover: #8e3520;
  --nav-bg:       #111111;
  --success:      #16a34a;
  --warn:         #d97706;
  --text:         #111111;
  --text-muted:   #5a5a5a;
  --border:       #e5e7eb;
  --surface:      #f9f7f6;
  --white:        #ffffff;

  --radius:  8px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow:    0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);

  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-serif: 'Georgia', 'Times New Roman', serif;

  --content-width: 1100px;
  --nav-height: 68px;
}

/* ── Base ───────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--white);
}

h1, h2, h3, h4 {
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.125rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1rem; font-weight: 600; }

p { max-width: 68ch; }
p + p { margin-top: .75rem; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }
picture { display: block; }

ul, ol { padding-left: 1.5rem; }
li + li { margin-top: .35rem; }

/* ── Layout helpers ─────────────────────────────────────── */
.container {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section {
  padding: 5rem 0;
}
.section--alt {
  background: var(--surface);
}
.section--brand {
  background: #111111;
  color: var(--white);
}
.section--brand h2,
.section--brand h3,
.section--brand p { color: var(--white); }

.section__label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: .75rem;
}
.section--brand .section__label {
  color: #f4a28c;
}

.section__header {
  max-width: 700px;
  margin-bottom: 3rem;
}
.section__header p {
  margin-top: .75rem;
  color: var(--text-muted);
  font-size: 1.125rem;
}
.section--brand .section__header p {
  color: rgba(255,255,255,.7);
}

/* Grid */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2rem; }

/* ── Navigation ─────────────────────────────────────────── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-height);
  background: var(--nav-bg);
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}

.site-nav__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.site-nav__logo {
  display: flex;
  align-items: center;
  gap: .625rem;
  text-decoration: none;
  flex-shrink: 0;
}
.site-nav__logo img {
  height: 38px;
  width: auto;
}
.site-nav__logo-text {
  color: var(--white);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: .04em;
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: .25rem;
  list-style: none;
  padding: 0;
}
.site-nav__links li { margin-top: 0; }

.site-nav__links a {
  display: inline-block;
  padding: .5rem .875rem;
  border-radius: var(--radius);
  color: rgba(255,255,255,.85);
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.site-nav__links a:hover {
  background: rgba(255,255,255,.12);
  color: var(--white);
  text-decoration: none;
}
.site-nav__links a[aria-current="page"] {
  background: rgba(255,255,255,.18);
  color: var(--white);
}
.site-nav__links a.nav-cta {
  background: var(--brand);
  color: var(--white);
  font-weight: 700;
  margin-left: .5rem;
}
.site-nav__links a.nav-cta:hover {
  background: var(--brand-dark);
  color: var(--white);
}

/* Mobile nav toggle (simple) */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: .5rem;
  color: var(--white);
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  margin: 4px 0;
  border-radius: 2px;
}

@media (max-width: 768px) {
  .nav-toggle { display: block; }
  .site-nav__links {
    display: none;
    position: absolute;
    top: var(--nav-height);
    left: 0; right: 0;
    background: #000;
    flex-direction: column;
    align-items: stretch;
    padding: .75rem 1.5rem 1rem;
    gap: .25rem;
  }
  .site-nav__links.is-open { display: flex; }
  .site-nav__links a { padding: .625rem 1rem; }
  .site-nav__links a.nav-cta { margin-left: 0; margin-top: .25rem; text-align: center; }
}

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.75rem;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: none; }

.btn--primary {
  background: var(--brand);
  color: var(--white);
  border-color: var(--brand);
}
.btn--primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }

.btn--secondary {
  background: transparent;
  color: var(--brand);
  border-color: var(--brand);
}
.btn--secondary:hover { background: var(--brand-light); }

.btn--white {
  background: var(--white);
  color: #111;
  border-color: var(--white);
}
.btn--white:hover { background: #fce8e4; color: var(--brand); }

.btn--white-outline {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,.6);
}
.btn--white-outline:hover { background: rgba(255,255,255,.1); border-color: var(--white); }

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

/* ── Hero ───────────────────────────────────────────────── */
.hero {
  background: linear-gradient(145deg, #111111 0%, #1f1f1f 55%, #2a1510 100%);
  color: var(--white);
  padding: 6rem 0 5rem;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.hero__eyebrow {
  display: inline-block;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #f4a28c;
  margin-bottom: 1.25rem;
}

.hero h1 {
  color: var(--white);
  max-width: 720px;
  margin-bottom: 1.25rem;
}

.hero__subhead {
  font-size: 1.25rem;
  color: rgba(255,255,255,.8);
  max-width: 560px;
  margin-bottom: 2.25rem;
}

/* Hero split layout: copy on the left, screenshot on the right */
.hero__inner--split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 3.5rem;
  align-items: center;
}

.hero__inner--split h1,
.hero__inner--split .hero__subhead {
  max-width: none;
}

.hero__media {
  position: relative;
}

.hero__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,.6),
    0 18px 36px -18px rgba(0,0,0,.5);
}

@media (max-width: 900px) {
  .hero__inner--split {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .hero__copy { order: 1; }
  .hero__media {
    order: 2;
    max-width: 560px;
    margin: 0 auto;
  }
}

/* ── Cards ──────────────────────────────────────────────── */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
}

.card--elevated {
  box-shadow: var(--shadow);
}

.card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: var(--brand-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  font-size: 1.5rem;
}

.card h3 { margin-bottom: .5rem; }
.card p { color: var(--text-muted); font-size: .9375rem; }

/* ── Value columns ──────────────────────────────────────── */
.value-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 2rem;
  border-top: 4px solid var(--brand);
  box-shadow: var(--shadow);
}
.value-card__audience {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .75rem;
}
.value-card h3 { margin-bottom: .75rem; }
.value-card ul { color: var(--text-muted); font-size: .9375rem; }

/* ── Screenshot frame ───────────────────────────────────── */
.screenshot-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}
.screenshot-frame img {
  width: 100%;
}

/* ── Feature section (text + image side-by-side) ─────────── */
.feature-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.feature-split--reverse { direction: rtl; }
.feature-split--reverse > * { direction: ltr; }

@media (max-width: 768px) {
  .feature-split { grid-template-columns: 1fr; gap: 2rem; }
  .feature-split--reverse { direction: ltr; }
}

.feature-split__text h2 { margin-bottom: 1rem; }
.feature-split__text p { color: var(--text-muted); margin-bottom: 1.5rem; }
.feature-split__text ul {
  color: var(--text-muted);
  font-size: .9375rem;
  margin-bottom: 1.5rem;
}

/* ── Redundant moderation ─────────────────────────────── */
.layer-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.layer-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1.25rem;
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.layer-item__num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.125rem;
  flex-shrink: 0;
}
.layer-item h4 { margin-bottom: .25rem; }
.layer-item p { color: var(--text-muted); font-size: .9375rem; max-width: none; }

/* ── Stat cards ─────────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
}
.stat-card {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  text-align: center;
}
.stat-card__num {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
  margin-bottom: .35rem;
}
.stat-card__label {
  font-size: .875rem;
  color: rgba(255,255,255,.7);
}

/* ── FAQ ────────────────────────────────────────────────── */
.faq-group + .faq-group { margin-top: 3rem; }
.faq-group__title {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 1rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--brand-light);
}

details {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
}
details + details { margin-top: .5rem; }

summary {
  padding: 1rem 1.25rem;
  cursor: pointer;
  font-weight: 600;
  font-size: .9375rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  user-select: none;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: '+';
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform .2s;
}
details[open] summary::after { content: '−'; }

details .answer {
  padding: 0 1.25rem 1rem;
  color: var(--text-muted);
  font-size: .9375rem;
  border-top: 1px solid var(--border);
  padding-top: .875rem;
}
details .answer p + p { margin-top: .5rem; }

/* ── Form ───────────────────────────────────────────────── */
.form-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}

.form-group {
  margin-bottom: 1.25rem;
}
.form-group label {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  margin-bottom: .4rem;
  color: var(--text);
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: .625rem .875rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--white);
  transition: border-color .15s;
  outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(188,74,45,.12);
}
.form-group textarea { resize: vertical; min-height: 100px; }

/* ── Pricing ────────────────────────────────────────────── */
.pricing-card {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow);
  text-align: center;
}
.pricing-card--featured {
  border-color: var(--brand);
  position: relative;
}
.pricing-card__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand);
  color: var(--white);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .3rem 1rem;
  border-radius: 999px;
}
.pricing-card__price {
  font-size: 2.75rem;
  font-weight: 800;
  color: var(--brand);
  line-height: 1;
  margin: 1rem 0 .25rem;
}
.pricing-card__period {
  color: var(--text-muted);
  font-size: .9375rem;
  margin-bottom: 1.5rem;
}
.pricing-card ul {
  list-style: none;
  padding: 0;
  text-align: left;
  margin-bottom: 2rem;
}
.pricing-card ul li {
  padding: .5rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .9375rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.pricing-card ul li::before {
  content: '✓';
  color: var(--success);
  font-weight: 700;
  flex-shrink: 0;
}

/* ── Social proof / pullquote ───────────────────────────── */
.pullquote {
  background: var(--brand-light);
  border-left: 4px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.5rem 2rem;
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--brand-dark);
}
.pullquote cite {
  display: block;
  font-style: normal;
  font-size: .875rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: .75rem;
}

/* ── Team card ──────────────────────────────────────────── */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
}
.team-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
}
.team-card__name {
  font-weight: 700;
  font-size: 1.0625rem;
  margin-bottom: .2rem;
}
.team-card__role {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .75rem;
}
.team-card p { color: var(--text-muted); font-size: .9375rem; }

/* ── Steps / process ────────────────────────────────────── */
.steps {
  counter-reset: step;
  display: grid;
  gap: 1.5rem;
}
.step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 1.25rem;
  align-items: start;
}
.step__num {
  counter-increment: step;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--brand);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.125rem;
  flex-shrink: 0;
}
.step h3 { margin-bottom: .35rem; }
.step p { color: var(--text-muted); font-size: .9375rem; max-width: none; }

/* ── Footer ─────────────────────────────────────────────── */
.site-footer {
  background: #0a0f1f;
  color: rgba(255,255,255,.6);
  padding: 3rem 0 2rem;
  margin-top: 0;
}
.site-footer__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}
.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
  margin-bottom: 1.5rem;
}
.site-footer__brand {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: .04em;
}
.site-footer__tagline {
  font-size: .875rem;
  margin-top: .35rem;
}
.site-footer__links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  flex-wrap: wrap;
  align-items: center;
}
.site-footer__links li { margin-top: 0; }
.site-footer__links a {
  color: rgba(255,255,255,.6);
  font-size: .875rem;
  text-decoration: none;
  transition: color .15s;
}
.site-footer__links a:hover { color: var(--white); text-decoration: none; }
.site-footer__bottom {
  font-size: .8125rem;
  color: rgba(255,255,255,.35);
}

/* ── CTA banner ─────────────────────────────────────────── */
.cta-banner {
  background: linear-gradient(135deg, #0d0d0d 0%, #1c1c1c 50%, #2a1510 100%);
  color: var(--white);
  padding: 5rem 0;
  text-align: center;
}
.cta-banner h2 { color: var(--white); margin-bottom: .75rem; }
.cta-banner p { color: rgba(255,255,255,.75); font-size: 1.125rem; max-width: none; margin: 0 auto 2rem; }

/* ── Inline notice ──────────────────────────────────────── */
.notice {
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  font-size: .9375rem;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}
.notice--info { background: var(--brand-light); border: 1px solid #f4a28c; color: var(--brand-dark); }
.notice--warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }

/* ── Page hero (inner pages) ────────────────────────────── */
.page-hero {
  background: #111111;
  color: var(--white);
  padding: 4rem 0 3.5rem;
}
.page-hero h1 { color: var(--white); margin-bottom: .75rem; }
.page-hero p {
  color: rgba(255,255,255,.8);
  font-size: 1.125rem;
  max-width: 600px;
}

/* ── Moderation infographic ─────────────────────────────── */
.mod-category { margin-bottom: 2rem; }
.mod-category__label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .75rem;
}
.mod-stack {
  display: flex;
  flex-direction: column;
  gap: .625rem;
}
.mod-example {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: 1rem 1.125rem;
  border-radius: 12px;
}
.mod-example p { max-width: none; }
.mod-example--ok {
  background: #d4edda;
  border: 1px solid #a3d5ab;
}
.mod-example--ok .mod-example__text { color: #1b4332; }
.mod-example--flag {
  background: #f8d7da;
  border: 1px solid #e8a8ad;
}
.mod-example--flag .mod-example__text { color: #6b1d2a; }
.mod-example__icon { font-size: 1rem; line-height: 1.5; flex-shrink: 0; }
.mod-example__text {
  font-size: .9375rem;
  font-weight: 500;
  margin-bottom: .5rem;
}
.mod-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.mod-tag {
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 500;
  background: rgba(0,0,0,.07);
}
.mod-tag--ok { color: #2d6a4f; }
.mod-tag--flag { background: rgba(0,0,0,.08); color: #7a1f2e; }

/* ── Utility ────────────────────────────────────────────── */
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-0 { margin-bottom: 0; }
.gap-sm { gap: .75rem; }
.measure { max-width: 720px; }
.measure-wide { max-width: 880px; }


/* ════════════════════════════════════════════════════════════════════
   UNIFIED SITE COMPONENTS
   Appended to the Hub stylesheet. Everything above this line is the
   original PLAID3 Hub design system; everything below extends the same
   tokens to the marketing pages (home, training, videos, news, events).
   ════════════════════════════════════════════════════════════════════ */

:root {
  --navy:        #0d2c82;
  --navy-deep:   #0a2368;
  --navy-tint:   #eef2ff;
  --peach:       #f4a28c;
  --radius-pill: 999px;
}

/* ── Secondary (Hub) sub-navigation ─────────────────────────── */
.subnav {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: var(--nav-height);
  z-index: 90;
}
.subnav__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  gap: .25rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.subnav__inner::-webkit-scrollbar { display: none; }
.subnav__home {
  font-weight: 700;
  color: var(--text);
  padding-right: 1rem;
  margin-right: .25rem;
  border-right: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
}
.subnav a {
  display: inline-block;
  padding: .85rem .8rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.subnav a:hover { color: var(--text); text-decoration: none; }
.subnav a[aria-current="page"] {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

/* ── Breadcrumbs ────────────────────────────────────────────── */
.breadcrumb {
  font-size: .8125rem;
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb__sep { color: var(--text-muted); opacity: .55; }
.breadcrumb__current { color: var(--text-muted); }
.page-hero .breadcrumb a { color: rgba(255,255,255,.7); }
.page-hero .breadcrumb a:hover { color: var(--peach); }
.page-hero .breadcrumb__sep,
.page-hero .breadcrumb__current { color: rgba(255,255,255,.45); }

/* ── Light hero (homepage) ──────────────────────────────────── */
.hero--light {
  background: var(--surface);
  color: var(--text);
}
.hero--light::after { display: none; }
.hero--light h1 { color: var(--text); }
.hero--light .hero__eyebrow { color: var(--brand); }
.hero--light .hero__subhead { color: var(--text-muted); }
.hero--light .hero__media img {
  border-color: var(--border);
  box-shadow: var(--shadow-lg);
}

/* ── Section variants ───────────────────────────────────────── */
.section--navy { background: var(--navy-deep); color: #fff; }
.section--navy h2,
.section--navy h3,
.section--navy p { color: #fff; }
.section--navy .section__label { color: var(--peach); }
.section--tight { padding: 3rem 0; }
.section--strip { padding: 3.25rem 0; }

/* ── Two-door module (home: Hub + Training) ─────────────────── */
.door-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
}
.door-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 4px solid var(--brand);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow);
}
.door-card h3 { font-size: 1.5rem; margin-bottom: .75rem; }
.door-card > p { color: var(--text-muted); font-size: .9375rem; }
.door-card ul {
  color: var(--text-muted);
  font-size: .9375rem;
  margin: 1.25rem 0 1.75rem;
}
.door-card .btn { margin-top: auto; align-self: flex-start; }

/* ── Numbered list (01 / 02 / 03) ───────────────────────────── */
.num-list { display: grid; gap: 1.75rem; }
@media (min-width: 760px) {
  .num-list--row { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}
.num-item__n {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--brand);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: .5rem;
}
.num-item h3 { font-size: 1.0625rem; margin-bottom: .35rem; }
.num-item p { color: var(--text-muted); font-size: .9375rem; }

/* ── Event cards + date chip ────────────────────────────────── */
.events-rail { display: grid; gap: 1rem; }
.event-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.5rem;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s, transform .1s;
}
.event-card:hover { box-shadow: var(--shadow); }
.event-chip {
  width: 78px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  text-align: center;
  flex-shrink: 0;
}
.event-chip__month {
  background: var(--brand);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  padding: .25rem 0;
}
.event-chip__day {
  font-size: 1.625rem;
  font-weight: 800;
  line-height: 1;
  padding: .35rem 0 .1rem;
}
.event-chip__wd {
  font-size: .68rem;
  color: var(--text-muted);
  padding-bottom: .35rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.event-card__body h3 { font-size: 1.0625rem; margin-bottom: .15rem; }
.event-card__body h3 a { color: var(--text); }
.event-card__body h3 a:hover { color: var(--brand); }
.event-card__meta {
  font-size: .8125rem;
  color: var(--text-muted);
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: .35rem;
}
.event-card__desc {
  font-size: .9375rem;
  color: var(--text-muted);
  margin-top: .4rem;
  max-width: 62ch;
}
@media (max-width: 640px) {
  .event-card { grid-template-columns: auto 1fr; }
  .event-card__action { grid-column: 1 / -1; }
  .event-card__action .btn { width: 100%; justify-content: center; }
}

/* ── Featured event ─────────────────────────────────────────── */
.event-featured {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.event-featured__body { padding: 2.5rem; }
.event-featured__flag {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: .75rem;
}
.event-featured__body h3 { font-size: 1.5rem; margin-bottom: .75rem; }
.event-featured__body p { color: var(--text-muted); }
.event-featured__aside {
  background: linear-gradient(160deg, #1f1f1f 0%, #2a1510 100%);
  color: #fff;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}
.event-featured__aside .detail-list__label { color: var(--peach); }
.event-featured__aside .detail-list__value { color: #fff; }
@media (max-width: 720px) {
  .event-featured { grid-template-columns: 1fr; }
}

/* ── Filter bar ─────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 2rem;
  align-items: center;
}
.filter-bar__label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: .25rem;
}
.filter-bar button {
  border: 1.5px solid var(--border);
  background: var(--white);
  border-radius: var(--radius-pill);
  padding: .4rem 1rem;
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.filter-bar button:hover { border-color: var(--brand); color: var(--brand); }
.filter-bar button[aria-pressed="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.is-filtered-out { display: none; }

/* ── Video grid + responsive embed ──────────────────────────── */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}
.video-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  scroll-margin-top: calc(var(--nav-height) + 1.5rem);
}
.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-card__body { padding: 1.5rem; }
.video-card__meta,
.video-meta {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.video-card h3 { font-size: 1.0625rem; margin: .5rem 0; }
.video-card p { font-size: .9375rem; color: var(--text-muted); }
.series-head { margin: 0 0 2rem; }
.series-head h2 { margin-bottom: .35rem; }
.series-head p { color: var(--text-muted); }

/* Clickable thumbnail — a cheap poster that opens the modal player */
.video-thumb {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  aspect-ratio: 16 / 9;
  background: #000;
  cursor: pointer;
}
.video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease, opacity .15s;
}
.video-thumb:hover img { transform: scale(1.04); opacity: .9; }
.video-thumb__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(188, 74, 45, .94);
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  transition: transform .15s, background .15s;
}
.video-thumb:hover .video-thumb__play,
.video-thumb:focus-visible .video-thumb__play {
  transform: scale(1.09);
  background: var(--brand);
}
.video-thumb__play svg { width: 26px; height: 26px; fill: #fff; margin-left: 3px; }
.video-thumb:focus-visible { outline: 3px solid var(--peach); outline-offset: -3px; }
.video-thumb__duration {
  position: absolute;
  right: .55rem;
  bottom: .55rem;
  background: rgba(0, 0, 0, .82);
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  padding: .15rem .5rem;
  border-radius: 4px;
}

/* Modal video player */
.video-modal {
  /* The global "*{margin:0}" reset overrides the UA `dialog{margin:auto}`
     that centres a modal — so position and centre it explicitly. */
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(1200px, 94vw);
  /* Cap the width by viewport height so the 16:9 player never overflows. */
  max-width: calc((100vh - 7rem) * 16 / 9);
  height: fit-content;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.video-modal::backdrop { background: rgba(8, 8, 8, .86); }
.video-modal__inner { position: relative; }
.video-modal .video-embed {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.video-modal__close {
  position: absolute;
  top: -2.85rem;
  right: 0;
  width: 2.3rem;
  height: 2.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background .15s;
}
.video-modal__close:hover { background: rgba(255, 255, 255, .32); }

/* ── Post / news cards ──────────────────────────────────────── */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}
.post-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s, transform .1s;
}
.post-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.post-card__media { display: block; }
.post-card__img {
  width: 100%;
  height: 190px;
  object-fit: cover;
}
.post-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.75rem;
}
.post-card__kicker {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: .5rem;
}
.post-card h3 { font-size: 1.125rem; margin-bottom: .5rem; }
.post-card h3 a { color: var(--text); }
.post-card h3 a:hover { color: var(--brand); }
.post-card p { font-size: .9375rem; color: var(--text-muted); }
.post-card__meta {
  margin-top: auto;
  padding-top: 1.25rem;
  font-size: .8125rem;
  color: var(--text-muted);
}

/* ── Article ────────────────────────────────────────────────── */
.article { padding: 3.5rem 0 1rem; }
.article__inner { max-width: 720px; margin: 0 auto; padding: 0 1.5rem; }
.article__kicker {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: .75rem;
}
.article h1 {
  font-size: clamp(1.875rem, 4vw, 2.5rem);
  margin-bottom: 1rem;
}
.article__lead { font-size: 1.1875rem; color: var(--text-muted); max-width: none; }
.article__meta {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  font-size: .8125rem;
  color: var(--text-muted);
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.article__body { margin-top: 2rem; }
.article__body > p { max-width: none; }
.article__body > p,
.article__body > ul,
.article__body > ol { margin-bottom: 1.1rem; }
.article__body h2 { font-size: 1.5rem; margin: 2.25rem 0 .75rem; }
.article__body h3 { font-size: 1.1875rem; margin: 1.75rem 0 .5rem; }
.article__body img { border-radius: var(--radius); margin: 1.75rem 0; }
.article__body blockquote {
  background: var(--brand-light);
  border-left: 4px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.25rem 1.75rem;
  margin: 1.75rem 0;
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--brand-dark);
}
.article__body blockquote p { max-width: none; margin: 0; }
.article-figure { margin: 2rem 0; }
.article-figure figcaption,
.post-figure figcaption {
  font-size: .8125rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: .6rem;
}
/* Inline article image from {% postimage %} (with an optional caption). */
.post-figure { margin: 1.75rem 0; }
.post-figure img { margin: 0; }

/* Tables inside articles — visible borders, generous padding. */
.article__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.75rem 0;
  font-size: .9375rem;
  border: 1px solid var(--border);
}
.article__body th,
.article__body td {
  padding: .7rem 1rem;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.article__body th {
  background: var(--surface);
  font-weight: 600;
}
.article__body tbody tr:nth-child(even) td {
  background: rgba(0, 0, 0, .02);
}

/* Image lightbox — applied to post images and the article hero. The JS in
   site.js wraps each zoomable image in a .zoomable-wrap and inserts a
   magnifier-icon overlay; this rules covers the affordance + dialog chrome. */
.article .post-image,
.article .article-hero {
  cursor: zoom-in;
}
.article .post-image:focus-visible,
.article .article-hero:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
}
/* The wrap is a <span display:block> because markdown sometimes nests
   bare {% postimage %} output inside a <p>, where a <div> is invalid. */
.zoomable-wrap {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 1.75rem 0;
}
.zoomable-wrap > picture,
.zoomable-wrap > picture > img,
.zoomable-wrap > img { display: block; margin: 0; }
/* When the wrap is nested inside a figure or the hero frame, that parent
   already handles outer spacing — zero the wrap's margin. */
.post-figure .zoomable-wrap,
.screenshot-frame .zoomable-wrap { margin: 0; }
/* Magnifier-icon overlay: purely decorative; click is handled on the img. */
.zoom-hint {
  position: absolute;
  left: .6rem;
  bottom: .6rem;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: rgba(8, 8, 8, .62);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  opacity: .9;
  transition: opacity .15s, transform .15s;
}
.zoom-hint svg { width: 1.15rem; height: 1.15rem; display: block; }
.zoomable-wrap:hover .zoom-hint,
.zoomable-wrap:focus-within .zoom-hint {
  opacity: 1;
  transform: scale(1.08);
}
@media (prefers-reduced-motion: reduce) {
  .zoom-hint { transition: none; }
  .zoomable-wrap:hover .zoom-hint,
  .zoomable-wrap:focus-within .zoom-hint { transform: none; }
}
.image-modal {
  /* Same dialog-centring trick as .video-modal — the global "*{margin:0}"
     reset removes the UA `dialog{margin:auto}`, so we re-add it here. */
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(96vw, 1800px);
  max-height: 96vh;
  height: fit-content;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.image-modal::backdrop { background: rgba(8, 8, 8, .92); }
.image-modal__inner { position: relative; }
.image-modal__slot picture,
.image-modal__slot img {
  display: block;
  max-width: 96vw;
  max-height: 96vh;
  width: auto;
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.image-modal__close {
  position: absolute;
  top: -2.85rem;
  right: 0;
  width: 2.3rem;
  height: 2.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background .15s;
}
.image-modal__close:hover { background: rgba(255, 255, 255, .32); }

/* Fact / stat strip inside articles */
.fact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.25rem;
  margin: 1.75rem 0;
}
.fact {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.fact__n { font-size: 1.75rem; font-weight: 800; color: var(--brand); line-height: 1; }
.fact p { font-size: .875rem; color: var(--text-muted); margin: .4rem 0 0; max-width: none; }

/* ── Tags ───────────────────────────────────────────────────── */
.tag-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.tag {
  display: inline-block;
  padding: .25rem .75rem;
  border-radius: var(--radius-pill);
  background: var(--brand-light);
  color: var(--brand-dark);
  font-size: .75rem;
  font-weight: 600;
}
.tag:hover { text-decoration: none; background: var(--peach); }

/* ── Prev / next pager ──────────────────────────────────────── */
.post-pager {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  border-top: 1px solid var(--border);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
}
.post-pager a { font-weight: 600; font-size: .9375rem; }
.post-pager span {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.post-pager__next { margin-left: auto; text-align: right; }

/* ── Event detail layout ────────────────────────────────────── */
.event-layout {
  display: grid;
  grid-template-columns: 1fr 330px;
  gap: 3rem;
  align-items: start;
}
.event-layout__aside { position: sticky; top: calc(var(--nav-height) + 1.5rem); }
@media (max-width: 860px) {
  .event-layout { grid-template-columns: 1fr; gap: 2rem; }
  .event-layout__aside { position: static; }
}
.detail-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow);
}
.detail-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.detail-list li { margin: 0; }
.detail-list__label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .15rem;
}
.detail-list__value { font-weight: 600; }
.checklist { list-style: none; padding: 0; }
.checklist li {
  position: relative;
  padding: .75rem 0 .75rem 1.75rem;
  border-bottom: 1px solid var(--border);
}
.checklist li:last-child { border-bottom: 0; }
.checklist li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--brand);
  font-weight: 700;
}
.checklist strong { display: block; }
.checklist span { color: var(--text-muted); font-size: .9375rem; }
.share-row { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ── Newsletter embed ───────────────────────────────────────── */
/* kit.com swaps the <script> for its <form>, then a companion script
   measures the form's width to pick a layout (its `min-width` attr).
   Center with auto margins, NOT flexbox: a flex item shrinks to its
   content, which trips kit into the stacked single-column layout. */
.kit-embed .formkit-form { margin-left: auto; margin-right: auto; }

/* kit's "clean" template hard-codes `padding-top: 56px` on the form's
   inner wrapper at wide breakpoints, stranding the intro line far above
   the field. Override it to one controlled gap (kit's CSS is injected
   at runtime, so !important is the reliable lever against it). */
.kit-embed [data-style="clean"] { padding-top: 1.75rem !important; }

/* Encouraging line above the embed. The global `p { max-width: 68ch }`
   leaves a paragraph left-pinned, so auto margins are required to
   actually center the block — text-align alone only centers the text. */
.newsletter-intro {
  max-width: 44rem;
  margin: 0 auto;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
}

/* ── Generic helpers for marketing pages ────────────────────── */
.lead { font-size: 1.1875rem; color: var(--text-muted); }
.empty-state {
  text-align: center;
  color: var(--text-muted);
  padding: 2rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}
.cluster { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.stack-lg > * + * { margin-top: 1.5rem; }
.section__header--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.partner-card h3 { color: var(--brand-dark); }

/* ── Skip link (accessibility) ──────────────────────────────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand);
  color: #fff;
  padding: .65rem 1.1rem;
  font-weight: 600;
  z-index: 200;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* ── Radio / checkbox option rows (Get Started form) ────────── */
.field-set { border: 0; padding: 0; margin: 0 0 1.25rem; }
.field-set legend {
  font-size: .875rem;
  font-weight: 600;
  margin-bottom: .5rem;
  padding: 0;
}
.radio-list { display: flex; flex-direction: column; gap: .5rem; }
.radio-row {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  font-size: .9375rem;
  padding: .6rem .8rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.radio-row:hover { border-color: var(--peach); }
.radio-row input { margin-top: .15rem; flex-shrink: 0; }
.radio-row:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-light);
}

/* Honeypot field — moved off-screen rather than display:none, since some
   bots deliberately skip display:none inputs. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}