/* ═══════════════════════════════════════════
   THE RECIPROCAL — /how-it-works/
   Loaded after home.css (CTA block). Frames and photos: base.css
   ═══════════════════════════════════════════ */

/* ── Header ── */
.how-hero {
  padding: 104px 0 112px;
  /* Only behind the text column, transparent beyond it */
  --photo-overlay: linear-gradient(90deg, rgba(15, 58, 47, .65) 0%, rgba(15, 58, 47, .65) calc(50% + 180px), rgba(15, 58, 47, 0) calc(50% + 480px));
}
.how-hero h1 { font-size: clamp(2.5rem, 6.2vw, 4.4rem); line-height: 1.05; margin-bottom: 22px; max-width: 18ch; }
.how-hero .rc-lead { max-width: 580px; }
@media (max-width: 900px) {
  .how-hero { --photo-overlay: linear-gradient(180deg, rgba(15, 58, 47, .65) 0%, rgba(15, 58, 47, .65) 85%, rgba(15, 58, 47, 0) 100%); }
}
@media (max-width: 600px) {
  .how-hero { padding: 64px 0 72px; }
}

/* ── Tour rows: text and screen side by side, alternating ── */
.tour-row {
  display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: start;
  margin-top: 72px;
}
/* The text stays in view while a tall screen scrolls past */
.tour-row__text { position: sticky; top: calc(var(--nav-h) + 32px); padding-top: 24px; }
.tour-row--flip { grid-template-columns: 7fr 5fr; }
.tour-row--flip .tour-row__text { order: 2; }
.tour-row h3, .tour-pair h3 { font-size: 1.8rem; margin-bottom: 12px; }
.tour-row p, .tour-pair p { font-weight: 300; line-height: 1.7; }

/* ── Two screens side by side (phones, emails) ── */
.tour-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 48px; align-items: start; }
.tour-pair__item .rc-shot { margin-bottom: 24px; }
.tour-pair:not(.tour-pair--mail) { max-width: 760px; }
.tour-pair:not(.tour-pair--mail) .rc-shot { max-width: 300px; }

@media (max-width: 900px) {
  .tour-row, .tour-row--flip { grid-template-columns: 1fr; gap: 24px; margin-top: 48px; }
  .tour-row--flip .tour-row__text { order: 0; }
  .tour-row__text { position: static; padding-top: 0; }
  .tour-pair--mail { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 600px) {
  .tour-pair:not(.tour-pair--mail) { gap: 14px; }
  .tour-row h3, .tour-pair h3 { font-size: 1.5rem; }
  .tour-pair:not(.tour-pair--mail) h3 { font-size: 1.25rem; }
  .tour-pair:not(.tour-pair--mail) p { font-size: 1rem; }
  .rc-shot--phone { border-radius: 22px; padding: 6px; }
  .rc-shot--phone img { border-radius: 17px; }
}