/* Final layer for the cinematic V3 presentation. Existing interactions stay intact. */
:root {
  --ink: #282e2b;
  --paper: #f6f2ea;
  --blue: #dce5e2;
  --lime: #eed8a7;
  --peach: #dfbca9;
  --muted: #5a635e;
  --line: 1px solid rgba(40, 46, 43, .2);
  --shadow: 0 12px 32px rgba(40, 46, 43, .06);
}

h1, h2, h3 { font-weight: 650; letter-spacing: -.045em; }
.button, .button-lime { border-radius: 6px; box-shadow: none; }
.button:hover, .button-lime:hover { transform: none; box-shadow: none; background: #3c4b42; color: var(--paper); }
.marker::before, .underline::after { display: none; }
.marker, .underline { color: #8b622c; }
.comic-label { border: 0; padding-inline: 0; background: none; box-shadow: none; transform: none; }
.preview-strip { background: #e8e3d9; border-color: rgba(40, 46, 43, .12); }
.site-header { background: var(--paper); }
.brand > span { border-color: rgba(40, 46, 43, .2); }
.partner-band { background: var(--paper); border-top: 0; }
.section-heading h2, .power-heading h2, .learning-intro h2, .faq-heading h2 {
  font-size: clamp(36px, 3.8vw, 54px);
  font-weight: 650;
}
.story-panel { border: 0; border-radius: 8px; box-shadow: none; transform: none; background: #ede8df; }
.panel-top { padding: 17px 20px; }
.panel-top > span { color: var(--muted); background: transparent; border: 1px solid rgba(40, 46, 43, .22); }
.panel-top > p { font-weight: 650; letter-spacing: .06em; }
.story-art { height: auto; aspect-ratio: 16 / 10; border: 0; background: #ddd4c5; }
.story-art::before { display: none; }
.story-art img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; object-fit: cover; }
.panel-copy { padding: 26px 23px 29px; }
.panel-copy h3 { font-size: 27px; font-weight: 650; }
.panel-copy p { color: var(--muted); }
.power-section { background: #e7eae2; }
.power-lab, .form-box, dialog { border-radius: 10px; box-shadow: var(--shadow); }
.power-visual { background: #263d35; }
.companion { filter: none; }
.companion-note { transform: none; border: 0; border-radius: 0; padding: 0; color: var(--paper); background: transparent; box-shadow: none; }
.energy-spark { display: none; }
.energy-core::before { border-width: 1px; border-radius: 50%; background: #2a4236; transform: none; }
.energy-core::after { border-width: 1px; }
.energy-ring::after { border-style: solid; opacity: .45; }
.power-tabs button { border-width: 1px; }
.power-tabs button:hover { box-shadow: none; background: #e8e4da; }
.power-tabs button[aria-selected="true"]:hover { background: var(--ink); }
.power-output { border: 1px solid rgba(40, 46, 43, .18); border-radius: 6px; }
.step-icon, .energy-mini { transform: none; box-shadow: none; border: 0; }
.support-banner { background: #e7d3ac; }
.support-number { transform: none; font-weight: 650; }
.support-number svg { display: none; }
.application { background: #ece5da; }
.application-copy h2 { font-weight: 650; }
.application-copy .comic-label { background: transparent; }
.application-helper > span { transform: none; }
.form-notice { background: #e8ece6; border-color: #c7cec4; }
.field > input, .field > textarea { border-color: #8b928b; border-radius: 5px; }

/* The image owns the full frame. This layer never stretches strips of the film. */
.motion-hero[data-visual="cinematic"] { color: var(--paper); border-bottom: 0; }
.motion-hero[data-visual="cinematic"] .motion-hero__video,
.motion-hero[data-visual="cinematic"] .motion-hero__fallback {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #282e2b;
}
.motion-hero[data-visual="cinematic"] .motion-hero__scrim {
  background: linear-gradient(0deg, rgba(14, 25, 22, .8), rgba(14, 25, 22, .36) 24%, transparent 53%);
  opacity: var(--story-copy-opacity, 1);
}
.motion-hero[data-visual="cinematic"] h1 {
  max-width: 100%;
  font-size: clamp(34px, min(3.5vw, 6.6svh), 52px);
  line-height: 1.04;
  letter-spacing: -.045em;
  font-weight: 650;
  text-shadow: 0 2px 18px rgba(14, 25, 22, .45);
}
.motion-hero[data-visual="cinematic"] .motion-hero__title-line { display: inline; width: auto; }
.motion-hero[data-visual="cinematic"] .motion-hero__title-line:first-child { display: block; }
.motion-hero[data-visual="cinematic"] .motion-hero__title-line::after { content: ' '; }
.motion-hero[data-visual="cinematic"] .motion-hero__title-line.marker { display: inline; margin: 0; color: #f1d69f; }
.motion-hero[data-visual="cinematic"] .motion-hero__lead {
  display: block;
  max-width: 37ch;
  margin-top: 14px;
  color: #fff8ea;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.45;
  text-shadow: 0 1px 12px rgba(14, 25, 22, .6);
}
.motion-hero[data-visual="cinematic"] .motion-hero__eyebrow {
  margin-bottom: 10px;
  color: #fff8ea;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
}
.motion-hero[data-visual="cinematic"] .motion-hero__offer .button {
  min-height: 52px;
  border: 1px solid rgba(246, 242, 234, .5);
  background: var(--paper);
  color: var(--ink);
  box-shadow: none;
}
.motion-hero[data-visual="cinematic"] .motion-hero__offer .button:hover { background: #efdbb6; }
.motion-hero[data-visual="cinematic"] .motion-hero__offer-note { color: #fff8ea; font-size: 14px; }
.motion-hero[data-visual="cinematic"] .motion-hero__progress {
  padding: 8px 12px;
  color: var(--ink);
  background: rgba(246, 242, 234, .94);
  border-radius: 6px;
}
.motion-hero[data-visual="cinematic"] .motion-hero__skip,
.motion-hero[data-visual="cinematic"] .motion-hero__load { border-radius: 6px; background: rgba(246, 242, 234, .94); }
.motion-hero[data-visual="cinematic"] .motion-hero__status {
  color: var(--ink);
  padding: 5px 8px;
  border-radius: 4px;
  background: var(--paper);
}
.motion-hero[data-visual="cinematic"] .motion-hero__ai-caption {
  top: 24px;
  left: var(--cinema-gutter, 22px);
  width: fit-content;
  max-width: 310px;
  padding: 11px 14px;
  gap: 10px;
  border: 1px solid rgba(246, 242, 234, .22);
  border-radius: 6px;
  color: var(--paper);
  background: rgba(25, 39, 33, .88);
}
.motion-hero[data-visual="cinematic"] .motion-hero__ai-caption > span {
  flex-basis: 32px;
  height: 32px;
  border: 1px solid rgba(241, 214, 159, .5);
  border-radius: 50%;
  background: transparent;
  color: #f1d69f;
  font-size: 13px;
  font-weight: 650;
}
.motion-hero[data-visual="cinematic"] .motion-hero__ai-caption p { font-size: 13px; text-shadow: none; }
.motion-hero[data-visual="cinematic"] .motion-hero__ai-caption strong { margin-top: 2px; font-size: 16px; font-weight: 650; letter-spacing: -.015em; }
.motion-hero[data-visual="cinematic"] :focus-visible { outline-color: #f1d69f; }

@media (min-width: 821px) {
  .motion-hero[data-visual="cinematic"] { --cinema-copy-width: min(34vw, 450px); }
  .motion-hero[data-visual="cinematic"] .motion-hero__layout {
    justify-content: flex-end;
    padding-top: 26px;
    padding-bottom: 96px;
    gap: 18px;
  }
  .motion-hero[data-visual="cinematic"] .motion-hero__copy,
  .motion-hero[data-visual="cinematic"] .motion-hero__offer { width: var(--cinema-copy-width); max-width: 450px; }
  .motion-hero[data-visual="cinematic"] .motion-hero__offer-note { max-width: 34ch; margin-top: 10px; line-height: 1.4; }
  .motion-hero[data-visual="cinematic"] .motion-hero__footer { flex-direction: row; align-items: center; gap: 12px; bottom: 20px; }
  .motion-hero[data-visual="cinematic"] .motion-hero__progress { width: auto; min-width: 105px; flex: 1; }
  .motion-hero[data-visual="cinematic"] .motion-hero__tools { flex: 0 1 auto; }
  .motion-hero[data-visual="cinematic"] .motion-hero__skip { white-space: nowrap; }
  .motion-hero[data-visual="cinematic"][data-media-state="error"] .motion-hero__layout { padding-bottom: 165px; }
  .motion-hero[data-visual="cinematic"][data-media-state="error"] .motion-hero__footer { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 820px) {
  .js-ready .site-header { background: var(--paper); border-bottom-color: rgba(40, 46, 43, .18); }
  .js-ready .menu-toggle { background: transparent; border: 1px solid rgba(40, 46, 43, .24); border-radius: 6px; }
  .menu-close { border-radius: 6px; }
  .mobile-menu-heading p { font-weight: 650; }
  .motion-hero[data-visual="cinematic"] .motion-hero__video,
  .motion-hero[data-visual="cinematic"] .motion-hero__fallback { object-position: right center; }
  .motion-hero[data-visual="cinematic"] .motion-hero__scrim {
    background: linear-gradient(180deg, rgba(14, 25, 22, .65), transparent 24%, transparent 72%, rgba(14, 25, 22, .66));
  }
  .motion-hero[data-visual="cinematic"] .motion-hero__layout {
    padding-top: 18px;
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
  .motion-hero[data-visual="cinematic"] .motion-hero__copy { width: 100%; max-width: 300px; }
  .motion-hero[data-visual="cinematic"] .motion-hero__eyebrow {
    display: block;
    margin-bottom: 7px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: .055em;
  }
  .motion-hero[data-visual="cinematic"] h1 { max-width: 100%; font-size: clamp(30px, 8.1vw, 42px); line-height: 1.04; }
  .motion-hero[data-visual="cinematic"] .motion-hero__lead { margin-top: 10px; font-size: 16px; line-height: 1.4; }
  .motion-hero[data-visual="cinematic"] .motion-hero__offer .button { min-height: 52px; font-size: 16px; }
  .motion-hero[data-visual="cinematic"] .motion-hero__offer-note {
    display: flex;
    max-width: 310px;
    margin-top: 9px;
    line-height: 1.35;
  }
  .motion-hero[data-visual="cinematic"] .motion-hero__footer { gap: 10px; }
  .motion-hero[data-visual="cinematic"] .motion-hero__progress { flex-basis: 160px; padding: 0 10px; }
  .motion-hero[data-visual="cinematic"] .motion-hero__progress label { top: 4px; font-size: 13px; }
  .motion-hero[data-visual="cinematic"] .motion-hero__range { margin-top: 5px; }
  .motion-hero[data-visual="cinematic"] .motion-hero__ai-caption { top: 18px; max-width: 270px; padding: 9px 12px; }
  .motion-hero[data-visual="cinematic"][data-media-state="error"] .motion-hero__layout { padding-bottom: calc(118px + env(safe-area-inset-bottom, 0px)); }
}

/* Use the portrait anchoring only with the same query that selects its media. */
@media (max-width: 820px) and (max-aspect-ratio: 4/5) {
  .motion-hero[data-visual="cinematic"] .motion-hero__video,
  .motion-hero[data-visual="cinematic"] .motion-hero__fallback { object-position: center top; }
}

@media (max-width: 560px) {
  .story-panels { gap: 28px; padding-inline: 0; }
  .story-panel { max-width: none; }
  .panel-copy { padding: 24px; }
  .panel-copy h3 { font-size: 29px; }
  .power-lab, .form-box, dialog { box-shadow: var(--shadow); }
}

/* The five-scene star film has more action and keeps faces clear of opening text. */
.motion-hero[data-story="star"] { --hero-preview-height: 0px; }
.motion-hero[data-story="star"].is-scroll-story { height: calc(var(--hero-view-height) * 5.4); }
.motion-hero[data-story="star"] .motion-hero__video,
.motion-hero[data-story="star"] .motion-hero__fallback { object-position: center top; }
@media (max-width: 820px) {
  .motion-hero[data-story="star"].is-scroll-story { height: calc(var(--hero-view-height) * 4.1); }
  .motion-hero[data-story="star"] .motion-hero__layout { justify-content: flex-end; gap: 14px; }
  .motion-hero[data-story="star"] .motion-hero__scrim {
    background: linear-gradient(0deg, rgba(14, 25, 22, .86), rgba(14, 25, 22, .3) 35%, transparent 64%);
  }
}

/* The offer and controls stay legible over the film at every breakpoint. */
.motion-hero[data-visual="cinematic"] .motion-hero__offer .button { font-size: 16px; }
.motion-hero[data-visual="cinematic"] .motion-hero__skip,
.motion-hero[data-visual="cinematic"] .motion-hero__load { min-height: 44px; font-size: 14px; }
.motion-hero[data-visual="cinematic"] .motion-hero__status { font-size: 14px; }
.motion-hero[data-visual="cinematic"] .motion-hero__progress label,
.motion-hero[data-visual="cinematic"] .motion-hero__time { font-size: 13px; }
.motion-hero[data-visual="cinematic"] .motion-hero__ai-caption p { font-size: 16px; }
.motion-hero[data-visual="cinematic"] .motion-hero__ai-caption > span { font-size: 14px; }
@media (max-width: 820px) {
  .motion-hero[data-visual="cinematic"] .motion-hero__layout { margin-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px)); }
  .motion-hero[data-visual="cinematic"] .motion-hero__copy { max-width: 360px; }
  .motion-hero[data-visual="cinematic"] .motion-hero__progress { flex: 1 1 auto; min-width: 92px; }
  .motion-hero[data-visual="cinematic"] .motion-hero__tools { flex: 0 1 auto; }
  .motion-hero[data-visual="cinematic"] .motion-hero__skip { font-size: 13px; padding-inline: 9px; }
  .motion-hero[data-visual="cinematic"]:has(.motion-hero__load:not([hidden])) .motion-hero__layout { padding-bottom: calc(138px + env(safe-area-inset-bottom, 0px)); }
  .motion-hero[data-visual="cinematic"][data-media-state="error"] .motion-hero__layout { padding-bottom: calc(175px + env(safe-area-inset-bottom, 0px)); }
  .motion-hero[data-visual="cinematic"][data-media-state="error"] .motion-hero__pin { min-height: 620px; }
}
@media (max-width: 380px) and (max-height: 650px) {
  .motion-hero[data-story="star"] .motion-hero__layout { gap: 10px; padding-top: 14px; }
  .motion-hero[data-visual="cinematic"] .motion-hero__lead { margin-top: 8px; }
  .motion-hero[data-visual="cinematic"] .motion-hero__eyebrow { margin-bottom: 6px; letter-spacing: .035em; }
}