/* Product landing pages: group cards, invitations, event walls.
   Full-bleed bands, one idea per band, and pictures made of the real product. */

.lp-page {
  --lp-band: #fdf7f4;
  --lp-line: rgba(42, 16, 59, 0.09);
  --lp-card: 0 16px 40px rgba(42, 16, 59, 0.07);
  --lp-lift: 0 24px 54px rgba(42, 16, 59, 0.16);
  display: block;
}

.lp-page section {
  position: relative;
}

.lp-head {
  max-width: 730px;
  margin: 0 auto 46px;
  text-align: center;
}

.lp-head h2,
.lp-promise h2 {
  font-family: var(--serif);
  font-size: clamp(30px, 3.4vw, 43px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin: 0 0 12px;
}

.lp-head .lede {
  margin: 0;
  color: var(--muted);
  font-size: 19px;
}

/* ------------------------------------------------------------------ hero */

.lp-hero {
  padding: 54px 0 76px;
  background:
    radial-gradient(120% 90% at 88% 8%, #fdeef4 0%, rgba(253, 238, 244, 0) 58%),
    linear-gradient(180deg, #ffffff 0%, #fdf5f8 58%, var(--purple-soft) 100%);
}

.lp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1fr);
  gap: 54px;
  align-items: center;
}

.lp-hero-copy h1 {
  font-family: var(--serif);
  font-size: clamp(38px, 4.9vw, 60px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 18px;
}

.lp-hero-copy .lede {
  margin: 0 0 28px;
  font-size: 20px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 33em;
}

.lp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.lp-hero-actions .btn {
  padding: 16px 34px;
  font-size: 17px;
  box-shadow: 0 12px 26px rgba(201, 160, 26, 0.28);
}

.lp-link {
  font-weight: 700;
  color: var(--purple);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 2px;
}

.lp-link:hover {
  color: var(--purple-deep);
}

.lp-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
}

.lp-trust li {
  display: flex;
  align-items: center;
  gap: 9px;
}

.lp-trust li::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: inset 0 0 0 2px rgba(42, 16, 59, 0.16);
}

/* ------------------------------------------------------------ art frames */

.lp-art {
  margin: 0;
}

.lp-art--photo img {
  width: 100%;
  border-radius: 24px;
}

.lp-art--hero {
  position: relative;
}

.lp-art--hero::before {
  content: "";
  position: absolute;
  inset: -2% 2% 2%;
  background: radial-gradient(58% 56% at 52% 46%, rgba(243, 198, 61, 0.3) 0%, rgba(247, 241, 232, 0) 72%);
  filter: blur(4px);
  z-index: 0;
}

.lp-art--hero > * {
  position: relative;
  z-index: 1;
}

.lp-art--hero.lp-art--photo img {
  border-radius: 28px;
  box-shadow: var(--lp-lift);
}

/* ------------------------------------------------------------------ steps */

.lp-steps {
  padding: 78px 0 88px;
  background: var(--white);
}

.lp-step-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-step {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--lp-line);
  border-radius: 30px;
  padding: 22px 24px 28px;
  box-shadow: var(--lp-card);
  text-align: center;
}

.lp-step .lp-art {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  max-height: 330px;
  overflow: hidden;
  margin-bottom: 20px;
  padding: 18px;
  border-radius: 22px;
  background: linear-gradient(170deg, #fdf5f8 0%, #f5eef8 100%);
}

.lp-step .lp-art--photo {
  padding: 0;
}

.lp-step .lp-art--photo img {
  border-radius: 22px;
}

/* inside a square step frame, mocks are sized so nothing gets clipped */
.lp-step .lp-art--mock > * {
  width: 100%;
}

.lp-step .mock-phone {
  width: 42%;
  margin: 0 auto;
}

.lp-step .mock-scene--share {
  gap: 10px;
}

.lp-step .mock-scene--share .mock-phone {
  width: 40%;
  flex: 0 0 40%;
}

.lp-step .mock-chips {
  gap: 6px;
}

.lp-step .mock-chip {
  padding: 5px 10px;
  font-size: 10.5px;
}

.lp-step .mock-chips-note {
  font-size: 10px;
}

.lp-step .mock-fan-item {
  width: 31%;
}

/* a wall in a step frame drops to the compact tiles so it is never clipped */
.lp-step .mock-wall {
  width: 88%;
  margin: 0 auto;
}

.lp-step .mock-wall-grid {
  columns: 3;
  column-gap: 8px;
}

.lp-step .mock-wall .mock-note {
  padding: 8px 9px;
  margin-bottom: 8px;
  border-radius: 9px;
}

.lp-step .mock-wall .mock-note p {
  margin-bottom: 5px;
  font-size: 9.5px;
}

.lp-step .mock-wall .mock-note-from {
  font-size: 8.5px;
}

.lp-step .mock-wall .cover-word {
  font-size: 11px;
}

.lp-step .mock-wall .cover-kicker {
  font-size: 6px;
}

.lp-step .mock-wall .cover-copy--bottom {
  padding: 18px 5px 7px;
}

.lp-step .mock-tent {
  width: 72%;
}

.lp-step .mock-tent-url {
  font-size: 9px;
  overflow-wrap: anywhere;
}

.lp-step .mock-panel {
  padding: 15px 16px 17px;
}

.lp-step .mock-scene--start .mock-cover {
  width: 48%;
}

.lp-step .mock-note--float {
  width: 50%;
}

.lp-step .mock-scene--send .mock-cover--out {
  width: 36%;
}

.lp-step .mock-envelope {
  width: 80%;
}

.lp-step-num {
  display: flex;
  justify-content: center;
  margin: 0 0 10px;
}

.lp-step-num span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--purple-deep);
  color: var(--white);
  font-size: 15px;
  font-weight: 700;
}

.lp-step h3 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 8px;
}

.lp-step p {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
}

/* ------------------------------------------------------------------- rows */

.lp-rows {
  padding: 80px 0 26px;
  background: var(--lp-band);
}

.lp-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 58px;
  align-items: center;
  padding: 36px 0 56px;
}

.lp-row + .lp-row {
  border-top: 1px solid var(--lp-line);
}

.lp-row--flip .lp-row-copy {
  order: 2;
}

.lp-row-copy h3 {
  font-family: var(--serif);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.16;
  margin: 0 0 14px;
}

.lp-row-copy p {
  margin: 0;
  font-size: 19px;
  color: var(--muted);
}

.lp-points {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.lp-points li {
  position: relative;
  padding-left: 32px;
  font-size: 17px;
  font-weight: 600;
}

.lp-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 18px;
  height: 10px;
  border-left: 3px solid var(--gold-deep);
  border-bottom: 3px solid var(--gold-deep);
  border-radius: 2px;
  transform: rotate(-45deg);
}

.lp-row .lp-art--mock {
  padding: 28px;
  border-radius: 30px;
  background: linear-gradient(170deg, #ffffff 0%, #f7f0f8 100%);
  border: 1px solid var(--lp-line);
  box-shadow: var(--lp-card);
}

.lp-row .lp-art--photo img {
  box-shadow: var(--lp-card);
}

/* -------------------------------------------------------------- occasions */

.lp-occasions {
  padding: 72px 0 78px;
  background: var(--lp-band);
}

.lp-occasions .lp-head {
  margin-bottom: 28px;
}

.lp-occ-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px;
}

.lp-occ {
  display: block;
  padding: 12px 12px 16px;
  border-radius: 22px;
  background: var(--white);
  border: 1px solid var(--lp-line);
  box-shadow: 0 8px 20px rgba(42, 16, 59, 0.05);
  text-align: center;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.lp-occ:hover {
  transform: translateY(-3px);
  box-shadow: var(--lp-card);
}

.lp-occ-art {
  display: block;
  margin-bottom: 12px;
}

.lp-occ-art .cover {
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(42, 16, 59, 0.14);
}

.lp-occ-art .cover-kicker {
  font-size: 7px;
  letter-spacing: 0.12em;
}

.lp-occ-art .cover-word {
  font-size: 14px;
}

.lp-occ-art .cover-note {
  font-size: 8px;
}

.lp-occ-art .cover-name {
  font-size: 9px;
}

.lp-occ-art .cover-copy--bottom {
  padding: 22px 6px 9px;
}

.lp-occ-art .cover-copy--center {
  inset: 16% 8%;
}

.lp-occ-copy strong {
  display: block;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
}

.lp-occ-copy em {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 13px;
  line-height: 1.35;
  color: var(--muted);
}

/* ---------------------------------------------------------------- promise */

.lp-promise {
  padding: 64px 0 68px;
  background: var(--purple-deep);
  color: var(--white);
}

.lp-promise h2 {
  text-align: center;
  margin-bottom: 40px;
}

.lp-promise-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
}

.lp-promise-item h3 {
  font-size: 18px;
  margin: 0 0 8px;
  color: var(--gold);
}

.lp-promise-item p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}

/* -------------------------------------------------------------- the shelf */

.lp-shelf {
  padding: 80px 0 22px;
  background: var(--white);
}

.lp-shelf .lp-head {
  margin-bottom: 34px;
}

.lp-shelf-featured {
  margin: 0 auto 46px;
}

/* -------------------------------------------------------------------- faq */

.lp-faq {
  padding: 76px 0 82px;
  background: var(--lp-band);
}

.lp-faq-list {
  max-width: 830px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

.lp-faq-item {
  background: var(--white);
  border: 1px solid var(--lp-line);
  border-radius: 20px;
  padding: 20px 24px;
  box-shadow: 0 8px 20px rgba(42, 16, 59, 0.04);
}

.lp-faq-item summary {
  cursor: pointer;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.lp-faq-item summary::-webkit-details-marker {
  display: none;
}

.lp-faq-item summary::after {
  content: "";
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  margin-top: 9px;
  border-right: 2.5px solid var(--purple);
  border-bottom: 2.5px solid var(--purple);
  transform: rotate(45deg);
  transition: transform 0.16s ease;
}

.lp-faq-item[open] summary::after {
  transform: rotate(-135deg);
}

.lp-faq-item p {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 17px;
}

/* ---------------------------------------------------------------- closing */

.lp-closing {
  padding: 0 0 88px;
  background: var(--lp-band);
}

.lp-closing-inner {
  background: linear-gradient(135deg, #fdeef3 0%, var(--purple-soft) 100%);
  border-radius: 32px;
  padding: 58px 40px 62px;
  text-align: center;
}

.lp-closing-inner h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}

.lp-closing-inner p {
  margin: 0 auto 26px;
  max-width: 42em;
  color: var(--muted);
  font-size: 19px;
}

.lp-closing-inner .btn {
  padding: 16px 38px;
  font-size: 17px;
  box-shadow: 0 12px 26px rgba(201, 160, 26, 0.28);
}

/* =========================================================== the mockups */

.lp-art--mock {
  position: relative;
}

/* real covers, scaled for a mockup */
.lp-art--mock .cover {
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(42, 16, 59, 0.16);
}

.lp-art--mock .cover-kicker {
  font-size: 8px;
  letter-spacing: 0.13em;
}

.lp-art--mock .cover-word {
  font-size: 16px;
}

.lp-art--mock .cover-note {
  font-size: 9px;
}

.lp-art--mock .cover-name {
  font-size: 10px;
}

.lp-art--mock .cover-copy--bottom {
  padding: 26px 8px 11px;
}

.lp-art--mock .cover-copy--center {
  inset: 17% 9%;
}

.mock-ico {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  color: var(--gold-deep);
}

/* ------------------------------------------------------------ the phone */

.mock-phone {
  background: var(--purple-deep);
  border-radius: 30px;
  padding: 7px;
  box-shadow: var(--lp-lift);
}

.mock-phone-bar {
  display: block;
  width: 34%;
  height: 4px;
  margin: 3px auto 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.38);
}

.mock-phone-screen {
  background: var(--white);
  border-radius: 23px;
  overflow: hidden;
}

.mock-invite-cover .cover {
  border-radius: 0;
  box-shadow: none;
}

.mock-detail {
  display: grid;
  gap: 7px;
  padding: 12px 13px 15px;
}

.mock-detail-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--muted);
  text-align: left;
}

.mock-inside {
  padding: 12px 13px 14px;
  text-align: left;
}

.mock-inside p {
  margin: 0 0 6px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ink);
}

.mock-inside-from {
  font-family: var(--serif);
  font-size: 11px;
  color: var(--muted);
}

.mock-add {
  padding: 14px 14px 16px;
  text-align: left;
}

.mock-add-title {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
}

.mock-add-field {
  height: 22px;
  border-radius: 7px;
  border: 1px solid rgba(42, 16, 59, 0.14);
  background: #fbf8fb;
  margin-bottom: 8px;
}

.mock-add-field--tall {
  height: 46px;
}

.mock-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--purple-deep);
  color: var(--white);
  font-size: 11.5px;
  font-weight: 700;
}

.mock-add-btn .mock-ico {
  color: var(--gold);
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
}

/* ------------------------------------------------------------- the wall */

.mock-wall {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: var(--hero-field);
  padding: 12px;
}

.mock-wall::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/site/img/header-doodles.jpg?v=8") center / 760px auto;
  opacity: 0.5;
}

.mock-wall-grid {
  position: relative;
  columns: 2;
  column-gap: 10px;
}

.mock-wall--sm .mock-wall-grid {
  columns: 3;
  column-gap: 8px;
}

.mock-note {
  break-inside: avoid;
  margin: 0 0 10px;
  padding: 10px 11px;
  border-radius: 11px;
  background: #fff9f0;
  box-shadow: 0 8px 18px rgba(18, 6, 28, 0.22);
  text-align: left;
}

.mock-note p {
  margin: 0 0 7px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink);
}

.mock-note-from {
  display: block;
  font-family: var(--serif);
  font-size: 11px;
  color: #6f6878;
}

.mock-note--rose {
  background: #fbe7ee;
}

.mock-note--sage {
  background: #e7f1ea;
}

.mock-note-pic img {
  width: 100%;
  margin-bottom: 8px;
  border-radius: 7px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.mock-note--cover {
  padding: 0;
  background: none;
  box-shadow: none;
}

.mock-wall--sm .mock-note {
  padding: 8px 9px;
  border-radius: 9px;
  margin-bottom: 8px;
}

.mock-wall--sm .mock-note p {
  font-size: 9.5px;
  margin-bottom: 5px;
}

.mock-wall--sm .mock-note-from {
  font-size: 8.5px;
}

.mock-wall--sm .cover-word {
  font-size: 12px;
}

.mock-wall--sm .cover-kicker {
  font-size: 6px;
}

/* ------------------------------------------------------- screen and tent */

.mock-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mock-screen-frame {
  width: 100%;
  padding: 11px;
  border-radius: 16px;
  background: var(--purple-deep);
  box-shadow: var(--lp-lift);
}

.mock-screen-frame .mock-wall {
  border-radius: 8px;
}

.mock-screen-stand {
  width: 22%;
  height: 13px;
  background: var(--purple-deep);
  border-radius: 0 0 6px 6px;
}

.mock-screen-stand::after {
  content: "";
  display: block;
  width: 300%;
  height: 7px;
  margin-left: -100%;
  margin-top: 13px;
  border-radius: 999px;
  background: rgba(42, 16, 59, 0.7);
}

.mock-tent {
  position: relative;
  width: 66%;
  margin: 0 auto;
}

.mock-tent-face {
  padding: 14px 14px 16px;
  border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, #fffdfa 0%, #f5ece0 100%);
  border: 1px solid rgba(42, 16, 59, 0.14);
  box-shadow: 0 18px 30px rgba(42, 16, 59, 0.18);
  text-align: center;
  transform: perspective(700px) rotateX(3deg);
}

.mock-tent-cover {
  width: 56%;
  margin: 0 auto 11px;
}

.mock-tent-line {
  margin: 0;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
}

.mock-tent-url {
  margin: 3px 0 0;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--gold-deep);
}

.mock-tent-side {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -7px;
  height: 8px;
  border-radius: 0 0 8px 8px;
  background: rgba(42, 16, 59, 0.16);
}

.mock-table {
  display: block;
  width: 92%;
  height: 2px;
  margin: 14px auto 0;
  border-radius: 999px;
  background: rgba(42, 16, 59, 0.16);
}

/* -------------------------------------------------------- chips and bars */

.mock-chips {
  display: grid;
  gap: 9px;
}

.mock-chips--row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 13px;
}

.mock-chips-note {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--muted);
}

.mock-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--lp-line);
  font-size: 12.5px;
  font-weight: 700;
  box-shadow: 0 6px 14px rgba(42, 16, 59, 0.08);
  white-space: nowrap;
}

.mock-chip i {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 3px;
}

.mock-linkbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px 9px 12px;
  border-radius: 12px;
  background: var(--purple-soft);
}

.mock-linkbar-url {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--purple);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mock-linkbar-btn {
  flex: 0 0 auto;
  padding: 6px 13px;
  border-radius: 9px;
  background: var(--gold);
  color: var(--purple-deep);
  font-size: 12px;
  font-weight: 700;
}

.mock-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  box-shadow: 0 12px 24px rgba(42, 16, 59, 0.18);
  white-space: nowrap;
}

.mock-badge--gold {
  background: var(--gold);
  color: var(--purple-deep);
}

.mock-badge--gold .mock-ico {
  color: var(--purple-deep);
}

.mock-badge--plum {
  background: var(--purple-deep);
  color: var(--white);
}

.mock-badge--plum .mock-ico {
  color: var(--gold);
}

.mock-badge--live {
  background: var(--white);
  color: var(--purple-deep);
}

.mock-badge--live i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2fbf71;
  box-shadow: 0 0 0 4px rgba(47, 191, 113, 0.22);
}

/* ------------------------------------------------------------- panels */

.mock-panel {
  padding: 18px 20px 20px;
  border-radius: 22px;
  background: var(--white);
  border: 1px solid var(--lp-line);
  box-shadow: var(--lp-card);
  text-align: left;
}

.mock-panel-title {
  display: flex;
  justify-content: space-between;
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
}

.mock-panel-title span {
  color: var(--muted);
  font-weight: 600;
}

.mock-faces {
  display: flex;
  align-items: center;
  margin-top: 16px;
  padding-left: 8px;
}

.mock-face {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-left: -8px;
  border-radius: 50%;
  border: 2px solid var(--white);
  font-size: 12px;
  font-weight: 700;
  color: var(--purple-deep);
}

.mock-face--0 { background: #f3c63d; }
.mock-face--1 { background: #f0d3da; }
.mock-face--2 { background: #9fc0ae; }
.mock-face--3 { background: #e9def0; }

.mock-faces-note {
  margin-left: 12px;
  font-size: 12.5px;
  color: var(--muted);
}

.mock-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid rgba(42, 16, 59, 0.08);
}

.mock-row-copy {
  flex: 1;
  min-width: 0;
  display: grid;
  font-size: 12px;
  color: var(--muted);
}

.mock-row-copy strong {
  font-size: 12.5px;
  color: var(--ink);
}

.mock-row-grip,
.mock-row-act {
  display: flex;
  color: rgba(42, 16, 59, 0.32);
}

.mock-row-grip .mock-ico,
.mock-row-act .mock-ico {
  color: inherit;
}

.mock-panel-foot {
  margin-top: 16px;
}

/* ------------------------------------------------------------- scenes */

.mock-scene {
  position: relative;
}

.mock-scene--invite {
  aspect-ratio: 5 / 4;
}

.mock-scene--invite .mock-cover--lift {
  position: absolute;
  left: 3%;
  top: 2%;
  width: 41%;
  transform: rotate(-7deg);
}

.mock-scene--invite .mock-phone--front {
  position: absolute;
  right: 2%;
  bottom: 2%;
  width: 45%;
}

.mock-scene--invite .mock-badge {
  position: absolute;
  left: 0;
  bottom: 15%;
}

.mock-fan {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mock-fan-item {
  width: 40%;
}

.mock-fan-item:first-child {
  transform: rotate(-9deg) translateX(20%);
}

.mock-fan-item:last-child {
  transform: rotate(9deg) translateX(-20%);
}

.mock-fan-item--on {
  position: relative;
  z-index: 2;
  transform: translateY(-8px) scale(1.07);
}

.mock-scene--share {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.mock-scene--share .mock-phone {
  width: 55%;
  flex: 0 0 55%;
}

.mock-scene--open {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.mock-cover--leaf {
  transform: rotate(-3deg);
}

.mock-scene--start {
  display: flex;
  justify-content: flex-start;
  padding-bottom: 8%;
}

.mock-scene--start .mock-cover {
  width: 54%;
  margin-left: 4%;
}

.mock-note--float {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 56%;
  background: var(--white);
  box-shadow: 0 18px 34px rgba(42, 16, 59, 0.18);
}

.mock-scene--send {
  padding-top: 8%;
}

.mock-scene--send .mock-cover--out {
  position: relative;
  z-index: 1;
  width: 40%;
  margin: 0 auto -20%;
  transform: rotate(-4deg);
}

.mock-envelope {
  position: relative;
  z-index: 2;
  width: 88%;
  margin: 0 auto;
}

.mock-envelope svg {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 16px 26px rgba(42, 16, 59, 0.18));
}

.mock-scene--send .mock-badge {
  position: absolute;
  right: 0;
  top: 0;
}

.mock-scene--wall {
  display: flex;
  align-items: flex-start;
}

.mock-scene--wall .mock-screen {
  width: 88%;
}

.mock-scene--wall .mock-phone--corner {
  position: absolute;
  right: -1%;
  bottom: 5%;
  width: 28%;
}

.mock-scene--live .mock-badge--live {
  position: absolute;
  right: -3%;
  top: -12px;
}

.mock-scene--tent {
  padding-top: 6%;
}

/* writing the inside */
.mock-write {
  display: grid;
  grid-template-columns: 34% minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.mock-write-label {
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.mock-write-field {
  margin-bottom: 10px;
  padding: 7px 9px;
  border-radius: 8px;
  border: 1px solid rgba(42, 16, 59, 0.14);
  background: #fbf8fb;
  font-size: 11.5px;
  font-weight: 600;
}

.mock-write-note {
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid rgba(42, 16, 59, 0.14);
  background: #fbf8fb;
}

.mock-write-note p {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink);
}

/* the envelope opening, with the card out of it */
.mock-scene--open-card {
  padding-top: 10%;
}

.mock-open-card {
  position: relative;
  z-index: 1;
  width: 44%;
  margin: 0 auto -18%;
  transform: rotate(3deg);
}

.mock-scene--open-card .mock-badge--fx {
  position: absolute;
  left: 2%;
  top: 0;
}

/* a gift card tucked in */
.mock-scene--gift {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  padding-bottom: 4%;
}

.mock-scene--gift .mock-cover {
  width: 52%;
  transform: rotate(-4deg);
}

.mock-giftcard {
  position: relative;
  z-index: 2;
  width: 46%;
  margin-left: -8%;
  margin-bottom: 6%;
  padding: 14px 14px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2a103b 0%, #4a2464 100%);
  color: var(--white);
  box-shadow: var(--lp-lift);
  text-align: left;
}

.mock-giftcard-chip {
  display: block;
  width: 26px;
  height: 19px;
  margin-bottom: 16px;
  border-radius: 4px;
  background: var(--gold);
}

.mock-giftcard strong {
  display: block;
  font-size: 13px;
}

.mock-giftcard em {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.72);
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 1000px) {
  .lp-hero-grid,
  .lp-row {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .lp-hero {
    padding: 34px 0 58px;
  }

  .lp-hero-copy {
    text-align: center;
  }

  .lp-hero-copy .lede {
    margin-inline: auto;
  }

  .lp-hero-actions,
  .lp-trust {
    justify-content: center;
  }

  .lp-art--hero {
    max-width: 520px;
    margin: 0 auto;
  }

  .lp-row--flip .lp-row-copy {
    order: 0;
  }

  .lp-row .lp-art {
    max-width: 520px;
    margin: 0 auto;
  }

  .lp-step-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  .lp-step {
    padding: 18px 18px 24px;
    border-radius: 24px;
  }

  .lp-step .lp-art {
    min-height: 180px;
    padding: 14px;
  }

  .lp-step h3 {
    font-size: 21px;
  }

  .lp-step p {
    font-size: 16px;
  }

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

  .mock-wall--sm .mock-wall-grid {
    columns: 2;
  }
}

@media (max-width: 720px) {
  .lp-step-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .lp-step .lp-art {
    min-height: 0;
    padding: 18px;
  }

  .lp-step .lp-art > * {
    max-width: 300px;
    margin-inline: auto;
  }

  .lp-steps,
  .lp-rows,
  .lp-faq {
    padding-top: 56px;
  }

  .lp-row {
    padding: 28px 0 42px;
  }

  .lp-promise-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .lp-closing-inner {
    padding: 40px 22px 46px;
  }

  .lp-trust {
    gap: 8px 18px;
    font-size: 14px;
  }

  .mock-wall-grid,
  .mock-wall--sm .mock-wall-grid {
    columns: 2;
  }

  .lp-occ-grid {
    gap: 12px;
  }

  .lp-occ {
    padding: 10px 10px 13px;
    border-radius: 18px;
  }

  .lp-occ-copy strong {
    font-size: 16px;
  }

  .lp-occ-copy em {
    font-size: 12px;
  }
}