/* Home / Welcome: "the shared album".
   A pile of prints from different travelers settles into one album as you scroll. */

.home .topbar { position: relative; z-index: 5; max-width: 1280px; }
.home .topbar nav { display: flex; align-items: center; gap: var(--s-2); }
.topbar__link {
  display: none; align-items: center; min-height: 48px; padding: 0 var(--s-4);
  border-radius: var(--r-full); font-weight: 600; font-size: 1.0625rem;
  color: var(--stone); text-decoration: none;
}
.topbar__link:hover { background: rgba(74, 71, 65, 0.07); color: var(--ink); }

/* ---------- Scene (hero + settle) ---------- */
.scene { position: relative; }
.scene__sticky {
  max-width: 1280px; margin: 0 auto;
  padding: var(--s-3) var(--s-4) var(--s-6);
  display: grid; gap: var(--s-6);
}
.pitch { display: grid; gap: var(--s-4); align-content: center; }
.pitch .display { font-size: clamp(2.75rem, 1.4rem + 4.6vw, 5rem); line-height: 1.02; letter-spacing: -0.02em; }
.pitch .display em { color: var(--forest); }
.pitch .lead { max-width: 30ch; }

/* Email start: a working form that carries the address to Sign Up */
.start { display: grid; gap: var(--s-3); margin-top: var(--s-2); max-width: 480px; }
.start__row { display: grid; gap: var(--s-3); }
.start .input { min-height: 60px; }
.start__alt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); font-size: 1.0625rem; }
.start__alt a { font-weight: 600; }
.trust {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  list-style: none; margin: var(--s-2) 0 0; padding: 0;
  font-size: 1rem; color: var(--text-2);
}
.trust li { display: inline-flex; align-items: center; gap: var(--s-2); }
.trust svg { width: 20px; height: 20px; color: var(--forest); flex: none; }

/* Stage holding the prints */
.stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 560px;
  margin: 0 auto;
}
.stage__note {
  position: absolute; left: 0; right: 0; bottom: -40px;
  text-align: center;
  font-size: 1.0625rem; font-weight: 600; color: var(--forest);
  opacity: 0; transform: translateY(8px);
  transition: opacity 400ms ease, transform 400ms var(--ease-out);
}
.stage.is-album .stage__note { opacity: 1; transform: none; }

.print {
  position: absolute; left: 0; top: 0; margin: 0;   /* figure has a UA margin */
  width: 34%;
  will-change: transform;
  transform-origin: 50% 50%;
}
.print__in {
  padding: 6% 6% 0;
  background: #fffdf9;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(57, 34, 30, 0.12), 0 10px 28px rgba(57, 34, 30, 0.16);
  animation: drop 900ms var(--ease-out) both;
  animation-delay: calc(var(--i) * 140ms + 150ms);
}
.print img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; background: var(--sage-pale); }
.print__cap {
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  padding: 6% 0 7%;
  font-size: 1rem;
  color: var(--text-2); line-height: 1.2;
}
.print__cap b { color: var(--ink); font-weight: 600; }
.print__day { opacity: 0; transition: opacity 300ms ease; white-space: nowrap; }
.stage.is-album .print__day { opacity: 1; }
@keyframes drop {
  from { opacity: 0; transform: translateY(-60px) rotate(-6deg) scale(1.06); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Sections ---------- */
.band { padding: var(--s-8) var(--s-4); }
.band__inner { max-width: 1200px; margin: 0 auto; }
.band h2.heading-2 { font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem); line-height: 1.08; }
.band h2 em { font-style: italic; }

/* How it works: each step carries a tiny working-looking piece of the app */
.how2 { background: var(--sage-pale); }
.how2 h2 { color: var(--forest); max-width: 18ch; margin-bottom: var(--s-7); }
.how2__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); counter-reset: step; }
.how2__step { display: grid; gap: var(--s-4); }
.how2__num {
  font-family: var(--serif); font-weight: 300; font-size: 4rem; line-height: 0.9; color: var(--forest);
}
.how2__step h3 { font-size: 1.375rem; font-weight: 600; line-height: 1.25; }
.how2__step p { color: #2f3a2c; max-width: 34ch; }
.vignette {
  padding: var(--s-4);
  background: var(--canvas);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.v-field { display: flex; align-items: center; min-height: 52px; padding: 0 var(--s-4); background: #fff; border: 2px solid var(--field-border); border-radius: var(--r-md); color: var(--text-2); }
.v-field .caret { width: 2px; height: 24px; margin-left: 2px; background: var(--primary); animation: blink 1.1s steps(1) infinite; }
.v-code { display: grid; grid-template-columns: repeat(3, 1fr) 10px repeat(3, 1fr); gap: 6px; align-items: center; }
.v-code span { height: 56px; display: grid; place-items: center; background: #fff; border: 2px solid var(--stone); border-radius: var(--r-sm); font-size: 1.75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.v-code i { height: 3px; background: var(--field-border); border-radius: 2px; }
.v-save { display: grid; grid-template-columns: 72px 1fr; gap: var(--s-3); align-items: center; }
.v-save img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-sm); }
.v-save__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 var(--s-4); border: 2px solid var(--stone); border-radius: var(--r-full); font-weight: 600; color: var(--stone); }
.v-save__btn svg { width: 22px; height: 22px; }
.v-save__ok { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 1rem; font-weight: 600; color: var(--forest); }
.v-save__ok svg { width: 20px; height: 20px; }
@keyframes blink { 50% { opacity: 0; } }

/* Save to phone: a slice of the dark photo view */
.save { background: var(--canvas); }
.save__grid { display: grid; gap: var(--s-7); align-items: center; }
.save__copy { display: grid; gap: var(--s-4); }
.save__copy p { max-width: 40ch; color: var(--text-2); font-size: 1.25rem; }
.phone {
  justify-self: center;
  width: min(340px, 86%);
  padding: 14px;
  background: #111113;
  border-radius: 44px;
  box-shadow: 0 30px 60px rgba(57, 34, 30, 0.22), 0 8px 20px rgba(57, 34, 30, 0.12);
  transform: rotate(-3deg);
}
.phone__screen { position: relative; overflow: hidden; border-radius: 32px; background: var(--ink-band); color: #fff; }
.phone__bar { display: flex; justify-content: space-between; padding: 16px 18px 10px; font-size: 1rem; font-weight: 600; }
.phone__bar span:last-child { color: var(--on-dark-2); font-weight: 500; }
.phone__screen > img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.phone__panel { padding: 16px 18px 22px; display: grid; gap: 10px; }
.phone__place { font-family: var(--serif); font-weight: 300; font-size: 1.625rem; }
.phone__by { font-size: 1rem; color: var(--on-dark-2); }
.phone__btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border-radius: var(--r-full); background: var(--primary); font-weight: 600; }
.phone__btn svg { width: 22px; height: 22px; }
.phone__toast {
  position: absolute; left: 50%; bottom: 92px;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: var(--canvas); color: var(--ink);
  border-radius: var(--r-full);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  font-size: 1rem; font-weight: 600; white-space: nowrap;
  transform: translate(-50%, 160%);
  transition: transform 520ms var(--ease-out);
}
.phone__toast svg { width: 20px; height: 20px; color: var(--forest); }
.save.is-live .phone__toast { transform: translate(-50%, 0); transition-delay: 600ms; }

/* Easy for everyone: type-led promises */
.easy { background: var(--canvas); padding-top: 0; }
.promises { list-style: none; margin: var(--s-6) 0 0; padding: 0; border-top: 1px solid var(--hairline); }
.promises li {
  display: grid; gap: var(--s-2);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--hairline);
}
.promises strong {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.875rem, 1.3rem + 2vw, 3rem); line-height: 1.1;
}
.promises strong em { color: var(--forest); }
.promises span { color: var(--text-2); max-width: 46ch; }

/* Social: a print that gets approved */
.social { background: #efe7da; }
.social__grid { display: grid; gap: var(--s-7); align-items: center; }
.social__copy { display: grid; gap: var(--s-4); }
.social__copy p { max-width: 42ch; color: var(--text-2); font-size: 1.25rem; }
.social__print { position: relative; left: auto; top: auto; justify-self: center; width: min(320px, 80%); transform: rotate(2.5deg); }
.social__print .print__in { animation: none; padding: 7% 7% 0; }
.social__print .print__cap { font-size: 1rem; padding: 6% 0 8%; }
.status {
  position: relative; display: inline-grid; margin-top: var(--s-3); justify-self: start;
}
.status .chip { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: var(--r-full); font-size: 1rem; font-weight: 600; transition: opacity 400ms ease, transform 400ms var(--ease-out); }
.status .chip svg { width: 20px; height: 20px; }
.chip--wait { background: #fbf3e3; border: 1px solid #ead7b3; color: var(--espresso); }
.chip--wait svg { color: var(--gold); }
.chip--ok { background: #eef1e6; border: 1px solid var(--sage-pale); color: var(--forest); opacity: 0; transform: translateY(6px); }
.social.is-live .chip--wait { opacity: 0; transform: translateY(-6px); transition-delay: 1200ms; }
.social.is-live .chip--ok { opacity: 1; transform: none; transition-delay: 1300ms; }

/* Privacy: the ink band */
.private { background: var(--ink-band); color: var(--on-dark); }
.private h2 { color: var(--on-dark); max-width: 16ch; }
.facts { list-style: none; margin: var(--s-7) 0 0; padding: 0; display: grid; gap: var(--s-6); }
.facts li { display: grid; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid #3a3936; }
.facts strong { font-family: var(--serif); font-weight: 300; font-size: 2rem; line-height: 1.15; }
.facts span { color: var(--on-dark-2); }

/* Final call */
.final { text-align: left; }
.final__inner { max-width: 760px; margin: 0 auto; display: grid; gap: var(--s-4); }
.final .display { font-size: clamp(2.75rem, 1.6rem + 4vw, 4.5rem); line-height: 1.04; }
.final .display em { color: var(--forest); }

/* ---------- Phones ---------- */
@media (max-width: 1023px) {
  .stage { max-width: 440px; }
}

/* ---------- Tablet ---------- */
@media (min-width: 640px) {
  .start__row { grid-template-columns: 1fr auto; }
  .how2__steps { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
  .facts { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
  .topbar__link { display: inline-flex; }
  .band { padding: var(--s-9) var(--s-6); }
}

/* ---------- Desktop: sticky scene where the pile settles into an album ---------- */
@media (min-width: 1024px) {
  .scene { height: 190vh; }
  .scene__sticky {
    position: sticky; top: 0;
    height: 100vh; min-height: 680px;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--s-7);
    align-items: center;
    padding: 0 var(--s-7);
  }
  .home .topbar { padding: var(--s-5) var(--s-7); }
  .home .topbar { position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; }
  .scene__sticky { padding-top: 88px; }
  .stage { aspect-ratio: auto; height: min(74vh, 640px); max-height: none; }
  .save__grid, .social__grid { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
  .social__print { order: -1; }
}

@media (prefers-reduced-motion: reduce) {
  .scene { height: auto; }
  .scene__sticky { position: static; height: auto; }
  .print__in { animation: none; }
}

/* Small screens: names only on the prints, room for the album note */
@media (max-width: 639px) {
  .print__day { display: none; }
  .stage { margin-bottom: 40px; }
}