:root {
  --ink: #3e323e;
  --muted: #77666f;
  --gray: #8f8086;
  --pink: #c1327b;
  --pink-deep: #bf32c1;
  --red: #c13234;
  --cream: #fbf7ef;
  --blush: #f5dfe8;
  --blush-soft: #f9ebf1;
  --halo: #e8a6c8;
  --line: #e2d6d5;
  --screen: #fdf7fa;
  --white: #ffffff;
  --shadow: 0 20px 48px rgba(84, 46, 70, 0.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Work Sans", sans-serif;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
h1, h2, h3, .brand span, .note, .sticky-note {
  font-family: Outfit, sans-serif;
  font-weight: 500;
}

.eyebrow {
  margin: 0;
  color: var(--pink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.lede {
  margin: 0;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.6;
}
h2 {
  margin: 0;
  font-size: 64px;
  letter-spacing: -2px;
  line-height: 1.04;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 204px;
  height: 56px;
  padding: 0 20px;
  border: 0;
  border-radius: 100px;
  background: var(--pink);
  color: var(--white);
  font-size: 16px;
  cursor: pointer;
}
.button:hover { background: #a82869; }
.button:disabled { cursor: default; opacity: 0.8; }

.nav, .hero, .intro, .steps, .editorial-wrap, .faq, .footer, .ribbon, .split, .join {
  padding-left: max(24px, calc((100% - 1264px) / 2));
  padding-right: max(24px, calc((100% - 1264px) / 2));
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 112px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 28px;
}
.brand img { width: 28px; height: 28px; }
.nav-links, .footer nav {
  display: flex;
  gap: 36px;
  font-size: 15px;
}
.nav-links a:hover, .footer nav a:hover, .peek:hover { color: var(--pink); }

.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 42px;
  padding-top: 24px;
  padding-bottom: 64px;
}
.hero-copy { width: min(594px, 100%); flex: 0 1 594px; }
h1 {
  margin: 28px 0 0;
  font-size: 88px;
  letter-spacing: -4px;
  line-height: 1.02;
}
h1 span { color: var(--pink); }
.hero .lede { max-width: 500px; margin-top: 28px; }

.waitlist { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.waitlist label { font-size: 14px; font-weight: 500; }
.waitlist-row { display: flex; gap: 8px; }
.field {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--white);
}
.field img { width: 20px; height: 20px; flex: none; }
.field input {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font-size: 15px;
}
.field input::placeholder { color: var(--muted); }
.fine, .form-error, .caption { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.form-error { color: var(--red); }
.form-success {
  margin: 0;
  color: var(--pink);
  font-size: 16px;
  font-weight: 500;
}
.waitlist.is-done .waitlist-row,
.waitlist.is-done .fine { display: none; }
.peek { display: inline-block; margin-top: 28px; color: var(--pink); font-size: 15px; }

.showcase {
  position: relative;
  width: 628px;
  height: 910px;
  flex: none;
}
.blush { position: absolute; left: 40px; top: 90px; width: 580px; height: 580px; }
.note {
  position: absolute;
  left: 5px;
  top: 835px;
  width: 145px;
  margin: 0;
  color: var(--pink);
  font-size: 22px;
  line-height: 1.15;
}
.portrait {
  position: absolute;
  left: 0;
  top: 563px;
  width: 190px;
  height: 250px;
  border: 8px solid var(--cream);
  border-radius: 95px;
  object-fit: cover;
}
.phone {
  width: 402px;
  height: 856px;
  padding: 6px;
  border-radius: 32px;
  background: var(--ink);
  box-shadow: var(--shadow);
}
.showcase .phone { position: absolute; left: 170px; top: 12px; }
.screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 20px;
  background: var(--screen);
}
.status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 12px 16px 0 21px;
}
.status img:first-child { width: 33px; height: 15px; }
.status-icons { display: flex; align-items: center; gap: 4px; }
.status-icons img { height: 14px; width: auto; }
.app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 20px;
}
.app-title, .app-bar strong { font-size: 20px; font-weight: 500; }
.app-title { display: flex; align-items: center; gap: 12px; }
.app-title--red, .explore .app-title { color: var(--red); }
.app-bar--overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  justify-content: flex-start;
  gap: 16px;
  color: var(--white);
  background: rgba(0, 0, 0, 0.17);
}
.explore-card {
  margin: 16px 20px 0;
  padding: 16px;
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.08);
}
.owner { display: flex; align-items: center; gap: 12px; }
.owner img { width: 50px; height: 50px; border: 1px solid #98289a; border-radius: 50%; object-fit: cover; }
.owner p { margin: 0; font-size: 20px; font-weight: 500; text-transform: capitalize; }
.owner span, .value, .place-list span { color: var(--gray); font-size: 12px; }
.pet-photo { position: relative; height: 360px; margin-top: 12px; border-radius: 24px; overflow: hidden; }
.pet-photo > img { width: 100%; height: 100%; object-fit: cover; }
.pet-meta {
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: 12px;
  color: var(--white);
}
.pet-meta h2 { font-family: "Work Sans", sans-serif; font-size: 24px; font-weight: 600; }
.thumbs { display: flex; gap: 10px; margin-top: 8px; }
.thumbs img, .more-photos { width: 64px; height: 64px; border: 1px solid var(--white); border-radius: 14px; object-fit: cover; }
.more-photos { position: relative; display: block; overflow: hidden; }
.more-photos b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.4);
  font-size: 28px;
}
.stats { display: flex; gap: 28px; margin-top: 12px; font-weight: 600; }
.stats span { display: flex; align-items: center; gap: 8px; }
.stats img { width: 24px; height: 24px; }
.fabs {
  position: absolute;
  left: 109px;
  bottom: 92px;
  display: flex;
  align-items: flex-end;
  gap: 18px;
}
.fab {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--pink-deep);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
}
.fab--sm { width: 40px; height: 40px; }
.fab--lg { width: 56px; height: 56px; background: var(--pink); }
.fab img { width: 20px; height: 20px; }
.tabbar {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 16px;
  display: flex;
  justify-content: space-between;
  padding: 14px 28px 12px;
  border-radius: 100px;
  background: var(--ink);
}
.tabbar span { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 28px; }
.tabbar img { width: 20px; height: 20px; object-fit: contain; }
.tabbar .is-on::before {
  content: "";
  width: 28px;
  height: 3px;
  border-radius: 5px;
  background: var(--pink-deep);
}

.ribbon {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  height: 80px;
  background: var(--ink);
  color: var(--cream);
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.ribbon p { display: flex; align-items: center; gap: 24px; margin: 0; }
.ribbon span { color: var(--halo); font-size: 22px; letter-spacing: 0; }

.intro { padding-top: 104px; padding-bottom: 104px; }
.intro-head, .steps-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
}
.intro-head h2, .steps-head h2 { max-width: 700px; }
.intro-head .lede { max-width: 464px; margin-bottom: 8px; }
.intro-head .eyebrow, .steps .eyebrow, .faq .eyebrow { margin-bottom: 20px; }
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 56px;
}
.feature-grid article { padding-top: 28px; border-top: 1px solid var(--line); }
.feature-grid img { width: 32px; height: 32px; }
.feature-grid h3 { margin: 20px 0 12px; font-size: 28px; font-weight: 400; }
.feature-grid p, .steps p, .faq-intro .lede { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.6; }

.split {
  display: flex;
  align-items: center;
  gap: 80px;
  padding-top: 88px;
  padding-bottom: 88px;
}
.split--pink { background: var(--blush); }
.split--blush { background: var(--blush-soft); }
.story { flex: 1; min-width: 0; }
.story h2 { margin: 20px 0 28px; }
.points { margin: 28px 0 0; padding: 0; list-style: none; }
.points li {
  display: flex;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-size: 17px;
}
.points li::before { content: "↗"; color: var(--pink); }
.caption { margin-top: 28px; }
.stage { position: relative; width: 620px; height: 880px; flex: none; }
.stage-circle { position: absolute; left: 0; top: 160px; width: 600px; height: 600px; }
.stage .phone { position: absolute; left: 72px; top: 0; }
.sticky-note {
  position: absolute;
  top: 78px;
  right: 8px;
  z-index: 2;
  width: 174px;
  margin: 0;
  padding: 20px;
  border-radius: 20px;
  background: var(--cream);
  color: var(--pink);
  font-size: 26px;
  line-height: 1.1;
  transform: rotate(6deg);
}
.profile-hero { position: relative; height: 250px; }
.profile-hero > img { width: 100%; height: 100%; object-fit: cover; }
.fabs--profile { bottom: auto; top: 214px; left: 78px; }
.segments {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 28px;
  color: #666;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.84px;
  text-align: center;
  text-transform: uppercase;
}
.segments span { padding: 12px 0 8px; }
.segments .is-on { color: var(--pink); box-shadow: inset 0 -2px 0 var(--pink); }
.profile-body { padding: 8px 20px 90px; }
.label { margin: 14px 0 4px; font-size: 14px; font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span {
  padding: 6px 12px;
  border: 1px solid var(--pink);
  border-radius: 16px;
  color: #d35595;
  font-size: 14px;
}

.steps { padding-top: 104px; padding-bottom: 104px; }
.steps-head p:last-child { margin: 0 0 8px; color: var(--muted); }
ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin: 56px 0 0; padding: 0; list-style: none; }
.step-no { display: flex; align-items: center; gap: 20px; color: var(--pink); font-family: Outfit, sans-serif; font-size: 48px; }
.step-no i { flex: 1; height: 1px; background: var(--line); }
.steps h3 { margin: 20px 0 12px; font-size: 26px; font-weight: 400; }

.stage--chat .phone { left: 100px; }
.stage-circle--chat { top: 150px; width: 610px; height: 610px; }
.chat-badge {
  position: absolute;
  top: 74px;
  left: 25px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  border-radius: 36px;
  background: var(--cream);
  transform: rotate(-9deg);
}
.chat-badge img { width: 48px; height: 48px; }
.chat .app-title img { filter: brightness(0); }
.thread { display: flex; flex-direction: column; gap: 14px; padding: 0 16px; }
.bubble-row { display: flex; align-items: flex-end; gap: 10px; }
.bubble-row img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; }
.bubble-row.mine { justify-content: flex-end; }
.bubble {
  margin: 0;
  padding: 12px;
  border-radius: 22px 22px 4px 22px;
  background: #f2cee1;
  color: var(--white);
  font-size: 12px;
  line-height: 1.4;
  text-transform: capitalize;
}
.mine .bubble { border-radius: 22px 22px 22px 4px; background: var(--halo); }
.short { width: fit-content; margin-left: auto; }
.bubble-row time { display: block; margin-top: 2px; font-size: 7px; font-weight: 600; text-transform: uppercase; }
.mine time { text-align: right; }
.map-bubble img { width: 100%; height: 72px; border-radius: 12px; object-fit: cover; margin-bottom: 8px; }
.composer {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding: 0 16px;
  border-radius: 28px;
  background: var(--white);
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.12);
  color: var(--ink);
  font-size: 14px;
}
.composer img { width: 24px; height: 24px; }
.composer span { flex: 1; }

.locations { align-items: center; }
.stage--locations { height: 880px; }
.park-circle {
  position: absolute;
  left: 0;
  top: 100px;
  width: 560px;
  height: 680px;
  border-radius: 280px;
  object-fit: cover;
}
.stage--locations .phone { left: 100px; top: 0; }
.mini-map {
  width: calc(100% - 40px);
  height: 132px;
  margin: 0 20px;
  border-radius: 12px;
  object-fit: cover;
}
.top-locations { margin: 14px 20px 8px; font-size: 18px; font-weight: 500; }
.place-list { margin: 0; padding: 0 20px 80px; list-style: none; }
.place-list li {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.place-list img:first-child { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex: none; }
.place-list strong { display: block; font-size: 14px; }
.place-list span { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.place-list span img { width: 14px; height: 14px; }

.editorial-wrap { padding-top: 24px; padding-bottom: 104px; }
.editorial {
  display: grid;
  grid-template-columns: 550px 1fr;
  min-height: 450px;
  overflow: hidden;
  border-radius: 32px;
  background: var(--ink);
  color: var(--cream);
}
.editorial > div { padding: 48px; }
.editorial .eyebrow { margin-bottom: 24px; }
.editorial h2 { font-size: 52px; }
.editorial p { max-width: 454px; margin: 24px 0 0; color: #e0d1dc; font-size: 19px; line-height: 1.6; }
.editorial-close { color: var(--halo) !important; font-size: 14px !important; }
.editorial img { width: 100%; height: 100%; object-fit: cover; }

.faq {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 104px;
  padding-bottom: 104px;
}
.faq h2 { margin-top: 0; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item h3 { margin: 0; font-size: 19px; font-weight: 500; }
.faq-item button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 24px 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.faq-item img { width: 24px; height: 24px; flex: none; }
.faq-item .icon-close { display: none; }
.faq-item.is-open .icon-plus { display: none; }
.faq-item.is-open .icon-close { display: block; }
.faq-item p { display: none; margin: 0 0 24px; color: var(--muted); font-size: 16px; line-height: 1.65; }
.faq-item.is-open p { display: block; }
.faq-item.is-open button { padding-bottom: 14px; }

.join {
  display: flex;
  align-items: center;
  gap: 80px;
  padding-top: 88px;
  padding-bottom: 88px;
  background: var(--blush);
}
.join-copy { width: min(660px, 100%); }
.join h2 { margin: 16px 0 24px; font-size: 72px; }
.join-art { position: relative; width: 488px; height: 500px; flex: none; }
.halo { position: absolute; left: 0; top: 50px; width: 480px; height: 440px; }
.join-dog {
  position: absolute;
  left: 32px;
  top: 0;
  width: 404px;
  height: 470px;
  border-radius: 202px;
  object-fit: cover;
}
.heart-badge {
  position: absolute;
  right: 14px;
  bottom: 36px;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 48px;
  background: var(--cream);
  transform: rotate(12deg);
}
.heart-badge img { width: 42px; height: 42px; }

.footer { padding-top: 48px; padding-bottom: 32px; }
.footer-top, .footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.footer-top p { margin: 0; color: var(--muted); font-family: Outfit, sans-serif; font-size: 24px; }
.footer nav { gap: 28px; font-size: 14px; }
.footer-bottom {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}
.footer-bottom p { margin: 0; }

@media (max-width: 1180px) {
  .nav { height: auto; padding-top: 20px; padding-bottom: 20px; gap: 16px; }
  .hero, .split, .join, .intro-head, .steps-head, .faq, .editorial {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .hero { align-items: flex-start; }
  .showcase-fit { width: 100%; height: 680px; overflow: hidden; }
  .editorial { display: flex; }
  h1 { font-size: 56px; letter-spacing: -2px; }
  h2, .join h2, .editorial h2 { font-size: 44px; }
  .showcase, .stage, .join-art { transform: scale(0.72); transform-origin: top left; }
  .hero { gap: 0; }
  .showcase { margin-bottom: -220px; }
  .stage { margin-bottom: -180px; }
  .feature-grid, ol { grid-template-columns: 1fr; }
  .ribbon { height: auto; flex-wrap: wrap; padding-top: 20px; padding-bottom: 20px; }
  .editorial img { width: 100%; height: 280px; }
  .footer-top, .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 720px) {
  .nav-links { display: none; }
  .waitlist-row { flex-direction: column; }
  .button, .waitlist .button { width: 100%; }
  h1 { font-size: 44px; }
  .showcase, .stage { transform: scale(0.52); }
  .showcase { margin-bottom: -400px; }
  .stage { height: 520px; margin-bottom: -280px; }
  .join-art { transform: scale(0.62); margin-bottom: -160px; }
}