/* Preserve complete app screens and the existing scene checkpoints. */
#how-it-works .story-shell {
  min-height: var(--homepage-viewport-height, 100dvh) !important;
  height: var(--homepage-viewport-height, 100dvh) !important;
  padding-top: calc(var(--homepage-top-reserve, 78px) + 20px);
  padding-bottom: calc(var(--homepage-bottom-reserve, 78px) + 20px) !important;
  padding-left: max(32px, calc((100% - 1080px) / 2));
  padding-right: max(160px, calc((100% - 1080px) / 2));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
}
#how-it-works .story-intro-copy { width: 100%; }
#how-it-works .story-media--steps img { opacity: .2 !important; }
#how-it-works .story-media--steps::before { position: absolute; inset: 0; opacity: 1; background: rgba(7, 16, 12, .8); }
#how-it-works .section-title { font-size: 52px; line-height: 1.15; letter-spacing: 0; }
#how-it-works .step-title-line { flex-wrap: wrap; white-space: normal; }
#how-it-works .section-eyebrow { margin-bottom: 10px; }
#how-it-works .steps-section__lead { margin-top: 12px; font-size: 16px; letter-spacing: 0; }
#how-it-works .step-grid {
  top: auto;
  width: 100%;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
#how-it-works .step-grid::before,
#how-it-works .step-card::after { content: none; }
#how-it-works .step-card {
  min-width: 0;
  min-height: 0;
  padding: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  text-align: left;
}
#how-it-works .step-card__number { margin: 0; font-size: 14px; color: #61e59b; }
#how-it-works .step-card h3 { margin: 0; font-size: 22px; line-height: 1.3; letter-spacing: 0; }
#how-it-works .step-card__capture {
  grid-column: 1 / -1;
  width: auto;
  max-width: 100%;
  height: clamp(160px, calc(var(--homepage-usable-height, 600px) - 210px), 560px);
  aspect-ratio: 43 / 100;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #d1e8d1;
  border-radius: 8px;
  background: #fff;
  padding: 0;
  outline: 2px solid transparent;
  outline-offset: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  transition: border-color 280ms ease, outline-color 280ms ease, box-shadow 280ms ease;
}
#how-it-works .step-card__capture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
#how-it-works [hidden] { display: none !important; }
#how-it-works .app-step-tabs { display: none; }
#how-it-works[data-app-step="0"] [data-app-step-panel="0"] .step-card__capture,
#how-it-works[data-app-step="1"] [data-app-step-panel="1"] .step-card__capture,
#how-it-works[data-app-step="2"] [data-app-step-panel="2"] .step-card__capture {
  border-color: #61e59b;
  outline-color: #03c75a;
  box-shadow: 0 0 0 7px rgba(3, 199, 90, .1), 0 12px 32px rgba(3, 199, 90, .2);
}
@media (prefers-reduced-motion: reduce) {
  #how-it-works .step-card__capture { transition: none; }
}
@media (max-width: 1023px) {
  #how-it-works .story-shell { padding-top: calc(var(--homepage-top-reserve, 78px) + 12px); padding-inline: 18px; gap: 18px; }
  #how-it-works .section-title { font-size: 28px; }
  #how-it-works .step-title-line { column-gap: .15em; }
  #how-it-works .section-eyebrow { font-size: 10px; margin-bottom: 8px; }
  #how-it-works .steps-section__lead { font-size: 12px; margin-top: 8px; }
  #how-it-works .step-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  #how-it-works.has-step-tabs .step-card {
    display: block;
  }
  #how-it-works.has-step-tabs .step-card__number,
  #how-it-works.has-step-tabs .step-card h3 { display: none; }
  #how-it-works .step-card__capture {
    height: clamp(160px, calc(var(--homepage-usable-height, 600px) - 208px), 620px);
  }
  #how-it-works.has-step-tabs .app-step-tabs {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    flex-shrink: 0;
    gap: 0;
    border-bottom: 1px solid #62776a;
  }
  #how-it-works .app-step-tabs button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    min-width: 0;
    min-height: 56px;
    padding: 4px 0 12px;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    color: #c8d2cb;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap;
    cursor: pointer;
  }
  #how-it-works .app-step-tabs button span { font-size: 11px; font-weight: 500; }
  #how-it-works .app-step-tabs button[aria-selected="true"] { color: #fff; border-bottom-color: #03c75a; }
  #how-it-works .app-step-tabs button[aria-selected="true"] span { color: #61e59b; }
  #how-it-works .app-step-tabs button:focus-visible,
  #how-it-works [role="tabpanel"]:focus-visible { outline: 2px solid #61e59b; outline-offset: 4px; }
  #how-it-works .step-card__capture img { object-position: center; }
  #how-it-works .section-title { font-size: 28px; }
  #how-it-works .story-shell { gap: 16px; }
}
@media (min-width: 1024px) and (max-height: 760px) {
  #how-it-works .story-shell { gap: 20px; }
  #how-it-works .section-title { font-size: 42px; }
}