/* Shared phone walkthrough for both visual directions. */
.receipt-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  align-items: center;
  gap: clamp(40px, 7vw, 110px);
  padding-top: 95px;
  padding-bottom: 95px;
  border-top: 1px solid var(--receipt-rule, #cbd0bf);
}
.receipt-story-copy {
  max-width: 560px;
}
.receipt-story h2 {
  font:
    normal clamp(40px, 4.4vw, 60px)/1.08 Georgia,
    serif;
  letter-spacing: -0.035em;
  margin: 24px 0;
}
.receipt-story h2 em {
  color: var(--accent-current, #557450);
}
.receipt-story-copy > p:not(.eyebrow) {
  max-width: 450px;
  color: var(--muted, var(--receipt-muted, #616d60));
  font:
    15px/1.8 Arial,
    sans-serif;
}
.receipt-story-copy .receipt-story-invitation {
  margin-top: 32px;
  font-size: 13px;
}
.receipt-story-steps {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
}
.receipt-story-steps li {
  padding: 15px 0;
  border-top: 1px solid var(--receipt-rule, #cbd0bf);
}
.receipt-story-steps strong {
  display: block;
  color: var(--receipt-heading, #253d30);
  font:
    normal 23px/1.3 Georgia,
    serif;
}
.receipt-story-steps span {
  display: block;
  margin-top: 5px;
  color: var(--receipt-muted, #616d60);
  font:
    13px/1.6 Arial,
    sans-serif;
}
.receipt-story-step {
  display: block;
  width: 100%;
  padding: 0 0 0 17px;
  margin-left: -20px;
  border: 0;
  border-left: 3px solid transparent;
  text-align: left;
  background: none;
  cursor: pointer;
}
.receipt-story-step:hover strong {
  color: var(--accent-current, #557450);
}
.receipt-story-step[aria-current="step"] {
  border-left-color: var(--accent-current, #557450);
  background: var(--receipt-current-paper, #5574500d);
}
.receipt-story-step[aria-current="step"] strong {
  color: var(--accent-current, #557450);
}
.receipt-story-step:focus-visible {
  outline: 3px solid var(--accent-current, #557450);
  outline-offset: 6px;
}
.receipt-story .receipt-phone {
  width: min(100%, 336px);
  margin: 0 auto;
}
.receipt-phone-frame {
  border: 1px solid #3f5044;
  padding: 12px 8px;
  border-radius: 32px;
  background: #25352b;
  box-shadow:
    10px 14px 0 #253d3012,
    0 12px 35px #253d3017;
}
.receipt-phone video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 392 / 852;
  border-radius: 22px;
  background: #f5f8f4;
}
.receipt-story .receipt-phone figcaption {
  margin: 20px 0 0;
  min-height: 0;
  text-align: center;
  font:
    italic 14px/1.5 Georgia,
    serif;
  color: var(--receipt-muted, #616d60);
}
.gallery + .receipt-story {
  margin-top: 80px;
}
@media (max-width: 680px) {
  .receipt-story {
    display: block;
    padding-top: 65px;
    padding-bottom: 65px;
  }
  .receipt-story-copy {
    max-width: none;
  }
  .receipt-story h2 {
    font-size: 42px;
  }
  .receipt-story .receipt-phone {
    margin-top: 42px;
    max-width: 310px;
  }
}

.gallery > .receipt-story {
  grid-column: 1 / -1;
  margin-top: 16px;
}
.receipt-watch-link {
  display: inline-block;
  margin-bottom: 12px;
}

/* Satin frame, lit metal edge and hardware stay outside the app recording. */
.receipt-phone-frame {
  position: relative;
  padding: 30px 9px 12px;
  border: 1px solid #879288;
  border-radius: 38px;
  background: linear-gradient(
    125deg,
    #859187 0%,
    #3d4b43 4%,
    #1f2923 15%,
    #151d18 78%,
    #627166 98%
  );
  box-shadow:
    inset 0 0 0 2px #a8b3aa88,
    inset 0 0 0 5px #142018,
    3px 1px 0 #768276,
    6px 3px 0 #3d4b40,
    12px 17px 28px #253d3030;
}
.receipt-phone-frame::before {
  content: "";
  position: absolute;
  top: 105px;
  left: -4px;
  width: 3px;
  height: 35px;
  border-radius: 2px;
  background: linear-gradient(90deg, #aab6ac, #56645a);
  box-shadow:
    0 45px 0 #728074,
    0 90px 0 #728074;
}
.receipt-phone-frame::after {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 12px;
  border-radius: 12px;
  background:
    radial-gradient(
      circle at 60px 6px,
      #263c4b 0 2px,
      #070d0a 3px 4px,
      transparent 5px
    ),
    linear-gradient(#060c08, #121914);
  box-shadow: inset 0 1px 2px #ffffff10;
}
.receipt-phone video {
  border: 1px solid #060d08;
  border-radius: 25px;
}

/* A pen-drawn casing for the ink and watercolour direction. */
.receipt-story--drawn .receipt-phone-frame {
  border: 2px solid #344b3c;
  border-radius: 37px 32px 35px 30px / 32px 37px 31px 36px;
  background: #e7e8d9;
  box-shadow:
    2px 3px 0 #344b3c22,
    inset 0 0 0 4px #f8f6ed;
  outline: 1px solid #344b3c;
  outline-offset: 3px;
}
.receipt-story--drawn .receipt-phone-frame::before {
  left: -6px;
  width: 3px;
  border: 1px solid #344b3c;
  background: #e7e8d9;
  transform: rotate(-1deg);
  box-shadow:
    0 45px 0 #71806b,
    0 90px 0 #71806b;
}
.receipt-story--drawn .receipt-phone-frame::after {
  width: 66px;
  height: 9px;
  border: 1px solid #344b3c;
  border-radius: 7px 5px 8px 6px;
  background: #71806b;
  box-shadow: none;
  transform: translateX(-50%) rotate(-2deg);
}
.receipt-story--drawn .receipt-phone video {
  border: 1px solid #344b3c;
  border-radius: 24px 22px 25px 21px;
}