@media (min-width: 1024px) {
  .hero__inner {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.spread {
  padding-top: var(--spread-pad);
}

.spread--first {
  padding-top: var(--spread-pad-first);
}

.spread__grid {
  display: grid;
  grid-template-columns: var(--spread-cols);
  gap: var(--spread-gap);
  align-items: center;
}

.spread--mirror .spread__grid { grid-template-columns: 1fr 1.04fr; }
.spread--mirror .spread__photos { order: 2; }

.spread__photos {
  display: flex;
  flex-direction: column;
  gap: var(--spread-photo-gap);
  min-width: 0;
}

.spread__minis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spread-photo-gap);
}

.spread__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.spread__title {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: var(--text-h2-product);
  line-height: var(--leading-h2-product);
}

.spread__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 18px 0 0;
}

.spread__money {
  font-weight: var(--weight-semibold);
  font-size: var(--text-price);
  line-height: var(--leading-flat);
}

.spread__old {
  font-weight: var(--weight-regular);
  font-size: 15px;
  color: var(--color-text-faint);
}

.spread__volume {
  font-weight: var(--weight-medium);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-promo);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.spread__lead {
  margin: 20px 0 0;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-text-body);
}

.spread__results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 26px 0 0;
  overflow: hidden;
  border-radius: var(--radius-panel);
  background: var(--color-border-soft);
}

.spread__result {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 18px 20px;
  background: var(--color-surface);
}

.spread__result:last-child:nth-child(odd) { grid-column: 1 / -1; }

.spread__result-value {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-result);
  line-height: var(--leading-flat);
  color: var(--color-good);
}

.spread__result-label {
  font-size: var(--text-xs);
  line-height: var(--leading-body);
  color: var(--color-text-body);
}

.spread__howto {
  margin: 26px 0 0;
  padding: 22px;
  border-radius: var(--radius-panel);
  background: var(--color-surface-soft);
}

.spread__howto-title {
  margin: 0 0 12px;
  font-weight: var(--weight-semibold);
  font-size: var(--text-4xs);
  letter-spacing: var(--tracking-footer-head);
  text-transform: uppercase;
  color: var(--amb-promo-ink);
}

.spread__steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.spread__step {
  display: flex;
  gap: 12px;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text);
}

.spread__step-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--color-accent-fill);
  color: var(--color-accent-contrast);
  font-weight: var(--weight-semibold);
  font-size: var(--text-4xs);
  line-height: var(--leading-flat);
}

.spread__step-text { min-width: 0; }

.spread__notes {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 22px 0 0;
}

.spread__facts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.spread__facts-title {
  font-weight: var(--weight-semibold);
  font-size: var(--text-4xs);
  letter-spacing: var(--tracking-footer-head);
  text-transform: uppercase;
  color: var(--color-text-label);
}

.spread__facts-text {
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-text-body);
}

.spread__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 0;
}

.spread__tags { gap: 8px; }

.section--trust {
  padding-top: var(--spread-pad);
  padding-bottom: 0;
}

.trust {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 52px;
  align-items: center;
  padding: 48px 52px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-section);
  background: var(--color-surface);
}

.trust__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.trust__title {
  margin: 0;
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
}

.trust__lead {
  margin: 18px 0 0;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-text-body);
}

.trust__body .btn { margin-top: 26px; }

.trust__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border-radius: var(--radius-card-sm);
  background: var(--color-border-soft);
}

.trust__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 24px;
  background: var(--color-surface);
}

.trust__num {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  line-height: var(--leading-flat);
  color: var(--amb-numeral-text);
}

.trust__item-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: 20px;
  line-height: var(--leading-tight);
}

.trust__text {
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--leading-body);
  color: var(--color-text-body);
}

.section--order {
  padding-top: 56px;
  padding-bottom: var(--spread-pad);
}

.order-block {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
  padding: 52px;
  border-radius: var(--radius-section);

}

.order-block__kicker { color: var(--color-accent-light); }

.order-block__title {
  margin: 0;
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  color: var(--color-text-on-dark);
}

.order-block__lead {
  margin: 18px 0 0;
  max-width: 440px;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-text-on-dark-soft);
}

.order-block__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 30px 0 0;
}

.order-block__list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  border-radius: var(--radius-card-sm);
  background: var(--amb-on-ink-40);
}

.order-block__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  background: var(--amb-ink);
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-text-on-dark);
}

.order-block__price {
  flex: none;
  font-weight: var(--weight-semibold);
}

@media (max-width: 1239.98px) {
  .spread__grid { gap: 40px; }
  .trust { gap: 40px; padding: 40px; }
  .order-block { gap: 36px; padding: 40px; }
}

@media (max-width: 1023.98px) {
  .spread__grid,
  .spread--mirror .spread__grid { grid-template-columns: minmax(0, 1fr); }

  .spread--mirror .spread__photos { order: 0; }

  .spread__photos { max-width: 520px; }

  .trust,
  .order-block {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .order-block__lead { max-width: none; }
}

@media (max-width: 767.98px) {

  .page-index .hero {

    --home-hero-h: clamp(360px, 54vh, 440px);
    display: block;
    min-height: 0;

    background: var(--amb-ink);
    text-align: left;
  }

  @supports (height: 1dvh) {
    .page-index .hero { --home-hero-h: clamp(360px, 54dvh, 440px); }
  }

  .page-index .hero__photo {
    position: absolute;
    inset: 0 0 auto 0;
    height: var(--home-hero-h);

    background: var(--amb-ink);
  }

  .page-index .hero__photo img,
  .page-index .hero__photo .ph {
    height: 100%;

    object-fit: cover;
  }

  .page-index .hero__photo::after {
    display: block;

    background: var(--scrim-hero-bottom);
  }

  .page-index .hero__inner {
    padding: 0;
    pointer-events: none;
  }

  .page-index .hero__body {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    min-height: var(--home-hero-h);
    max-width: none;

    padding: 20px var(--container-pad) 18px;
  }

  .page-index .hero .kicker--accent { color: var(--amb-rose-light); }

  .page-index .hero__title {
    margin: 12px 0 0;
    font-size: var(--text-h1-hero);
    color: var(--amb-bg);
  }

  .page-index .hero__lead {
    margin: 12px 0 0;
    max-width: none;
    font-size: var(--mob-text-body);
    line-height: var(--mob-leading-body);
    color: var(--amb-on-photo-text);
  }

  .page-index .hero__actions {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: var(--mob-gap-xs);
    margin: 18px 0 0;
  }

  .page-index .hero__actions .btn {
    width: auto;
    min-width: 0;
    height: var(--mob-btn-h);
  }

  .page-index .hero__actions .btn--primary { flex: 1 1 auto; }

  .page-index .hero__actions .btn--secondary {
    flex: 0 0 auto;
    padding: 0 20px;
    border-color: var(--amb-on-photo-line);
    background: transparent;
    color: var(--amb-bg);
  }

  .page-index .hero__actions .btn--secondary:hover {
    background: var(--amb-on-photo-fill);
    border-color: var(--amb-bg);
    color: var(--amb-bg);
  }

  .page-index .hero__stats {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0;
    max-width: none;
    margin: 18px 0 0;
    padding-top: 14px;
    border-top-color: var(--amb-on-ink-line);
  }

  .page-index .hero__stat {
    flex: 1 1 0;
    min-width: 0;
    gap: 5px;
  }

  .page-index .hero__stat-value {
    font-size: 24px;
    color: var(--amb-bg);
  }

  .page-index .hero__stat-label {
    line-height: 1.35;
    color: var(--amb-on-photo-text);
  }

  .page-index .hero__card {
    position: static;
    width: auto;
    max-width: none;
    margin: 0;
    padding: var(--mob-pad-block) var(--container-pad) var(--mob-pad-section);
    border-radius: 0;
    box-shadow: none;
    background: var(--amb-bg);

    pointer-events: auto;
  }

  .spread,
  .spread--first,
  .section--trust { padding-top: var(--mob-gap-lg); }

  .section--order {
    padding-top: var(--mob-gap-lg);
    padding-bottom: var(--mob-gap-lg);
  }

  .spread__grid { gap: var(--mob-gap-sm); }

  .spread__photos {
    flex-direction: row;
    gap: var(--mob-gap-xs);
    max-width: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
    -ms-overflow-style: none;

    margin-inline: calc(-1 * var(--container-pad));
    padding-inline: var(--container-pad);
    scroll-padding-inline: var(--container-pad);
  }

  .spread__photos::-webkit-scrollbar { display: none; }

  .spread__minis { display: contents; }

  .spread__photos > .photo,
  .spread__minis > .photo {
    flex: none;
    width: 74%;
    scroll-snap-align: start;
    aspect-ratio: var(--ratio-photo-main);
    border-radius: var(--radius-card);
  }

  .spread__results { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .spread__result { padding: 16px 15px; }

  .spread__result-value { font-size: 19px; }

  .spread__result-label { font-size: var(--mob-text-body-sm); }

  .spread__lead { font-size: var(--mob-text-body); }

  .spread__howto {
    padding: var(--mob-pad-block);
    border-radius: var(--radius-card-sm);
  }

  .spread__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .spread__actions .btn { width: 100%; }

  .trust { padding: var(--mob-pad-section); }

  .trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .trust__item { padding: 16px 15px; }

  .trust__num { font-size: var(--text-3xs); }
  .trust__item-title { font-size: 17px; }
  .trust__text { font-size: var(--mob-text-body-sm); }

  .trust__body .btn { width: 100%; }

  .order-block { padding: var(--mob-gap-md) var(--mob-pad-section); }

  .order-block__actions .btn { width: 100%; }

  .order-block__row { padding: 16px 18px; }
}

@media (max-width: 359.98px) {
  .trust { padding: var(--mob-pad-block); }
  .trust__item,
  .spread__result { padding: 14px 12px; }

  .page-index .hero__actions { flex-wrap: wrap; }
  .page-index .hero__actions .btn--primary,
  .page-index .hero__actions .btn--secondary { flex: 1 1 100%; }
}