/* The supplied logo is one transparent lockup; the separate shield is a browser icon. */
.brand img { width: 100%; height: auto; }
.preview-bar img { flex-shrink: 0; height: auto; }

/* Overlapping chapters carry the same story from the field into the app. */
main { isolation: isolate; background: var(--navy); }
main > section { position: relative; z-index: 1; }
.hero { z-index: 0; padding-bottom: 44px; }
.origin-section, .intro, .demo-section, .pricing-section, .final-cta {
  margin-top: -40px;
  border-radius: 40px 40px 0 0;
}
.intro, .pricing-section, .faq-section { background: var(--white); }
.origin-section { border-top: 0; border-bottom: 0; }
.intro { background: linear-gradient(180deg, #fff 65%, #eef8f8); }
.demo-section { background: linear-gradient(180deg, #eef8f8, var(--mist) 65%); }
.club-strip { padding-block: 54px 90px; }
.faq-section { padding-bottom: 120px; }
.pricing-heading { align-items: flex-start; }
.pricing-heading h2 { max-width: 620px; }

.origin-steps { position: relative; }
.origin-steps::before, .origin-steps::after {
  content: '';
  position: absolute;
  width: 2px;
  left: 17px;
  top: 37px;
  bottom: var(--story-end, 70px);
  background: #263b4c;
  transform-origin: top;
}
.origin-steps::after { background: var(--turquoise); }
.origin-step { position: relative; grid-template-columns: 36px 1fr; }
.origin-step > span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: var(--navy);
  border: 1px solid #315260;
  border-radius: 50%;
}
.origin-step strong { display: block; padding-top: 6px; }
.origin-step p { font-size: .875rem; }

@media (prefers-reduced-motion: no-preference) {
  .motion-ready .hero-photo {
    transform: translate3d(0, var(--field-shift, 0px), 0) scale(1.12);
  }
  .motion-ready .hero-product {
    transform: translate3d(0, var(--dashboard-shift, 0px), 0);
  }
  .motion-ready .app-preview {
    transform: rotate(var(--dashboard-turn, -2deg));
    transition: transform .15s ease-out;
  }
  .motion-ready .floating-note {
    transform: translate3d(0, var(--note-shift, 0px), 0);
  }
  .motion-ready .scroll-layer {
    border-radius: var(--layer-radius, 40px) var(--layer-radius, 40px) 0 0;
    clip-path: inset(0 var(--layer-inset, 0px) 0 round var(--layer-radius, 40px) var(--layer-radius, 40px) 0 0);
  }
  .motion-ready .scroll-layer:focus-within { clip-path: none; }
  .motion-ready .scroll-reveal {
    opacity: var(--reveal-opacity, 1);
    translate: 0 var(--reveal-y, 0px);
  }
  .motion-ready .scroll-reveal:focus-within {
    opacity: 1;
    translate: 0 0;
  }
  .motion-ready .origin-steps::after { transform: scaleY(var(--story-progress, 0)); }
  .motion-ready .origin-step > span {
    transition: background .3s, border-color .3s, color .3s;
  }
  .motion-ready .origin-step.is-reached > span {
    background: var(--turquoise);
    color: var(--navy);
    border-color: var(--turquoise);
  }
  .motion-ready .origin-step.is-current strong { color: var(--turquoise-light); }
  .motion-ready .origin-quote {
    opacity: var(--quote-opacity, 1);
    translate: 0 var(--quote-y, 0px);
  }
}

@media (min-width: 981px) {
  .origin-grid { align-items: start; }
  .origin-card { margin-top: 16px; }
}
@media (max-width: 720px) {
  .hero { padding-bottom: 32px; }
  .origin-section, .intro, .demo-section, .pricing-section, .final-cta {
    margin-top: -24px;
    border-radius: 24px 24px 0 0;
  }
  .club-strip { padding-block: 40px 64px; }
  .faq-section { padding-bottom: 88px; }
  .origin-step { grid-template-columns: 36px 1fr; gap: 13px; }
  .origin-step > span { font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-layer { clip-path: none !important; }
  .scroll-reveal, .origin-quote { opacity: 1 !important; translate: none !important; }
  .hero-photo, .hero-product, .floating-note { transform: none !important; }
  .origin-steps::after { transform: none !important; }
}
@media print {
  main { background: white; }
  main > section { margin-top: 0; border-radius: 0; clip-path: none !important; }
  .scroll-reveal, .origin-quote { opacity: 1 !important; translate: none !important; }
  .hero-photo, .hero-product, .floating-note { transform: none !important; }
}