/* Reusable blocks shared across pages. Numbers from the Figma frames. */

/* ============ section heading ============ */
.sec-head { display: flex; flex-direction: column; gap: 16px; }
.sec-head__eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 13.06px;
  letter-spacing: 1.5px;
  color: var(--red-text);
  text-transform: uppercase;
}
.sec-head__title {
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 38px;
  color: var(--white);
}
.section--bone .sec-head__title { color: var(--ink-soft); }
.section--red .sec-head__title,
.section--red .sec-head__eyebrow { color: var(--ink); }
.sec-head__lede { font-size: 14px; line-height: 21px; color: var(--slate); }
.section--bone .sec-head__lede { color: var(--grey); }


/* ============ shared hero primitives (used by several pages) ============ */
.hero__eyebrow {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 15.23px;
  letter-spacing: 2px;
  color: var(--red-text);
}
.hero__lede { font-size: 16px; line-height: 24px; color: var(--slate); }
.hero__ctas { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.btn--lg { padding: 16px 32px; font-size: 15px; font-weight: 700; line-height: 20px; }
.hero__link {
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--t);
}
.hero__link:hover { color: var(--red); }

/* ============ filter chips ============ */
.chips { display: flex; flex-wrap: wrap; align-self: flex-start; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 15.5px;
  border: 1px solid var(--line-light);
  border-radius: var(--r-4);
  background: var(--white);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
  line-height: 17px;
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.chip:hover { border-color: var(--red); color: var(--red); }
.chip[aria-selected="true"], .chip.is-active {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}
.section--dark .chip { background: var(--surface); border-color: var(--line-dark); color: var(--slate); }
.section--dark .chip:hover { color: var(--white); }
.section--dark .chip.is-active { background: var(--red); border-color: var(--red); color: var(--white); }

/* ============ fixture list ============ */
.fixtures { display: flex; flex-direction: column; }
.fixture {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 81px;
  padding: 20px 0 19px;
  border-bottom: 1px solid var(--line-light);
}
.fixture__main { display: flex; flex-direction: column; gap: 6px; width: 380px; flex: none; min-width: 0; }
.fixture__meta { display: flex; align-items: center; gap: 8px; }
.fixture__sport {
  font-size: 11px;
  font-weight: 800;
  line-height: 14px;
  color: var(--red-text);
  text-transform: uppercase;
}
.fixture__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--grey); flex: none; }
.fixture__time { font-size: 11px; font-weight: 500; line-height: 14px; color: var(--grey); }
.fixture__teams { font-size: 16px; font-weight: 700; line-height: 21px; color: var(--ink-soft); }
.fixture__odds { display: flex; align-items: center; gap: 8px; flex: none; }

.odd {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  padding: 10px 14px;
  border: 1px solid var(--line-light);
  border-radius: var(--r-6);
  background: var(--white);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
  line-height: 17px;
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t-fast);
}
.odd:hover { border-color: var(--red); color: var(--red); }
.odd:active { transform: translateY(1px); }
.odd.is-picked { background: var(--red); border-color: var(--red); color: var(--white); }
.odd--wide { min-width: 90px; }
.odd__label { font-size: 10px; font-weight: 500; color: var(--grey); }
.odd.is-picked .odd__label { color: rgba(255, 255, 255, .8); }

/* ============ bet slip ============ */
.slip {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  width: 320px;
  flex: none;
  align-self: flex-start;
  position: sticky;
  top: 96px;
  background: var(--surface);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-20);
  color: var(--white);
}
.slip__head { display: flex; align-items: center; justify-content: space-between; }
.slip__title { font-family: var(--font-display); font-size: 16px; line-height: 17.41px; color: var(--white); }
.slip__count {
  padding: 2px 8px;
  border-radius: var(--r-4);
  background: var(--red);
  font-size: 10px;
  font-weight: 800;
  line-height: 14px;
  letter-spacing: .04em;
}
.slip__empty { font-size: 13px; line-height: 18px; color: var(--slate); }
.slip__list { display: flex; flex-direction: column; gap: 12px; }
.slip__item { display: flex; flex-direction: column; gap: 6px; }
.slip__item-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.slip__item-name { font-size: 14px; font-weight: 700; line-height: 18.2px; }
.slip__item-market { font-size: 12px; line-height: 16px; color: var(--slate); }
.slip__item-odds { font-size: 16px; font-weight: 800; line-height: 21px; color: var(--red-text); }
.slip__remove {
  color: var(--slate);
  font-size: 18px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: var(--r-4);
  transition: color var(--t), background var(--t);
}
.slip__remove:hover { color: var(--red); background: rgba(255, 255, 255, .06); }
.slip__label {
  font-family: var(--font-display);
  font-size: 11px;
  line-height: 12px;
  letter-spacing: 1px;
  color: var(--slate);
  text-transform: uppercase;
}
.slip__stake {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 45px;
  padding: 12px 16px;
  background: var(--ink);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-8);
  transition: border-color var(--t);
}
.slip__stake:focus-within { border-color: var(--red); }
.slip__stake-symbol { color: var(--slate); font-size: 14px; }
.slip__stake input {
  width: 100%;
  border: 0;
  background: none;
  text-align: right;
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
}
.slip__stake input:focus:not(:focus-visible) { outline: none; }
.slip__stake input:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.slip__quick { display: flex; gap: 8px; }
.slip__quick button {
  flex: 1;
  min-height: 32px;
  border: 1px solid var(--line-dark);
  border-radius: var(--r-6);
  background: var(--ink);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  transition: border-color var(--t), color var(--t);
}
.slip__quick button:hover { border-color: var(--red); color: var(--red); }
.slip__payout { display: flex; align-items: center; justify-content: space-between; }
.slip__payout-value { font-size: 20px; font-weight: 900; line-height: 26px; color: var(--red-text); }
.slip__note { font-size: 11px; line-height: 14.3px; text-align: center; color: var(--slate); }

/* ============ photo cards ============ */
.photo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border-radius: var(--r-24);
  isolation: isolate;
  color: var(--white);
}
.photo-card__media { position: absolute; inset: 0; z-index: -2; }
.photo-card__media img { width: 100%; height: 100%; object-fit: cover; }
.photo-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(9, 10, 15, .25) 0%, rgba(9, 10, 15, .85) 100%);
}
.photo-card--tall { min-height: 460px; padding: 32px; }
.photo-card--race { min-height: 360px; padding: 24px; border: 1.5px solid var(--red); }
.photo-card__kicker {
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 14.14px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.photo-card__title { font-family: var(--font-display); font-size: 40px; line-height: 44px; }
.photo-card__sub { font-size: 13px; line-height: 17px; color: var(--white); }   /* the mockup uses slate here, but our card sits on a brighter photo: 1.8:1 */

/* ============ tiles ============ */
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 218px;
  padding: 20px;
  border-radius: var(--r-16);
  overflow: hidden;
  isolation: isolate;
  color: var(--white);
  transition: transform var(--t), box-shadow var(--t);
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-panel); }
.tile__media { position: absolute; inset: 0; z-index: -2; }
.tile__media img { width: 100%; height: 100%; object-fit: cover; }
.tile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(9, 10, 15, .3) 0%, rgba(9, 10, 15, .8) 100%);
}
.tile__name { font-family: var(--font-display); font-size: 20px; line-height: 22px; }
.tile__sub { font-size: 12px; line-height: 16px; color: var(--white); }

/* ============ light card ============ */
.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: var(--r-16);
  color: var(--ink-soft);
}
.card--lg { gap: 20px; padding: 32px; border-radius: var(--r-20); }
.card__num {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 13px;
  letter-spacing: 1px;
  color: var(--red-text);
}
.card__title { font-family: var(--font-display); font-size: 20px; line-height: 22px; color: var(--ink-soft); }
.card__body { font-size: 14px; line-height: 21px; color: var(--grey); }

.pill--ink { background: var(--ink); color: var(--white); padding: 6px 16px; font-size: 12px; line-height: 16px; }
.pill--bone { background: var(--bone); color: var(--ink); }
.pill--outline { border: 1px solid currentColor; }

/* ============ responsible wagering section ============ */
.rw__inner { display: flex; flex-direction: column; gap: 48px; padding-block: 96px; }
.rw__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
.rw__header-left { display: flex; flex-direction: column; gap: 12px; width: 440px; flex: none; }
.rw__eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 13.06px;
  letter-spacing: 1.5px;
  color: var(--red-text);
}
.rw__title { font-size: 44px; line-height: 46px; color: var(--ink-soft); }
.rw__lede { width: 680px; flex: none; font-size: 16px; line-height: 26px; color: var(--grey); }
.rw__grid { display: flex; align-items: flex-start; gap: 24px; }
.rw__stack { display: flex; flex-direction: column; gap: 20px; width: 440px; flex: none; }
.rw-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: var(--white);
  border-radius: var(--r-16);
  transition: box-shadow var(--t);
}
.rw-card:hover { box-shadow: 0 0 0 1px var(--red), 0 8px 24px rgba(9, 10, 15, .06); }
.rw-card--wide { flex: 1; gap: 20px; padding: 32px; border-radius: var(--r-20); }
.rw-card__num {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 15.23px;
  color: var(--red-text);
}
.rw-card__title { font-family: var(--font-display); font-size: 18px; line-height: 20px; color: var(--ink-soft); }
.rw-card--wide .rw-card__title { font-size: 22px; line-height: 24px; }
.rw-card__body { font-size: 13px; line-height: 17px; color: var(--grey); }
.rw-card--wide .rw-card__body { font-size: 14px; line-height: 21px; }
.rw-card__preview {
  padding: 16px;
  background: var(--bone);
  border-radius: var(--r-8);
}
.rw-card__preview-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; line-height: 16px; }
.rw-card__preview-label {
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  color: var(--ink-soft);
}
.rw-card__preview-value { font-size: 12px; font-weight: 700; line-height: 16px; color: var(--red-text); }
.rw__support {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 84px;
  padding: 24px;
  background: var(--white);
  border-radius: var(--r-16);
}
.rw__support-text { display: flex; flex-direction: column; gap: 4px; }
.rw__support-title { font-family: var(--font-display); font-size: 14px; line-height: 15.23px; color: var(--ink-soft); }
.rw__support-body { font-size: 13px; line-height: 17px; color: var(--grey); }
.rw__support-body a { color: var(--red); font-weight: 700; }
.rw__support-actions { display: flex; align-items: center; gap: 12px; flex: none; }

@media (max-width: 1199px) {
  .sec-head__title { font-size: 28px; line-height: 30.5px; }
  .fixture { flex-direction: column; align-items: stretch; gap: 12px; padding-block: 16px; min-height: 0; }
  .fixture__main { width: auto; }
  .fixture__odds { gap: 8px; }
  .fixture__odds .odd { flex: 1; }
  .fixture__teams { font-size: 15px; line-height: 20px; }
  .slip { position: static; width: 100%; padding: 20px; }
  .photo-card--tall { min-height: 320px; padding: 20px; }
  .photo-card__title { font-size: 28px; line-height: 30.5px; }
  .tile { min-height: 160px; padding: 16px; }

  .rw__inner { gap: 24px; padding-block: 32px; }
  .rw__header { flex-direction: column; align-items: stretch; gap: 12px; }
  .rw__header-left, .rw__lede, .rw__stack { width: auto; }
  .rw__title { font-size: 28px; line-height: 30.5px; }
  .rw__lede { font-size: 14px; line-height: 22px; }
  .rw__grid { flex-direction: column; gap: 16px; }
  .rw-card--wide { padding: 24px; }
  .rw-card--wide .rw-card__title { font-size: 22px; line-height: 24px; }
  .rw__support { flex-direction: column; align-items: flex-start; gap: 16px; min-height: 0; padding: 20px; }
}

/* ============ tap targets (WCAG 2.2 AA, 2.5.8) ============
   Standalone text links keep the mockup's line box on desktop and grow to a
   24px target on touch widths, where the guideline actually bites. */
.link-arrow,
.board-row__more,
.featured__link,
.market-panel__more,
.help-now__site,
.quick-help__go,
.promo-cats__view,
.auth-form__forgot,
.sd-cta__link,
.promo-card__link,
.hero__link,
.status-strip__link,
.site-header__login,
.help-tag,
.slip__remove,
.limit-panel__cancel { position: relative; }

.link-arrow::before,
.board-row__more::before,
.featured__link::before,
.market-panel__more::before,
.help-now__site::before,
.auth-form__forgot::before,
.sd-cta__link::before,
.promo-card__link::before,
.hero__link::before,
.status-strip__link::before,
.site-header__login::before,
.limit-panel__cancel::before {
  content: '';
  position: absolute;
  inset: -6px -4px;
}

@media (max-width: 1199px) {
  .link-arrow,
  .board-row__more,
  .featured__link,
  .market-panel__more,
  .help-now__site,
  .auth-form__forgot,
  .sd-cta__link,
  .promo-card__link,
  .hero__link,
  .status-strip__link,
  .site-header__login {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
  }
}

/* ---- form fields (shared by the modals, the contact form and the limit panel) ---- */
/* ---- fields ---- */
.auth-form { display: flex; flex-direction: column; gap: 18px; }
.auth-form--grid { gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.field__label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.field__label {
  font-family: var(--font-display);
  font-size: 11px;
  line-height: 12px;
  letter-spacing: 1px;
  color: var(--slate);
}
.modal__panel--auth .field__label,
.modal__panel--slim .field__label {
  font-family: var(--font-body);
  font-weight: 800;
  line-height: 14.3px;
  letter-spacing: 1.5px;
  color: var(--bone);
  opacity: .5;
}
.field__hint { font-size: 11px; color: var(--slate); }
.field__badge {
  padding: 2px 6px;
  border: 1px solid var(--green-bright);
  border-radius: var(--r-4);
  background: rgba(0, 255, 136, .1);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--green-bright);
}
.field__control {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 16px;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--r-8);
  transition: border-color var(--t), background var(--t);
}
.modal__panel--auth .field__control,
.modal__panel--slim .field__control {
  min-height: 58px;
  background: #1a1a1a;
  border-color: #333333;
  border-radius: var(--r-10);
}
.field__control:focus-within { border-color: var(--red); }
.field__control input,
.field__control select {
  width: 100%;
  min-width: 0;
  border: 0;
  background: none;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  color: var(--bone);
}
.modal__panel--auth .field__control input { font-size: 16px; font-weight: 400; line-height: 21px; }
/* Pointer focus leans on the container's red border; keyboard focus gets a real
   ring, because a 1px border change is not enough to track 11 fields by tab. */
.field__control input:focus:not(:focus-visible),
.field__control select:focus:not(:focus-visible),
.field__control textarea:focus:not(:focus-visible) { outline: none; }
.field__control input:focus-visible,
.field__control select:focus-visible,
.field__control textarea:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}
.field__control input::placeholder { color: #6b7280; }
.field__control--select { position: relative; }
.field__control select {
  appearance: none;
  cursor: pointer;
  padding-right: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M3.5 5.5L7 9l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 14px;
}
.field__control select option { background: #14141a; color: var(--bone); }
.field__reveal {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--slate);
  transition: color var(--t);
}
.modal__panel--auth .field__reveal { font-size: 13px; line-height: 17px; color: var(--red-text); }
.field__reveal:hover { color: var(--red); }
.field__error { font-size: 12px; line-height: 16px; color: #ff6b81; }
.field.has-error .field__control { border-color: #ff6b81; }
.form-error {
  padding: 12px 16px;
  border: 1px solid rgba(255, 107, 129, .4);
  border-radius: var(--r-8);
  background: rgba(255, 107, 129, .08);
  font-size: 13px;
  line-height: 18px;
  color: #ff9aa9;
}
.field-row { display: flex; gap: 16px; }
.field-row--3 { gap: 12px; }
.field--state { flex: none; width: 130px; }
.field--postcode { flex: none; width: 140px; }

.auth-form__forgot {
  align-self: flex-start;
  font-size: 13px;
  line-height: 17px;
  color: var(--red-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.btn-auth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 60px;
  border-radius: var(--r-10);
  background: var(--red);
  color: var(--bone);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 17.41px;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: background var(--t), box-shadow var(--t), transform var(--t-fast);
}
.btn-auth:hover { background: var(--red-dark); box-shadow: var(--shadow-red); }
.btn-auth:active { transform: translateY(1px); }
.btn-auth[disabled] { opacity: .6; cursor: progress; }
.btn-auth--outline {
  min-height: 52px;
  background: none;
  border: 1px solid #4b5563;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
}
.btn-auth--outline:hover { background: rgba(255, 255, 255, .04); border-color: var(--red); box-shadow: none; }

.auth-divider { display: flex; align-items: center; gap: 12px; color: var(--grey); font-size: 12px; }
.auth-divider::before,
.auth-divider::after { content: ''; flex: 1; height: 1px; background: #333333; }

.auth-join { display: flex; flex-direction: column; gap: 12px; }
.auth-join__title { font-size: 15px; font-weight: 500; line-height: 20px; color: var(--bone); }
.auth-join__sub { font-size: 13px; line-height: 17px; color: var(--slate); margin-top: -8px; }
.auth-fine { font-size: 11px; line-height: 14.3px; text-align: center; color: var(--grey); opacity: .8; }
.auth-fine--left { text-align: left; }
.auth-inline-link { color: var(--red-text); font-weight: 800; font-size: 11px; letter-spacing: .04em; }
.auth-support {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid #222222;
  font-size: 12px;
  color: var(--slate);
}
.auth-support a { color: var(--slate); }
.auth-support a:hover { color: var(--red); }


@media (max-width: 1199px) {
  .field-row { flex-direction: column; gap: 16px; }
  .field-row--3 { flex-direction: row; flex-wrap: wrap; }
  .field--state, .field--postcode { width: calc(50% - 6px); }
  .field__control, .modal__panel--auth .field__control { min-height: 50px; }
  .pref { flex-direction: row; gap: 16px; padding: 16px; }

}

/* ============ touch targets ============
   WCAG 2.2 AA asks for 24×24 and that is met everywhere. On touch widths the
   controls people actually tap are taken to 44×44: standalone controls grow,
   controls whose size is fixed by the design keep their looks and grow only
   their hit area. Links inside a sentence are left alone — the spec exempts
   them, and padding them would break the line box. */
@media (max-width: 1199px) {
  .chip,
  .sport-chip,
  .sport-chip--sm,
  .help-tag,
  .racing-link,
  .odd,
  .link-arrow,
  .board-row__more,
  .market-panel__more,
  .featured__link,
  .status-strip__link,
  .hero__link,
  .help-now__site,
  .rg-check__phone,
  .promo-cats__view,
  .quick-help__go {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .link-arrow,
  .board-row__more,
  .market-panel__more { justify-content: flex-start; }
  .board-row__more { justify-content: flex-end; }

  /* fixed-size by design: grow the hit area, not the box */
  .brand,
  .site-header__login,
  .site-header__actions .btn--sm,
  .burger { position: relative; }
  .brand::after,
  .site-header__login::after,
  .site-header__actions .btn--sm::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }

  /* the field wrapper is 50–56px tall; let the control fill it so the whole
     box is tappable, not just the text line */
  .field__control input,
  .field__control select,
  .help-search input,
  .slip__stake input {
    min-height: 44px;
  }
  .field__control--area textarea { min-height: 44px; }
}

/* ---- word-level accents the mockup paints inside a line ----
   Figma stores these as per-character style overrides; they are part of the
   design, not decoration: the accent word carries the emphasis. */
.hl { color: var(--red); }
.hl-sm { color: var(--red-text); font-weight: 700; }
.hl-strong { color: var(--red-text); font-weight: 800; }
.vs { color: var(--grey); font-weight: 400; }
.on-dark .vs, .scoreboard__match .vs { color: var(--slate); }
.lead-strong { color: var(--white); font-weight: 700; }