/* Peblings marketing site.
   Palette and type come from the app's retro theme (brand/README.md):
   sky #6CC3FF, ink #050810, HUD gold #E8B83C, Press Start 2P + VT323. */

@font-face {
  font-family: "Press Start 2P";
  src: url("assets/fonts/press_start_2p.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "VT323";
  src: url("assets/fonts/vt323.ttf") format("truetype");
  font-display: swap;
}

:root {
  --sky: #6cc3ff;
  --sky-deep: #5ab6fa;
  --sky-pale: #b9e3ff;
  --ink: #050810;
  --navy: #0f172a;
  --paper: #e7f0f9;
  --paper-deep: #d3e2f0;
  --cream: #efdcbb;
  --fur: #f0c99a;
  --gold: #e8b83c;
  --gold-hi: #ffd45a;
  --gold-shadow: #a6801f;
  --blue: #60a5fa;
  --blue-shadow: #2563eb;
  --grass: #6bc84a;
  --grass-shadow: #3e9b2e;
  --hunger: #e85a3c;
  --happy: #e8b83c;
  --clean: #3cb8e8;
  --energy: #4cc85a;
  --pixel: 4px;
  --title-font: "Press Start 2P", "Courier New", monospace;
  --body-font: "VT323", "Courier New", monospace;
  --measure: 62rem;            /* a section's column; #faq and the legal pages narrow it */
  --header-height: 4.25rem;    /* the sticky bar: anchors scroll to just under it */
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body-font);
  font-size: 1.45rem;
  line-height: 1.35;
}

img { display: block; max-width: 100%; height: auto; }
.pixel { image-rendering: pixelated; image-rendering: crisp-edges; }

a { color: var(--blue-shadow); }
a:hover { color: var(--ink); }

h1, h2, h3, h4 {
  font-family: var(--title-font);
  line-height: 1.5;
  margin: 0 0 0.75em;
  text-wrap: balance;
}
h1 { font-size: clamp(1.2rem, 3.2vw, 1.9rem); }
h2 { font-size: clamp(1rem, 2.6vw, 1.4rem); }
h3 { font-size: 0.85rem; }
p { margin: 0 0 1em; }

.wrap {
  width: min(100% - 2rem, var(--measure));
  margin-inline: auto;
}

/* Chunky retro frame: hard 4px outline, offset shadow, notched corners. */
.pixel-box {
  background: #fff;
  border: var(--pixel) solid var(--ink);
  clip-path: polygon(
    var(--pixel) 0, calc(100% - var(--pixel)) 0, 100% var(--pixel),
    100% calc(100% - var(--pixel)), calc(100% - var(--pixel)) 100%,
    var(--pixel) 100%, 0 calc(100% - var(--pixel)), 0 var(--pixel)
  );
}

/* ---- buttons ------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--title-font);
  font-size: 0.75rem;
  line-height: 1;
  padding: 1rem 1.25rem;
  color: var(--ink);
  background: var(--gold);
  text-decoration: none;
  border: var(--pixel) solid var(--ink);
  box-shadow: inset -4px -4px 0 var(--gold-shadow), inset 4px 4px 0 var(--gold-hi), 4px 4px 0 var(--ink);
  transition: transform 60ms steps(2), box-shadow 60ms steps(2);
}
.btn:hover, .btn:focus-visible {
  color: var(--ink);
  transform: translate(2px, 2px);
  box-shadow: inset -4px -4px 0 var(--gold-shadow), inset 4px 4px 0 var(--gold-hi), 2px 2px 0 var(--ink);
}
.btn:active {
  transform: translate(4px, 4px);
  box-shadow: inset 4px 4px 0 var(--gold-shadow), 0 0 0 var(--ink);
}
.btn--ghost {
  background: var(--paper);
  box-shadow: inset -4px -4px 0 var(--paper-deep), inset 4px 4px 0 #fff, 4px 4px 0 var(--ink);
}
.btn--ghost:hover, .btn--ghost:focus-visible {
  box-shadow: inset -4px -4px 0 var(--paper-deep), inset 4px 4px 0 #fff, 2px 2px 0 var(--ink);
}
.btn--small { font-size: 0.6rem; padding: 0.75rem 0.9rem; white-space: nowrap; }

/* ---- header -------------------------------------------------------- */

.site-header {
  background: var(--ink);
  color: var(--cream);
  border-bottom: var(--pixel) solid var(--gold);
  position: sticky;
  top: 0;
  z-index: 10;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-height);
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}
.brand img.mark { width: 2.25rem; height: 2.25rem; }
.brand img.wordmark { height: 1.25rem; width: auto; }
.site-nav { display: flex; align-items: center; gap: 1.25rem; }
.site-nav .nav-link {
  display: none;
  font-family: var(--title-font);
  font-size: 0.6rem;
  color: var(--cream);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 3px solid transparent;
}
.site-nav .nav-link:hover { color: var(--gold-hi); border-bottom-color: var(--gold); }
@media (min-width: 720px) { .site-nav .nav-link { display: inline; } }
@media (max-width: 479px) {
  .brand img.wordmark { display: none; }
  .btn--small { font-size: 0.5rem; padding: 0.7rem 0.75rem; }
}

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

.hero {
  position: relative;
  overflow: hidden;
  color: var(--ink);
  background:
    linear-gradient(to bottom, var(--sky-deep) 0 20%, var(--sky) 20% 55%, #8fd2ff 55% 80%, var(--sky-pale) 80%);
  padding: 3.5rem 0 0;
}
.hero__intro {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero h1 { text-shadow: 4px 4px 0 rgba(5, 8, 16, 0.18); max-width: 22ch; margin-bottom: 0.6em; }
.hero .lede { font-size: 1.45rem; max-width: 50ch; margin-bottom: 0.6em; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; align-items: center; margin-top: 0.5rem; }
.hero__wordmark { width: min(100%, 16rem); height: auto; margin-bottom: 1rem; }

/* The playground: the live widget beside its customisation panel */
.playground {
  position: relative;
  z-index: 1;
  margin-top: 2.5rem;
  display: grid;
  gap: 2rem;
  align-items: start;
  justify-items: center;
}
@media (min-width: 900px) {
  .playground { grid-template-columns: auto minmax(0, 1fr); gap: 2.5rem; justify-items: stretch; }
}
.playground__widget { width: 100%; max-width: 24rem; justify-self: center; }

/* Wide screens: intro, widget and panel in one row, all above the fold */
@media (min-width: 1240px) {
  .hero { padding-top: 2.5rem; }
  .hero__intro { display: none; }
  .hero__intro--wide { display: flex; text-align: left; align-items: flex-start; }
  .hero__intro--wide h1 { font-size: 1.35rem; max-width: 16ch; }
  .hero__intro--wide .lede { font-size: 1.35rem; }
  .hero__intro--wide .hero__actions { justify-content: flex-start; }
  .hero .hero__wide {
    width: min(100% - 2rem, 78rem);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr);
    gap: 2.5rem;
    align-items: start;
    position: relative;
    z-index: 1;
  }
  .hero .hero__wide .playground { display: contents; }
  .hero .hero__wide .playground__widget { justify-self: center; }
}

/* Pixel clouds drifting across the hero sky: every one loops the full width
   (start off the left edge, exit off the right), staggered by negative delays;
   the big ones move fast and the small faint ones slowly, for depth. */
.cloud {
  position: absolute;
  left: 0;
  width: 96px;
  height: 16px;
  background: #fff;
  box-shadow: 16px -16px 0 #fff, 32px -16px 0 #fff, 48px -16px 0 #fff, 32px -32px 0 #fff;
  opacity: var(--haze, 0.95);
  transform-origin: 0 100%;
  animation: drift var(--drift, 60s) linear infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform;
}
.cloud--wide {
  width: 128px;
  box-shadow: 16px -16px 0 #fff, 32px -16px 0 #fff, 48px -16px 0 #fff, 64px -16px 0 #fff, 80px -16px 0 #fff, 32px -32px 0 #fff, 64px -32px 0 #fff;
}
.cloud--a { top: 44px;  --size: 1;    --drift: 75s;  --delay: -6s; }
.cloud--b { top: 110px; --size: 1.6;  --drift: 52s;  --delay: -38s; }
.cloud--c { top: 26px;  --size: 0.7;  --drift: 125s; --delay: -70s; --haze: 0.7; }
.cloud--d { top: 150px; --size: 1.25; --drift: 62s;  --delay: -20s; }
.cloud--e { top: 74px;  --size: 0.85; --drift: 98s;  --delay: -88s; --haze: 0.8; }
.cloud--f { top: 200px; --size: 1.4;  --drift: 46s;  --delay: -14s; }
@keyframes drift {
  from { transform: translateX(-260px) scale(var(--size, 1)); }
  to { transform: translateX(100vw) scale(var(--size, 1)); }
}
@media (prefers-reduced-motion: reduce) {
  .cloud { animation: none; }
}
@media (max-width: 859px) {
  /* A phone's sky is narrow: keep four clouds, a size down, so the headline stays clear */
  .cloud--b, .cloud--f { display: none; }
  .cloud--a { --size: 0.8; }
  .cloud--d { --size: 0.9; top: 130px; }
}

.lawn {
  margin-top: 0;
  height: 56px;
  background:
    repeating-linear-gradient(to right, transparent 0 24px, var(--grass) 24px 32px) top / 100% 12px no-repeat,
    linear-gradient(var(--grass), var(--grass)) 0 12px / 100% 28px no-repeat,
    linear-gradient(var(--grass-shadow), var(--grass-shadow)) bottom / 100% 16px no-repeat;
}

/* Pets row: four sprites standing on the lawn. */
.pets {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 0.5rem;
  margin: 3rem auto -30px;   /* feet down on the grass, over the lawn strip */
  max-width: 40rem;
}
.pets img { width: 22%; height: auto; max-width: 128px; }
.pets img:nth-child(1) { animation: bob 2.4s steps(2) infinite; }
.pets img:nth-child(2) { animation: bob 2.4s steps(2) infinite -0.6s; }
.pets img:nth-child(3) { animation: bob 2.4s steps(2) infinite -1.2s; }
.pets img:nth-child(4) { animation: bob 2.4s steps(2) infinite -1.8s; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .pets img { animation: none; } }
/* Once the sprite strips load, widget.js swaps each picture for the species' real idle clip */
.pet-idle {
  flex: none;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
@media (max-width: 620px) { .pet-idle { zoom: 0.6; } }

/* ---- sections ------------------------------------------------------ */

.section { padding: 4rem 0; scroll-margin-top: calc(var(--header-height) + var(--pixel)); }
.section--alt { background: #fff; border-top: var(--pixel) solid var(--ink); border-bottom: var(--pixel) solid var(--ink); }
.section--dark { background: var(--ink); color: var(--cream); }
.section--dark h2 { color: var(--gold); }
.section--dark a { color: var(--gold-hi); }
.eyebrow {
  font-family: var(--title-font);
  font-size: 0.6rem;
  color: var(--blue-shadow);
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}
.section--dark .eyebrow { color: var(--gold); }

.steps {
  counter-reset: step;
  display: grid;
  gap: 1.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
@media (min-width: 720px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li {
  counter-increment: step;
  padding: 1.25rem 1.25rem 1.25rem 1.5rem;
  position: relative;
}
.steps li::before {
  content: counter(step);
  font-family: var(--title-font);
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--gold);
  border: var(--pixel) solid var(--ink);
  padding: 0.5rem 0.65rem;
  display: inline-block;
  margin-bottom: 1rem;
}
.steps h3 { margin-bottom: 0.5rem; }

.features {
  display: grid;
  gap: 1.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
@media (min-width: 620px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .features { grid-template-columns: repeat(3, 1fr); } }
.features li { padding: 1.25rem; }
.features .icon {
  width: 48px;
  height: 48px;
  margin-bottom: 0.75rem;
}
.features .icon-stats { width: auto; display: flex; gap: 6px; align-items: center; }
.features .icon-stats img { width: 24px; height: 24px; }
/* The mystery invitation's gold question marks, the big one in the middle */
.features .icon-mystery { width: auto; display: flex; gap: 6px; align-items: center; height: 52px; }
.features .icon-mystery b {
  font-family: "Press Start 2P", monospace;
  font-weight: normal;
  font-size: 18px;
  line-height: 1;
  color: #FFD45A;
  text-shadow: 3px 3px 0 #050810;
  transform: translateY(-3px);
}
.features .icon-mystery b:nth-child(2) { font-size: 30px; transform: translateY(2px); }
/* The dressed-up pet: an idle frame of the 64x94 strip; the top 30 rows are headroom */
.features .icon-pet {
  display: block;
  width: 64px;
  height: 94px;
  margin-top: -22px;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.features .icon-scenes { width: auto; display: flex; }
.features .icon-scenes img {
  width: 42px;
  height: 28px;
  object-fit: cover;
  border: 3px solid var(--ink);
  background: var(--navy);
}
.features .icon-scenes img + img { margin-left: -10px; margin-top: 8px; }
.features .icon-pet--bed {
  position: relative;
  margin-left: 10px;
}
.features .icon-pet--bed::before {
  content: "";
  position: absolute;
  left: -10px;
  bottom: -6px;
  width: 84px;
  height: 48px;
  background: url("assets/sprites/bed.png") 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
  z-index: -1;
}
.features h3 { margin-bottom: 0.5rem; }
.features p { margin: 0; }

.scenes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* always a divisor of twelve, so no short last row */
  gap: 1rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
@media (min-width: 520px) { .scenes { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 760px) { .scenes { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .scenes { grid-template-columns: repeat(6, 1fr); } }
.scenes li {
  border: var(--pixel) solid var(--ink);
  background: var(--navy);
  overflow: hidden;
}
.scenes img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.scenes figcaption {
  font-family: var(--title-font);
  font-size: 0.5rem;
  padding: 0.5rem;
  text-align: center;
  color: var(--cream);
}
.scenes figure { margin: 0; }


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

#faq { --measure: 52rem; }   /* a reading-width column, centred with its label */
#faq .eyebrow { margin-bottom: 1.5rem; }
.faq details {
  border: var(--pixel) solid var(--ink);
  background: #fff;
  margin-bottom: 1rem;
}
.faq summary {
  cursor: pointer;
  font-family: var(--title-font);
  font-size: 0.7rem;
  line-height: 1.5;
  padding: 1rem 1.25rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--blue-shadow); }
.faq details[open] summary::after { content: "–"; }
.faq details[open] summary { border-bottom: var(--pixel) solid var(--ink); background: var(--paper); }
.faq .answer { padding: 1rem 1.25rem 0.25rem; }

/* ---- cta band ------------------------------------------------------ */

.cta {
  text-align: center;
  padding: 4rem 0;
  background: var(--sky);
  border-top: var(--pixel) solid var(--ink);
}
.cta h2 { font-size: clamp(1rem, 3vw, 1.5rem); }
.pets--cluster { margin: 0 auto 1.5rem; max-width: none; width: fit-content; gap: 0.5rem; }   /* a huddle sized to its sprites, so it stays centred */

/* ---- footer -------------------------------------------------------- */

.site-footer {
  background: var(--ink);
  color: var(--cream);
  padding: 2.5rem 0;
  font-size: 1.15rem;
  border-top: var(--pixel) solid var(--gold);
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  justify-content: space-between;
  align-items: flex-start;
}
.site-footer a { color: var(--cream); }
.site-footer a:hover { color: var(--gold-hi); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; }
.site-footer nav a { font-family: var(--title-font); font-size: 0.55rem; text-decoration: none; }
.site-footer .legal { opacity: 0.7; width: 100%; margin-top: 0.5rem; }

/* ---- legal pages --------------------------------------------------- */

.legal-page {
  padding: 3rem 0 4rem;
}
.legal-page { --measure: 46rem; }
.legal-page h1 { margin-bottom: 0.5rem; }
.legal-page .updated {
  font-family: var(--title-font);
  font-size: 0.55rem;
  color: var(--blue-shadow);
  margin-bottom: 2.5rem;
}
.legal-page h2 { margin-top: 2.5rem; padding-top: 0.5rem; border-top: var(--pixel) solid var(--paper-deep); }
.legal-page h3 { margin-top: 1.75rem; font-size: 0.7rem; }
.legal-page ul, .legal-page ol { padding-left: 1.5rem; margin-bottom: 1.25em; }
.legal-page li { margin-bottom: 0.4em; }
.legal-page table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5em;
  font-size: 1.25rem;
}
.legal-page th, .legal-page td {
  text-align: left;
  vertical-align: top;
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--paper-deep);
}
.legal-page th {
  font-family: var(--title-font);
  font-size: 0.55rem;
  background: var(--paper);
}
.legal-page .summary-box {
  background: #fff;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}
.legal-page .summary-box h2 { border: 0; margin-top: 0; padding-top: 0; font-size: 0.8rem; }
.legal-page .summary-box ul { margin-bottom: 0; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--gold);
  color: var(--ink);
  padding: 0.75rem 1rem;
  font-family: var(--title-font);
  font-size: 0.6rem;
  z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }