/*
  AnimalClick hero.

  Structure: CSS Grid for the page skeleton (copy | visual, then the
  feature-card grid). Absolute positioning is confined to two controlled
  containers - the decorative layer and .hero-visual.

  Proportions come from the approved mock-up, measured on a 1536x1024
  canvas. Sizes are given in cqw (1cqw = 1% of the stage width), so the
  desktop composition scales as one piece; the mobile breakpoint switches
  to clamp()/rem values.

  Stacking order (all in the .stage stacking context):
    1 decor  ·  2 phones  ·  3 bird  ·  4 feature cards  ·  5 dog/cat/rabbit
*/

@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/figtree-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/figtree-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/figtree-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/figtree-800.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}

:root {
  --bg: #fef0f2;
  --blob: #fccfd9;
  --accent: #fe1f7c;
  --ink: #0a0a0f;
  --body: #26262e;
  --card: #ffffff;
  --rule: #f4bcce;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

h1, h2 {
  margin: 0;
  line-height: 1.1;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.accent {
  color: var(--accent);
}

/* ---------- Stage ---------- */

.stage {
  position: relative;
  width: 100%;
  max-width: 1536px;
  margin: 0 auto;
  padding-bottom: 2.5cqw;
  container-type: inline-size;
  overflow: hidden;
  background: var(--bg);
}

/* ---------- Layer 1: decoration ---------- */

.decor {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.decor .deco,
.hero-visual .deco {
  position: absolute;
}

/* Traced from the mock-up: a shallow wave in the top-right corner,
   340x262 on the 1536 canvas. */
.blob {
  position: absolute;
  top: 0;
  right: 0;
  width: 22.14cqw;
  height: auto;
  fill: var(--blob);
}

.dots {
  position: absolute;
  left: 87.6%;
  top: 1.95cqw;
  width: 10.1%;
  height: 4.2cqw;
  background-image: radial-gradient(circle, #f9b6c6 22%, transparent 24%);
  background-size: 20% 33%;
}

/* 70% of the branch stays on the page: 30% of its width hangs off the edge. */
.leaf-left {
  left: -2.16%;
  top: 21.5cqw;
  width: 7.2%;
}

/* Matches the mock-up's vertical span (y 250-580 on the 1536 canvas):
   higher up, smaller and paler than the left branch, so it fans out
   softly above and behind the cat. */
.leaf-right {
  left: 88.8%;
  top: 16.3cqw;
  width: 5.2%;
  opacity: 0.5;
  transform: scaleX(-1);
}

.heart-copy {
  left: 2.6%;
  top: 12.05cqw;
  width: 2.6%;
}

.paw-mid {
  left: 41.7%;
  top: 35.8cqw;
  width: 3.6%;
  opacity: 0.55;
}

/* Rests over the first card's bottom-left corner, so it sits above the
   card (z 4) rather than behind it with the rest of the decoration. */
.toy-rope {
  position: absolute;
  left: 2.5%;
  top: 53.5cqw;
  width: 15%;
  z-index: 5;
  pointer-events: none;
}

/* Bottom-right, filling the empty space under the rabbit. */
.toy-ball {
  right: 6%;
  top: 58.5cqw;
  width: 6.2%;
}

/* ---------- Hero grid ---------- */

.hero {
  position: relative;
}

.hero-inner {
  display: grid;
  grid-template-columns: 42.3% 57.7%;
  align-items: start;
}

/* Left column ------------------------------------------------ */

.hero-copy {
  position: relative;
  z-index: 3;
  padding-top: 1.95cqw;
  /* cqw, not %: these align to the stage, not the grid column. */
  padding-left: 7.94cqw;
}

.brand {
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  margin-left: -5.47cqw;
}

.brand-logo {
  width: 5.21cqw;
  border-radius: 1.2cqw;
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.35cqw;
}

.brand-name {
  font-size: 1.69cqw;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1;
}

.brand-tagline {
  font-size: 0.72cqw;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e0709a;
  line-height: 1;
}

.headline {
  margin-top: 5.21cqw;
  font-size: 5.08cqw;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--ink);
  white-space: nowrap;
  /* Condensed so the line occupies the mock-up's width at its cap height. */
  transform: scaleX(0.902);
  transform-origin: left center;
}

.lead {
  margin-top: 0.78cqw;
  max-width: 33.6cqw;
  font-size: 1.27cqw;
  line-height: 1.49;
  color: var(--body);
}

.cta-line {
  margin-top: 1.3cqw;
  /* 18px on the 1536 canvas (was 1.3cqw / 20px) */
  font-size: 1.17cqw;
  font-weight: 700;
  color: var(--accent);
  /* Same measure as the lead, so the line wraps inside the copy column
     instead of running under the phones. */
  max-width: 33.6cqw;
}

.badges {
  display: flex;
  align-items: center;
  gap: 1.3cqw;
  margin-top: 1.89cqw;
}

.badge-link {
  display: block;
  transition: transform 0.15s ease;
}

.badge-link:hover {
  transform: translateY(-2px);
}

.badge-apple {
  width: 12.24cqw;
}

.badge-google {
  width: 12.83cqw;
}

/* Right column: the controlled visual container ---------------- */

.hero-visual {
  position: relative;
  aspect-ratio: 886 / 880;
  /* No z-index here: the phones, bird and animals stack directly against
     the feature cards, so the dog can sit above them. */
}

/* Layer 2: phones */

.phone {
  position: absolute;
  z-index: 2;
  filter: drop-shadow(0 2.2cqw 2.4cqw rgba(33, 26, 36, 0.28));
}

/* Splayed V, same size, overlapping: the left phone leans anticlockwise
   and sits in front, the right one leans clockwise, behind and slightly
   higher. */

.phone-left {
  left: 7%;
  top: 13%;
  width: 30%;
  transform: rotate(-7deg);
  z-index: 2;
}

.phone-right {
  left: 24%;
  top: 11%;
  width: 30%;
  transform: rotate(5deg);
  z-index: 1;
}

/* Layer 3: bird */

/* Perched so its feet meet the right phone's top edge. The feet sit 73%
   down the asset, so top/left are offset to keep them on that same spot
   as the width changes. */
.bird {
  position: absolute;
  left: 39.4%;
  top: 0.1%;
  width: 18%;
}

/* Behind the phones, so the tail disappears behind the frame and only
   reappears past its right edge. */
.bird-back {
  z-index: 0;
}

/* In front, clipped along the phone's top edge - which passes through the
   feet and drops 8.7% of the bird's height across its width at the phone's
   5deg tilt - so only the part standing above the phone shows in front. */
.bird-front {
  z-index: 3;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 71.4%);
}

/* Layer 5: animals, above the feature cards */

.animal {
  position: absolute;
  filter: drop-shadow(0 1.6cqw 1.8cqw rgba(33, 26, 36, 0.2));
}

.dog {
  left: 39.5%;
  top: 36.9%;
  width: 48.4%;
  z-index: 5;
}

.cat {
  left: 65.6%;
  top: 46.4%;
  width: 46%;
  z-index: 6;
}

.rabbit {
  left: 79.6%;
  top: 67%;
  width: 20.4%;
  z-index: 7;
}

.paw-phones {
  left: 1.1%;
  top: 10.8%;
  width: 5.9%;
  opacity: 0.5;
  z-index: 1;
}

.paw-right {
  left: 62.6%;
  top: 27.8%;
  width: 5.1%;
  opacity: 0.55;
  z-index: 1;
}

.heart-top {
  left: 60.9%;
  top: 9.7%;
  width: 4.5%;
  z-index: 1;
}

/* ---------- Layer 4: feature cards ---------- */

.features {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.43cqw;
  /* Left edge lines up with the App Store button above it. */
  width: 70.8%;
  margin-left: 8.07%;
  /* Pulled up so the cards meet the bottom of the visual container and the
     dog's paws land across the top of the third card. */
  margin-top: -9.96cqw;
}

.card {
  display: flex;
  align-items: flex-start;
  gap: 1.3cqw;
  min-height: 10.4cqw;
  padding: 1.55cqw 1.5cqw 1.55cqw 2.1cqw;
  background: var(--card);
  border-radius: 1.3cqw;
  box-shadow: 0 1.2cqw 2.2cqw -1.4cqw rgba(33, 26, 36, 0.18);
}

.card-icon {
  width: 4.4cqw;
  flex: none;
  object-fit: contain;
}

.card-body h2 {
  font-size: 1.22cqw;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.5cqw;
  color: var(--ink);
}

.card-body p {
  font-size: 1.04cqw;
  line-height: 1.53;
  color: var(--body);
}

/* ---------- Closing ---------- */

.closing {
  position: relative;
  z-index: 3;
  margin-top: 3.13cqw;
  text-align: center;
}

.tagline {
  font-size: 2.02cqw;
  font-weight: 800;
  color: var(--ink);
}

.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.3cqw;
  margin-top: 1.5cqw;
}

.divider .rule {
  width: 12cqw;
  height: 1px;
  background: var(--rule);
}

.divider-paw {
  width: 1.95cqw;
  opacity: 0.85;
}

/* ---------- Footer ---------- */

.site-footer {
  padding: 20px 24px;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  color: #6b5f6a;
  font-size: 0.85rem;
}

.footer-logo {
  border-radius: 6px;
}

.footer-inner a {
  color: var(--accent);
  font-weight: 600;
}

.footer-inner a:hover {
  text-decoration: underline;
}

.footer-sep {
  color: #d9b9c6;
}

/* ---------- Legal pages (privacy policy) ---------- */

.legal {
  background: var(--bg);
}

.legal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  max-width: 940px;
  margin: 0 auto;
  padding: 28px 24px 0;
}

.legal-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.legal-logo {
  width: 46px;
  border-radius: 11px;
}

.legal-brand-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.legal-brand-name {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1;
}

.legal-brand-tagline {
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e0709a;
  line-height: 1;
}

.legal-back {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
}

.legal-back:hover {
  text-decoration: underline;
}

.legal-page {
  max-width: 940px;
  margin: 0 auto;
  padding: 40px 24px 64px;
}

.legal-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

.legal-page h1 {
  font-size: clamp(2rem, 5.4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.legal-date {
  margin-top: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #6b5f6a;
}

.legal-intro {
  margin-top: 20px;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--body);
  max-width: 68ch;
}

.legal-page section {
  margin-top: 42px;
  max-width: 68ch;
}

.legal-page h2 {
  font-size: clamp(1.15rem, 2.6vw, 1.35rem);
  font-weight: 700;
  color: var(--ink);
  padding-bottom: 12px;
  border-bottom: 1px solid #f7d8e2;
}

.legal-page section p {
  margin-top: 16px;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--body);
}

.legal-page section ul {
  margin-top: 16px;
  padding-left: 0;
  list-style: none;
}

.legal-page section li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--body);
}

.legal-page section li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.65em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.legal-page a {
  color: var(--accent);
  font-weight: 600;
}

.legal-page a:hover {
  text-decoration: underline;
}

.legal-contact {
  margin-top: 18px;
  padding: 22px 24px;
  background: var(--card);
  border-radius: 18px;
  box-shadow: 0 18px 34px -28px rgba(33, 26, 36, 0.3);
}

.legal-contact-name {
  font-weight: 700;
  color: var(--ink);
}

.legal-contact ul {
  margin-top: 12px;
}

.legal-contact li:last-child {
  margin-bottom: 0;
}

/* ---------- Tablet and mobile ---------- */

@media (max-width: 900px) {
  .stage {
    padding: 0 20px 36px;
    overflow: visible;
  }

  /* Trim the decoration back so the stacked layout stays uncrowded. */
  .blob,
  .dots,
  .heart-copy,
  .paw-mid,
  .leaf-right {
    display: none;
  }

  /* Sits beside the animal cluster rather than crowding the copy, still
     70% on the page. */
  .leaf-left {
    left: -3.9%;
    top: 30%;
    width: 13%;
    opacity: 0.5;
  }

  .toy-rope,
  .toy-ball {
    display: none;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: clamp(14px, 4vw, 28px);
  }

  .hero-copy {
    padding: 26px 0 0;
    text-align: center;
  }

  .brand {
    margin-left: 0;
    justify-content: flex-start;
    gap: 10px;
  }

  .brand-logo {
    width: 46px;
    border-radius: 11px;
  }

  .brand-name {
    font-size: clamp(0.95rem, 4vw, 1.15rem);
  }

  .brand-tagline {
    font-size: clamp(0.5rem, 2.2vw, 0.6rem);
  }

  .headline {
    margin-top: clamp(14px, 4vw, 24px);
    font-size: clamp(1.9rem, 8.4vw, 2.9rem);
    white-space: normal;
    transform: none;
  }

  .lead {
    margin-top: clamp(10px, 3vw, 16px);
    max-width: 60ch;
    margin-inline: auto;
    font-size: clamp(0.95rem, 3.9vw, 1.05rem);
  }

  .cta-line {
    margin-top: clamp(12px, 3.4vw, 18px);
    /* Drop the desktop cqw measure, which is far too narrow here. */
    max-width: 40ch;
    margin-inline: auto;
    font-size: clamp(1rem, 4.2vw, 1.15rem);
  }

  .badges {
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: clamp(14px, 3.6vw, 20px);
  }

  .badge-apple,
  .badge-google {
    width: clamp(132px, 40vw, 168px);
  }

  /* The cluster's content runs to ~112% of its box (the cat sits past the
     right edge), so the box is narrowed to keep all of it on screen. */
  .hero-visual {
    width: 88%;
    max-width: 400px;
    margin: clamp(8px, 3vw, 20px) auto 0;
  }

  .features {
    grid-template-columns: 1fr;
    gap: 14px;
    width: 100%;
    max-width: 460px;
    margin: clamp(18px, 5vw, 32px) auto 0;
  }

  .card {
    min-height: 0;
    gap: 16px;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 16px 30px -22px rgba(33, 26, 36, 0.3);
  }

  .card-icon {
    width: 48px;
  }

  .card-body h2 {
    font-size: clamp(1rem, 4.2vw, 1.1rem);
    margin-bottom: 6px;
  }

  .card-body p {
    font-size: clamp(0.88rem, 3.7vw, 0.95rem);
  }

  .closing {
    margin-top: clamp(26px, 7vw, 44px);
  }

  .tagline {
    font-size: clamp(1.25rem, 5.6vw, 1.7rem);
    max-width: 22ch;
    margin-inline: auto;
  }

  .divider {
    gap: 12px;
    margin-top: 16px;
  }

  .divider .rule {
    width: clamp(50px, 18vw, 90px);
  }

  .divider-paw {
    width: 20px;
  }
}