@font-face { font-family: "Benzin"; src: url("assets/fonts/benzin-semibold.ttf") format("truetype"); font-style: normal; font-weight: 100 900; font-stretch: normal; font-display: swap; }

@font-face { font-family: "Onest"; src: url("assets/fonts/onest-regular.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Onest"; src: url("assets/fonts/onest-medium.ttf") format("truetype"); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: "Onest"; src: url("assets/fonts/onest-semibold.ttf") format("truetype"); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: "Onest"; src: url("assets/fonts/onest-bold.ttf") format("truetype"); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: "Onest"; src: url("assets/fonts/onest-bold.ttf") format("truetype"); font-style: normal; font-weight: 800; font-display: swap; }
@font-face { font-family: "Onest"; src: url("assets/fonts/onest-bold.ttf") format("truetype"); font-style: normal; font-weight: 900; font-display: swap; }

:root {
  color-scheme: light;
  font-family: "Onest", Arial, sans-serif;
  --font-display: "Benzin", Arial, sans-serif;
  --font-body: "Onest", Arial, sans-serif;
  --pink: #f61979;
  --ink: #17151c;
}

* {
  box-sizing: border-box;
  font-synthesis: none;
  letter-spacing: 0 !important;
}

html {
  background: #f7f4ee;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--ink);
}

.preview-controls {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 50%;
  display: flex;
  align-items: flex-start;
  filter: drop-shadow(0 4px 12px rgb(16 24 32 / .12));
  transform: translateX(-50%);
  transition: opacity 320ms ease,transform 420ms cubic-bezier(.22,1,.36,1);
  will-change: opacity,transform;
}

.preview-controls.is-scroll-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%,-115%);
}

.preview-controls-reveal-zone {
  position: fixed;
  z-index: 9999;
  top: 0;
  right: 0;
  left: 0;
  height: 64px;
}

.preview-controls__edge {
  display: block;
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
}

.preview-controls__edge--right { transform: scaleX(-1); }

.preview-controls__panel {
  padding: 4px 24px;
  border-radius: 0 0 12px 12px;
  background: #101820;
}

.preview-controls__switch {
  display: flex;
  padding: 0;
  align-items: center;
  gap: 8px;
  border: 0;
  color: #fff;
  background: transparent;
  font: 500 12px/14px var(--font-body);
  cursor: pointer;
}

.preview-controls__label {
  transition: color 180ms ease;
  white-space: nowrap;
}

.preview-controls__label--desktop { color: #f04e98; }
.preview-controls__label--mobile { color: #fff; }

.preview-controls__track {
  display: flex;
  width: 20px;
  height: 12px;
  padding: 1.2px;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  border-radius: 100px;
  background: #f04e98;
  transition: background-color 180ms ease;
}

.preview-controls__track i {
  width: 9.6px;
  height: 9.6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 .36px .72px rgb(12 17 29 / .05);
  transform: translateX(0);
  transition: transform 220ms cubic-bezier(.2,.8,.2,1);
}

.preview-controls[data-preview-mode="mobile"] .preview-controls__label--desktop { color: #fff; }
.preview-controls[data-preview-mode="mobile"] .preview-controls__label--mobile { color: #c1f062; }
.preview-controls[data-preview-mode="mobile"] .preview-controls__track { background: #c1f062; }
.preview-controls[data-preview-mode="mobile"] .preview-controls__track i { transform: translateX(8px); }

.preview-controls__switch:focus-visible {
  border-radius: 4px;
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.mobile-preview {
  position: fixed;
  z-index: 9990;
  inset: 0;
  display: grid;
  padding: 24px 16px;
  place-items: center;
  overflow: hidden;
  background: #dfe6ea;
}

.mobile-preview[hidden] { display: none; }

.mobile-preview__device {
  width: min(410px,calc(100vw - 32px));
  height: min(864px,calc(100vh - 48px));
  padding: 10px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / .18);
  border-radius: 50px;
  background: #101820;
  box-shadow: 0 28px 80px rgb(16 24 32 / .28),inset 0 0 0 1px rgb(0 0 0 / .4);
}

.mobile-preview iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 40px;
  background: #fff;
}

body.is-mobile-preview {
  overflow: hidden;
}

body.is-mobile-preview > main {
  visibility: hidden;
}

html.is-embedded-preview .preview-controls,
html.is-embedded-preview .preview-controls-reveal-zone,
html.is-embedded-preview .mobile-preview {
  display: none !important;
}

html.is-embedded-preview,
html.is-embedded-preview body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

html.is-embedded-preview::-webkit-scrollbar,
html.is-embedded-preview body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

@media (max-width: 700px) {
  .preview-controls,
  .preview-controls-reveal-zone { display: none; }
}

h1,
h2,
h3,
h4,
h5,
h6,
button,
.button,
.brand,
.section__eyebrow,
.profile-builder__step,
.profile-option span {
  font-family: var(--font-display);
}

main { overflow: hidden; }

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero {
  position: relative;
  isolation: isolate;
  width: calc(100% - 16px);
  height: min(1080px, calc((100vw - 16px) * .56723));
  min-height: 620px;
  max-width: 1904px;
  margin: 8px auto 0;
  overflow: hidden;
  border-radius: clamp(24px, 3.2vw, 60px) clamp(24px, 3.2vw, 60px) 0 0;
  background: #6bc6ee;
  --pointer-x: 0;
  --pointer-y: 0;
}

.hero::before {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  height: 24%;
  background: linear-gradient(180deg,rgb(36 157 219 / .34) 0%,rgb(58 172 225 / .14) 48%,rgb(75 184 230 / 0) 100%);
  content: '';
  pointer-events: none;
}

.hero__scene,
.hero__layer,
.hero__title-art,
.hero__accent,
.hero__blur {
  position: absolute;
}

.hero__scene {
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.hero__layer,
.hero__accent,
.hero__blur,
.hero__title-art {
  will-change: transform;
  transform: translate3d(
    calc(var(--pointer-x) * var(--depth, 0) * 1px),
    calc(var(--pointer-y) * var(--depth, 0) * 1px),
    0
  );
}

.hero__background {
  --depth: -0.18;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  animation: background-breathe 12s ease-in-out infinite alternate;
}

.hero__title-art {
  --depth: 0.32;
  top: calc(8.52% + 17px);
  left: 5.25%;
  width: 41.61%;
  height: 41.3%;
  cursor: default;
}

.hero__title-line {
  position: absolute;
  inset: 0;
  overflow: hidden;
  filter: drop-shadow(0 12px 8px rgb(123 18 78 / 0.13));
  transform: translate3d(0, 110%, 0) rotate(2deg);
  animation: title-reveal 900ms cubic-bezier(.2, .8, .2, 1) forwards;
}

.hero__title-line img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  transition: transform 650ms cubic-bezier(.16, 1, .3, 1);
}

.hero__title-line--top {
  width: 98.2%;
  height: 83.45%;
  animation-delay: 160ms;
}

.hero__title-line--bottom {
  width: 100%;
  height: 100%;
  animation-delay: 330ms;
}

.hero__title-art:hover .hero__title-line--top img {
  transform: translate3d(-1.5%, -1.5%, 0) rotate(-0.5deg);
}

.hero__title-art:hover .hero__title-line--bottom img {
  transform: translate3d(1.25%, 1%, 0) rotate(0.35deg);
}

.hero__accent {
  object-fit: contain;
  animation: accent-float 4.8s ease-in-out infinite alternate;
}

.hero__accent--left {
  --depth: 0.52;
  top: 15.43%;
  left: 5.25%;
  width: 5.02%;
  height: 11.41%;
}

.hero__accent--right {
  --depth: 0.44;
  top: 27.23%;
  left: 44.35%;
  width: 2.2%;
  height: 4.66%;
  animation-delay: -1.4s;
}

.hero__accent--star {
  --depth: 0.38;
  top: 23.11%;
  left: 43.6%;
  width: 2.12%;
  height: 5.2%;
  animation-delay: -2.3s;
}

.hero__pets {
  --depth: 0.72;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  animation: foreground-breathe 7s ease-in-out infinite alternate;
}

.hero__blur {
  --depth: 0.95;
  z-index: 6;
  top: auto;
  bottom: 0;
  object-fit: fill;
  pointer-events: none;
  animation: flowers-drift 5.5s ease-in-out infinite alternate;
}

.hero__blur--left {
  left: 0;
  width: 22.8%;
  height: 50.93%;
}

.hero__blur--right {
  right: 0;
  width: 29.52%;
  height: 52.69%;
  animation-delay: -2.1s;
}

.header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 32px 80px;
  color: white;
  font: 600 18px/22px var(--font-body);
}

.brand {
  display: block;
  width: 303px;
  height: 32px;
  flex: 0 0 303px;
  line-height: 0;
}

.brand img {
  display: block;
  width: 100%;
  height: 100%;
}

.header-nav {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex: 1 1 auto;
}

.header-nav a,
.header-nav__dropdown {
  display: flex;
  padding: 0;
  align-items: center;
  gap: 4px;
  border: 0;
  color: rgb(255 255 255 / .8);
  background: transparent;
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 180ms ease, transform 180ms ease;
}

.header-nav__dropdown:first-child { color: #fff; }
.header-nav__dropdown img { display: block; width: 16px; height: 16px; }
.header-nav a:hover,
.header-nav__dropdown:hover {
  opacity: 0.62;
  transform: translateY(-1px);
}

.header-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 32px;
  flex: 0 0 auto;
}

.header-tools button,.header-tools__account {
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: opacity 180ms ease,transform 180ms ease;
}

.header-tools button:hover,.header-tools__account:hover { opacity: .62; transform: translateY(-1px); }
.header-tools button img { display: block; width: 32px; height: 32px; }
.header-tools__account { width: 39px; height: 39px; overflow: hidden; }
.header-tools__account img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1400px) {
  .header { gap: 28px; padding-right: 48px; padding-left: 48px; font-size: 16px; }
  .brand { width: 230px; height: 24px; flex-basis: 230px; }
  .header-nav,.header-tools { gap: 20px; }
}

.hero__ai-card {
  position: absolute;
  z-index: 8;
  top: 14.17%;
  right: 4.2%;
  width: clamp(280px,17vw,320px);
  padding: 24px 16px 16px;
  border: 1px solid rgb(255 255 255 / .58);
  border-radius: 24px;
  text-align: center;
  background: rgb(255 255 255 / .78);
  box-shadow: 0 18px 44px rgb(16 24 32 / .1),inset 0 1px 0 rgb(255 255 255 / .6);
  backdrop-filter: blur(12px) saturate(1.08);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
  opacity: 0;
  transform: translateY(18px);
  animation: content-in 700ms 900ms cubic-bezier(.2, .8, .2, 1) forwards;
}

.hero__ai-card h2 {
  margin: 0 0 8px;
  font-size: clamp(15px, 1.04vw, 20px);
  line-height: 1.15;
  letter-spacing: -.03em;
  text-transform: uppercase;
}

.hero__ai-card p {
  margin: 0 0 16px;
  color: #4f606b;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
}

.hero__ai-card .button {
  width: calc(100% - 24px);
  min-height: 46px;
  margin: 0 auto;
  padding: 0 16px;
  border-radius: 1000px;
  color: #101820;
  background: #c1f062;
  font: 400 14px/18px var(--font-display);
  text-transform: uppercase;
}

.hero__feed-cta {
  position: absolute;
  z-index: 9;
  top: calc(58% + 60px);
  left: calc(5.25% + 20px);
  transform: none;
}

.hero__feed-cta .button {
  min-width: 210px;
  background: white;
  text-transform: uppercase;
}

.hero__wave {
  position: absolute;
  z-index: 7;
  right: 0;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 6.4%;
  pointer-events: none;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
}

.button:hover {
  transform: translateY(-3px);
}

.button--primary {
  color: white;
  background: var(--pink);
  box-shadow: 0 10px 24px rgb(246 25 121 / 0.25);
}

.button--glass {
  border: 1px solid rgb(255 255 255 / 0.6);
  background: rgb(255 255 255 / 0.38);
  backdrop-filter: blur(12px);
}

@keyframes title-reveal {
  to { transform: translate3d(0, 0, 0) rotate(0); }
}

@keyframes content-in {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes background-breathe {
  from { scale: 1.015; }
  to { scale: 1.035; }
}

@keyframes foreground-breathe {
  from { translate: 0 0; }
  to { translate: 0 -0.65%; }
}

@keyframes flowers-drift {
  from { translate: -0.4% 0.2%; rotate: -0.2deg; }
  to { translate: 0.5% -0.8%; rotate: 0.35deg; }
}

@keyframes accent-float {
  from { translate: 0 2%; rotate: -2deg; scale: 0.98; }
  to { translate: 0 -3%; rotate: 2deg; scale: 1.02; }
}

@media (max-width: 800px) {
  .hero {
    width: calc(100% - 8px);
    height: 720px;
    min-height: 0;
    margin-top: 4px;
    border-radius: 28px 28px 0 0;
  }

  .hero__scene {
    inset: 0;
  }

  .hero__background {
    left: 0;
    width: 100%;
    min-width: 0;
    object-position: center;
  }

  .header {
    padding: 24px 20px;
    justify-content: space-between;
  }

  .header-nav {
    display: none;
  }

  .brand { width: 152px; height: 16px; flex-basis: 152px; }
  .header-tools { gap: 14px; }
  .header-tools button { width: 28px; height: 28px; }
  .header-tools button img { width: 28px; height: 28px; }
  .header-tools__account { width: 34px; height: 34px; }

  .hero__title-art {
    top: 12%;
    left: 4%;
    width: 92%;
    height: 30%;
  }

  .hero__accent--left { top: 18%; left: 3%; width: 10%; }
  .hero__accent--right { top: 29%; left: 93%; width: 5%; }
  .hero__accent--star { top: 25%; left: 90%; width: 5%; }

  .hero__pets {
    top: 25%;
    left: -55%;
    width: 210%;
    height: 75%;
    object-fit: contain;
    object-position: center bottom;
  }

  .hero__blur {
    top: auto;
    bottom: 0;
    width: 72%;
    height: 36%;
  }

  .hero__ai-card { display: none; }

  .hero__feed-cta { top: calc(42% + 20px); left: 50%; transform: translateX(-50%); }

  .hero__feed-cta .button { min-width: 188px; }

  .hero__wave {
    right: auto;
    left: 50%;
    width: auto;
    max-width: 100%;
    height: auto;
    transform: translateX(-50%);
  }
}

@media (max-width: 480px) {
  .header { gap: 16px; padding-right: 16px; padding-left: 16px; }
  .brand { width: 132px; height: 14px; flex-basis: 132px; }
  .header-tools { gap: 10px; }
  .header-tools button { width: 26px; height: 26px; }
  .header-tools button img { width: 26px; height: 26px; }
  .header-tools__account { width: 30px; height: 30px; }

  .button {
    min-height: 42px;
    padding: 0 15px;
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }

  .hero__layer,
  .hero__title-art,
  .hero__accent,
  .hero__blur {
    transform: none !important;
  }
}

/* Homepage system */
.section {
  width: min(100% - 40px, 1500px);
  margin: 0 auto;
  padding: clamp(88px, 10vw, 160px) clamp(0px, 3vw, 46px);
}

.section h2 {
  margin: 18px 0 28px;
  font-size: clamp(48px, 7.2vw, 112px);
  line-height: .88;
  letter-spacing: -.065em;
}

.section__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.section__eyebrow span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 9px;
}

.section__eyebrow--light { color: white; }

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, .5fr);
  align-items: end;
  gap: 60px;
  margin-bottom: 64px;
}

.section-heading h2 { margin-bottom: 0; }
.section-heading > p { margin: 0; max-width: 480px; font-size: 17px; line-height: 1.6; }

.button--dark { color: white; background: #17151c; }
.button--lime { color: #17151c; background: #caff38; }
.text-button { padding: 0; border: 0; background: none; font: inherit; font-weight: 800; cursor: pointer; }
.inline-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

.matcher {
  width: min(calc(100% - 16px), 1904px);
  margin-top: 0;
  padding: clamp(70px, 5vw, 96px);
  border-radius: 0 0 clamp(24px, 2.1vw, 40px) clamp(24px, 2.1vw, 40px);
  background: #c1f062;
}
.matcher__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; margin-top: 70px; }
.matcher__intro h2 { font-size: clamp(58px, 7vw, 108px); }
.matcher__intro > p { max-width: 420px; font-size: 17px; line-height: 1.6; }
.matcher__progress { display: flex; gap: 8px; margin-top: 46px; }
.matcher__progress span { width: 54px; height: 4px; border-radius: 3px; background: #ddd7cf; transition: background 250ms ease; }
.matcher__progress span.is-active { background: var(--pink); }
.matcher__app { min-height: 590px; padding: clamp(28px, 4vw, 64px); border: 1px solid #ddd7cf; border-radius: 28px; background: #fffefa; box-shadow: 0 24px 80px rgb(28 19 11 / .08); }
.question-label { margin: 0 0 32px; font-size: clamp(25px, 3vw, 42px); font-weight: 850; letter-spacing: -.04em; }
.selector-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.pet-selector { min-height: 285px; border: 2px solid #e6e0d8; border-radius: 20px; background: #f4f0e9; font-size: 18px; font-weight: 850; cursor: pointer; transition: transform 200ms ease, border-color 200ms ease, background 200ms ease; }
.pet-selector:hover { transform: translateY(-4px); }
.pet-selector.is-selected { border-color: var(--pink); background: #fff0f6; }
.pet-selector__face { display: block; margin-bottom: 18px; font-size: 96px; filter: grayscale(1); }
.pet-selector.is-selected .pet-selector__face { filter: none; }
.choice-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.choice { min-height: 150px; padding: 20px; border: 2px solid #e6e0d8; border-radius: 18px; background: #f4f0e9; font-size: 18px; font-weight: 850; cursor: pointer; }
.choice.is-selected { color: white; border-color: var(--pink); background: var(--pink); }
.matcher__controls { display: flex; align-items: center; justify-content: flex-end; gap: 24px; margin-top: 36px; }
.matcher__next span { margin-left: 22px; }
.matcher__result { display: grid; grid-template-columns: .8fr 1.2fr; gap: 34px; align-items: center; min-height: 450px; }
.result-pack { height: 400px; overflow: hidden; border-radius: 18px; background: #caff38; }
.result-pack img { width: 170%; height: 120%; object-fit: cover; object-position: 15% 40%; }
.status-dot { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 850; text-transform: uppercase; }
.status-dot::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #62c841; }
.matcher__result h3 { margin: 18px 0; font-size: clamp(28px, 3vw, 45px); line-height: 1; letter-spacing: -.045em; }
.matcher__result p { margin-bottom: 28px; line-height: 1.5; color: #6a6560; }

.editorial {
  position: relative; display: grid; grid-template-columns: minmax(520px, .92fr) minmax(600px, 1.38fr) minmax(250px, .42fr);
  min-height: 900px; padding: 78px clamp(32px,4vw,80px) 34px; overflow: hidden; background: #fdf4ea;
}
.editorial__intro { position: relative; z-index: 4; padding-top: 54px; }
.editorial__intro .section__eyebrow { margin-bottom: 42px; color: var(--pink); }
.editorial__intro h2 { min-height: 80px; margin: 0; font-family: 'Benzin',sans-serif; font-size: clamp(36px,2.2vw,42px); font-weight: 700; line-height: .94; letter-spacing: -.055em; text-transform: uppercase; }
.editorial__intro h2 span { display: block; white-space: nowrap; transition: transform 420ms cubic-bezier(.2,.8,.2,1),opacity 240ms ease; }
.editorial__intro h2 span:last-child { position: relative; }
.editorial__intro h2 span:last-child::after { content: ''; position: absolute; left: 0; bottom: -7px; width: 34%; height: 12px; border-radius: 50%; background: var(--pink); transform: rotate(-3deg); }
.editorial__intro .collection-tabs { max-width: 430px; margin: 44px 0 42px; }
.editorial__benefits { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; max-width: 530px; padding: 0; margin: 0; list-style: none; }
.editorial__benefits li { border-right: 1px solid #d8d0c7; font-size: 13px; font-weight: 650; line-height: 1.3; }
.editorial__benefits li:last-child { border: 0; }
.editorial__benefits i { display: grid; width: 50px; height: 50px; margin-bottom: 12px; place-items: center; border: 1px solid #aaa39c; border-radius: 50%; font-size: 25px; font-style: normal; }
.editorial__scene { position: relative; z-index: 2; min-height: 780px; }
.editorial__ground { position: absolute; z-index: -1; right: -15%; bottom: -92px; left: -16%; height: 300px; border-radius: 50% 50% 0 0; background: radial-gradient(ellipse at 50% 0,#e8e1d6 0 12%,transparent 13%),linear-gradient(175deg,#ded7cc,#f8f0e6 58%); box-shadow: inset 0 22px 40px rgb(23 21 28 / .05); }
.editorial-product { position: absolute; bottom: 75px; transition: transform 620ms cubic-bezier(.18,.8,.2,1),opacity 260ms ease; }
.editorial-product--one { z-index: 2; left: 2%; width: 33%; }
.editorial-product--two { z-index: 3; left: 34%; width: 34%; }
.editorial-product--three { z-index: 2; right: 0; width: 33%; }
.editorial-product > img { display: block; width: 100%; height: 430px; object-fit: contain; filter: drop-shadow(0 25px 30px rgb(24 20 18 / .16)); }
.editorial-product__note { position: absolute; bottom: calc(100% + 22px); left: 6%; width: 190px; }
.editorial-product__note::after { content: '↘'; position: absolute; right: -22px; bottom: -15px; font-size: 35px; transform: rotate(8deg); }
.editorial-product__note b { display: block; margin-bottom: 5px; font: 700 27px/1 'Benzin',sans-serif; font-style: italic; }
.editorial-product__note span { display: inline-block; padding: 6px 9px; color: #fff; background: var(--pink); font: 600 14px/1 'Benzin',sans-serif; text-transform: uppercase; }
.editorial-product--two .editorial-product__note span { background: #7241ca; }
.editorial-product--three .editorial-product__note span { background: #ff6b14; }
.editorial-product__note small { display: block; margin-top: 10px; font-size: 13px; line-height: 1.25; }
.editorial-pouch { position: relative; display: flex; height: 430px; padding: 30px 24px; border-radius: 18px 18px 10px 10px; flex-direction: column; justify-content: center; color: #fff; background: #17151c; box-shadow: 0 25px 30px rgb(24 20 18 / .2),inset 0 12px 0 #29262e; transform: perspective(800px) rotateY(-4deg); }
.editorial-pouch::before { content: ''; position: absolute; inset: 15px 0 auto; height: 5px; border-top: 2px solid rgb(255 255 255 / .25); border-bottom: 2px solid rgb(255 255 255 / .14); }
.editorial-pouch strong { color: var(--pink); font: 700 clamp(20px,2vw,34px)/1 'Benzin',sans-serif; text-transform: uppercase; }
.editorial-pouch em { margin-top: 28px; font: 700 clamp(34px,3.4vw,61px)/.9 'Benzin',sans-serif; font-style: normal; text-transform: uppercase; }
.editorial-pouch small { margin-top: 15px; text-transform: uppercase; }
.editorial-pouch i { position: absolute; right: 22px; bottom: 20px; color: var(--pink); font-size: 40px; font-style: normal; }
.editorial-pouch--snack { height: 410px; color: #17151c; background: #ff7416; box-shadow: 0 25px 30px rgb(24 20 18 / .16),inset 0 12px 0 #ee6310; transform: perspective(800px) rotateY(4deg); }
.editorial-pouch--snack strong { font-size: 16px; color: #17151c; }
.editorial-pouch--snack em { font-size: clamp(27px,2.6vw,46px); }
.editorial-pouch--snack i { color: #17151c; }
.editorial__picker { position: relative; z-index: 5; display: flex; padding: 34px 0 0 16px; flex-direction: column; justify-content: flex-end; }
.editorial__mascot { min-height: 135px; margin: 0 0 25px; font: 650 15px/1.25 'Benzin',sans-serif; transform: rotate(-4deg); }
.editorial__mascot b { display: inline-block; margin-left: 12px; font-size: 50px; transform: rotate(30deg); }
.collection-tabs { display: grid; gap: 4px; }
.collection-tabs button { display: grid; grid-template-columns: 38px 1fr; align-items: center; min-height: 43px; padding: 8px 14px; border: 0; border-radius: 99px; background: transparent; font: 600 12px/1 'Benzin',sans-serif; text-align: left; text-transform: uppercase; cursor: pointer; transition: color 200ms ease,background 240ms ease,transform 240ms ease; }
.collection-tabs button:hover { transform: translateX(5px); }
.collection-tabs button.is-active { color: #d3ff4b; background: #17151c; }
.collection-tabs button b { color: inherit; }
.editorial__offer { display: grid; margin-top: auto; padding: 25px; border-radius: 28px; background: #d3ff4b; text-align: center; }
.editorial__offer > span { font-weight: 700; }
.editorial__offer > strong { margin: 5px 0 18px; font-size: 16px; }
.editorial__offer > strong b { font-size: 30px; }
.editorial__offer .button { display: flex; justify-content: space-between; }
.editorial__offer .button i { font-style: normal; }
.editorial__edit { margin-top: 15px; border: 0; background: transparent; font: 700 12px/1 'Onest',sans-serif; text-decoration: underline; cursor: pointer; }
.editorial.is-changing .editorial-product--one { opacity: 0; transform: translate(-45px,25px) rotate(-4deg); }
.editorial.is-changing .editorial-product--two { opacity: 0; transform: translateY(-35px) rotate(3deg); }
.editorial.is-changing .editorial-product--three { opacity: 0; transform: translate(45px,25px) rotate(5deg); }

.benefits { display: grid; grid-template-columns: 1.3fr .7fr .7fr; grid-template-rows: auto auto; gap: 18px; }
.benefits__lead { grid-row: 1 / 3; padding-right: 5vw; }
.benefits__lead p { max-width: 550px; font-size: 18px; line-height: 1.6; }
.proof { position: relative; min-height: 300px; padding: 30px; overflow: hidden; border: 1px solid #dcd6cf; border-radius: 24px; background: #fffefa; }
.proof--large { grid-column: 2 / 4; background: #caff38; }
.proof--pink { color: white; background: var(--pink); }
.proof strong { display: block; margin-bottom: 30px; font-size: clamp(70px, 10vw, 156px); line-height: .75; letter-spacing: -.08em; }
.proof strong sup { font-size: .35em; }
.proof span { display: block; max-width: 260px; font-size: 18px; font-weight: 800; }
.proof i { position: absolute; right: 22px; bottom: 22px; font-size: 11px; font-style: normal; }

.technologies { width: min(100% - 32px, 1600px); border-radius: 44px; background: #e7e0d5; }
.tech-list { border-top: 1px solid #aaa298; }
.tech-item { position: relative; display: grid; grid-template-columns: 60px 1fr .7fr; align-items: center; min-height: 140px; padding: 22px 0; border-bottom: 1px solid #aaa298; overflow: hidden; cursor: default; }
.tech-item > span { font-size: 11px; }
.tech-item h3 { position: relative; z-index: 2; margin: 0; font-size: clamp(36px, 5vw, 74px); letter-spacing: -.055em; transition: color 200ms ease, transform 300ms ease; }
.tech-item > p { position: relative; z-index: 2; max-width: 320px; line-height: 1.5; }
.tech-texture { position: absolute; inset: 0; opacity: 0; transform: scaleY(.2); transform-origin: bottom; transition: opacity 300ms ease, transform 450ms cubic-bezier(.2,.8,.2,1); }
.tech-texture--one { background: radial-gradient(circle at 20% 50%, #f2cb80 0 4px, transparent 5px), #a64c2a; background-size: 25px 25px; }
.tech-texture--two { background: repeating-linear-gradient(120deg, #d98b42 0 12px, #efad5e 12px 22px); }
.tech-texture--three { background: repeating-radial-gradient(circle, #893429 0 8px, #b55d36 9px 18px); }
.tech-item.is-active { color: white; }
.tech-item.is-active .tech-texture { opacity: .84; transform: scaleY(1); }
.tech-item.is-active h3 { transform: translateX(18px); }

.categories h2 { max-width: 950px; }
.category-grid { display: grid; grid-template-columns: 1.5fr .75fr; grid-template-rows: repeat(2, 300px); gap: 16px; }
.category { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; min-height: 0; padding: 30px; overflow: hidden; border-radius: 26px; background: white; }
.category--food { grid-row: 1 / 3; color: white; background: #2c743e; }
.category--food img { position: absolute; right: -25%; bottom: -30%; width: 115%; height: 105%; object-fit: cover; object-position: 30% 55%; mix-blend-mode: luminosity; opacity: .82; transition: transform 550ms ease; }
.category--food:hover img { transform: scale(1.035) translateX(-2%); }
.category--care { background: var(--pink); color: white; }
.category--walk { background: #a8dcff; }
.category span, .category b { position: relative; z-index: 2; font-size: 11px; text-transform: uppercase; }
.category h3 { position: relative; z-index: 2; margin: auto 0 10px; font-size: clamp(45px, 7vw, 102px); line-height: .8; letter-spacing: -.06em; }
.category p { position: relative; z-index: 2; max-width: 360px; line-height: 1.5; }

.stories { width: min(100% - 32px, 1600px); border-radius: 44px; color: white; background: #19161e; }
.stories__headline { display: flex; justify-content: space-between; align-items: start; gap: 30px; }
.stories__headline h2 { text-align: right; }
.story-collage { display: grid; grid-template-columns: 1.1fr .9fr; grid-template-rows: 1fr auto; gap: 18px; }
.story { min-height: 280px; border-radius: 24px; overflow: hidden; }
.story--image { position: relative; grid-row: 1 / 3; min-height: 620px; background: #caff38; transform: rotate(-1deg); }
.story--image img { width: 145%; height: 110%; object-fit: cover; object-position: 10% 50%; filter: grayscale(1) contrast(1.12); }
.story-sticker { position: absolute; top: 25px; right: 25px; padding: 10px 14px; color: #17151c; background: #caff38; font-family: cursive; transform: rotate(5deg); }
.story--quote { display: flex; flex-direction: column; justify-content: space-between; padding: 44px; background: var(--pink); }
.story--quote blockquote { margin: 0; font-size: clamp(28px, 3vw, 46px); line-height: 1.04; letter-spacing: -.035em; }
.story--cta { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 34px; border: 1px solid #49444e; }
.story--cta p { max-width: 330px; font-size: 18px; }

.journal-grid { display: grid; grid-template-columns: 1.35fr .825fr .825fr; gap: 18px; }
.article { display: flex; flex-direction: column; min-width: 0; }
.article__art { display: grid; height: 360px; margin-bottom: 20px; place-items: center; border-radius: 22px; font-size: 88px; font-weight: 950; overflow: hidden; transition: transform 250ms ease; }
.article:hover .article__art { transform: translateY(-6px); }
.article--main .article__art { height: 500px; }
.article__art--pink { color: white; background: var(--pink); }
.article__art--lime { background: #caff38; }
.article__art--blue { color: white; background: #42aee6; }
.article small { margin-top: 5px; color: #77716c; }
.article h3 { margin: 12px 0 20px; font-size: clamp(24px, 2.5vw, 39px); line-height: 1.05; letter-spacing: -.04em; }
.article b { margin-top: auto; font-size: 13px; }
.journal__all { display: block; margin: 55px 0 0 auto; font-size: 18px; }

.faq { border-top: 1px solid #d4cec7; }
.faq__top { display: grid; grid-template-columns: 1fr .8fr; align-items: end; gap: 60px; }
.search { display: flex; align-items: center; gap: 14px; padding: 22px 0; border-bottom: 2px solid #17151c; font-size: 30px; }
.search input { width: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: 24px; }
.topic-list { display: grid; grid-template-columns: 1fr 1fr; margin-top: 65px; border-top: 1px solid #d4cec7; }
.topic-list a { display: flex; justify-content: space-between; gap: 20px; padding: 24px 14px 24px 0; border-bottom: 1px solid #d4cec7; font-weight: 750; }
.topic-list a:nth-child(odd) { margin-right: 40px; }
.topic-list a:hover span { transform: translate(3px,-3px); }
.topic-list span { transition: transform 180ms ease; }
.faq__actions { display: flex; align-items: center; gap: 28px; margin-top: 44px; }

.footer { display: grid; grid-template-columns: 1fr 1fr auto; gap: 40px; align-items: end; margin-top: 80px; padding: 70px max(30px, 4vw) 34px; color: white; background: #17151c; }
.footer > * { min-width: 0; }
.footer__brand { grid-column: 1 / 4; font-size: clamp(76px, 15vw, 230px); font-weight: 950; line-height: .7; letter-spacing: -.075em; color: var(--pink); }
.footer__brand span { font-size: .12em; vertical-align: top; }
.footer p { font-size: 17px; line-height: 1.5; }
.footer__links { display: flex; flex-wrap: wrap; gap: 18px 28px; }
.footer small { color: #8d8791; }

@media (max-width: 900px) {
  .section { width: min(100% - 24px, 1500px); padding-block: 90px; }
  .matcher {
    width: calc(100% - 8px);
    padding: 56px 20px 72px;
    border-radius: 0 0 28px 28px;
  }
  .section-heading, .matcher__grid, .collection-feature, .faq__top { grid-template-columns: 1fr; }
  .section-heading { gap: 28px; margin-bottom: 40px; }
  .matcher__grid { gap: 38px; margin-top: 45px; }
  .collection-feature__visual { min-height: 520px; }
  .benefits { grid-template-columns: 1fr 1fr; }
  .benefits__lead { grid-column: 1 / 3; grid-row: auto; margin-bottom: 30px; }
  .proof--large { grid-column: 1 / 3; }
  .category-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 500px 250px; }
  .category--food { grid-column: 1 / 3; grid-row: auto; }
  .story-collage { grid-template-columns: 1fr; }
  .story--image { grid-row: auto; }
  .journal-grid { grid-template-columns: 1fr 1fr; }
  .article--main { grid-column: 1 / 3; }
}

@media (max-width: 600px) {
  .section { padding-block: 76px; }
  .section h2 { font-size: clamp(48px, 15vw, 72px); }
  .matcher__app { min-height: 480px; padding: 22px; border-radius: 20px; }
  .selector-grid { gap: 8px; }
  .pet-selector { min-height: 190px; }
  .pet-selector__face { font-size: 64px; }
  .choice-row { grid-template-columns: 1fr; }
  .choice { min-height: 68px; }
  .matcher__result { grid-template-columns: 1fr; }
  .result-pack { height: 210px; }
  .matcher__controls { justify-content: space-between; }
  .collection-feature__visual { min-height: 380px; }
  .collection-feature__visual img { width: 185%; }
  .benefits { grid-template-columns: 1fr; }
  .benefits__lead, .proof--large { grid-column: auto; }
  .proof { min-height: 250px; }
  .tech-item { grid-template-columns: 35px 1fr; }
  .tech-item > p { grid-column: 2; }
  .category-grid { grid-template-columns: 1fr; grid-template-rows: 520px 230px 230px; }
  .category--food { grid-column: auto; }
  .stories__headline { display: block; }
  .stories__headline h2 { text-align: left; }
  .story--image { min-height: 480px; }
  .story--quote, .story--cta { padding: 28px; }
  .story--cta { align-items: flex-start; flex-direction: column; }
  .journal-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
  .article, .article--main { flex: 0 0 86%; scroll-snap-align: start; }
  .article__art, .article--main .article__art { height: 360px; }
  .faq__top { gap: 18px; }
  .topic-list { grid-template-columns: 1fr; margin-top: 40px; }
  .topic-list a:nth-child(odd) { margin-right: 0; }
  .faq__actions { align-items: flex-start; flex-direction: column; }
  .footer { grid-template-columns: 1fr; }
  .footer__brand { grid-column: auto; }
}

/* Interactive nutrition profile builder */
.matcher__heading {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: end;
  gap: 40px;
  margin-bottom: clamp(42px, 5vw, 78px);
}

/* Approved Figma frames: keep their native 1920px composition and scale as one
   responsive canvas so spacing, collage geometry and typography remain exact. */
.figma-section {
  width: min(100% - 16px, 1920px);
  margin-inline: auto;
  overflow: hidden;
}

.figma-section img {
  display: block;
  width: 100%;
  height: auto;
}

.figma-section--tech {
  aspect-ratio: 1920 / 1955;
  border-radius: clamp(20px, 2.1vw, 40px);
  background: #fcfaff;
}

.figma-section--tech > .tech-benefits-grid {
  position: absolute;
  z-index: 1;
  top: 45.52%;
  left: .833%;
  width: 98.334%;
  height: auto;
}

.tech-benefits-grid--mobile {
  display: none !important;
}

.figma-section--categories {
  position: relative;
  aspect-ratio: 1920 / 1015;
  background: linear-gradient(#fcfaff 50%, #c8e7fa);
}

.figma-section--categories h2 {
  position: absolute;
  z-index: 5;
  top: 15.75%;
  left: 4.17%;
  margin: 0;
  color: #101820;
  font: 600 clamp(13px,4.17vw,80px)/1 var(--font-display);
  letter-spacing: -.035em;
  text-transform: uppercase;
  white-space: nowrap;
}

.figma-section--categories h2 span { color: #f04e98; }

.category-catalog__tabs {
  position: absolute;
  z-index: 5;
  top: 29.3%;
  right: 4.38%;
  left: 4.17%;
  display: grid;
  height: 10.25%;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 1.04%;
}

.category-catalog__tabs button {
  min-width: 0;
  padding: 0 clamp(8px,1.67vw,32px);
  border: 0;
  border-radius: clamp(8px,1.67vw,32px);
  font: 600 clamp(7px,1.875vw,36px)/1.11 var(--font-display);
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  opacity: 1;
  transition: color 260ms ease, background-color 260ms ease;
}

.category-catalog__tabs button[data-category="ammunition"] { color: #d1f589; background: #7ab800; }
.category-catalog__tabs button[data-category="care"] { color: #ffdbef; background: #f04e98; }
.category-catalog__tabs button[data-category="accessories"] { color: #f1e1ff; background: #753bbd; }
.category-catalog__tabs button[data-category="ammunition"].is-active { color: #7ab800; background: transparent; }
.category-catalog__tabs button[data-category="care"].is-active { color: #f04e98; background: transparent; }
.category-catalog__tabs button[data-category="accessories"].is-active { color: #753bbd; background: transparent; }
.category-catalog__tabs button:focus-visible { outline: 3px solid #101820; outline-offset: 3px; }

.category-catalog__mobile {
  display: none;
}

.category-catalog__surface {
  position: absolute;
  z-index: 2;
  top: 29.3%;
  right: 4.17%;
  left: 4.17%;
  width: auto;
  height: 67.25%;
  pointer-events: none;
}

.category-catalog__surface path {
  fill: #d1f589;
  transition: fill 260ms ease;
}

.figma-section--categories[data-category="care"] .category-catalog__surface path { fill: #ffdbef; }
.figma-section--categories[data-category="accessories"] .category-catalog__surface path { fill: #f1e1ff; }

.category-catalog__live-panel {
  position: absolute;
  z-index: 3;
  top: 41.65%;
  right: 4.17%;
  left: 4.17%;
  height: 54.9%;
  overflow: visible;
  background: transparent;
}

.category-catalog__feature {
  position: absolute;
  z-index: 2;
  top: 8%;
  bottom: 7.6%;
  left: 0;
  display: flex;
  width: 32.5%;
  padding-inline: clamp(7px,1.04vw,20px);
  flex-direction: column;
  align-items: center;
}

.category-catalog__feature-image {
  width: 70.3%;
  min-height: 0;
  flex: 1 1 auto;
  object-fit: contain;
  transition: opacity 180ms ease, transform 260ms ease;
}

.figma-section--categories[data-category="ammunition"] .category-catalog__feature-image {
  width: 100%;
  object-fit: cover;
}

.category-catalog__feature-copy {
  display: flex;
  width: 100%;
  min-height: 19.6%;
  flex: 0 0 19.6%;
  padding: clamp(5px,.63vw,12px) clamp(6px,.73vw,14px);
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: 16px;
  color: #4f606b;
  background: #fff;
  font: 500 clamp(5px,.73vw,14px)/1.25 var(--font-body);
}

.category-catalog__feature-copy i {
  display: grid;
  width: clamp(18px,2.08vw,40px);
  height: clamp(18px,2.08vw,40px);
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #f04e98;
  font: 400 clamp(10px,1.25vw,24px)/1 var(--font-body);
  font-style: normal;
}

.figma-section--categories[data-category="ammunition"] .category-catalog__feature-copy i { background: #7ab800; }
.figma-section--categories[data-category="care"] .category-catalog__feature-copy i { background: #f04e98; }
.figma-section--categories[data-category="accessories"] .category-catalog__feature-copy i { background: #753bbd; }

.category-catalog__products-shell {
  position: absolute;
  z-index: 2;
  top: 8.7%;
  right: -.35vw;
  left: 33.65%;
  height: 83.4%;
  overflow: hidden;
}

.category-catalog__products {
  display: flex;
  width: 100%;
  height: 100%;
  gap: clamp(4px,.42vw,8px);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: inline proximity;
  scrollbar-width: none;
}

.category-catalog__products::-webkit-scrollbar {
  display: none;
}

.category-product-card {
  position: relative;
  height: 100%;
  flex: 0 0 27.4%;
  display: grid;
  grid-template-rows: minmax(0,1fr) auto clamp(24px,2.92vw,56px);
  gap: clamp(4px,.52vw,10px);
  min-width: 0;
  padding: clamp(6px,.83vw,16px);
  border-radius: clamp(5px,.83vw,16px);
  background: #fff;
  scroll-snap-align: start;
}

.category-product-card__media {
  position: absolute;
  inset: clamp(6px,.83vw,16px) clamp(6px,.83vw,16px) auto;
  height: 61.8%;
  overflow: hidden;
  border-radius: clamp(4px,.42vw,8px);
  background: #fff;
}

.category-product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 280ms cubic-bezier(.2,.8,.2,1);
}

.category-product-card:hover .category-product-card__media img {
  transform: scale(1.035);
}

.category-product-card__badges {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: flex;
  max-width: 82%;
  flex-wrap: wrap;
  gap: clamp(2px,.21vw,4px);
}

.category-product-card__badge {
  display: inline-flex;
  min-height: clamp(12px,1.25vw,24px);
  padding: 0 clamp(4px,.42vw,8px);
  align-items: center;
  border-radius: clamp(4px,.42vw,8px);
  color: #fff;
  background: #00a6ff;
  font: 800 clamp(5px,.57vw,11px)/1 var(--font-display);
  text-transform: uppercase;
}

.category-product-card__badge--pro {
  background: #753bbd;
}

.category-product-card__info {
  z-index: 1;
  grid-row: 2;
  align-self: end;
  min-width: 0;
}

.category-product-card__info h3 {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: #101820;
  font: 800 clamp(5px,.73vw,14px)/1.13 var(--font-display);
  text-transform: uppercase;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.category-product-card__info p {
  overflow: hidden;
  margin: clamp(1px,.16vw,3px) 0 0;
  color: #4f606b;
  font: 500 clamp(5px,.73vw,14px)/1.15 var(--font-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-product-card__price {
  z-index: 1;
  grid-row: 3;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  gap: clamp(4px,.42vw,8px);
  appearance: none;
  border: 0;
  border-radius: 100px;
  color: #fff;
  background: #f04e98;
  font: 800 clamp(6px,.83vw,16px)/1 var(--font-display);
  cursor: pointer;
  text-decoration: none;
  transition: transform 180ms ease, filter 180ms ease;
}

.category-product-card__price:hover {
  filter: brightness(.94);
  transform: translateY(-1px);
}

.category-product-card__price span {
  font-family: var(--font-body);
  font-size: 1.35em;
  font-weight: 400;
}

.category-catalog__scroll {
  position: absolute;
  z-index: 5;
  top: 50%;
  display: grid;
  width: clamp(28px,2.92vw,56px);
  height: clamp(28px,2.92vw,56px);
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: #101820;
  box-shadow: 0 6px 22px rgba(16,24,32,.2);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(.86);
  transition: opacity 180ms ease, transform 180ms ease;
}

.category-catalog__scroll span {
  font: 500 clamp(14px,1.46vw,28px)/1 var(--font-body);
  transform: translateY(-.06em);
}

.category-catalog__scroll--prev { left: clamp(5px,.63vw,12px); }
.category-catalog__scroll--next { right: clamp(5px,.63vw,12px); }

.category-catalog__products-shell:hover .category-catalog__scroll:not(:disabled),
.category-catalog__products-shell:focus-within .category-catalog__scroll:not(:disabled) {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}

.category-catalog__scroll:disabled {
  visibility: hidden;
}

@media (hover: none) {
  .category-catalog__scroll:not(:disabled) {
    opacity: .86;
    pointer-events: auto;
    transform: translateY(-50%) scale(.9);
  }
}

.matcher__heading h2 {
  grid-column: 1;
  margin: 12px 0 0;
  max-width: 900px;
}

.matcher__heading > p {
  grid-column: 2;
  grid-row: 1 / 3;
  max-width: 430px;
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1.55;
}

.matcher__kicker {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.profile-builder {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(540px, 1.28fr);
  gap: clamp(18px, 2vw, 34px);
  min-height: 720px;
  transition: grid-template-columns 600ms cubic-bezier(.2,.8,.2,1);
}

.profile-builder[data-state="result"] {
  grid-template-columns: minmax(420px, .88fr) minmax(520px, 1.12fr);
}

.profile-builder__questions,
.recommendations {
  padding: clamp(26px, 3vw, 50px);
  border: 1px solid rgb(16 24 32 / .16);
  border-radius: 30px;
  background: #fcfaff;
}

.profile-builder__questions[hidden],
.recommendations[hidden] {
  display: none !important;
}

.profile-builder__questions {
  display: flex;
  flex-direction: column;
}

.profile-builder__progress {
  margin-bottom: 70px;
}

.profile-builder__step {
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.profile-builder__bars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 14px;
}

.profile-builder__bars i {
  height: 4px;
  overflow: hidden;
  border-radius: 4px;
  background: #ddd8d2;
}

.profile-builder__bars i::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: var(--pink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 400ms ease;
}

.profile-builder__bars i.is-active::after { transform: scaleX(1); }

.profile-builder__number {
  display: grid;
  width: 36px;
  height: 36px;
  margin-bottom: 24px;
  place-items: center;
  border: 1px solid;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 850;
}

.profile-builder__prompt h3 {
  margin: 0;
  font-size: clamp(33px, 3vw, 52px);
  line-height: .96;
  letter-spacing: -.05em;
}

.profile-builder__options {
  display: grid;
  gap: 9px;
}

.profile-option {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 14px;
  min-height: 82px;
  padding: 16px 48px 16px 18px;
  border: 1px solid #d9d4cd;
  border-radius: 15px;
  text-align: left;
  color: var(--ink);
  background: #f5f1eb;
  cursor: pointer;
  transition: transform 200ms ease, background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.profile-option:hover { transform: translateX(4px); border-color: var(--pink); }
.profile-option.is-selected { color: white; border-color: var(--pink); background: var(--pink); }
.profile-option span { align-self: end; font-size: 18px; font-weight: 850; }
.profile-option small { grid-column: 1; opacity: .67; }
.profile-option i { position: absolute; top: 16px; right: 16px; font-style: normal; }

.profile-builder__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 28px;
}

.profile-builder__next:disabled { opacity: .35; pointer-events: none; }

.pet-stage {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  border-radius: 30px;
  background:
    radial-gradient(circle at 73% 22%, rgb(255 255 255 / .8) 0 2px, transparent 3px),
    radial-gradient(circle at 20% 82%, rgb(255 255 255 / .65) 0 3px, transparent 4px),
    linear-gradient(145deg, #83d7ff 0%, #b7e9ff 54%, #d9f58f 54.2%, #aada54 100%);
  perspective: 1000px;
}

.pet-stage::after {
  content: '';
  position: absolute;
  right: -12%;
  bottom: -24%;
  left: -12%;
  height: 47%;
  border-radius: 50%;
  background: #b6e95e;
  box-shadow: inset 0 22px 50px rgb(77 119 16 / .12);
}

.pet-stage__caption,
.pet-stage__hint {
  position: absolute;
  z-index: 8;
  padding: 9px 13px;
  border: 1px solid rgb(16 24 32 / .22);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: rgb(255 255 255 / .62);
  backdrop-filter: blur(8px);
}

.pet-stage__caption { top: 24px; left: 24px; }
.pet-stage__hint { right: 24px; bottom: 24px; }

.pet-stage__star { position: absolute; z-index: 2; color: var(--pink); font-size: 38px; animation: accent-float 3s ease-in-out infinite alternate; }
.pet-stage__star--one { top: 11%; right: 12%; }
.pet-stage__star--two { top: 27%; left: 9%; font-size: 19px; animation-delay: -1.4s; }
.pet-stage__scribble { position: absolute; z-index: 6; top: 19%; right: 8%; padding: 8px 12px; color: white; background: var(--pink); font-family: cursive; transform: rotate(7deg) scale(.8); opacity: 0; transition: opacity 300ms ease, transform 450ms cubic-bezier(.16,1,.3,1); }

.mascot {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 11%;
  width: 310px;
  height: 390px;
  opacity: .22;
  filter: grayscale(1);
  transform: translate3d(-50%, 60px, 0) rotateY(-8deg) scale(.88);
  transition: opacity 600ms ease, filter 600ms ease, transform 700ms cubic-bezier(.16,1,.3,1);
}

.profile-builder:not([data-pet=""]) .mascot { opacity: 1; filter: none; transform: translate3d(-50%,0,0) rotateY(-8deg) scale(1); }
.profile-builder:not([data-pet=""]) .pet-stage__scribble { opacity: 1; transform: rotate(7deg) scale(1); }
.mascot__body { position: absolute; left: 55px; bottom: 30px; width: 205px; height: 235px; border-radius: 48% 52% 43% 45%; background: linear-gradient(135deg,#f6f0e7,#cbbfac); box-shadow: inset -24px -22px 35px rgb(81 61 43 / .15), 0 35px 35px rgb(38 73 43 / .2); }
.mascot__head { position: absolute; z-index: 3; top: 8px; left: 68px; width: 180px; height: 180px; border-radius: 48% 48% 44% 44%; background: linear-gradient(145deg,#fffaf1,#d4c7b3); box-shadow: inset -16px -18px 28px rgb(68 49 35 / .14); }
.mascot__face { position: absolute; inset: 0; }
.mascot__eye { position: absolute; top: 72px; width: 17px; height: 22px; border-radius: 50%; background: #17151c; box-shadow: inset 4px 4px 0 white; }
.mascot__eye--left { left: 48px; }.mascot__eye--right { right: 48px; }
.mascot__nose { position: absolute; top: 108px; left: 78px; width: 25px; height: 18px; border-radius: 55% 55% 65% 65%; background: #17151c; }
.mascot__ear { position: absolute; z-index: -1; top: 16px; width: 70px; height: 105px; background: #86725e; box-shadow: inset -12px -14px 18px rgb(35 25 18 / .18); transition: border-radius 500ms ease, transform 500ms ease; }
.mascot__ear--left { left: -35px; border-radius: 70% 30% 70% 40%; transform: rotate(24deg); }
.mascot__ear--right { right: -35px; border-radius: 30% 70% 40% 70%; transform: rotate(-24deg); }
.mascot__paw { position: absolute; z-index: 7; bottom: 3px; width: 70px; height: 85px; border-radius: 45% 45% 40% 40%; background: #e7ddcf; box-shadow: inset -8px -10px 14px rgb(72 54 37 / .12); }
.mascot__paw--left { left: 55px; }.mascot__paw--right { right: 50px; }
.mascot__tail { position: absolute; z-index: -1; right: -4px; bottom: 86px; width: 115px; height: 52px; border: 25px solid #a18e78; border-left: 0; border-bottom: 0; border-radius: 0 100% 0 0; transform: rotate(18deg); transform-origin: left; animation: tail-wag 1.8s ease-in-out infinite alternate; }
@keyframes tail-wag { to { transform: rotate(34deg); } }

.profile-builder[data-pet="cat"] .mascot__ear { top: -12px; width: 68px; height: 82px; border-radius: 10% 85% 28% 85%; background: #c5b6a3; }
.profile-builder[data-pet="cat"] .mascot__ear--left { left: -5px; transform: rotate(-38deg); }
.profile-builder[data-pet="cat"] .mascot__ear--right { right: -5px; transform: scaleX(-1) rotate(-38deg); }
.profile-builder[data-pet="cat"] .mascot__nose { width: 18px; height: 13px; left: 81px; background: #ec739b; }
.profile-builder[data-pet="cat"] .mascot__tail { right: -25px; bottom: 65px; width: 100px; height: 170px; border-width: 22px; transform: rotate(44deg); }

.age-prop { position: absolute; z-index: 7; opacity: 0; transition: opacity 400ms ease, transform 600ms cubic-bezier(.16,1,.3,1); }
.age-prop--ball { left: 16%; bottom: 15%; width: 72px; height: 72px; border-radius: 50%; background: repeating-linear-gradient(45deg,var(--pink) 0 12px,#ff90bd 12px 24px); box-shadow: 0 20px 25px rgb(42 76 35 / .2); transform: translateX(-120px) rotate(-180deg); }
.profile-builder[data-age="young"] .age-prop--ball { opacity: 1; transform: translateX(0) rotate(0); }
.age-prop--paper { right: 12%; bottom: 17%; width: 125px; height: 88px; padding: 15px; color: #17151c; background: #f2eadb; box-shadow: 0 18px 20px rgb(42 76 35 / .18); transform: translateY(70px) rotate(14deg); }
.age-prop--paper::after { content: '////////'; display: block; margin-top: 8px; font-size: 10px; opacity: .35; }
.profile-builder[data-age="senior"] .age-prop--paper { opacity: 1; transform: translateY(0) rotate(7deg); }
.mascot__glasses { position: absolute; z-index: 6; top: 66px; left: 31px; display: flex; gap: 28px; opacity: 0; transition: opacity 300ms ease; }
.mascot__glasses::after { content: ''; position: absolute; top: 12px; left: 47px; width: 30px; height: 3px; background: #17151c; }
.mascot__glasses i { width: 45px; height: 35px; border: 4px solid #17151c; border-radius: 50%; }
.profile-builder[data-age="senior"] .mascot__glasses { opacity: 1; }

.pet-stage__bowl { position: absolute; z-index: 8; right: 12%; bottom: 10%; width: 155px; height: 78px; overflow: hidden; border-radius: 12px 12px 70px 70px; background: linear-gradient(90deg,#db0d68,var(--pink),#ff599d); box-shadow: inset 0 12px 0 #a9074c, 0 20px 25px rgb(42 76 35 / .2); opacity: 0; transform: translateY(50px); transition: opacity 400ms ease, transform 500ms ease; }
.profile-builder[data-state="age-selected"] .pet-stage__bowl,
.profile-builder[data-state="size-selected"] .pet-stage__bowl,
.profile-builder[data-state="result"] .pet-stage__bowl { opacity: 1; transform: translateY(0); }
.pellets { position: absolute; top: 11px; right: 16px; left: 16px; height: 36px; border-radius: 50%; background: radial-gradient(circle,#7a4926 0 4px,transparent 5px); background-size: 16px 14px; opacity: 0; transition: opacity 300ms 350ms ease; }
.profile-builder[data-size="small"] .pellets { background-size: 10px 9px; }
.profile-builder[data-size="large"] .pellets { background-size: 23px 21px; }
.profile-builder:not([data-size=""]) .pellets { opacity: 1; }
.pet-stage__pack { position: absolute; z-index: 7; right: 9%; bottom: 22%; width: 125px; height: 190px; padding: 18px 12px; color: white; border-radius: 8px 8px 18px 18px; background: linear-gradient(160deg,#7839ae,#4e1b81); box-shadow: 0 22px 30px rgb(42 29 66 / .24); opacity: 0; transform: translate(80px,-80px) rotate(24deg); transition: opacity 350ms ease, transform 700ms cubic-bezier(.16,1,.3,1); }
.pet-stage__pack b { display: block; margin-bottom: 48px; font-size: 13px; }.pet-stage__pack span { font-size: 11px; }
.profile-builder:not([data-size=""]) .pet-stage__pack { opacity: 1; transform: translate(0,0) rotate(8deg); }
.profile-builder:not([data-size=""]) .pet-stage__pack::after { content: ''; position: absolute; left: 14px; bottom: -95px; width: 8px; height: 95px; background: repeating-linear-gradient(#7a4926 0 7px,transparent 7px 13px); animation: pour 1.1s .35s ease both; }
@keyframes pour { 0% { opacity: 0; transform: translateY(-25px); } 25%,75% { opacity: 1; } 100% { opacity: 0; transform: translateY(40px); } }

.recommendations { align-self: stretch; animation: result-in 650ms cubic-bezier(.16,1,.3,1) both; }
@keyframes result-in { from { opacity: 0; transform: translateX(50px); } }
.recommendations h3 { margin: 18px 0 8px; font-size: clamp(38px,4vw,64px); line-height: .94; letter-spacing: -.055em; }
.recommendations > p { margin: 0 0 28px; color: #68727a; }
.recommendation-list { display: grid; gap: 10px; }
.recommendation-card { display: grid; grid-template-columns: 145px 1fr; gap: 18px; min-height: 190px; padding: 12px; border: 1px solid #ddd7cf; border-radius: 18px; background: white; }
.recommendation-card__image { overflow: hidden; border-radius: 12px; background: #aada54; }
.recommendation-card__image img { width: 270%; height: 140%; object-fit: cover; object-position: 51% 38%; }
.recommendation-card__image--second { background: #ff8bbc; }.recommendation-card__image--second img { object-position: 70% 40%; }
.recommendation-card small { display: block; margin-top: 8px; color: var(--pink); font-weight: 850; text-transform: uppercase; }
.recommendation-card h4 { margin: 8px 0 6px; font-size: 22px; letter-spacing: -.03em; }
.recommendation-card p { margin: 0 0 12px; color: #68727a; font-size: 13px; }.recommendation-card a { font-size: 12px; font-weight: 850; }
.recommendations__all { width: 100%; margin-top: 18px; }.recommendations__restart { display: block; margin: 18px auto 0; }
.profile-builder[data-state="result"] .pet-stage { min-height: 720px; }
.profile-builder[data-state="result"] .mascot { transform: translate3d(-58%,-10px,0) rotateY(-8deg) scale(.88); }

@media (max-width: 1050px) {
  .profile-builder { grid-template-columns: minmax(270px,.75fr) minmax(430px,1.25fr); }
  .mascot { scale: .88; transform-origin: bottom center; }
  .pet-stage__pack { right: 5%; }
  .pet-stage__bowl { right: 7%; }
}

@media (max-width: 800px) {
  .matcher__heading { grid-template-columns: 1fr; gap: 12px; }
  .matcher__heading h2, .matcher__heading > p { grid-column: 1; grid-row: auto; }
  .matcher__heading > p { margin-top: 10px; }
  .profile-builder,
  .profile-builder[data-state="result"] {
    grid-template-columns: 1fr;
    grid-template-areas: 'progress' 'prompt' 'stage' 'options' 'nav';
    min-height: 0;
  }
  .profile-builder__questions { display: contents; }
  .profile-builder__progress { grid-area: progress; margin: 0 0 14px; }
  .profile-builder__prompt { grid-area: prompt; }
  .profile-builder__prompt .profile-builder__number { display: none; }
  .profile-builder__options { grid-area: options; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
  .profile-option { display: flex; min-height: 76px; padding: 12px; align-items: center; justify-content: center; text-align: center; }
  .profile-option span { align-self: auto; font-size: 14px; }
  .profile-option small, .profile-option i { display: none; }
  .profile-builder__nav { grid-area: nav; margin: 0; padding-top: 14px; }
  .pet-stage { grid-area: stage; min-height: 520px; border-radius: 24px; }
  .mascot { bottom: 8%; scale: .78; }
  .pet-stage__caption { top: 14px; left: 14px; }
  .pet-stage__hint { right: 14px; bottom: 14px; }
  .recommendations { grid-column: 1; }
  .profile-builder[data-state="result"] .pet-stage { min-height: 480px; }
}

@media (max-width: 520px) {
  .profile-builder__options { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .profile-option { min-height: 70px; }
  .pet-stage { min-height: 460px; }
  .mascot { left: 46%; bottom: 5%; scale: .7; }
  .pet-stage__bowl { right: 5%; scale: .78; transform-origin: bottom right; }
  .pet-stage__pack { right: 1%; bottom: 24%; scale: .75; transform-origin: bottom right; }
  .age-prop--ball { left: 8%; scale: .75; }
  .age-prop--paper { right: 4%; scale: .75; }
  .recommendation-card { grid-template-columns: 105px 1fr; }
}

/* Figma 11022:18547 + 11017:18155 */
.hero {
  width: min(100%, 1920px);
  max-width: 1920px;
  height: min(1080px, 56.25vw);
  margin-top: 0;
  border-radius: 0;
}

.hero__pets {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.matcher.section {
  width: min(100%, 1920px);
  max-width: 1920px;
  margin: 0 auto;
  padding: clamp(32px, 4.1667vw, 80px);
  border-radius: 0 0 clamp(24px, 2.083vw, 40px) clamp(24px, 2.083vw, 40px);
  background: #fdf4ea;
}

.matcher__heading {
  display: block;
  margin: 0 0 18px;
}

.matcher__heading h2 {
  margin: 0;
  font-size: clamp(36px, 3.125vw, 60px);
  line-height: 1.033;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.profile-builder,
.profile-builder[data-state="result"] {
  display: grid;
  grid-template-columns: 520fr 638fr 602fr;
  gap: 0;
  align-items: end;
  min-height: 725px;
}

.profile-builder:not([data-state="result"]) {
  grid-template-columns: 620fr 1140fr 0fr;
}

.profile-builder:not([data-state="result"]) .recommendations {
  max-width: 0;
  height: 0;
  min-height: 0;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(56px) scale(.985);
  pointer-events: none;
}

.profile-builder__questions,
.recommendations {
  position: relative;
  z-index: 6;
  align-self: end;
  min-width: 0;
  padding: 32px;
  border: 0;
  border-radius: 32px;
  background: #fff;
}

.profile-builder__questions { min-height: 666px; }
.profile-builder__progress { margin: 0 0 28px; }
.profile-builder__step { color: #f04e98; font-size: 14px; }
.profile-builder__bars { gap: 12px; margin-top: 12px; }
.profile-builder__bars i { height: 8px; background: #c9d3d8; }
.profile-builder__bars i.is-active { background: #f04e98; }
.profile-builder__bars i.is-active::after { background: #f04e98; }
.profile-builder__number { display: none; }
.profile-builder__prompt h3 {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: 0;
  text-transform: uppercase;
}
.profile-builder__options { gap: 12px; }
.profile-option {
  min-height: 70px;
  padding: 14px 16px;
  border: 2px solid #c9d3d8;
  border-radius: 16px;
  background: #fff;
}
.profile-option:hover { transform: none; border-color: #f04e98; }
.profile-option.is-selected { color: #101820; border-color: #f04e98; background: #fff; }
.profile-option span { font-size: 14px; text-transform: uppercase; }
.profile-option small { color: #4f606b; font: 400 12px/16px var(--font-body); }
.profile-option i { display: none; }

.profile-builder__why {
  position: relative;
  min-height: 135px;
  margin-top: auto;
  padding: 20px 100px 20px 20px;
  overflow: hidden;
  border: 2px solid #c9d3d8;
  border-radius: 20px;
}
.profile-builder__why h4 { margin: 0 0 10px; color: #f04e98; font-size: 16px; text-transform: uppercase; }
.profile-builder__why p { margin: 0; font: 400 14px/18px var(--font-body); }
.profile-builder__why img { position: absolute; top: -2px; right: -2px; width: 135px; height: 135px; object-fit: cover; }
.profile-builder__nav { gap: 8px; margin-top: 0; padding-top: 12px; }
.profile-builder__back,
.profile-builder__next { height: 56px; min-height: 56px; max-height: 56px; border-radius: 100px; font-size: 14px; text-transform: uppercase; white-space: nowrap; }
.profile-builder__back { flex: 0 0 132px; border: 1px solid #9fb4d2; }
.profile-builder__next { min-width: 0; padding-inline: 16px; border: 0; flex: 1; background: #f04e98; }

.pet-stage {
  min-height: 708px;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  perspective: none;
}
.pet-stage::after { display: none; }
.scene-layer { position: absolute; display: block; max-width: none; object-fit: contain; pointer-events: none; transition: transform 650ms cubic-bezier(.16,1,.3,1), opacity 400ms ease; }
.scene-layer--cream { left: 36.83%; top: 35.80%; width: 60.36%; height: 38.47%; }
.scene-layer--green { left: 14.76%; top: 41.53%; width: 89.50%; height: 68%; transform: rotate(21.05deg); }
.scene-layer--handle { left: 82.29%; top: 71.05%; width: 28.20%; height: 27.80%; transform: rotate(-128.66deg); }
.scene-layer--black { left: 2.19%; top: 24.71%; width: 64.77%; height: 44.19%; }
.scene-layer--dog { z-index: 2; left: 5.02%; top: 12.74%; width: 63.94%; height: 68.23%; }
.scene-layer--pet {
  left: 34%;
  top: 6%;
  width: 48%;
  height: 78%;
  object-position: center bottom;
  filter: drop-shadow(0 24px 24px rgb(16 24 32 / .16));
  transition: opacity 260ms ease,transform 650ms cubic-bezier(.16,1,.3,1),filter 400ms ease;
}
.scene-layer--pet.is-changing { opacity: 0; transform: translateY(12px) scale(.97); }
.profile-builder[data-state="result"] .scene-layer--pet { left: 10%; top: 7%; width: 68%; height: 73%; }
.scene-layer--kibble { z-index: 4; left: 39.51%; top: 72.46%; width: 54.99%; height: 29.04%; }
.scene-layer--ball { z-index: 4; left: 10.96%; top: 74.14%; width: 20.37%; height: 18.46%; }
.scene-layer--pack { z-index: 3; left: 59.25%; top: 7.06%; width: 49.22%; height: 66.38%; }
.profile-builder[data-state="initial"] .scene-layer--dog { opacity: .35; transform: translateY(30px); }
.pet-stage__questions { position: absolute; z-index: 8; inset: 0; display: none; pointer-events: none; }
.pet-stage__questions span { position: absolute; display: grid; width: 112px; height: 128px; place-items: center; color: #f04e98; font: 700 100px/1 'Benzin',sans-serif; filter: drop-shadow(0 8px 0 rgb(16 24 32 / .08)); }
.pet-stage__questions span:nth-child(1) { top: 27%; left: 27%; transform: rotate(-12deg) scale(1.08); }
.pet-stage__questions span:nth-child(2) { top: 59%; left: 49%; color: #753bbd; transform: rotate(9deg); }
.pet-stage__questions span:nth-child(3) { top: 18%; right: 9%; color: #101820; transform: rotate(15deg) scale(.84); }
.profile-builder[data-state="initial"] .pet-stage__questions { display: block; }
.profile-builder[data-state="initial"] .scene-layer--dog,
.profile-builder[data-state="initial"] .scene-layer--ball,
.profile-builder[data-state="initial"] .scene-layer--pack,
.profile-builder[data-state="initial"] .scene-layer--kibble { opacity: 0; transform: translateY(28px) scale(.96); }
.profile-builder[data-age="adult"] .scene-layer--ball,
.profile-builder[data-age="senior"] .scene-layer--ball { opacity: 0; transform: translateX(-40px) rotate(-35deg); }
.profile-builder[data-size=""] .scene-layer--kibble { opacity: 0; transform: translateY(-28px); }
.profile-builder[data-size=""] .scene-layer--pack { opacity: .42; transform: translate(35px,-20px) rotate(4deg); }
.profile-builder:not([data-state="result"]) .scene-layer--pack { opacity: 0; transform: translate(35px,-20px) rotate(4deg); }

.recommendations {
  max-width: 100%;
  min-height: 0;
  height: fit-content;
  padding: 32px;
  overflow: hidden;
  background: #c1f062;
  opacity: 1;
  visibility: visible;
  transform: translateX(0) scale(1);
  animation: none;
  transform-origin: right center;
  will-change: opacity, transform;
  transition:
    opacity 300ms ease 430ms,
    transform 520ms cubic-bezier(.22,1,.36,1) 360ms,
    visibility 0s linear 0s;
}
.recommendations__inner {
  width: clamp(276px, calc(31.354vw - 69px), 538px);
}
.recommendations h3 { margin: 0 0 24px; font-size: 24px; line-height: 28px; letter-spacing: 0; text-transform: uppercase; }
.recommendations h3 em { display: block; color: #df2370; font-style: normal; }
.recommendation-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.recommendation-card { display: flex; flex-direction: column; gap: 10px; min-height: 490px; padding: 16px; border: 0; border-radius: 16px; }
.recommendation-card__image { height: 245px; background: transparent; }
.recommendation-card__image img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.recommendation-card small { display: inline-block; width: fit-content; margin: 0 auto; padding: 4px 8px 2px; border-radius: 7px; color: #101820; background: #fdad86; }
.recommendation-card h4 { margin: 6px 0; font-size: 14px; text-align: center; text-transform: uppercase; }
.recommendation-card p { text-align: center; }
.recommendation-card a { display: block; margin-top: 14px; padding: 14px; border-radius: 100px; color: #fff; text-align: center; text-transform: uppercase; background: #f04e98; }
.recommendations__all { margin-top: 16px; }
.recommendations__restart { margin-top: 12px; }

@media (max-width: 1100px) {
  .matcher.section { padding-inline: 24px; }
  .profile-builder,
  .profile-builder[data-state="result"] { grid-template-columns: minmax(300px,520fr) minmax(390px,638fr); }
  .recommendations { grid-column: 1 / -1; width: 100%; min-height: 0; margin-top: 18px; }
  .recommendations__inner { width: 100%; }
  .profile-builder:not([data-state="result"]) .recommendations { display: none; }
  .profile-builder[data-state="result"] .recommendations { animation: recommendations-mobile-in 520ms cubic-bezier(.22,1,.36,1) both; }
}

@keyframes recommendations-mobile-in {
  from { opacity: 0; transform: translateY(32px) scale(.98); }
}

@media (max-width: 800px) {
  .hero { min-height: 620px; height: 165vw; }
  .hero__pets { left: -55%; top: 25%; width: 210%; height: 75%; object-fit: contain; object-position: center bottom; }
  .matcher.section { padding: 36px 16px; }
  .matcher__heading h2 { font-size: 38px; }
  .profile-builder,
  .profile-builder[data-state="result"] { display: flex; flex-direction: column; min-height: 0; }
  .profile-builder__questions { display: flex; width: 100%; min-height: 0; order: 1; }
  .pet-stage { width: 100%; min-height: 520px; order: 2; }
  .recommendations { order: 3; }
  .profile-builder__why { display: none; }
  .profile-builder__options { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .profile-builder__nav { gap: 12px; }
  .profile-builder__back { flex-basis: 120px; }
}

@media (max-width: 520px) {
  .profile-builder__questions { padding: 20px; border-radius: 22px; }
  .profile-builder__options { grid-template-columns: 1fr; }
  .pet-stage { min-height: 400px; transform: scale(.92); transform-origin: center top; }
  .recommendation-list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .recommendation-card { flex: 0 0 82%; scroll-snap-align: start; }
}

/* Detailed Figma product cards */
.recommendation-card { position: relative; gap: 10px; min-height: 0; padding: 14px; }
.recommendation-card__image { width: 100%; height: 210px; aspect-ratio: auto; padding-block: 6px; }
.recommendation-card__copy { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.recommendation-card__copy small { margin: 0; font-family: var(--font-display); font-weight: 600; }
.recommendation-card__copy h4 { margin: 0; line-height: 18px; }
.recommendation-card__copy p { margin: 0; color: #4f606b; font-size: 14px; line-height: 18px; }
.recommendation-card__badges { position: absolute; z-index: 3; top: 16px; left: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.recommendation-card__badges span { padding: 5px 8px 3px; border-radius: 8px; color: #fff; font-family: var(--font-display); font-size: 10px; line-height: 12px; text-transform: uppercase; background: #753bbd; }
.recommendation-card__badges span + span { background: #00a6ff; }
.recommendation-card__stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; width: 100%; }
.recommendation-card__stats span { display: flex; min-width: 0; padding: 8px 3px 7px; border-radius: 8px; align-items: center; flex-direction: column; color: #667085; font-family: var(--font-display); font-size: 8px; line-height: 12px; background: #f2f4f7; }
.recommendation-card__stats b { color: #f68d2e; font-family: var(--font-display); font-size: 14px; line-height: 18px; }
.recommendation-card__stats span:nth-child(2) b { color: #753bbd; }
.recommendation-card__stats span:nth-child(3) b { color: #f04e98; }
.recommendation-card__buy { width: 100%; min-height: 56px; margin-top: auto; border: 0; border-radius: 100px; color: #fff; background: #f04e98; font: 600 14px/18px 'Benzin',sans-serif; cursor: pointer; }
.recommendations__all {
  display: flex;
  width: 100%;
  height: 72px;
  margin-top: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 16px;
  text-transform: uppercase;
  background: #101820;
  box-shadow: none;
}

/* Figma technology header rebuilt as live layers for motion. */
.figma-section--tech {
  position: relative;
  z-index: 4;
  margin-top: -40px;
}
.tech-motion {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 44.6%;
  overflow: hidden;
  border-radius: clamp(20px,2.1vw,40px);
  background: #753bbd;
}
.tech-motion h2 {
  position: absolute;
  inset: 24% 4% auto;
  margin: 0;
  color: rgb(255 255 255 / .8);
  font-size: clamp(52px,9.375vw,180px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  text-align: center;
  text-transform: uppercase;
}
.tech-chip {
  position: absolute;
  display: flex;
  gap: 12px;
  height: 56px;
  padding: 0 8px 0 24px;
  align-items: center;
  border: 2px solid #753bbd;
  border-radius: 1000px;
  color: #101820;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(11px,.94vw,18px);
  line-height: 22px;
  text-transform: uppercase;
  background: #c1f062;
  transition: transform 650ms cubic-bezier(.16,1,.3,1), translate 650ms cubic-bezier(.16,1,.3,1);
}
.tech-chip i { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; font-family: var(--font-body); font-style: normal; text-transform: none; background: rgb(255 255 255 / .4); }
.tech-chip > img { display: block; width: 40px; height: 40px; padding: 8px; border-radius: 50%; background: rgb(255 255 255 / .4); }
.tech-chip--air { top: 40.9%; left: 24%; transform: rotate(-5deg); }
.tech-chip--baked { top: 41.3%; right: 10.9%; transform: rotate(5deg); }
.tech-chip--freeze { top: 66.9%; left: 50%; transform: translateX(-50%); }
.tech-motion:hover .tech-chip--air,
.tech-motion:hover .tech-chip--baked { transform: rotate(0); }
.tech-motion:hover .tech-chip--freeze { transform: translateX(-50%) rotate(-5deg); }
.tech-motion:hover .tech-chip--air { translate: 8px -5px; }
.tech-motion:hover .tech-chip--baked { translate: -8px -5px; }

@media (max-width: 800px) {
  .tech-chip { height: 34px; padding: 0 5px 0 12px; gap: 6px; }
  .tech-chip i { width: 24px; height: 24px; }
  .tech-chip > img { width: 24px; height: 24px; padding: 4px; }
  .recommendation-card { min-height: 0; }
}

/* Figma 11017:18180 — observations from Earth */
.earth-story-flow {
  --globe-rotation: 0deg;
  position: relative;
  isolation: isolate;
  width: 100%;
  margin-top: -1px;
  overflow: hidden;
  background: #b8e7ff url('assets/earth/sky-bg.png') center top / cover no-repeat;
}
.earth-story-flow::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: -2px;
  right: 0;
  left: 0;
  height: 322px;
  background: linear-gradient(180deg,#c8e7fa 0,#c8e7fa 32px,rgb(200 231 250 / .72) 46%,rgb(200 231 250 / 0) 100%);
  pointer-events: none;
}
.earth-story-flow__scene {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.earth-story-flow__scene img {
  position: absolute;
  left: 50%;
  display: block;
  max-width: none;
  height: auto;
  transform: translateX(-50%);
  user-select: none;
}
.earth-story-flow__clouds {
  z-index: 1;
  top: 470px;
  width: min(1500px,88vw);
  animation: earth-cloud-drift 48s ease-in-out infinite alternate;
  will-change: transform;
}
.earth-story-flow__scene .earth-story-flow__globe {
  z-index: 2;
  top: 950px;
  width: min(1500px,84vw);
  transform: translateX(-50%) rotate(var(--globe-rotation));
  transform-origin: 50% 50%;
  will-change: transform;
}
.earth-story-flow__meadow {
  z-index: 3;
  bottom: -200px;
  width: max(135vw,2200px);
}
@keyframes earth-cloud-drift {
  from { transform: translateX(calc(-50% - 80px)); }
  to { transform: translateX(calc(-50% + 80px)); }
}
.earth-stories,
.story-bonus {
  z-index: 4;
}
.earth-stories {
  --eye-x: 0;
  --eye-y: 0;
  position: relative;
  width: min(100%,1920px);
  height: 1890px;
  margin: 0 auto;
  padding: 80px 0 0;
  overflow: hidden;
  background: transparent;
}
.earth-stories h2 {
  position: relative;
  z-index: 5;
  margin: 0;
  color: #101820;
  font-size: clamp(54px,4.17vw,80px);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}
.watching-eyes { position: relative; z-index: 4; display: flex; gap: 21px; height: 392px; margin-top: 80px; align-items: center; justify-content: center; }
.watching-eye {
  position: relative;
  display: block;
  width: 246px;
  height: 392px;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  background: transparent;
}
.watching-eye > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.watching-eye::after { content: ''; position: absolute; z-index: 1; top: 174px; left: 132px; width: 98px; height: 98px; border-radius: 50%; background: #fff; }
.watching-eye i {
  position: absolute;
  z-index: 2;
  top: 178px;
  left: 136px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #101820;
  transform: translate(calc(var(--eye-x) * 48px),calc(var(--eye-y) * 72px));
  transition: transform 90ms linear;
}
.earth-stories__stage { position: relative; min-height: 720px; margin-top: 80px; }
.earth-stories__rail { position: relative; z-index: 2; width: 100%; height: 720px; padding: 22px 0 70px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-inline: contain; cursor: grab; user-select: none; }
.earth-stories__rail.is-dragging { cursor: grabbing; }
.earth-stories__rail::-webkit-scrollbar { display: none; }
.earth-stories__track { display: flex; width: max-content; gap: 48px; padding-inline: 0; align-items: flex-start; }
.earth-story {
  --arc-y: 0px;
  --arc-rotate: 0deg;
  --arc-scale: 1;
  position: relative;
  flex: 0 0 355px;
  height: 485px;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: none;
  backface-visibility: hidden;
  clip-path: inset(0 round 16px);
  transform: translateY(var(--arc-y)) rotate(var(--arc-rotate)) scale(var(--arc-scale));
  transition: transform 300ms cubic-bezier(.16,1,.3,1);
  transform-origin: 50% 0;
}
.earth-story:hover { box-shadow: none; transform: translateY(calc(var(--arc-y) - 12px)) rotate(var(--arc-rotate)) scale(var(--arc-scale)); }
.earth-story > img { display: block; width: calc(100% + 4px); height: calc(100% + 4px); margin: -2px; object-fit: cover; }
.earth-story__caption { position: absolute; right: 0; bottom: 0; left: 0; display: flex; min-height: 126px; padding: 20px 16px; flex-direction: column; justify-content: flex-end; gap: 8px; color: #101820; border-radius: 16px; background: #fff; }
.earth-story__caption p { margin: 0; font-size: 18px; font-weight: 600; line-height: 22px; }
.earth-story__caption span { color: #74818a; font-size: 16px; line-height: 20px; }

@media (max-width: 800px) {
  .earth-story-flow::before { height: 242px; }
  .earth-story-flow__clouds { top: 330px; width: 145vw; }
  .earth-story-flow__globe { top: 720px; width: 138vw; }
  .earth-story-flow__meadow { bottom: -80px; width: max(175vw,1120px); }
  .earth-stories { height: 1030px; padding-top: 56px; }
  .earth-stories h2 { font-size: clamp(43px,12vw,64px); }
  .watching-eyes { height: 180px; margin-top: 42px; gap: 9px; }
  .watching-eye { width: 113px; height: 180px; }
  .watching-eye::after { top: 80px; left: 60px; width: 47px; height: 47px; }
  .watching-eye i { top: 82px; left: 62px; width: 41px; height: 41px; transform: translate(calc(var(--eye-x) * 21px),calc(var(--eye-y) * 31px)); }
  .earth-stories__stage { min-height: 570px; margin-top: 24px; }
  .earth-stories__rail {
    height: 550px;
    padding-top: 18px;
    padding-bottom: 42px;
    scroll-padding-inline: calc((100% - min(74vw, 290px)) / 2);
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
  }
  .earth-stories__track {
    gap: clamp(18px, 6vw, 28px);
    padding-inline: calc((100vw - min(74vw, 290px)) / 2);
  }
  .earth-story {
    flex-basis: min(74vw, 290px);
    height: 410px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    transform-origin: 50% 50%;
  }
  .earth-story:hover { transform: translateY(var(--arc-y)) rotate(var(--arc-rotate)) scale(var(--arc-scale)); }
  .earth-story__caption p { font-size: 16px; line-height: 20px; }
  .earth-story__caption span { font-size: 14px; }
}

.story-bonus {
  --cat-scene-width: min(1728.5px,calc(100% - 160px));
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 782px;
  overflow: hidden;
  color: #101820;
  background: transparent;
}
.story-bonus h2 {
  position: absolute;
  z-index: 5;
  top: 40px;
  left: 50%;
  width: 626px;
  margin: 0;
  font-size: 33px;
  font-weight: 600;
  line-height: 36.67px;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(-50%);
}
.story-bonus__amount { position: absolute; z-index: 2; top: 136px; left: 50%; display: block; width: 685px; height: 231px; overflow: visible; fill: #f04e98; transform: translateX(-50%); }
.story-bonus__digit {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: bonus-digit-bounce 4.8s cubic-bezier(.34,1.56,.64,1) infinite;
  will-change: transform;
}
.story-bonus__digit--five { animation-delay: 0s; }
.story-bonus__digit--zero-one { animation-delay: .11s; }
.story-bonus__digit--zero-two { animation-delay: .22s; }
.story-bonus__cat-scene {
  position: absolute;
  top: 253px;
  left: max(80px,calc((100% - 1728.5px) / 2));
  width: var(--cat-scene-width);
  aspect-ratio: 1728.5 / 531.205;
  pointer-events: none;
}
.story-bonus__tail {
  position: absolute;
  z-index: 2;
  top: 51.43%;
  left: 61.87%;
  width: 40.21%;
  height: 29.52%;
  transform-origin: 5.2% 28.5%;
  animation: cat-tail-sway 6.8s cubic-bezier(.45,.05,.3,1) infinite;
  will-change: transform;
}
.story-bonus__tail img {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 5.2% 28.5%;
  animation: cat-tail-flex 6.8s cubic-bezier(.45,.05,.3,1) infinite;
  will-change: transform;
}
.story-bonus__cat-body {
  position: absolute;
  z-index: 3;
  inset: 0 auto 0 0;
  display: block;
  width: 86.89%;
  height: 100%;
}
.story-bonus__head-accent {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: #f04e98;
}
.story-bonus__burst {
  transform-box: fill-box;
  transform-origin: 100% 50%;
  animation: cat-burst-play 4.2s cubic-bezier(.34,1.56,.64,1) infinite;
  will-change: transform;
}
.story-bonus__burst--one { animation-delay: .12s; }
.story-bonus__burst--two { animation-delay: .24s; }
.story-bonus__burst--three { animation-delay: .36s; }
.story-bonus__accent {
  position: absolute;
  z-index: 7;
  top: 4.9%;
  left: 26.83%;
  display: block;
  width: 11.26%;
  height: 31.8%;
}
@keyframes cat-tail-sway {
  0%,100% { transform: rotate(-1deg); }
  24% { transform: rotate(2.4deg); }
  52% { transform: rotate(-7deg); }
  76% { transform: rotate(1.2deg); }
}
@keyframes cat-tail-flex {
  0%,100% { transform: skewY(0deg) scaleY(1); }
  24% { transform: skewY(-2.2deg) scaleY(.96); }
  52% { transform: skewY(4deg) scaleY(1.06); }
  76% { transform: skewY(-1deg) scaleY(.985); }
}
@keyframes bonus-digit-bounce {
  0%,12%,48%,100% { transform: translateY(0) scale(1); }
  19% { transform: translateY(8px) scale(1.055,.9); }
  27% { transform: translateY(-12px) scale(.96,1.075); }
  35% { transform: translateY(2px) scale(1.018,.982); }
  41% { transform: translateY(-2px) scale(.994,1.012); }
}
@keyframes cat-burst-play {
  0%,14%,52%,100% { transform: translate(0,0) rotate(0deg) scale(1); }
  22% { transform: translate(5px,2px) rotate(4deg) scale(.72,1.08); }
  30% { transform: translate(-9px,-3px) rotate(-4deg) scale(1.14,.92); }
  38% { transform: translate(2px,1px) rotate(1.5deg) scale(.96,1.03); }
  45% { transform: translate(-2px,0) rotate(-1deg) scale(1.02,.99); }
}
.story-bonus__cta {
  position: absolute;
  z-index: 6;
  top: 308px;
  left: 50%;
  display: flex;
  width: 623px;
  height: 110px;
  align-items: center;
  justify-content: center;
  border-radius: 92px;
  background: #fff;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 26px;
  text-transform: uppercase;
  transform: translateX(-50%);
  transition: transform 300ms cubic-bezier(.16,1,.3,1),box-shadow 300ms ease;
}
.story-bonus__cta:hover { box-shadow: 0 24px 55px rgb(16 24 32 / .16); transform: translateX(-50%) translateY(-5px); }
.story-bonus__badge {
  position: absolute;
  top: -29px;
  left: 50%;
  display: flex;
  height: 59px;
  padding: 0 28px;
  align-items: center;
  gap: 15px;
  border-radius: 92px;
  color: #fff;
  background: #101820;
  font-size: 18px;
  line-height: 22px;
  transform: translateX(-50%);
}
.story-bonus__badge img { width: 16px; height: 19px; }

@media (max-width: 800px) {
  .story-bonus { --cat-scene-width: 760px; height: 600px; }
  .story-bonus h2 { top: 6px; width: min(330px,calc(100% - 40px)); font-size: 21px; line-height: 24px; }
  .story-bonus__amount { top: 80px; width: 370px; height: auto; }
  .story-bonus__cat-scene { top: 310px; left: calc(50% - 380px); }
  .story-bonus__cta { top: 238px; width: min(350px,calc(100% - 40px)); height: 78px; font-size: 15px; }
  .story-bonus__badge { top: -22px; height: 44px; padding: 0 20px; gap: 10px; font-size: 13px; }
  .story-bonus__badge img { width: 12px; height: 14px; }
}

@media (max-width: 1100px) {
  .editorial { grid-template-columns: minmax(390px,.82fr) minmax(480px,1.18fr); min-height: 1060px; }
  .editorial__picker { grid-column: 1 / -1; padding: 10px 0 0; align-items: flex-end; }
  .editorial__offer { width: 310px; }
}

@media (max-width: 720px) {
  .editorial { display: flex; min-height: 0; padding: 58px 18px 42px; flex-direction: column; }
  .editorial__intro { display: contents; }
  .editorial__intro .section__eyebrow { order: 0; margin: 0 0 28px; }
  .editorial__intro h2 { order: 1; min-height: 2em; font-size: clamp(30px,8.2vw,45px); }
  .editorial__benefits { order: 3; gap: 8px; margin-top: 25px; }
  .editorial__benefits li { padding-right: 6px; font-size: 11px; }
  .editorial__benefits i { width: 40px; height: 40px; font-size: 20px; }
  .editorial__picker { display: contents; }
  .editorial__intro .collection-tabs { order: 2; display: flex; max-width: none; gap: 6px; margin: 28px -18px 0; padding-inline: 18px; overflow-x: auto; scrollbar-width: none; }
  .collection-tabs button { flex: 0 0 auto; grid-template-columns: 26px auto; min-height: 41px; white-space: nowrap; }
  .editorial__scene { order: 5; min-height: 590px; margin: 48px -18px 0; }
  .editorial-product { bottom: 62px; }
  .editorial-product--one { left: 3%; width: 43%; }
  .editorial-product--two { left: 35%; width: 39%; }
  .editorial-product--three { right: 1%; width: 31%; }
  .editorial-product__note { bottom: calc(100% + 14px); left: 0; width: 115px; }
  .editorial-product__note b { font-size: 18px; }
  .editorial-product__note span { padding: 5px 6px; font-size: 9px; }
  .editorial-product__note small { display: none; }
  .editorial-product__note::after { right: 2px; bottom: -21px; font-size: 25px; }
  .editorial-pouch { height: 285px; padding: 20px 13px; border-radius: 11px; }
  .editorial-pouch strong { font-size: 12px; }
  .editorial-pouch em { margin-top: 18px; font-size: 25px; }
  .editorial-pouch small { font-size: 8px; }
  .editorial-pouch--snack { height: 220px; }
  .editorial-pouch--snack em { font-size: 18px; }
  .editorial__ground { bottom: -35px; height: 210px; }
  .editorial__offer { order: 6; width: auto; margin-top: 0; }
  .editorial__mascot { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .earth-story-flow__clouds { animation: none; transform: translateX(-50%); }
  .story-bonus__tail,
  .story-bonus__tail img,
  .story-bonus__digit,
  .story-bonus__burst { animation: none; transform: none; }
  .watching-eye i,
  .earth-story { transition: none; }
}

/* Current Figma layout is full-bleed: section backgrounds touch viewport edges. */
.hero,
.matcher.section,
.section,
.figma-section,
.earth-stories,
.editorial {
  width: 100%;
  max-width: none;
  margin-right: 0;
  margin-left: 0;
}

/* Journal — Figma node 11017:18188 */
.journal {
  position: relative;
  isolation: isolate;
  width: 100%;
  padding: 640px max(28px,4.17vw) 190px;
  overflow: hidden;
  color: #fff;
  background: #101820;
}
.journal__top-tear,.journal__bottom-tear { position: absolute; right: 0; left: 0; display: block; width: 100%; pointer-events: none; }
.journal__top-tear { z-index: 3; top: clamp(-60px,-3.125vw,-12px); right: auto; left: -3.333%; width: 106.666%; height: auto; }
.journal__bottom-tear { z-index: 0; bottom: -1px; height: 114px; object-fit: fill; }
.journal__papers { position: absolute; z-index: 1; top: -165px; left: 50%; display: block; width: min(1300px,88vw); height: auto; transform: translateX(-50%); }
.journal__header { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.journal__header h2 { margin: 0; color: #fff; font-size: clamp(54px,4.17vw,80px); font-weight: 600; line-height: 1; text-align: center; text-transform: uppercase; }
.journal__logo { display: block; width: min(1060px,68vw); height: auto; margin-top: 0; }
.journal-filters { position: relative; z-index: 2; display: flex; margin-top: 40px; gap: 8px; flex-wrap: wrap; justify-content: center; }
.journal-filters button { min-height: 56px; padding: 16px 20px; border: 1px solid #fff; border-radius: 100px; color: #fff; background: transparent; font: 400 16px/20px var(--font-display); text-transform: uppercase; cursor: pointer; transition: color 180ms ease,background 180ms ease,transform 180ms ease; }
.journal-filters button:hover { transform: translateY(-2px); }
.journal-filters button.is-active { color: #101820; background: #fff; }
.journal .journal-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); max-width: 1760px; margin: 80px auto 0; gap: 34px 28px; align-items: start; }
.journal-card { display: flex; min-width: 0; min-height: 610px; overflow: hidden; color: #101820; background: #f2efe9; flex-direction: column; box-shadow: 0 12px 28px rgb(0 0 0 / .18); transform: rotate(var(--card-angle,0deg)); transform-origin: 50% 50%; transition: transform 280ms cubic-bezier(.16,1,.3,1),box-shadow 280ms ease; }
.journal-card:nth-child(1),.journal-card:nth-child(5) { --card-angle: -2deg; }
.journal-card:nth-child(2),.journal-card:nth-child(8) { --card-angle: 1.5deg; }
.journal-card:nth-child(3),.journal-card:nth-child(7) { --card-angle: -1deg; }
.journal-card:nth-child(4),.journal-card:nth-child(6) { --card-angle: 1deg; }
.journal-card:hover,.journal-card:focus-visible { z-index: 3; outline: none; box-shadow: 0 24px 48px rgb(0 0 0 / .32); transform: translateY(-10px) rotate(0); }
.journal-card[hidden] { display: none; }
.journal-card > img { display: block; width: 100%; aspect-ratio: 1 / 1.04; object-fit: cover; }
.journal-card__body { display: flex; min-height: 220px; padding: 24px 22px 20px; flex: 1; flex-direction: column; }
.journal-card h3 { margin: 0; font-family: var(--font-body); font-size: clamp(18px,1.25vw,24px); font-weight: 650; line-height: 1.32; letter-spacing: -.02em; }
.journal-card__meta { display: flex; margin-top: auto; padding-top: 28px; gap: 16px; align-items: center; justify-content: space-between; font-size: 14px; white-space: nowrap; }
.journal__all { position: relative; z-index: 2; display: flex; width: min(564px,100%); min-height: 72px; margin: 80px auto 0; padding: 18px 28px; align-items: center; justify-content: center; gap: 42px; border-radius: 100px; color: #101820; background: #fff; font: 400 18px/22px var(--font-display); text-transform: uppercase; transition: transform 220ms ease,background 220ms ease; }
.journal__all:hover { background: #c1f062; transform: translateY(-3px); }
.journal__all span { font-size: 28px; line-height: 1; }

@media (max-width: 900px) {
  .journal { padding: 440px 24px 150px; }
  .journal__top-tear { top: -28px; height: 130px; object-fit: fill; }
  .journal__papers { top: -70px; width: 900px; max-width: none; }
  .journal__header h2 { font-size: clamp(42px,8vw,64px); }
  .journal__logo { width: min(620px,88vw); }
  .journal-filters { margin: 30px -24px 0; padding: 0 24px 8px; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .journal-filters button { flex: 0 0 auto; min-height: 48px; padding: 13px 16px; font-size: 13px; }
  .journal .journal-grid { grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 52px; gap: 28px 20px; }
  .journal-card { min-height: 0; }
  .journal-card__body { min-height: 190px; padding: 20px 18px 18px; }
}

@media (max-width: 600px) {
  .journal { padding: 350px 18px 128px; }
  .journal__papers { top: -40px; width: 710px; }
  .journal__header h2 { font-size: 38px; }
  .journal__logo { width: 350px; max-width: 94vw; }
  .journal .journal-grid { grid-template-columns: 1fr; width: min(100%,360px); gap: 34px; }
  .journal-card { transform: rotate(var(--card-angle,0deg)); }
  .journal-card > img { aspect-ratio: 1 / 1.02; }
  .journal-card__body { min-height: 180px; }
  .journal-card h3 { font-size: 19px; }
  .journal-card__meta { font-size: 12px; }
  .journal__all { min-height: 60px; margin-top: 54px; font-size: 14px; }
}

/* Popular solutions — Figma node 11017:18164 */
.editorial {
  position: relative;
  z-index: 3;
  display: block;
  height: 1148px;
  min-height: 0;
  padding: 80px;
  overflow: hidden;
  border-radius: 40px;
  color: #101820;
  background: #fff;
}
.editorial__header { position: relative; z-index: 5; }
.editorial__header .section__eyebrow { margin: 0 0 16px; color: #f04e98; font: 600 16px/20px 'Benzin',sans-serif; }
.editorial__heading-row { display: flex; align-items: flex-start; justify-content: space-between; }
.editorial__heading-row h2 { min-height: 0; margin: 0; font: 600 clamp(58px,4.17vw,80px)/1 'Benzin',sans-serif; letter-spacing: 0; text-transform: uppercase; }
.editorial__heading-row h2 span { display: block; white-space: nowrap; }
.editorial__heading-row h2 span:last-child::after { display: none; }
.editorial__pet-toggle { display: flex; gap: 4px; padding: 4px; border: 1px solid #101820; border-radius: 88px; }
.editorial__pet-toggle button { display: flex; height: 52px; padding: 16px; align-items: center; gap: 8px; border: 0; border-radius: 100px; color: #101820; background: transparent; font: 600 14px/18px 'Benzin',sans-serif; text-transform: uppercase; cursor: pointer; }
.editorial__pet-toggle button.is-active { color: #fff; background: #101820; }
.editorial__pet-toggle img { width: 24px; height: 24px; }
.editorial > .collection-tabs { position: absolute; z-index: 6; top: 322px; left: 80px; display: flex; width: 262px; gap: 0; flex-direction: column; }
.editorial > .collection-tabs button { display: flex; width: 262px; min-height: 72px; padding: 24px; align-items: center; border: 0; border-radius: 16px; opacity: .6; color: #101820; background: transparent; font: 600 16px/20px 'Benzin',sans-serif; text-align: left; text-transform: uppercase; cursor: pointer; }
.editorial > .collection-tabs button.is-active { min-height: 88px; opacity: 1; color: #101820; background: #c1f062; }
.editorial__scene { position: absolute; z-index: 2; inset: 0; min-height: 0; }
.editorial__stone { position: absolute; z-index: 0; top: 613px; left: 17.76%; width: 88.12%; height: 564px; object-fit: cover; }
.editorial-product { position: absolute; z-index: 2; bottom: auto; opacity: 1; transition: transform 600ms cubic-bezier(.16,1,.3,1),opacity 220ms ease; }
.editorial-product > img { width: 100%; height: 100%; max-height: none; object-fit: contain; filter: none; }
.editorial-product--one { top: 322px; left: 13.49%; width: 47.29%; height: 605px; }
.editorial-product--two { top: 336px; left: 42.55%; width: 45.1%; height: 577px; }
.editorial-product--three { top: 444px; right: auto; left: 70.73%; width: 32.34%; height: 414px; }
.editorial-tools { position: absolute; z-index: 7; display: flex; gap: 8px; flex-direction: column; }
.editorial-tools--one { top: 384px; left: 26.04%; }
.editorial-tools--two { top: 384px; left: 52.6%; }
.editorial-tools--three { top: 479px; left: 92.7%; }
.editorial-tools > button { display: grid; width: 40px; height: 40px; padding: 8px; place-items: center; border: 0; border-radius: 8px; background: rgb(255 255 255 / .58); backdrop-filter: blur(10px); cursor: pointer; }
.editorial-tools > button:hover,.editorial-tools > button[aria-expanded="true"] { background: #fff; }
.editorial-tools img { width: 24px; height: 24px; }
.editorial-tools .editorial-settings img { opacity: .4; }
.editorial-popover { position: absolute; z-index: 10; top: 384px; left: 55.73%; width: 360px; padding: 24px; border: 1px solid rgb(255 255 255 / .08); border-radius: 24px; background: rgb(255 255 255 / .92); box-shadow: 0 18px 55px rgb(16 24 32 / .12); backdrop-filter: blur(20px); }
.editorial-popover[hidden] { display: none; }
.editorial-popover p { margin: 0 0 8px; font: 600 12px/14px 'Benzin',sans-serif; }
.editorial-popover p:not(:first-child) { margin-top: 16px; }
.editorial-popover__options { display: flex; gap: 8px; flex-wrap: wrap; }
.editorial-popover__options button { display: flex; min-height: 32px; padding: 8px 12px; align-items: center; gap: 8px; border: 1px solid #4f606b; border-radius: 16px; color: #4f606b; background: transparent; font: 600 12px/14px 'Benzin',sans-serif; text-transform: uppercase; cursor: pointer; }
.editorial-popover__options button.is-active { color: #fff; border-color: #101820; background: #101820; }
.editorial-popover__options img { width: 20px; height: 20px; }
.editorial__bar { position: absolute; z-index: 8; right: 10.42%; bottom: 80px; left: 10.42%; display: flex; min-height: 84px; padding: 16px; align-items: center; justify-content: space-between; border-radius: 88px; background: #c1f062; }
.editorial__summary,.editorial__actions { display: flex; align-items: center; gap: 16px; }
.editorial__count,.editorial__configure,.editorial__cart { display: flex; height: 52px; padding: 16px; align-items: center; justify-content: center; gap: 8px; border-radius: 100px; font: 600 14px/18px 'Benzin',sans-serif; text-transform: uppercase; }
.editorial__count { color: #fff; background: #f04e98; }
.editorial__count img,.editorial__configure img,.editorial__cart img { width: 24px; height: 24px; }
.editorial__price { display: flex; flex-direction: column; gap: 4px; font-family: 'Benzin',sans-serif; text-transform: uppercase; }
.editorial__price b { font-size: 20px; line-height: 24px; }
.editorial__price s { opacity: .4; font-size: 12px; line-height: 14px; }
.editorial__discount { padding: 6px 8px 4px; border-radius: 8px; color: #fff; background: #f04e98; font: 600 12px/14px 'Benzin',sans-serif; }
.editorial__configure,.editorial__cart { border: 1px solid #101820; background: transparent; cursor: pointer; }
.editorial__cart { color: #fff; background: #101820; }
.editorial.is-changing .editorial-product--one { opacity: 0; transform: translateX(-35px); }
.editorial.is-changing .editorial-product--two { opacity: 0; transform: translateY(-28px); }
.editorial.is-changing .editorial-product--three { opacity: 0; transform: translateX(35px); }

@media (max-width: 900px) {
  .editorial { height: auto; min-height: 1030px; padding: 56px 20px 32px; }
  .editorial__heading-row { gap: 28px; flex-direction: column; }
  .editorial__heading-row h2 { font-size: clamp(35px,9.5vw,66px); }
  .editorial__pet-toggle { align-self: flex-start; }
  .editorial__pet-toggle button { height: 44px; padding: 12px; font-size: 11px; }
  .editorial > .collection-tabs { position: relative; top: auto; left: auto; z-index: 7; width: auto; margin: 34px -20px 0; padding: 0 20px 8px; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .editorial > .collection-tabs button,.editorial > .collection-tabs button.is-active { flex: 0 0 auto; width: auto; min-height: 50px; padding: 14px 16px; white-space: nowrap; font-size: 11px; }
  .editorial__scene { position: relative; height: 530px; margin: 14px -20px 0; }
  .editorial__stone { top: 315px; left: -8%; width: 125%; height: 220px; }
  .editorial-product--one { top: 95px; left: -7%; width: 52%; height: 370px; }
  .editorial-product--two { top: 85px; left: 27%; width: 55%; height: 385px; }
  .editorial-product--three { top: 155px; left: 65%; width: 43%; height: 300px; }
  .editorial-tools { display: none; }
  .editorial-popover { position: fixed; top: auto; right: 16px; bottom: 16px; left: 16px; width: auto; }
  .editorial__bar { position: relative; right: auto; bottom: auto; left: auto; gap: 14px; padding: 14px; border-radius: 28px; flex-direction: column; }
  .editorial__summary,.editorial__actions { width: 100%; justify-content: center; }
  .editorial__actions { flex-direction: column; }
  .editorial__configure,.editorial__cart { width: 100%; }
}

.profile-builder[data-state="initial"] .scene-layer--dog,
.profile-builder[data-state="initial"] .scene-layer--ball,
.profile-builder[data-state="initial"] .scene-layer--pack,
.profile-builder[data-state="initial"] .scene-layer--kibble { opacity: 0; }

/* Final Figma pass: hero CTA, product grounding, journal and knowledge base */
.hero__feed-cta .button {
  box-sizing: border-box;
  width: auto;
  min-width: 269px;
  min-height: 56px;
  padding: 0 24px;
  border: 0;
  border-radius: 1000px;
  color: #101820;
  background: #fff;
  box-shadow: 0 0 0 10px rgb(255 255 255 / .4);
  font: 400 18px/22px var(--font-display);
  white-space: nowrap;
  text-transform: uppercase;
}

.editorial-product::before {
  position: absolute;
  z-index: 0;
  right: 10%;
  bottom: 45px;
  left: 10%;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,rgb(29 24 19 / .38) 0%,rgb(29 24 19 / .18) 38%,rgb(29 24 19 / 0) 74%);
  filter: blur(7px);
  content: '';
  transform: scaleY(.55);
  pointer-events: none;
}
.editorial-product > img { position: relative; z-index: 1; }
.editorial-product--two::before { right: 4%; left: 4%; bottom: 38px; height: 54px; }

.journal { padding: 640px 80px 160px; }
.journal__papers { position: absolute; z-index: 1; top: 0; left: 50%; width: 1920px; height: 590px; transform: translateX(-50%); }
.journal-paper { position: absolute; overflow: hidden; transform-origin: center; transition: transform 420ms cubic-bezier(.16,1,.3,1),filter 300ms ease; will-change: transform; }
.journal-paper img { position: absolute; display: block; width: 1349px; height: 900px; max-width: none; }
.journal-paper--left { top: -13px; left: 308px; width: 437px; height: 523px; transform: rotate(-6.25deg); }
.journal-paper--left img { top: -155px; left: -27px; }
.journal-paper--center { z-index: 2; top: -1px; left: 735px; width: 466px; height: 532px; filter: drop-shadow(0 12px 28px rgb(0 0 0 / .38)); }
.journal-paper--center img { top: -155px; left: -470px; }
.journal-paper--right { top: 10px; left: 1145px; width: 412px; height: 532px; transform: rotate(-5.71deg); }
.journal-paper--right img { top: -155px; left: -938px; }
.journal-paper:hover { z-index: 4; }
.journal-paper--left:hover { transform: translate(-10px,-10px) rotate(-8deg); }
.journal-paper--center:hover { filter: drop-shadow(0 18px 36px rgb(0 0 0 / .45)); transform: translateY(-12px) rotate(1deg); }
.journal-paper--right:hover { transform: translate(12px,-10px) rotate(-3.5deg); }
.journal .journal-grid { width: min(1760px,100%); max-width: 1760px; margin-top: 80px; grid-template-columns: repeat(4,364px); justify-content: space-between; gap: 40px 20px; }
.journal-card { width: 364px; min-height: 0; padding: 12px; gap: 8px; overflow: visible; background: #fff; box-shadow: none; }
.journal-card:nth-child(1),.journal-card:nth-child(5) { --card-angle: -4deg; }
.journal-card:nth-child(2),.journal-card:nth-child(6) { --card-angle: 4deg; }
.journal-card:nth-child(3),.journal-card:nth-child(7) { --card-angle: -4deg; }
.journal-card:nth-child(4),.journal-card:nth-child(8) { --card-angle: 0deg; }
.journal-card:hover,.journal-card:focus-visible { box-shadow: 0 24px 48px rgb(0 0 0 / .28); transform: translateY(-10px) rotate(0); }
.journal-card__visual { position: relative; width: 340px; height: 340px; overflow: hidden; }
.journal-card__visual > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.journal-card__category { position: absolute; top: 8px; left: 8px; display: grid; min-width: 102px; height: 28px; padding: 0 10px; place-items: center; border-radius: 6px; clip-path: polygon(2% 7%,97% 0,100% 15%,98% 91%,92% 100%,4% 95%,0 82%,1% 18%); color: #101820; background: #c1f062; font: 400 12px/14px var(--font-display); text-transform: uppercase; }
.journal-card__category--care { color: #fff; background: #753bbd; }
.journal-card__category--health { color: #fff; background: #f04e98; }
.journal-card__category--behavior { color: #fff; background: #f04e98; }
.journal-card__category--stories { color: #101820; background: #c1f062; }
.journal-card__category--science { color: #fff; background: #753bbd; }
.journal-card__category--news { color: #fff; background: #f68d2e; }
.journal-card__body { min-height: 110px; padding: 8px; gap: 16px; }
.journal-card h3 { height: 60px; font: 400 16px/20px var(--font-display); text-transform: uppercase; }
.journal-card__meta { padding-top: 16px; gap: 8px; color: #778d99; font: 600 14px/18px var(--font-body); }
.journal-card__meta span { display: flex; align-items: center; gap: 2px; }
.journal-card__meta img { display: block; width: 16px; height: 16px; }
.journal__all { width: 564px; height: 72px; min-height: 72px; margin-top: 80px; font: 400 18px/22px var(--font-display); }
.journal__all:hover,.journal__all:focus-visible { color: #fff; background: #f04e98; outline: none; transform: translateY(-3px); }
.journal__bottom-tear { z-index: 3; }

.knowledge { min-height: 697px; padding: 80px 80px 0; }
.knowledge__pills { display: block; width: min(867px,100%); height: auto; margin: 40px auto 0; }
.knowledge-faq { position: relative; z-index: 2; display: flex; margin-block: -40px; padding: 80px; align-items: center; flex-direction: column; gap: 40px; border-radius: 40px; background: #fff; }
.knowledge-faq__list { display: flex; width: min(1120px,100%); flex-direction: column; gap: 16px; }
.knowledge-faq__item {
  box-sizing: border-box;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 44px;
  background: #f4f6f7;
  transition: padding 400ms cubic-bezier(.22,1,.36,1),border-color 300ms ease,background-color 300ms ease;
}
.knowledge-faq__item > button { display: flex; width: 100%; min-height: 104px; padding: 24px; align-items: center; justify-content: space-between; gap: 120px; border: 0; color: #101820; background: transparent; font: 400 24px/28px var(--font-display); text-align: left; cursor: pointer; transition: min-height 400ms cubic-bezier(.22,1,.36,1),padding 400ms cubic-bezier(.22,1,.36,1); }
.knowledge-faq__item > button img { display: block; width: 56px; height: 56px; padding: 16px; flex: 0 0 56px; border-radius: 50%; background: #fff; transform: rotate(0) scale(1); transition: background-color 300ms ease,transform 400ms cubic-bezier(.22,1,.36,1); }
.knowledge-faq__item.is-open { padding: 24px; border-color: #c9d3d8; background: #fff; }
.knowledge-faq__item.is-open > button { min-height: 28px; padding: 0; }
.knowledge-faq__item.is-open > button img { background: #f4f6f7; transform: rotate(45deg) scale(.94); }
.knowledge-faq__answer { display: grid; padding-top: 0; padding-right: 176px; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: grid-template-rows 400ms cubic-bezier(.22,1,.36,1),padding-top 400ms cubic-bezier(.22,1,.36,1),opacity 240ms ease,transform 400ms cubic-bezier(.22,1,.36,1),visibility 0s linear 400ms; }
.knowledge-faq__answer p { min-height: 0; margin: 0; overflow: hidden; color: #4f606b; font: 500 16px/20px var(--font-body); }
.knowledge-faq__item.is-open .knowledge-faq__answer { padding-top: 8px; grid-template-rows: 1fr; opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }
.knowledge-faq__all { display: grid; width: 318px; height: 72px; place-items: center; border-radius: 100px; color: #fff; background: #101820; font: 400 18px/22px var(--font-display); text-transform: uppercase; transition: background 180ms ease,transform 180ms ease; }
.knowledge-faq__all:hover { background: #f04e98; transform: translateY(-3px); }

@media (max-width: 1500px) {
  .journal .journal-grid { grid-template-columns: repeat(4,minmax(0,364px)); }
  .journal-card { width: 100%; }
  .journal-card__visual { width: 100%; height: auto; aspect-ratio: 1; }
}

@media (max-width: 1000px) {
  .journal { padding: 440px 24px 150px; }
  .journal__papers { top: -20px; transform: translateX(-50%) scale(.68); transform-origin: top center; }
  .journal .journal-grid { grid-template-columns: repeat(2,364px); justify-content: center; gap: 40px 28px; }
  .knowledge { min-height: 0; padding: 64px 24px 0; }
  .knowledge-faq { margin-block: -28px; padding: 56px 24px; border-radius: 28px; }
  .knowledge-faq__item > button { gap: 30px; font-size: 19px; line-height: 24px; }
}

@media (max-width: 760px) {
  .hero__feed-cta .button { width: 230px; min-width: 230px; font-size: 15px; }
  .journal { padding-top: 350px; }
  .journal__papers { top: -15px; transform: translateX(-50%) scale(.52); }
  .journal .journal-grid { display: grid; width: min(100%,364px); grid-template-columns: 1fr; overflow: visible; }
  .journal-card { width: min(364px,100%); }
  .journal__all { width: min(100%,564px); }
  .knowledge { padding: 58px 18px 0; }
  .knowledge__pills { margin-top: 28px; }
  .knowledge-faq { margin-block: -24px; padding: 40px 16px; border-radius: 24px; }
  .knowledge-faq__list { gap: 10px; }
  .knowledge-faq__item > button { min-height: 82px; padding: 16px; gap: 14px; font-size: 15px; line-height: 20px; }
  .knowledge-faq__item > button img { width: 44px; height: 44px; padding: 10px; flex-basis: 44px; }
  .knowledge-faq__item.is-open { padding: 16px; }
  .knowledge-faq__answer { padding-right: 0; }
  .knowledge-faq__answer p { font-size: 14px; line-height: 19px; }
  .knowledge-faq__all { width: min(100%,318px); height: 60px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .journal-paper { transition: none; }
  .journal-paper--left:hover { transform: rotate(-6.25deg); }
  .journal-paper--center:hover { transform: none; }
  .journal-paper--right:hover { transform: rotate(-5.71deg); }
}

/* Figma knowledge base and footer */
.knowledge { position: relative; min-height: 820px; padding: 80px 4.17% 70px; overflow: hidden; color: #101820; background: #c1f062; }
.knowledge__inner { position: relative; z-index: 3; width: min(1200px,100%); margin: 0 auto; }
.knowledge h2 { margin: 0 0 40px; text-align: center; font: 600 clamp(46px,4.17vw,80px)/.95 'Benzin',sans-serif; letter-spacing: -.055em; text-transform: uppercase; }
.knowledge-search { display: grid; height: 72px; padding: 8px; grid-template-columns: 56px 1fr 56px; align-items: center; gap: 12px; border-radius: 100px; background: #fff; }
.knowledge-search__icon,.knowledge-search button { display: grid; width: 56px; height: 56px; place-items: center; border: 0; border-radius: 50%; }
.knowledge-search__icon { background: #eee; }
.knowledge-search button { background: #f04e98; cursor: pointer; transition: transform 180ms ease; }
.knowledge-search button:hover { transform: rotate(-8deg); }
.knowledge-search img { width: 24px; height: 24px; }
.knowledge-search input { min-width: 0; border: 0; outline: 0; color: #101820; background: transparent; font: 400 20px/1.3 'Onest',sans-serif; }
.knowledge-search input::placeholder { color: #92969a; }
.knowledge-tags { position: relative; z-index: 2; width: 930px; height: 470px; margin: -4px auto 0; }
.knowledge-tag { position: absolute; z-index: 1; padding: 14px 28px 16px; white-space: nowrap; border: 4px solid #c1f062; border-radius: 100px; color: #101820; background: #fff; font: 500 36px/1 'Onest',sans-serif; cursor: pointer; transition: z-index 0s,transform 180ms ease,background 180ms ease; }
.knowledge-tag:hover,.knowledge-tag:focus-visible,.knowledge-tag.is-active { z-index: 10; color: #fff; background: #101820; outline: 0; }
.knowledge-tag[hidden] { display: none; }
.knowledge-tag--choose { top: 155px; left: 0; transform: rotate(-31deg); }
.knowledge-tag--feeding { top: 106px; left: 104px; transform: rotate(35deg); }
.knowledge-tag--ai { top: 106px; left: 238px; transform: rotate(-17deg); }
.knowledge-tag--delivery { top: 183px; left: 270px; transform: rotate(-15deg); }
.knowledge-tag--ingredients { top: 190px; left: 406px; transform: rotate(52deg); }
.knowledge-tag--special { top: 86px; left: 560px; transform: rotate(53deg); }
.knowledge-tag--age { top: 260px; left: 475px; transform: rotate(16deg); }
.knowledge-tag--order { top: 298px; left: 418px; transform: rotate(-6deg); }
.knowledge-tag--ration { top: 350px; left: 176px; }
.knowledge-answer { position: relative; z-index: 12; width: min(760px,100%); margin: -55px auto 10px; padding: 24px 30px; border-radius: 28px; background: #fff; box-shadow: 0 16px 40px rgba(16,24,32,.12); }
.knowledge-answer h3 { margin: 0 0 8px; font: 600 20px/1.2 'Benzin',sans-serif; text-transform: uppercase; }
.knowledge-answer p { margin: 0; font: 400 17px/1.45 'Onest',sans-serif; }

.site-footer { position: relative; z-index: 1; padding: 200px 4.17% 80px; color: #fff; background: #101820; }
.site-footer__grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 40px; }
.site-footer__column { display: flex; min-width: 0; align-items: flex-start; flex-direction: column; gap: 12px; font: 400 18px/1.25 'Onest',sans-serif; }
.site-footer__column h2 { margin: 0 0 28px; color: #c1f062; font: 600 20px/1 'Benzin',sans-serif; text-transform: uppercase; }
.site-footer__column a { color: inherit; text-decoration: none; transition: color 160ms ease; }
.site-footer__column > a:hover,.site-footer__column p a:hover { color: #f04e98; }
.site-footer__column p { display: flex; margin: 0 0 24px; flex-direction: column; gap: 5px; }
.site-footer__column p span { color: #848b91; font-size: 14px; }
.site-footer__column address { margin: 0 0 30px; font: inherit; }
.site-footer__vet { padding-top: 70px; }
.site-footer__socials { display: flex; margin-top: 12px; gap: 12px; }
.site-footer__socials a { transition: transform 180ms ease; }
.site-footer__socials a:hover { transform: translateY(-4px); }
.site-footer__socials img { display: block; width: 72px; height: 72px; }
.site-footer__logo { display: block; width: 100%; height: auto; margin-top: 82px; }

@media (max-width: 1000px) {
  .site-footer { padding-top: 128px; }
  .site-footer__grid { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 70px; }
  .site-footer__vet { padding-top: 0; }
}

@media (max-width: 700px) {
  .editorial { border-radius: 24px; }
  .figma-section--tech { margin-top: -24px; }
  .category-catalog__tabs button:focus-visible { outline-width: 1px; outline-offset: 1px; }
  .knowledge { min-height: 0; padding: 64px 20px 60px; }
  .knowledge h2 { margin-bottom: 28px; }
  .knowledge-search { height: 64px; grid-template-columns: 48px 1fr 48px; gap: 8px; }
  .knowledge-search__icon,.knowledge-search button { width: 48px; height: 48px; }
  .knowledge-search input { font-size: 16px; }
  .knowledge-tags { display: flex; width: auto; height: auto; margin: 36px -8px 0; flex-wrap: wrap; justify-content: center; }
  .knowledge-tag { position: static; margin: -3px; padding: 11px 18px 13px; white-space: normal; font-size: 23px; }
  .knowledge-tag--choose { transform: rotate(-5deg); }
  .knowledge-tag--feeding { transform: rotate(4deg); }
  .knowledge-tag--ai { transform: rotate(-3deg); }
  .knowledge-tag--delivery { transform: rotate(3deg); }
  .knowledge-tag--ingredients { transform: rotate(-4deg); }
  .knowledge-tag--special { transform: rotate(5deg); }
  .knowledge-tag--age { transform: rotate(-3deg); }
  .knowledge-tag--order { transform: rotate(3deg); }
  .knowledge-tag--ration { transform: rotate(-2deg); }
  .knowledge-answer { margin: 35px 0 0; }
  .site-footer { padding: 96px 20px 36px; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 56px; }
  .site-footer__column { font-size: 17px; }
  .site-footer__column h2 { margin-bottom: 18px; }
  .site-footer__logo { margin-top: 64px; }
}

/* Keep the updated Figma knowledge layout after legacy responsive rules. */
.knowledge { min-height: 697px; padding: 80px 80px 0; }
.knowledge-search input { font: 400 18px/22px var(--font-display); text-transform: uppercase; }
.knowledge__pills { display: block; width: min(867px,100%); height: auto; margin: 40px auto 0; }
.button__icon { display: block; width: 24px; height: 24px; flex: 0 0 24px; }
.profile-builder__next,.recommendations__all { gap: 12px; }

@media (max-width: 1000px) {
  .knowledge { min-height: 0; padding: 64px 24px 0; }
}

@media (max-width: 700px) {
  .knowledge { padding: 58px 18px 0; }
  .knowledge__pills { margin-top: 28px; }
}

/* Knowledge chips: ordered Figma state -> current pills pile. */
.knowledge {
  padding-bottom: 40px;
}

.knowledge-chips-stage {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 401px;
  margin: 40px auto 0;
}

.knowledge-motion-chips {
  position: absolute;
  top: 0;
  left: 50%;
  display: flex;
  width: min(1520px,calc(100% - 40px));
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 180ms ease;
  pointer-events: none;
}

.knowledge-motion-chips__row {
  display: flex;
  width: max-content;
  max-width: 100%;
  justify-content: center;
}

.knowledge-motion-chips span {
  display: flex;
  padding: 12px 18px;
  align-items: center;
  justify-content: center;
  border: 3px solid #c1f062;
  border-radius: 75px;
  color: #101820;
  background: #fff;
  font: 500 27px/1.3 var(--font-body);
  white-space: nowrap;
  box-sizing: border-box;
  transform: rotate(0);
  transform-origin: 0 0;
  will-change: left,top,width,height,transform;
}

.knowledge-chips-stage .knowledge__pills {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: min(867px,100%);
  height: auto;
  margin: 0;
  opacity: 1;
  transform: translateX(-50%);
  transition: opacity 180ms ease;
}

.knowledge-paw {
  position: absolute;
  z-index: 5;
  top: 176px;
  right: -21px;
  width: 376px;
  height: 124px;
  opacity: 0;
  transform: translateX(390px);
  pointer-events: none;
  will-change: transform,opacity;
}

.knowledge-paw img {
  position: absolute;
  top: -126px;
  left: 126px;
  display: block;
  width: 124px;
  height: 376px;
  max-width: none;
  transform: rotate(90deg);
}

.knowledge.is-motion-ready:not(.is-settled) .knowledge-motion-chips { opacity: 1; }
.knowledge.is-motion-ready .knowledge__pills { opacity: 0; }
.knowledge.is-tapping .knowledge-paw { animation: knowledge-paw-tap 1.4s cubic-bezier(.16,1,.3,1) both; }
.knowledge.is-tapping .knowledge-search button { animation: knowledge-search-tap 1.4s ease both; }
.knowledge.is-collapsing .knowledge-paw,.knowledge.is-settled .knowledge-paw { opacity: 0; transform: translateX(390px); transition: opacity 260ms ease,transform 650ms cubic-bezier(.4,0,1,1); }

.knowledge.is-collapse-ready .knowledge-motion-chips {
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
}

.knowledge.is-collapse-ready .knowledge-motion-chips__row {
  display: contents;
}

.knowledge.is-collapse-ready .knowledge-motion-chips span {
  position: absolute;
  z-index: var(--pile-z);
  left: var(--start-left);
  top: var(--start-top);
  width: var(--start-width);
  height: var(--start-height);
  padding: 0;
  transition:
    left 700ms cubic-bezier(.22,1,.36,1) var(--fall-delay),
    top 700ms cubic-bezier(.22,1,.36,1) var(--fall-delay),
    width 700ms cubic-bezier(.22,1,.36,1) var(--fall-delay),
    height 700ms cubic-bezier(.22,1,.36,1) var(--fall-delay),
    transform 700ms cubic-bezier(.22,1,.36,1) var(--fall-delay);
}

.knowledge:is(.is-collapsing,.is-settled) .knowledge-motion-chips span {
  left: var(--pile-left);
  top: var(--pile-top);
  width: var(--pile-width);
  height: var(--pile-height);
  transform: rotate(var(--pile-rotation));
}

.knowledge.is-settled .knowledge-motion-chips { opacity: 1; }

@keyframes knowledge-paw-tap {
  0% { opacity: 0; transform: translateX(390px); }
  18% { opacity: 1; transform: translateX(0); }
  34% { opacity: 1; transform: translateX(-22px); }
  45% { opacity: 1; transform: translateX(0); }
  61% { opacity: 1; transform: translateX(-22px); }
  72%,100% { opacity: 1; transform: translateX(0); }
}

@keyframes knowledge-search-tap {
  0%,27%,47%,55%,75%,100% { transform: scale(1); }
  36%,66% { transform: scale(.86); }
}

@media (max-width: 1100px) {
  .knowledge { padding-bottom: 28px; }
  .knowledge-motion-chips { width: calc(100% - 24px); }
  .knowledge-motion-chips span { padding: 10px 14px; font-size: 20px; }
  .knowledge-paw { right: -92px; transform: translateX(390px) scale(.82); transform-origin: right center; }
  .knowledge.is-collapsing .knowledge-paw,.knowledge.is-settled .knowledge-paw { transform: translateX(390px) scale(.82); }
}

@media (max-width: 700px) {
  .knowledge { padding-bottom: 24px; }
  .knowledge-chips-stage { height: auto; min-height: 401px; margin-top: 28px; }
  .knowledge-motion-chips,.knowledge-paw { display: none; }
  .knowledge.is-motion-ready .knowledge__pills { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .knowledge-motion-chips,.knowledge-paw { display: none; }
  .knowledge.is-motion-ready .knowledge__pills { opacity: 1; }
  .knowledge-faq__item,
  .knowledge-faq__item > button,
  .knowledge-faq__item > button img,
  .knowledge-faq__answer { transition: none; }
}

/* Hero CTAs: mobile layout from Figma and a calm animated feed-button halo */
.hero__feed-button {
  position: relative;
  isolation: isolate;
  background: transparent !important;
  box-shadow: none !important;
}

.hero__feed-button::before,
.hero__feed-button::after {
  position: absolute;
  border-radius: inherit;
  content: '';
  pointer-events: none;
}

.hero__feed-button::before {
  z-index: 0;
  inset: -10px;
  background: rgb(255 255 255 / .4);
  transform-origin: center;
  animation: hero-feed-halo 2.6s ease-in-out infinite;
  will-change: transform,opacity;
}

.hero__feed-button::after {
  z-index: 1;
  inset: 0;
  background: #fff;
}

.hero__feed-button > span {
  position: relative;
  z-index: 2;
}

.hero__mobile-ai-cta {
  display: none;
}

@keyframes hero-feed-halo {
  0%,100% { opacity: .72; transform: scale(1); }
  50% { opacity: .36; transform: scale(1.08); }
}

@media (max-width: 760px) {
  .hero__feed-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .hero__feed-cta .button {
    width: auto;
    min-width: 0;
    min-height: 42px;
    padding: 12px 16px;
    font: 400 14px/18px var(--font-display);
  }

  .hero__feed-button::before {
    inset: -8px;
  }

  .hero__feed-cta .hero__mobile-ai-cta {
    display: inline-flex;
    gap: 8px;
    color: #101820;
    background: #c1f062;
    box-shadow: none;
    text-transform: uppercase;
  }

  .hero__mobile-ai-cta img {
    display: block;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
  }
}

/* Compact and regroup popular solutions on mobile only. */
@media (max-width: 760px) {
  .editorial {
    min-height: 0;
    padding: 40px 20px 32px;
  }

  .editorial__header .section__eyebrow {
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 17px;
  }

  .editorial__heading-row {
    gap: 16px;
  }

  .editorial__pet-toggle {
    box-sizing: border-box;
    width: min(302px, 100%);
    height: 44px;
    padding: 3px;
  }

  .editorial__pet-toggle button {
    height: 36px;
    min-width: 0;
    padding: 8px 10px;
    justify-content: center;
    flex: 1 1 0;
    gap: 6px;
  }

  .editorial__pet-toggle img {
    width: 20px;
    height: 20px;
  }

  .editorial > .collection-tabs {
    height: 64px;
    margin-top: 20px;
    padding-bottom: 8px;
    align-items: stretch;
  }

  .editorial > .collection-tabs button,
  .editorial > .collection-tabs button.is-active {
    width: clamp(126px, 38vw, 164px);
    height: 56px;
    min-height: 56px;
    padding: 8px 12px;
    align-items: center;
    justify-content: center;
    flex: 0 0 clamp(126px, 38vw, 164px);
    overflow: hidden;
    font-size: 11px;
    line-height: 14px;
    text-align: center;
    white-space: normal;
  }

  .editorial__scene {
    position: relative;
    width: calc(100% + 40px);
    height: 290px;
    min-height: 0;
    margin: 8px -20px 0;
    overflow: hidden;
  }

  .editorial__stone {
    top: 150px;
    left: -8%;
    width: 116%;
    height: 150px;
    object-fit: cover;
  }

  .editorial-product {
    height: auto;
    aspect-ratio: 3 / 2;
  }

  .editorial-product--one {
    z-index: 2;
    top: 60px;
    left: 1%;
    width: 56%;
  }

  .editorial-product--two {
    z-index: 4;
    top: 25px;
    left: 25%;
    width: 68%;
  }

  .editorial-product--three {
    z-index: 3;
    top: 65px;
    left: 56%;
    width: 55%;
  }

  .editorial-product > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

/* Compact mobile matcher: heading, scene, then the question card. */
@media (max-width: 760px) {
  .matcher.section {
    padding: 28px 16px 36px;
  }

  .matcher__heading {
    margin-bottom: 12px;
  }

  .profile-builder,
  .profile-builder[data-state="result"] {
    display: flex;
    min-height: 0;
    flex-direction: column;
    gap: 12px;
  }

  .pet-stage,
  .profile-builder[data-state="result"] .pet-stage {
    width: 100%;
    height: 220px;
    min-height: 220px;
    order: 1;
    transform: none;
  }

  .profile-builder__questions {
    display: flex;
    width: calc(100% + 32px);
    min-height: 0;
    margin-inline: -16px;
    padding: 16px;
    order: 2;
    border-radius: 22px;
  }

  .recommendations {
    order: 3;
  }

  .profile-builder__progress {
    display: flex;
    margin: 0 0 12px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }

  .profile-builder__step {
    flex: 0 0 auto;
    font-size: 12px;
    white-space: nowrap;
  }

  .profile-builder__bars {
    width: min(52%, 168px);
    margin-top: 0;
    flex: 0 1 168px;
    gap: 6px;
  }

  .profile-builder__bars i {
    height: 5px;
  }

  .profile-builder__prompt h3 {
    margin: 0 0 10px;
    font-size: 16px;
    line-height: 20px;
  }

  .profile-builder__options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .profile-builder__options:has(.profile-option:nth-child(3)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .profile-option {
    min-height: 52px;
    padding: 8px;
    border-radius: 14px;
  }

  .profile-option span {
    font-size: 12px;
  }

  .profile-builder[data-question="size"] .profile-option span {
    overflow: hidden;
    font-size: clamp(11px, 3.1vw, 13px);
    line-height: 1;
    letter-spacing: -.02em;
    text-overflow: clip;
    white-space: nowrap;
  }

  .profile-builder[data-question="size"] .profile-option {
    padding-inline: 4px;
  }

  .profile-builder__nav {
    width: 100%;
    margin-top: 0;
    padding-top: 10px;
    gap: 8px;
  }

  .profile-builder__back,
  .profile-builder__next {
    height: 46px;
    min-height: 46px;
    max-height: 46px;
    font-size: 12px;
  }

  .profile-builder__next {
    width: 100%;
  }

  .pet-stage__questions span {
    width: 58px;
    height: 66px;
    font-size: 52px;
  }

  .profile-builder[data-state="result"] .profile-builder__questions {
    display: none;
  }

  .profile-builder[data-state="result"] .recommendations {
    display: block;
    width: calc(100% + 32px);
    max-width: none;
    margin-inline: -16px;
    margin-top: 0;
    padding: 18px;
    order: 2;
    align-self: center;
    border-radius: 22px;
  }

  .recommendations__inner {
    width: 100%;
  }

  .recommendations h3 {
    margin: 0 0 14px;
    font-size: 24px;
    line-height: 1.05;
    letter-spacing: -.035em;
  }

  .recommendations h3 em {
    display: inline;
  }

  .recommendation-list {
    display: flex;
    width: calc(100% + 18px);
    gap: 8px;
    margin-right: -18px;
    padding: 0 18px 0 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .recommendation-list::-webkit-scrollbar {
    display: none;
  }

  .recommendation-card {
    min-height: 0;
    padding: 12px;
    flex: 0 0 78%;
    gap: 8px;
    scroll-snap-align: start;
  }

  .recommendation-card__image {
    height: 150px;
    padding-block: 2px;
  }

  .recommendation-card__copy {
    gap: 2px;
  }

  .recommendation-card__copy h4 {
    font-size: 12px;
    line-height: 15px;
  }

  .recommendation-card__copy p {
    font-size: 12px;
    line-height: 15px;
  }

  .recommendation-card__stats {
    gap: 6px;
  }

  .recommendation-card__stats span {
    padding: 6px 2px 5px;
  }

  .recommendation-card__buy {
    min-height: 44px;
  }

  .recommendations__all {
    height: 52px;
    margin-top: 12px;
  }
}

/* Unified mobile typography for section-level headings. */
@media (max-width: 760px) {
  body main section h2,
  body footer section h2 {
    font-size: 24px !important;
    line-height: 1.05 !important;
  }

  .figma-section--categories h2 {
    top: 3%;
    right: 16px;
    left: 16px;
    width: auto;
    white-space: normal;
  }

  .story-bonus h2 {
    width: calc(100% - 24px);
  }

  .story-bonus__amount {
    top: 94px;
  }
}

/* Reveal hero controls only after both title lines have entered. */
.hero__feed-button,
.hero__ai-card,
.hero__mobile-ai-cta {
  opacity: 0;
  translate: 0 18px;
  scale: .98;
  animation: hero-controls-reveal 620ms cubic-bezier(.16, 1, .3, 1) both;
}

.hero__feed-button {
  animation-delay: 1.25s;
}

.hero__ai-card,
.hero__mobile-ai-cta {
  animation-delay: 1.4s;
}

.hero__feed-button::before {
  animation-delay: 1.87s;
  animation-fill-mode: both;
}

@keyframes hero-controls-reveal {
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__feed-button,
  .hero__ai-card,
  .hero__mobile-ai-cta {
    opacity: 1;
    translate: none;
    scale: 1;
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__feed-button::before {
    animation: none;
    opacity: .5;
    transform: none;
  }
}

/* Mobile hero composition from Figma 11108:18245 (390 × 552 artwork area). */
@media (max-width: 760px) {
  .hero {
    height: 141.538vw;
    min-height: 0;
  }

  .hero::before {
    display: none;
  }

  .hero__scene::before {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgb(67 143 226 / .9) 33.696%,
      rgb(130 180 235 / 0) 61.141%
    );
    content: '';
    pointer-events: none;
  }

  .hero__background,
  .hero__pets {
    --depth: 0;
    left: -44.615%;
    width: 172.564%;
    animation: none;
  }

  .hero__background {
    z-index: 0;
    top: 0;
    bottom: auto;
    height: 100%;
    aspect-ratio: auto;
    object-fit: fill;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hero__pets {
    z-index: 2;
    top: 36.594%;
    bottom: auto;
    height: 63.406%;
    aspect-ratio: auto;
    object-fit: cover;
  }

  .hero__title-art,
  .hero__accent {
    z-index: 4;
  }

  .hero__wave {
    z-index: 7;
    right: auto;
    bottom: 0;
    left: -44.615%;
    width: 172.564%;
    max-width: none;
    height: 3.357%;
    object-fit: fill;
    transform: none;
  }
}

/* Mobile finishing pass for the editorial offer and scaled technology canvas. */
@media (max-width: 760px) {
  .editorial__count {
    display: none;
  }

  .pet-stage,
  .profile-builder[data-state="result"] .pet-stage {
    transform: translateX(-6%);
  }

  .editorial__scene {
    height: 302px;
  }

  .editorial-product--one {
    top: 72px;
  }

  .editorial-product--two {
    top: 37px;
  }

  .editorial-product--three {
    top: 77px;
  }

  .editorial-product::before,
  .editorial-product--two::before {
    right: 8%;
    bottom: 0;
    left: 8%;
    height: 26px;
    filter: blur(5px);
    transform: scaleY(.45);
  }

  .editorial-product--two::before {
    right: 3%;
    left: 3%;
    height: 30px;
  }

  .editorial__bar {
    margin-top: -42px;
  }

  .editorial__summary {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 4px 12px;
    align-items: center;
  }

  .editorial__price {
    display: contents;
  }

  .editorial__price b {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
  }

  .editorial__price s {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }

  .editorial__discount {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }

  .editorial__actions {
    gap: 8px;
    flex-direction: row;
  }

  .editorial__configure,
  .editorial__cart {
    width: auto;
    min-width: 0;
    padding-inline: 10px;
    flex: 1 1 0;
    font-size: 0;
  }

  .editorial__configure::before,
  .editorial__cart::before {
    font: 600 11px/14px 'Benzin',sans-serif;
  }

  .editorial__configure::before {
    content: 'Настроить';
  }

  .editorial__cart::before {
    content: 'В корзину';
  }

  .editorial__configure img,
  .editorial__cart img {
    width: 20px;
    height: 20px;
  }

  .figma-section--tech {
    margin-top: -16px;
    height: 205.127vw;
    aspect-ratio: auto;
    border-radius: 2.0833vw;
  }

  .tech-motion {
    height: 45.36vw;
    border-radius: 2.0833vw;
  }

  .tech-motion h2 {
    inset: 12% 8% auto;
    font-size: clamp(30px,8.25vw,36px) !important;
    line-height: 1.05 !important;
  }

  .tech-motion h2 span {
    display: block;
  }

  .tech-motion h2 br {
    display: none;
  }

  .tech-chip {
    height: 28px;
    min-height: 0;
    padding: 0 4px 0 10px;
    gap: 4px;
    border-width: 1px;
    font-size: 9px;
    line-height: 11px;
  }

  .tech-chip > img {
    width: 20px;
    height: 20px;
    padding: 4px;
  }

  .tech-chip--air {
    top: 32%;
    left: 12%;
  }

  .tech-chip--baked {
    top: 49%;
    right: 11%;
  }

  .tech-chip--freeze {
    top: 70%;
  }

  .tech-benefits-grid--desktop {
    display: none !important;
  }

  .figma-section--tech > .tech-benefits-grid--mobile {
    display: block !important;
    top: 45.36vw;
    left: 0;
    width: 100%;
  }
}

/* Mobile finishing pass: offer, bonus story and journal. */
@media (max-width: 760px) {
  /* Keep all offer prices and the discount in one horizontal auto-layout. */
  .editorial__summary {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(8px, 3vw, 14px);
  }

  .editorial__price {
    display: flex;
    min-width: 0;
    align-items: center;
    flex: 1 1 auto;
    flex-direction: row;
    gap: clamp(8px, 3vw, 14px);
  }

  .editorial__price b,
  .editorial__price s,
  .editorial__discount {
    grid-column: auto;
    grid-row: auto;
    justify-self: auto;
    white-space: nowrap;
  }

  .editorial__price b {
    font-size: 20px;
    line-height: 24px;
  }

  .editorial__price s {
    font-size: 11px;
    line-height: 14px;
  }

  .editorial__discount {
    margin-left: auto;
    flex: 0 0 auto;
  }

  /* Preserve the desktop bonus composition and animation, scaled to the phone. */
  .story-bonus {
    --cat-scene-width: calc(100% - 16px);
    height: clamp(286px, 78vw, 336px);
    overflow: visible;
  }

  .story-bonus h2 {
    top: -40px;
    width: calc(100% - 32px);
    font-size: 24px !important;
    line-height: 1.05 !important;
  }

  .story-bonus__amount {
    top: 68px;
    width: min(54vw, 224px);
  }

  .story-bonus__cta {
    top: 132px;
    width: min(72vw, 300px);
    height: 58px;
    font-size: 12px;
    line-height: 15px;
  }

  .story-bonus__badge {
    top: -16px;
    height: 32px;
    padding-inline: 14px;
    gap: 7px;
    font-size: 10px;
    line-height: 12px;
  }

  .story-bonus__badge img {
    width: 9px;
    height: 11px;
  }

  .story-bonus__cat-scene {
    top: 180px;
    left: 8px;
  }

  /* Scale the original three-paper desktop collage into the viewport. */
  .journal {
    padding: calc(30.73vw + 56px) 12px 112px;
  }

  .journal__papers {
    top: 0;
    left: 50%;
    width: 100vw;
    height: 30.73vw;
    transform: translateX(-50%);
  }

  .journal-paper--left {
    top: -2.2%;
    left: 16.04%;
    width: 22.76%;
    height: 88.64%;
  }

  .journal-paper--center {
    top: -.2%;
    left: 38.28%;
    width: 24.27%;
    height: 90.17%;
  }

  .journal-paper--right {
    top: 1.7%;
    left: 59.64%;
    width: 21.46%;
    height: 90.17%;
  }

  .journal-paper img {
    height: 169.2%;
    max-width: none;
  }

  .journal-paper--left img {
    top: -29.64%;
    left: -6.18%;
    width: 308.7%;
  }

  .journal-paper--center img {
    top: -29.14%;
    left: -100.86%;
    width: 289.49%;
  }

  .journal-paper--right img {
    top: -29.14%;
    left: -227.67%;
    width: 327.43%;
  }

  .journal-filters {
    margin: 20px -12px 0;
    padding: 0 12px 6px;
    gap: 6px;
  }

  .journal-filters button {
    min-height: 32px;
    padding: 7px 10px;
    font-size: 10px;
    line-height: 12px;
  }

  .journal .journal-grid {
    display: grid;
    width: 100%;
    max-width: none;
    margin-top: 30px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 10px;
    overflow: visible;
  }

  .journal-card {
    width: 100%;
    min-width: 0;
    padding: 5px;
    gap: 4px;
  }

  .journal-card__visual {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  .journal-card__category {
    top: 4px;
    left: 4px;
    min-width: 0;
    height: 20px;
    padding-inline: 6px;
    border-radius: 4px;
    font-size: 8px;
    line-height: 10px;
  }

  .journal-card__body {
    min-height: 82px;
    padding: 5px 4px 4px;
    gap: 5px;
  }

  .journal-card h3 {
    display: -webkit-box;
    height: 39px;
    overflow: hidden;
    font-size: 10px;
    line-height: 13px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .journal-card__meta {
    margin-top: auto;
    padding-top: 4px;
    gap: 3px;
    font-size: 8px;
    line-height: 10px;
  }

  .journal-card__meta img {
    width: 9px;
    height: 9px;
  }

  .journal__all {
    min-height: 52px;
    margin-top: 42px;
    font-size: 12px;
    line-height: 15px;
  }
}

/* Mobile category accordion. Desktop and tablet retain the connected tab canvas. */
@media (max-width: 760px) {
  .figma-section--categories {
    display: block;
    min-height: 0;
    padding: 52px 12px 48px;
    aspect-ratio: auto;
    overflow: hidden;
    background: linear-gradient(180deg, #fcfaff 0%, #fcfaff 58%, #c8e7fa 100%);
  }

  .figma-section--categories h2 {
    position: static;
    width: 100%;
    margin: 0 0 24px;
    font-size: clamp(22px, 6.15vw, 26px) !important;
    line-height: 1.05 !important;
    white-space: normal;
  }

  .category-catalog__surface,
  .category-catalog__tabs {
    display: none;
  }

  .category-catalog__mobile {
    position: relative;
    z-index: 5;
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 7px;
  }

  .category-catalog__mobile-item {
    --category-strong: #7ab800;
    --category-soft: #d1f589;
    overflow: hidden;
    border-radius: 22px;
    background: var(--category-soft);
  }

  .category-catalog__mobile-item[data-category="care"] {
    --category-strong: #f04e98;
    --category-soft: #ffdbef;
  }

  .category-catalog__mobile-item[data-category="accessories"] {
    --category-strong: #753bbd;
    --category-soft: #f1e1ff;
  }

  .category-catalog__mobile-trigger {
    display: flex;
    width: 100%;
    min-height: 62px;
    padding: 10px 12px 10px 18px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 0;
    border-radius: 22px;
    color: var(--category-soft);
    background: var(--category-strong);
    font: 600 clamp(15px, 4.35vw, 18px)/1.1 var(--font-display);
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
  }

  .category-catalog__mobile-trigger i {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border-radius: 50%;
    color: var(--category-strong);
    background: var(--category-soft);
    font: 600 20px/1 var(--font-body);
    font-style: normal;
    transition: transform 240ms cubic-bezier(.16, 1, .3, 1);
  }

  .category-catalog__mobile-item.is-active .category-catalog__mobile-trigger {
    border-radius: 22px 22px 10px 10px;
  }

  .category-catalog__mobile-item.is-active .category-catalog__mobile-trigger i {
    transform: rotate(90deg);
  }

  .category-catalog__mobile-trigger:focus-visible {
    outline: 2px solid #101820;
    outline-offset: -3px;
  }

  .category-catalog__mobile-item:not(.is-active) .category-catalog__mobile-body {
    display: none;
  }

  .category-catalog__mobile-body {
    padding-top: 2px;
    background: var(--category-soft);
  }

  .category-catalog__live-panel {
    position: static;
    width: 100%;
    height: auto;
    overflow: visible;
  }

  .category-catalog__feature {
    display: none;
  }

  .category-catalog__products-shell {
    position: static;
    width: 100%;
    height: 352px;
    padding: 10px 0 12px 10px;
    overflow: hidden;
  }

  .category-catalog__products {
    width: 100%;
    height: 100%;
    padding-right: 10px;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding-left: 0;
    scroll-snap-type: x proximity;
  }

  .category-product-card {
    height: 100%;
    padding: 10px;
    flex: 0 0 min(70vw, 238px);
    grid-template-rows: minmax(0, 1fr) auto 44px;
    gap: 7px;
    border-radius: 16px;
    scroll-snap-align: start;
  }

  .category-product-card__media {
    inset: 10px 10px auto;
    height: 58%;
    border-radius: 8px;
  }

  .category-product-card__badges {
    gap: 3px;
  }

  .category-product-card__badge {
    min-height: 18px;
    padding-inline: 6px;
    border-radius: 6px;
    font-size: 8px;
  }

  .category-product-card__info h3 {
    font-size: 10px;
    line-height: 1.15;
  }

  .category-product-card__info p {
    margin-top: 3px;
    font-size: 10px;
    line-height: 1.15;
  }

  .category-product-card__price {
    gap: 6px;
    font-size: 12px;
  }

  .category-catalog__scroll {
    display: none;
  }
}

/* Compact mobile section tears and seat the FAQ pills on the white card. */
@media (max-width: 760px) {
  .journal__top-tear {
    top: -18px;
    height: auto;
    object-fit: contain;
  }

  .journal__bottom-tear {
    height: 34px;
    object-fit: fill;
  }

  .knowledge-chips-stage {
    height: clamp(132px, 38vw, 164px);
    min-height: clamp(132px, 38vw, 164px);
    margin-top: 20px;
  }

  .knowledge-faq {
    margin-top: -24px;
  }
}