/* Hero Section Version sandbox. Full landings must not load this file. */

html:has(> body[data-bd-edition="hero-version"]),
body[data-bd-edition="hero-version"] {
  --bd-bg-page: #F6F6F7;
  /* Match V10: v2.css pins :root --bd-content to 1280px and v10.css
     does not restore 1440. This sandbox does not load v2.css, so pin
     the same column here. */
  --bd-content: 1280px;
  --bd-page-pad: 20px;
  --bd-blue: #2096F4;
  --bd-blue-hi: #63B0F9;
  --bd-green: #038664;
  --bd-green-hi: #57A186;
  --bd-orange: #F79009;
  --bd-orange-hi: #FBAB61;
  --bd-blue-grad: linear-gradient(90deg, var(--bd-blue), var(--bd-blue-hi));
  --bd-green-grad: linear-gradient(90deg, var(--bd-green), var(--bd-green-hi));
  --bd-orange-grad: linear-gradient(90deg, var(--bd-orange), var(--bd-orange-hi));
}

body[data-bd-edition="hero-version"] .bd-nav {
  --bd-bar-bg: #F6F6F7;
  --bd-bar-frost: rgba(246, 246, 247, 0.68);
}

body[data-bd-edition="hero-version"] .bd-nav a.bd-nav__btn--solid {
  box-sizing: border-box;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: var(--bd-text-base, 16px);
  line-height: 1;
}

body[data-bd-edition="hero-version"] .bd-page {
  padding-bottom: 64px;
}

body[data-bd-edition="hero-version"] .bd-hv-kicker {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--bd-text-2, #252B37);
}

body[data-bd-edition="hero-version"] .bd-hero + .bd-hv-kicker {
  margin-top: 48px;
}

/* Sandbox only: 360 numerals at 500. Landing `/` loads hero-v10c
   without this file, so those digits stay display 300. */
body[data-bd-edition="hero-version"] .bd-hero-360__num {
  font-weight: 500;
  font-variation-settings: "wght" 500;
  font-optical-sizing: auto;
}