/* Selected concept 6, Light returns. The photograph is illustrative;
   all copy and controls are live HTML. Prior studies remain available. */
.hero-backdrop { display: none; }
body[data-hero-version='4'] {
  --hero-paper: #182016;
  --hero-ink: #faf9ed;
  --hero-muted: #e1e4d5;
  --hero-rule: #57604d;
  --hero-lime: #def79b;
  padding-top: 0;
}
body[data-hero-version='4'] .site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
  background: linear-gradient(rgb(8 17 7 / 62%), transparent);
}
body[data-hero-version='4'] .site-header > .container {
  width: min(1520px, calc(100% - 112px));
  min-height: 82px;
  border: 0;
}
body[data-hero-version='4'] .site-header .brand {
  font: 550 24px/1.2 Manrope, sans-serif;
  letter-spacing: -.9px;
}
[data-hero-version='4'] .site-header .brand em { font-style: normal; }
[data-hero-version='4'] .brand-period { display: none; }
body[data-hero-version='4'] .header-nav { font-size: 14px; gap: 30px; }
[data-hero-version='4'] .hero-lab { overflow: clip; isolation: isolate; }
[data-hero-version='4'] .hero-frame {
  --scene-top: 116px;
  position: relative;
  width: min(1520px, calc(100% - 112px));
  padding: var(--scene-top) 0 40px;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 18px 42px;
}
[data-hero-version='4'] .hero-backdrop {
  display: block;
  position: absolute;
  grid-area: 1 / 1 / 6 / 3;
  z-index: -1;
  top: calc(-1 * var(--scene-top));
  bottom: -42px;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #182016;
  pointer-events: none;
}
[data-hero-version='4'] .hero-backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: center 46%; }
[data-hero-version='4'] .hero-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(8 17 7 / 57%), rgb(8 17 7 / 28%) 43%, transparent 70%), linear-gradient(0deg, rgb(10 19 8 / 28%), transparent 35%);
}
[data-hero-version='4'] .hero-heading-block { grid-area: 1 / 1; margin: 0; padding: 0; border: 0; }
[data-hero-version='4'] .hero-audience { margin: 0 0 23px; max-width: none; font-size: 14px; line-height: 1.5; letter-spacing: 0; color: #faf9ed; }
[data-hero-version='4'] .hero-heading-block h1 {
  font: 600 clamp(64px, min(6.4vw, 9.8svh), 106px)/.99 Manrope, sans-serif;
  letter-spacing: -.05em;
}
[data-hero-version='4'] .hero-yourself,
[data-hero-version='4'] .hero-time-start,
[data-hero-version='4'] .hero-time-end { display: block; }
[data-hero-version='4'] .hero-heading-block h1 > em { font-style: normal; font-weight: 650; color: var(--hero-lime); }
[data-hero-version='4'] .hero-deck { grid-area: 2 / 1; margin-top: 8px; font: 450 23px/1.35 Manrope, sans-serif; letter-spacing: -.035em; }
[data-hero-version='4'] .hero-summary { grid-area: 3 / 1; max-width: 530px; font-size: 15px; line-height: 1.6; color: #f0f0e5; }
[data-hero-version='4'] .hero-summary strong { font-weight: 500; }
[data-hero-version='4'] .hero-action {
  grid-area: 4 / 1;
  position: relative;
  display: block;
  width: min(415px, 100%);
  max-width: none;
  margin-top: 9px;
  padding: 0;
  border: 0;
}
[data-hero-version='4'] .hero-buy {
  width: 100%;
  min-width: 0;
  min-height: 82px;
  align-items: start;
  padding: 17px 27px 34px;
  border: 1px solid var(--hero-lime);
  border-radius: 7px;
  color: #16200e;
  background: var(--hero-lime);
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -.5px;
}
[data-hero-version='4'] .hero-buy:hover { background: #ebffbc; border-color: #ebffbc; }
[data-hero-version='4'] .hero-buy svg { width: 22px; height: 22px; margin-top: 2px; }
[data-hero-version='4'] .hero-payment-note { position: absolute; left: 28px; bottom: 11px; margin: 0; color: #24301b; font-size: 13px; pointer-events: none; }
[data-hero-version='4'] .hero-film {
  grid-area: 1 / 2 / 5 / 3;
  align-self: center;
  justify-self: start;
  width: 210px;
  margin-left: -4px;
  text-align: center;
}
[data-hero-version='4'] .hero-film-button { min-height: 0; aspect-ratio: auto; overflow: visible; background: transparent; text-align: center; }
[data-hero-version='4'] .hero-film-image,
[data-hero-version='4'] .hero-film-button::after,
[data-hero-version='4'] .film-arrow,
[data-hero-version='4'] .hero-film figcaption > span:first-child { display: none; }
[data-hero-version='4'] .film-play-label { position: static; display: flex; flex-direction: column; gap: 16px; font-size: 16px; line-height: 1.5; text-shadow: 0 1px 10px #0f190c; }
[data-hero-version='4'] .film-play-icon { width: 112px; height: 112px; border: 2px solid #fffef2; background: rgb(15 30 10 / 24%); backdrop-filter: none; }
[data-hero-version='4'] .film-play-icon svg { width: 48px; height: 48px; margin-left: 4px; }
[data-hero-version='4'] .hero-film-button:hover .film-play-icon { background: #f9f9e9; }
[data-hero-version='4'] .hero-film figcaption { display: block; margin-top: 3px; color: #faf9ed; font-size: 12px; text-shadow: 0 1px 10px #0f190c; }
[data-hero-version='4'] .hero-topics { grid-area: 5 / 1; justify-content: start; gap: 26px; padding: 5px 0 0; margin-top: 4px; border: 0; font-size: 14px; color: #faf9ed; }
[data-hero-version='4'] .hero-topics > span { display: none; }
[data-hero-version='4'] .hero-topics > a:hover { color: var(--hero-lime); }
[data-hero-version='4'] .hero-support { grid-area: 6 / 1 / 7 / 3; grid-template-columns: 1.05fr 1fr; margin-top: 62px; padding-top: 25px; gap: 64px; }
[data-hero-version='4'] .hero-support p { color: #d4dcca; font-size: 14px; line-height: 1.8; }
[data-hero-version='4'] :is(.hero-buy, .hero-film-button, .hero-topics a, .site-header a):focus-visible { outline-color: #f0ffcd; }

/* Four studies fit comfortably when the comparison menu is opened. */
@media (min-width: 851px) and (max-width: 1150px) {
  .design-menu-versions button { min-width: 73px; padding-inline: 8px; }
  .design-menu-toggle { width: 43px; }
  body[data-hero-version='4'] .site-header > .container { width: calc(100% - 72px); }
  [data-hero-version='4'] .hero-frame { width: calc(100% - 72px); column-gap: 25px; }
  [data-hero-version='4'] .hero-audience { font-size: 12px; max-width: 360px; }
  [data-hero-version='4'] .hero-heading-block h1 { font-size: 6.7vw; }
  [data-hero-version='4'] .hero-deck { font-size: 20px; }
  [data-hero-version='4'] .hero-buy { font-size: 16px; padding-inline: 21px; }
  [data-hero-version='4'] .hero-payment-note { left: 22px; }
  body[data-hero-version]:has(#hero-design-controls:not([hidden])) { padding-top: 76px; }
  body[data-hero-version='4']:has(#hero-design-controls:not([hidden])) .site-header { top: 76px; }
  .design-menu:has(#hero-design-controls:not([hidden])) { top: 0; left: 0; right: 0; width: auto; max-width: none; min-height: 76px; justify-content: center; border-radius: 0; transform: none; }
}
@media (min-width: 851px) and (max-height: 800px) {
  [data-hero-version='4'] .hero-frame { --scene-top: 96px; row-gap: 12px; }
  [data-hero-version='4'] .hero-audience { margin-bottom: 17px; font-size: 12px; }
  [data-hero-version='4'] .hero-heading-block h1 { font-size: clamp(59px, min(7.2vw, 10.7svh), 88px); }
  [data-hero-version='4'] .hero-deck { font-size: 21px; margin-top: 4px; }
  [data-hero-version='4'] .hero-action { margin-top: 7px; }
  [data-hero-version='4'] .hero-topics { margin-top: 9px; }
}
@media (max-width: 850px) {
  .design-menu { flex-direction: column; gap: 1px; padding: 6px 10px; min-height: 90px; }
  #hero-design-controls { width: 100%; }
  .design-menu-versions { display: grid; width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .design-menu-versions button { min-width: 0; min-height: 49px; padding: 5px 7px; text-align: center; }
  .design-menu-versions button span { font-size: 11px; }
  .design-menu-versions button small { font-size: 8px; }
  .design-menu-toggle { width: auto; min-height: 24px; padding: 3px 9px; }
  body[data-hero-version] { padding-top: 90px; }
  body[data-hero-version]:has(#hero-design-controls[hidden]) { padding-top: 48px; }
  body[data-hero-version='4'], body[data-hero-version='4']:has(#hero-design-controls[hidden]) { padding-top: 0; }
  [data-hero-version='4'] .design-menu:has(#hero-design-controls[hidden]) { inset: auto 12px 12px auto; width: auto; min-height: 0; border-radius: 6px; border: 1px solid #657251; background: #1c281cee; }
  [data-hero-version='4'] .design-menu:has(#hero-design-controls[hidden]) .design-menu-toggle { min-height: 30px; font-size: 10px; }
  body[data-hero-version='4']:has(#hero-design-controls:not([hidden])) { padding-top: 90px; }
  [data-hero-version='4']:has(#hero-design-controls:not([hidden])) .site-header { top: 90px; }
  body[data-hero-version='4'] .site-header > .container { width: calc(100% - 48px); min-height: 78px; }
  body[data-hero-version='4'] .site-header .brand { font-size: 22px; }
  body[data-hero-version='4'] .header-nav { font-size: 12px; gap: 20px; }
  [data-hero-version='4'] .hero-frame { --scene-top: 102px; width: calc(100% - 48px); grid-template-columns: minmax(0, 1fr); gap: 18px; padding-bottom: 32px; }
  [data-hero-version='4'] .hero-backdrop { display: none; }
  [data-hero-version='4'] .hero-heading-block { grid-area: 1 / 1; }
  [data-hero-version='4'] .hero-audience { margin-bottom: 18px; max-width: 420px; font-size: 12px; }
  [data-hero-version='4'] .hero-heading-block h1 { max-width: none; font-size: clamp(46px, 8.8vw, 72px); line-height: 1.01; letter-spacing: -.05em; }
  [data-hero-version='4'] .hero-yourself, [data-hero-version='4'] .hero-time-end { display: inline; }
  [data-hero-version='4'] .hero-time-start { display: inline; }
  [data-hero-version='4'] .hero-deck { grid-area: 2 / 1; max-width: none; margin-top: 0; font-size: 23px; }
  [data-hero-version='4'] .hero-summary { grid-area: 3 / 1; max-width: 600px; font-size: 15px; }
  [data-hero-version='4'] .hero-action { grid-area: 4 / 1; margin: 2px 0 5px; width: min(415px, 100%); }
  [data-hero-version='4'] .hero-film { grid-area: 5 / 1; width: calc(100% + 48px); margin: 6px -24px 0; justify-self: auto; }
  [data-hero-version='4'] .hero-film-button { aspect-ratio: 16/9; overflow: hidden; }
  [data-hero-version='4'] .hero-film-image { display: block; object-position: center; }
  [data-hero-version='4'] .hero-film-button::after { display: block; inset: 0; background: rgb(6 20 7 / 18%); }
  [data-hero-version='4'] .film-play-label { position: absolute; inset: 0; justify-content: center; gap: 12px; font-size: 15px; }
  [data-hero-version='4'] .film-play-icon { width: 78px; height: 78px; }
  [data-hero-version='4'] .film-play-icon svg { width: 33px; height: 33px; }
  [data-hero-version='4'] .hero-film figcaption { margin-top: 9px; font-size: 11px; }
  [data-hero-version='4'] .hero-payment-note { text-align: left; font-size: 13px; }
  [data-hero-version='4'] .hero-topics { grid-area: 6 / 1; margin-top: 0; padding-top: 5px; gap: 30px; }
  [data-hero-version='4'] .hero-support { grid-area: 7 / 1; grid-template-columns: 1fr 1fr; margin-top: 6px; padding-top: 22px; gap: 30px; }
}
@media (max-width: 560px) {
  body[data-hero-version='4'] .site-header > .container { width: calc(100% - 40px); min-height: 76px; }
  body[data-hero-version='4'] .site-header .brand { font-size: 20px; letter-spacing: -.8px; }
  body[data-hero-version='4'] .header-nav { font-size: 11px; }
  [data-hero-version='4'] .hero-frame { --scene-top: 100px; width: calc(100% - 40px); row-gap: 16px; }
  [data-hero-version='4'] .hero-audience { max-width: 310px; font-size: 11px; margin-bottom: 19px; }
  [data-hero-version='4'] .hero-heading-block h1 { font-size: clamp(42px, 13.2vw, 70px); line-height: 1; }
  [data-hero-version='4'] .hero-yourself, [data-hero-version='4'] .hero-time-start, [data-hero-version='4'] .hero-time-end { display: block; }
  [data-hero-version='4'] .hero-deck { font-size: 20px; line-height: 1.4; }
  [data-hero-version='4'] .hero-summary { font-size: 14px; line-height: 1.7; }
  [data-hero-version='4'] .hero-buy { min-height: 78px; padding: 16px 20px 32px; font-size: 16px; gap: 12px; }
  [data-hero-version='4'] .hero-payment-note { left: 21px; bottom: 10px; }
  [data-hero-version='4'] .hero-film { width: calc(100% + 40px); margin-inline: -20px; }
  [data-hero-version='4'] .hero-film-button { aspect-ratio: 16/10; }
  [data-hero-version='4'] .hero-film-image { object-position: 70% center; }
  [data-hero-version='4'] .hero-support { grid-template-columns: 1fr; gap: 17px; }
}