/* Petory website. Tokens mirror app/lib/app/theme/app_colors.dart. */
@font-face {
  font-family: "Baloo 2";
  src: url("/assets/fonts/Baloo2-Latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #f3f7ff;
  --surface: #ffffff;
  --ink: #2b2a3a;
  --ink-muted: #5d6174;
  --outline: #5b3a29;
  --sunshine: #ffc93c;
  --sunshine-deep: #f2a900;
  --sunshine-tint: #fff4d6;
  --cta-text: #3d2a1e;
  --blue: #4a8df8;
  --blue-deep: #2f6fd8;
  --blue-tint: #ddeaff;
  --sky: #8fd3ff;
  --map-land: #eef1f4;

  --gutter: clamp(16px, 4vw, 40px);
  --max: 1280px;
  --section: clamp(72px, 11vw, 160px);
  --font: "Baloo 2", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.55;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--blue-deep); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--sunshine); color: var(--cta-text); }

h1, h2, h3 { font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(3rem, 7.4vw, 6.5rem); }
h2 { font-size: clamp(2.25rem, 5vw, 4.25rem); }
h3 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); line-height: 1.15; letter-spacing: -0.01em; }
p { margin: 0; }
.lead { font-size: clamp(1.2rem, 1.6vw, 1.45rem); line-height: 1.45; max-width: 34em; }

.skip {
  position: absolute; left: var(--gutter); top: -80px; z-index: 50;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px;
}
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* Navigation: wordmark, a few links, one action */
.nav { padding-block: 14px; }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nav__brand img { height: 44px; width: auto; }
.nav__links { display: flex; align-items: center; gap: clamp(14px, 3vw, 32px); font-weight: 700; }
.nav__links a { color: var(--ink); text-decoration: none; padding: 8px 2px; }
.nav__links a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--sunshine); }

/* Buttons: flat, fully round, solid candy edge like the app */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 10px 28px;
  font: inherit; font-weight: 800; font-size: 1.15rem; text-decoration: none;
  color: var(--cta-text); background: var(--sunshine);
  border: 0; border-bottom: 5px solid var(--sunshine-deep); border-radius: 999px;
  cursor: pointer; transition: transform .12s ease, border-bottom-width .12s ease;
}
.btn:hover { color: var(--cta-text); transform: translateY(-2px); }
.btn:active { transform: translateY(3px); border-bottom-width: 2px; }

/* Placeholder for the App Store link. Swap the span for an <a href> when live. */
.store-badge {
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--ink); color: #fff;
  padding: 10px 26px 10px 22px; border-radius: 16px;
  border-bottom: 5px solid #000; cursor: default; text-align: left; line-height: 1.1;
}
.store-badge__icon { width: 30px; height: 30px; flex: none; }
.store-badge small { display: block; font-size: .8rem; font-weight: 600; color: #d6d9e6; }
.store-badge strong { display: block; font-size: 1.35rem; font-weight: 800; }
a.store-badge { text-decoration: none; cursor: pointer; }
a.store-badge:hover { color: #fff; transform: translateY(-2px); }

/* Sections */
.section { padding-block: var(--section); }
.section--white { background: var(--surface); }
.section--tint { background: var(--sunshine-tint); }
.section--blue { background: var(--blue-tint); }
.section--sky { background: var(--sky); }
.section--ink { background: var(--ink); color: #fff; }
.section--ink a { color: var(--sunshine); }
.section--ink a:hover { color: #fff; }

.split {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 6vw, 96px);
}
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--flip > :first-child { order: 2; }
}
.split__text { display: grid; gap: 24px; justify-items: start; }
.split__text p { max-width: 30em; }

/* Hero */
.hero { padding-top: clamp(16px, 3vw, 40px); padding-bottom: var(--section); }
.hero__grid {
  display: grid; align-items: center; gap: 40px; grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; }
}
.hero__text { display: grid; gap: 28px; justify-items: start; }
.hero__sub { font-size: clamp(1.2rem, 1.7vw, 1.5rem); line-height: 1.4; max-width: 28em; }
.hero__note { font-weight: 700; color: var(--ink-muted); font-size: 1rem; }

.scene {
  position: relative; overflow: hidden; border-radius: 40px;
  aspect-ratio: 4 / 4.6; width: 100%; max-width: 560px; justify-self: center;
  background: var(--sky) url("/assets/img/park-city.svg") center bottom / cover no-repeat;
}
.scene__cat { position: absolute; left: 4%; bottom: -2%; width: 54%; }
.scene__dog { position: absolute; right: 2%; bottom: -1%; width: 46%; }
.bubble {
  position: absolute; background: #fff; border-radius: 28px;
  display: grid; place-items: center; padding: 10px;
}
.bubble::after {
  content: ""; position: absolute; bottom: -12px; left: 34px; width: 28px; height: 28px;
  background: #fff; border-radius: 6px; transform: rotate(45deg);
}
.scene .bubble { top: 10%; left: 8%; width: 36%; aspect-ratio: 1; }
.bubble img { width: 78%; }

/* Stickers: white die-cut border like the app's items */
.sticker {
  filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff)
    drop-shadow(0 0 1px #bcc5da);
}

/* Photo section: three look-alikes */
.lookalikes {
  background: var(--blue-tint); border-radius: 40px; padding: clamp(20px, 4vw, 48px);
  display: grid; gap: 24px;
}
.lookalikes__main { display: grid; place-items: center; background: var(--sky); border-radius: 28px; padding: 24px 24px 0; overflow: hidden; }
.lookalikes__main img { width: min(70%, 320px); }
.lookalikes__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lookalikes__row div { background: #fff; border-radius: 24px; padding: 14px 10px 0; overflow: hidden; display: grid; justify-items: center; }
.lookalikes__row img { width: 100%; max-width: 150px; }
.tone-grey { filter: grayscale(1) brightness(1.15); }
.tone-dark { filter: grayscale(1) brightness(.5) contrast(1.1); }
.tone-cream { filter: saturate(.45) brightness(1.2) hue-rotate(-8deg); }

/* Bag of stickers */
.bag {
  background: #fff; border-radius: 40px; padding: clamp(20px, 4vw, 44px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 2.5vw, 28px);
}
.bag__slot { display: grid; place-items: center; aspect-ratio: 1; background: var(--bg); border-radius: 24px; padding: 14%; }
.bag__slot:nth-child(3n) { transform: rotate(-4deg); }
.bag__slot:nth-child(3n+1) { transform: rotate(3deg); }

/* Wishes */
.wish {
  position: relative; background: var(--blue-tint); border-radius: 40px; overflow: hidden;
  min-height: clamp(340px, 42vw, 520px); display: grid; align-items: end; justify-items: center;
}
.wish .bubble { top: 9%; right: 12%; width: min(34%, 190px); aspect-ratio: 1; }
.wish .bubble::after { left: auto; right: 38px; }
.wish__pet { width: min(62%, 340px); margin-bottom: -2%; }
.wish__give {
  position: absolute; left: clamp(16px, 4vw, 40px); bottom: clamp(16px, 4vw, 40px);
}

/* Map */
.map {
  position: relative; aspect-ratio: 1 / 1; max-width: 560px; width: 100%; justify-self: center;
  background: var(--map-land); border-radius: 40px; overflow: hidden;
}
.map svg.map__art { position: absolute; inset: 0; width: 100%; height: 100%; }
.pin {
  position: absolute; width: 17%; aspect-ratio: 1; margin: -8.5% 0 0 -8.5%;
  background: #eaf6ff; border: 4px solid #fff; border-radius: 50%; overflow: hidden;
  display: grid;
}
.pin img { width: 160%; max-width: none; margin: -10% 0 0 -30%; }
.pin--you { border-color: var(--sunshine); width: 20%; margin: -10% 0 0 -10%; }
.blur { position: absolute; border-radius: 50%; background: rgba(255, 201, 60, .32); transform: translate(-50%, -50%); }

/* Private by design */
.privacy-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(20px, 3vw, 32px); }
.privacy-list li { font-size: clamp(1.3rem, 2.3vw, 1.9rem); line-height: 1.2; font-weight: 700; }
.privacy-list span { display: block; font-weight: 500; font-size: 1.1rem; color: #d6d9e6; line-height: 1.45; margin-top: 4px; max-width: 32em; }
.more { font-weight: 800; }

/* Close */
.close { background: var(--sunshine); color: var(--cta-text); text-align: left; }
.close h2 { max-width: 12em; }
.close__grid { display: grid; gap: 36px; align-items: end; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .close__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }
.close__pets { display: flex; align-items: flex-end; justify-content: center; gap: 0; }
.close__pets img { width: 33%; }
.close .store-badge { border-bottom-color: #000; }

/* Footer: the name returns at full width */
.footer { background: var(--bg); padding-block: clamp(48px, 7vw, 96px) 32px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 12px 32px; font-weight: 700; font-size: 1.15rem; padding-bottom: clamp(32px, 6vw, 72px); }
.footer__links a { color: var(--ink); }
.footer__word { width: 100%; max-width: 640px; margin-bottom: 28px; }
.footer__small { color: var(--ink-muted); font-size: 1rem; }

/* Legal and support pages */
.doc { padding-block: clamp(32px, 6vw, 80px) var(--section); }
.doc__inner { max-width: 760px; }
.doc h1 { font-size: clamp(2.6rem, 6vw, 4.5rem); margin-bottom: 16px; }
.doc__meta { color: var(--ink-muted); font-weight: 600; margin-bottom: 40px; }
.doc h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin: 56px 0 14px; letter-spacing: -0.01em; line-height: 1.1; }
.doc h3 { margin: 28px 0 8px; }
.doc p, .doc li { margin-bottom: 14px; }
.doc ul { padding-left: 1.3em; margin: 0 0 14px; }
.doc li::marker { color: var(--sunshine-deep); }
.doc .callout { background: var(--sunshine-tint); border-radius: 24px; padding: 20px 24px; margin: 24px 0; }
.doc .callout p:last-child { margin-bottom: 0; }
.doc table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: 1rem; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid #d8e0ef; }
.doc th { background: var(--blue-tint); }
.table-scroll { overflow-x: auto; }

details.faq { background: #fff; border-radius: 24px; margin-bottom: 14px; }
details.faq summary {
  cursor: pointer; list-style: none; padding: 18px 24px; font-weight: 800; font-size: 1.25rem; line-height: 1.25;
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+"; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--sunshine);
  display: grid; place-items: center; font-size: 1.4rem; line-height: 1; color: var(--cta-text);
}
details.faq[open] summary::after { content: "\2212"; }
details.faq .faq__body { padding: 0 24px 8px; }
.contact-grid { display: grid; gap: 16px; margin-top: 8px; }
@media (min-width: 700px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-grid > div { background: var(--blue-tint); border-radius: 24px; padding: 22px 24px; }
.contact-grid h3 { margin: 0 0 6px; }
.contact-grid p { margin: 0; }

/* 404 */
.lost { padding-block: clamp(40px, 8vw, 110px); text-align: left; }
.lost img { width: min(260px, 60%); margin-bottom: 8px; }
.lost p { margin: 20px 0 28px; }

/* Motion: progressive. Content stays visible without script. */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0ms); }
.js .reveal.in { opacity: 1; transform: none; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.bob { animation: bob 3.6s ease-in-out infinite; }
.bob--late { animation-delay: -1.8s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .bob { animation: none; }
  .btn, .store-badge { transition: none; }
}