/**
 * Landing page styles.
 *
 * Sits on top of site.css, which owns the header and footer. Everything here
 * is for page content and reuses the shell's tokens rather than introducing a
 * second palette.
 */

:root {
  --pink-wash:  #FCEAF2;   /* tinted section ground */
  --pink-mid:   #F4A3C6;   /* graphic fills that need to hold against bone */
  --ink-muted:  #5A6784;   /* body copy that is not a heading */
  --line:       rgba(26, 45, 90, 0.12);
  --radius-lg:  24px;
  --radius-md:  16px;
}

/* The shell reserves viewport height for an empty page. A page with content
   does not want that. */
.site-main { min-height: 0; }

/* ── section furniture ───────────────────────────────────────────────── */
.section { padding: 88px 0; }
.section--tight { padding: 64px 0; }
.section--wash  { background: var(--pink-wash); }
.section--white { background: #fff; }
.section--navy  { background: var(--navy-deep); color: var(--bone); }

.section__head { max-width: 760px; margin: 0 0 44px; }
.section__head--centre { margin-inline: auto; text-align: center; }

h2, h3 { font-family: var(--font-display); font-weight: 600; }

.h2 {
  margin: 0 0 16px;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.15;
  color: var(--navy);
  text-wrap: balance;
}
.section--navy .h2 { color: var(--bone); }

.lede {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-muted);
}
.section--navy .lede { color: rgba(247, 245, 243, 0.78); }

.eyebrow {
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pink-mid);
}

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 54px;
  padding: 0 28px;
  border: 2px solid transparent;
  border-radius: 14px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn--primary {
  background: var(--navy);
  color: var(--pink-soft);
  box-shadow: 0 10px 24px rgba(26, 45, 90, 0.22);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(26, 45, 90, 0.28); }
.btn--ghost {
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);
}
.btn--ghost:hover { background: rgba(26, 45, 90, 0.06); }
.section--navy .btn--ghost { border-color: rgba(247,245,243,0.5); color: var(--bone); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

.reassure {
  margin: 18px 0 0;
  font-size: 15px;
  color: var(--ink-muted);
}
.reassure b { font-weight: 400; color: var(--navy); }

/* ── hero ────────────────────────────────────────────────────────────── */
.hero { padding: 64px 0 80px; }

.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 56px;
}

.hero h1 {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 60px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--navy);
  text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--pink-mid); }

/* The answer paragraph. Deliberately a complete, self-contained statement of
   what the product is, because that is the unit a search engine or an assistant
   lifts when it needs to describe us. */
.hero__answer {
  margin: 0 0 28px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 34em;
}

/* ── hero graphic ────────────────────────────────────────────────────── */
.stage {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}

.stage__glow {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, var(--pink-wash) 0%, rgba(252,234,242,0) 68%);
}

.phone {
  position: relative;
  width: 232px;
  aspect-ratio: 232 / 470;
  border-radius: 34px;
  background: #10203f;
  padding: 9px;
  box-shadow: 0 26px 60px rgba(13, 24, 51, 0.28);
}
.phone__screen {
  position: relative;
  height: 100%;
  border-radius: 26px;
  background: var(--bone);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.phone__notch {
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 74px; height: 20px;
  border-radius: 12px;
  background: #10203f;
  z-index: 3;
}
.phone__bar {
  padding: 30px 14px 10px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  text-align: center;
}
.phone__bar span { display: block; font-family: var(--font-body); font-size: 10px; font-weight: 400; color: var(--ink-muted); }

.phone__grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 0 8px 8px;
  align-content: start;
}
.phone__tile {
  aspect-ratio: 1;
  border-radius: 6px;
  background: var(--pink-wash);
  opacity: 0;
  transform: scale(0.82);
  animation: tile-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
/* Alternating fills so the grid reads as photographs rather than placeholders,
   without shipping stock photography of somebody else's wedding. */
.phone__tile:nth-child(3n)   { background: linear-gradient(140deg, #F4A3C6, #FCEAF2); }
.phone__tile:nth-child(3n+1) { background: linear-gradient(140deg, #C9D4E8, #EEF2F8); }
.phone__tile:nth-child(4n)   { background: linear-gradient(140deg, #FBD9E7, #F7F5F3); }
.phone__tile:nth-child(5n)   { background: linear-gradient(140deg, #1A2D5A, #4A5D8A); }

@keyframes tile-in { to { opacity: 1; transform: scale(1); } }

/* The QR card, sitting proud of the phone. This is a real, scannable code. */
.qr-card {
  position: absolute;
  right: 0;
  bottom: 12%;
  width: 168px;
  padding: 16px 16px 14px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(13, 24, 51, 0.18);
  text-align: center;
  animation: float 5.5s ease-in-out infinite;
}
.qr-card svg { width: 100%; height: auto; display: block; }
.qr-card__label {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--navy);
}
.qr-card__label span { display: block; font-family: var(--font-body); font-size: 11px; font-weight: 400; color: var(--ink-muted); }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* Two small photo chips drifting in, to show the direction of travel: guest
   phone into your gallery. */
.chip {
  position: absolute;
  width: 62px; height: 62px;
  border-radius: 12px;
  box-shadow: 0 12px 26px rgba(13, 24, 51, 0.16);
  animation: float 6.5s ease-in-out infinite;
}
.chip--a { left: 2%;  top: 18%; background: linear-gradient(140deg, #F4A3C6, #FCEAF2); animation-delay: -1.4s; }
.chip--b { left: 10%; bottom: 16%; background: linear-gradient(140deg, #C9D4E8, #EEF2F8); animation-delay: -3.2s; }

/* ── at a glance ─────────────────────────────────────────────────────── */
.glance {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  overflow: hidden;
}
.glance div { padding: 26px 24px; border-left: 1px solid var(--line); }
.glance div:first-child { border-left: 0; }
.glance dt {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.glance dd {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--navy);
}

/* ── steps ───────────────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; counter-reset: step; }

.step { position: relative; }
.step__icon {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  margin-bottom: 18px;
  border-radius: 18px;
  background: var(--pink-wash);
  color: var(--navy);
}
.step__icon svg { width: 30px; height: 30px; }
.step h3 {
  margin: 0 0 8px;
  font-size: 19px;
  color: var(--navy);
}
.step h3::before {
  counter-increment: step;
  content: counter(step) ". ";
  color: var(--pink-mid);
}
.step p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-muted); }

/* ── guest experience ───────────────────────
   Deliberately not another card grid. By this point the visitor has seen four
   of them, and this is the one section that has to show rather than describe. */
.guest {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 64px;
  align-items: center;
}

.guest__phone { display: flex; justify-content: center; }
.phone--ui { width: 268px; aspect-ratio: 268 / 540; }

.ui { padding: 40px 20px 20px; display: flex; flex-direction: column; height: 100%; }
.ui__title { margin: 0; font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--navy); }
.ui__sub { margin: 4px 0 18px; font-size: 13px; line-height: 1.45; color: var(--ink-muted); }

.ui__drop {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 26px 14px;
  border: 2px dashed rgba(26, 45, 90, 0.22);
  border-radius: 14px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.ui__drop svg { width: 26px; height: 26px; color: var(--pink-mid); }

.ui__label {
  margin: 20px 0 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-muted);
}
.ui__field {
  padding: 11px 13px;
  border: 1.5px solid rgba(26, 45, 90, 0.16);
  border-radius: 11px;
  background: #fff;
  font-size: 14px;
  color: var(--navy);
}

/* A blinking caret, because a still form reads as dead and this is meant to
   look like a thing in use. */
.ui__caret {
  display: inline-block;
  width: 1.5px; height: 15px;
  margin-left: 1px;
  vertical-align: -3px;
  background: var(--pink-mid);
  animation: caret 1.1s steps(1) infinite;
}
@keyframes caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.ui__btn {
  margin-top: 14px;
  padding: 13px;
  border-radius: 12px;
  background: var(--navy);
  color: var(--pink-soft);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}
.ui__foot { margin: 10px 0 0; font-size: 11px; text-align: center; color: var(--ink-muted); }

.guest__copy h3 { margin: 0 0 12px; font-size: clamp(24px, 2.8vw, 32px); color: var(--navy); }
.guest__points { margin: 26px 0 28px; display: flex; flex-direction: column; gap: 14px; }
.guest__points div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: baseline; }
.guest__points dt { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--navy); }
.guest__points dd { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-muted); }

/* ── features ────────────────────────────────────────────────────────── */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.feature {
  padding: 28px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.feature:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(13, 24, 51, 0.08); }
.feature__icon { width: 34px; height: 34px; margin-bottom: 16px; color: var(--pink-mid); }
.feature h3 { margin: 0 0 8px; font-size: 18px; color: var(--navy); }
.feature p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-muted); }

/* Sized so the two supporting differentiators do not shout as loudly as the
   photo workflow, which is the actual product. */
.feature--lead { grid-column: span 2; background: var(--navy); border-color: var(--navy); }
.feature--lead h3, .feature--lead p { color: var(--bone); }
.feature--lead p { color: rgba(247,245,243,0.8); }
.feature--lead .feature__icon { color: var(--pink); }

/* ── placement ───────────────────────────────────────────────────────── */
.places { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.place {
  padding: 24px;
  border-radius: var(--radius-md);
  background: #fff;
  border: 1px solid var(--line);
}
.place h3 { margin: 0 0 6px; font-size: 17px; color: var(--navy); }
.place p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-muted); }

/* ── comparison ──────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--line); background: #fff; }
table.compare { width: 100%; min-width: 680px; border-collapse: collapse; }
table.compare th, table.compare td {
  padding: 16px 18px;
  text-align: left;
  font-size: 15px;
  border-bottom: 1px solid var(--line);
}
table.compare thead th {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  background: var(--bone);
  white-space: nowrap;
}
table.compare tbody th {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
}
table.compare td { color: var(--ink-muted); }
table.compare tr:last-child th, table.compare tr:last-child td { border-bottom: 0; }
table.compare .is-us { background: rgba(252, 234, 242, 0.55); }
/* Named for the verdict, not the word. "No" is the right answer to "does this
   need an app", so colouring by yes/no would have marked our best row red. */
.good { color: #1B7F4B; font-weight: 700; }
.bad  { color: #9A3412; font-weight: 700; }

/* ── proof ───────────────────────────────────────────────────────────── */
.proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.proof__stat {
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 54px);
  font-weight: 700;
  line-height: 1;
  color: var(--pink);
}
.proof p { margin: 10px 0 0; font-size: 16px; color: rgba(247,245,243,0.8); }

/* ── pricing ─────────────────────────────────────────────────────────── */
.plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 860px; }
.plan {
  position: relative;
  padding: 32px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
}
.plan--popular { border-color: var(--pink-mid); border-width: 2px; }
.plan__badge {
  position: absolute;
  top: -13px; left: 30px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--pink-mid);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.plan h3 { margin: 0; font-size: 22px; color: var(--navy); }
.plan__price {
  margin: 6px 0 4px;
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 700;
  color: var(--navy);
}
.plan__price small { font-family: var(--font-body); font-size: 15px; font-weight: 400; color: var(--ink-muted); }
.plan ul { margin: 20px 0 26px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.plan li { position: relative; padding-left: 27px; font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
.plan li::before {
  content: '';
  position: absolute; left: 4px; top: 6px;
  width: 6px; height: 11px;
  border: solid var(--pink-mid);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

/* ── currency switcher ──────────────────────
   Small and beside the prices, not a hero control. It answers "is that my
   money" and then gets out of the way. */
.cur { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -20px 0 30px; }
.cur__label { font-size: 14px; color: var(--ink-muted); }
.cur__wrap { position: relative; display: inline-flex; }
.cur__select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 42px;
  padding: 0 40px 0 14px;
  border: 1.5px solid var(--line);
  border-radius: 11px;
  background: #fff;
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.cur__select:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.cur__chev {
  position: absolute; right: 13px; top: 50%;
  width: 14px; height: 14px;
  margin-top: -7px;
  color: var(--ink-muted);
  pointer-events: none;
}
.cur__note { font-size: 13px; color: var(--ink-muted); }

/* ── faq ─────────────────────────────────────────────────────────────── */
.faq { max-width: 820px; }
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--navy);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  flex-shrink: 0;
  width: 11px; height: 11px;
  border: solid var(--pink-mid);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq details p { margin: 0 0 22px; font-size: 16px; line-height: 1.65; color: var(--ink-muted); max-width: 62em; }

/* ── final cta ───────────────────────────────────────────────────────── */
.final { text-align: center; }
.final .h2 { max-width: 18em; margin-inline: auto; }
.final .btn-row { justify-content: center; }

/* ── scroll reveal ───────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ── responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .section { padding: 64px 0; }
  .guest { grid-template-columns: 1fr; gap: 40px; }
  .guest__points div { grid-template-columns: 130px 1fr; }
  .hero { padding: 40px 0 56px; }
  .hero__grid { grid-template-columns: 1fr; gap: 44px; }
  .stage { max-width: 460px; margin-inline: auto; }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  .features, .places { grid-template-columns: repeat(2, 1fr); }
  .feature--lead { grid-column: span 2; }
  .glance { grid-template-columns: repeat(2, 1fr); }
  .glance div:nth-child(3) { border-left: 0; }
  .glance div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .proof { grid-template-columns: 1fr; gap: 32px; text-align: center; }
}

@media (max-width: 639px) {
  .section { padding: 52px 0; }
  .guest__points div { grid-template-columns: 1fr; gap: 2px; }
  /* The answer paragraph is the most valuable copy on the page, so it stays
     whole. It just does not need to be 19px on a 390px screen, where that
     costs nine lines and pushes the button towards the fold. */
  .hero__answer { font-size: 17px; line-height: 1.55; margin-bottom: 24px; }
  .lede { font-size: 17px; }
  .steps, .features, .places, .plans { grid-template-columns: 1fr; }
  .feature--lead { grid-column: span 1; }
  .glance { grid-template-columns: 1fr; }
  .glance div { border-left: 0; border-bottom: 1px solid var(--line); }
  .glance div:last-child { border-bottom: 0; }
  .btn, .btn-row .btn { width: 100%; }
  .qr-card { width: 128px; right: -4px; }
  .chip { width: 48px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .phone__tile { opacity: 1; transform: none; animation: none; }
  .qr-card, .chip { animation: none; }
  .reveal { opacity: 1; transform: none; }
}

/* ═══ pages beyond the first ═══════════════════════════════════════════ */

/* ── the short answer ────────────────────────────────────────────────
   A boxed, liftable paragraph near the top of comparison pages. It exists so
   a reader who wants one sentence gets one, and so an assistant summarising
   the page has an unambiguous passage to quote. */
.answer-box {
  padding: 26px 28px;
  border-left: 4px solid var(--pink-mid);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: #fff;
}
.answer-box p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--navy); }
.answer-box p + p { margin-top: 12px; color: var(--ink-muted); font-size: 16px; }

/* ── fair-play notice ───────────────────────────────────────────────── */
.checked {
  margin: 20px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-muted);
}
.checked a { text-decoration: underline; text-underline-offset: 2px; }

/* ── two column prose ───────────────────────────────────────────────── */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.two-col h3 { margin: 0 0 12px; font-size: 21px; color: var(--navy); }
.two-col p { margin: 0 0 14px; font-size: 16px; line-height: 1.65; color: var(--ink-muted); }

/* ── checklist ──────────────────────────────────────────────────────── */
.checks { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.checks li {
  position: relative;
  padding: 16px 18px 16px 52px;
  border-radius: var(--radius-md);
  background: #fff;
  border: 1px solid var(--line);
  font-size: 16px;
  line-height: 1.55;
  color: var(--navy);
}
.checks li::before {
  content: '';
  position: absolute; left: 20px; top: 21px;
  width: 8px; height: 14px;
  border: solid var(--pink-mid);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.checks li span { display: block; margin-top: 4px; font-size: 15px; color: var(--ink-muted); }

/* ── warning signals ────────────────────────────────────────────────── */
.signals { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; counter-reset: sig; }
.signal {
  padding: 26px;
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--line);
}
.signal h3 { margin: 0 0 10px; font-size: 19px; color: var(--navy); }
.signal h3::before {
  counter-increment: sig;
  content: counter(sig);
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  margin-right: 10px;
  border-radius: 8px;
  background: var(--pink-wash);
  color: var(--navy);
  font-size: 14px;
  vertical-align: 2px;
}
.signal p { margin: 0 0 10px; font-size: 15px; line-height: 1.6; color: var(--ink-muted); }
.signal p:last-child { margin-bottom: 0; }
.signal .caveat {
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--navy);
}

/* ── receipts: verifiable facts with a source ───────────────────────── */
.receipts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.receipt {
  padding: 22px 24px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(247,245,243,0.16);
}
.receipt dt {
  font-family: var(--font-body);
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--pink);
}
.receipt dd {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: 19px; font-weight: 600; line-height: 1.3;
  color: var(--bone);
}
.receipt small { display: block; margin-top: 8px; font-family: var(--font-body); font-size: 13px; font-weight: 400; color: rgba(247,245,243,0.62); }

/* ── alternatives index ─────────────────────────────────────────────── */
.alts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.alt-card {
  display: block;
  padding: 28px;
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--line);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.alt-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(13,24,51,0.08); }
.alt-card h3 { margin: 0 0 8px; font-size: 20px; color: var(--navy); }
.alt-card p { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: var(--ink-muted); }
.alt-card span { font-family: var(--font-body); font-size: 14px; font-weight: 700; color: var(--pink-mid); }

@media (max-width: 1023px) {
  .two-col, .signals, .receipts, .alts { grid-template-columns: 1fr; gap: 24px; }
}

/* ═══ alternatives pages ═══════════════════════════════════════════════ */

/* ── the switch graphic ──────────────────────────────────────────────
   Two galleries and an arrow. It says "move from that to this" in the time it
   takes to glance at it, which is more than a paragraph does in the same
   space. Built, not photographed. */
.switch {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 34px 30px;
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--line);
}

.gal { text-align: center; }
.gal__label {
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-muted);
}
.gal__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  padding: 10px;
  border-radius: 14px;
  background: var(--bone);
}
.gal__tile { aspect-ratio: 1; border-radius: 5px; background: var(--pink-wash); }
.gal__tile:nth-child(3n)   { background: linear-gradient(140deg, #F4A3C6, #FCEAF2); }
.gal__tile:nth-child(3n+1) { background: linear-gradient(140deg, #C9D4E8, #EEF2F8); }
.gal__tile:nth-child(5n)   { background: linear-gradient(140deg, #1A2D5A, #4A5D8A); }

/* The outgoing side is drained of colour rather than crossed out. It is a
   product that is being left behind, not one being insulted. */
.gal--old .gal__grid { opacity: 0.42; filter: grayscale(1); }
.gal--old .gal__label { color: var(--ink-muted); }
.gal--new .gal__label { color: var(--pink-mid); }

.gal__note { margin: 12px 0 0; font-size: 13px; line-height: 1.4; color: var(--ink-muted); }

.switch__arrow {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--pink-soft);
  flex-shrink: 0;
}
.switch__arrow svg { width: 22px; height: 22px; }

/* ── decision block ─────────────────────────────────────────────────── */
.decide { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.decide__card {
  padding: 28px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: #fff;
}
.decide__card--ours { border-color: var(--pink-mid); border-width: 2px; }
.decide__card h3 { margin: 0 0 14px; font-size: 19px; color: var(--navy); }
.decide__card ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.decide__card li {
  position: relative;
  padding-left: 24px;
  font-size: 15px; line-height: 1.55;
  color: var(--ink-muted);
}
.decide__card li::before {
  content: '';
  position: absolute; left: 2px; top: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pink-mid);
}

/* ── switching steps ────────────────────────────────────────────────── */
.moves { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: mv; }
.move__num {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: var(--navy);
  color: var(--pink-soft);
  font-family: var(--font-display);
  font-size: 17px; font-weight: 600;
}
.move h3 { margin: 0 0 8px; font-size: 17px; color: var(--navy); }
.move p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-muted); }

/* ── deadline banner, closure page only ─────────────────────────────── */
.deadline {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  border-radius: var(--radius-lg);
  background: rgba(194, 65, 12, 0.08);
  border: 1px solid rgba(194, 65, 12, 0.22);
}
.deadline__icon {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #9A3412;
  color: #fff;
}
.deadline__icon svg { width: 22px; height: 22px; }
.deadline p { margin: 0; font-size: 16px; line-height: 1.5; color: #7C2D12; }
.deadline strong { color: #7C2D12; }

@media (max-width: 1023px) {
  .decide, .moves { grid-template-columns: 1fr; }
  .switch { grid-template-columns: 1fr; gap: 16px; padding: 24px 20px; }
  .switch__arrow { transform: rotate(90deg); justify-self: center; }
}
@media (max-width: 639px) {
  .deadline { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ═══ real product screenshots ═════════════════════════════════════════
   Captured from a live PixelParty event rather than mocked up. A drawn
   approximation of an interface is always a little too tidy, and people can
   tell. These are the actual screens a guest sees. */

.pf {
  position: relative;
  width: 100%;
  max-width: 268px;
  aspect-ratio: 390 / 844;
  padding: 9px;
  border-radius: 36px;
  background: #10203f;
  box-shadow: 0 24px 54px rgba(13, 24, 51, 0.26);
  flex-shrink: 0;
}
.pf img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 28px;
  background: var(--bone);
}
/* The speaker slot, so the frame reads as a phone at a glance. */
.pf::before {
  content: '';
  position: absolute;
  top: 20px; left: 50%;
  transform: translateX(-50%);
  width: 68px; height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.22);
  z-index: 2;
}

/* Hero with a screenshot beside the copy. */
.hero--shot .hero__grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  align-items: center;
  gap: 56px;
}
.hero--shot .stage {
  position: relative;
  aspect-ratio: auto;
  display: flex;
  justify-content: center;
}
/* The glow deliberately bleeds past the column. `overflow: clip` on the hero
   lets it do that without adding 22px to the document width, which was putting
   a horizontal scrollbar on every page that used this hero. `clip` rather than
   `hidden` because `hidden` would make the section a scroll container and break
   any sticky positioning inside it later. */
.hero--shot { overflow: clip; }

.hero--shot .stage__glow {
  position: absolute;
  inset: -12% -18%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, var(--pink-wash) 0%, rgba(252,234,242,0) 70%);
}

/* A row of three, for the "see it working" block. The middle one lifts so the
   set reads as a composition rather than a filmstrip. */
.shots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  justify-items: center;
  align-items: start;
}
.shot { display: flex; flex-direction: column; align-items: center; text-align: center; }
.shot .pf { max-width: 240px; }
.shots .shot:nth-child(2) .pf { transform: translateY(-22px); }
.shot h3 {
  margin: 22px 0 6px;
  font-size: 17px;
  color: var(--navy);
}
.shots .shot:nth-child(2) h3 { margin-top: 0; }
.shot p {
  margin: 0;
  max-width: 30ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-muted);
}
.section--navy .shot h3 { color: var(--bone); }
.section--navy .shot p { color: rgba(247, 245, 243, 0.72); }

@media (max-width: 1023px) {
  .hero--shot .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero--shot .stage { order: 2; }
  .shots { grid-template-columns: 1fr; gap: 44px; }
  .shots .shot:nth-child(2) .pf { transform: none; }
  .shots .shot:nth-child(2) h3 { margin-top: 22px; }
  .shot .pf { max-width: 258px; }
}

/* ── mobile hero density ──────────────────────────────────────────────
   The answer paragraph is the most valuable copy on these pages so it stays
   whole, but at 390px it was running to nine lines and pushing the product
   screenshot entirely below the fold. Tightened so the phone starts to show
   without cutting a word. */
@media (max-width: 639px) {
  .hero { padding: 28px 0 44px; }
  .hero h1 { font-size: clamp(32px, 8.6vw, 40px); margin-bottom: 16px; }
  .hero__answer { font-size: 16px; line-height: 1.5; margin-bottom: 22px; }
  .hero .btn { min-height: 50px; font-size: 16px; }
  .hero .btn-row { gap: 10px; }
  .reassure { margin-top: 14px; font-size: 14px; }
  .eyebrow { margin-bottom: 8px; font-size: 12px; }
  .hero--shot .hero__grid { gap: 28px; }

  /* Section rhythm: 52px top and bottom stacked to 104px between every
     block, which reads as drift rather than structure on a phone. */
  .section { padding: 44px 0; }
  .section--tight { padding: 32px 0; }
  .section__head { margin-bottom: 28px; }
  .h2 { font-size: clamp(25px, 6.8vw, 30px); }

  /* Tables are the one thing that genuinely needs the horizontal scroll, so
     make it obvious there is more to the right. */
  .table-wrap {
    background:
      linear-gradient(90deg, #fff 30%, rgba(255,255,255,0)) left / 40px 100% no-repeat,
      linear-gradient(270deg, #fff 30%, rgba(255,255,255,0)) right / 40px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, rgba(13,24,51,0.14), transparent) left / 14px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(13,24,51,0.14), transparent) right / 14px 100% no-repeat,
      #fff;
    background-attachment: local, local, scroll, scroll, local;
  }
}