/* =========================================================================
   sections.css — one block per page section, in page order
   ========================================================================= */

/* ---------- shared: faint paw prints on the cream sections, and the tilted plate with a dashed outline behind cut-out dogs ---------- */
:root { --paws: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 420'%3E%3Cdefs%3E%3Cg id='p'%3E%3Cellipse cx='0' cy='7' rx='14' ry='11'/%3E%3Cellipse cx='-16' cy='-8' rx='5.5' ry='7.5' transform='rotate(-22 -16 -8)'/%3E%3Cellipse cx='-6' cy='-19' rx='5.5' ry='7.5'/%3E%3Cellipse cx='7' cy='-19' rx='5.5' ry='7.5'/%3E%3Cellipse cx='17' cy='-8' rx='5.5' ry='7.5' transform='rotate(22 17 -8)'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='%23271b15' fill-opacity='.055'%3E%3Cuse href='%23p' transform='translate(70 80) rotate(-24) scale(1.5)'/%3E%3Cuse href='%23p' transform='translate(300 150) rotate(18) scale(1.1)'/%3E%3Cuse href='%23p' transform='translate(160 300) rotate(-8) scale(1.25)'/%3E%3Cuse href='%23p' transform='translate(370 360) rotate(32) scale(0.9)'/%3E%3C/g%3E%3C/svg%3E"); }
.picker, .guides, .picks { background-image: var(--paws); background-size: clamp(18rem, 30vw, 26rem); }
.picker { background-position: 0 0; }
.guides { background-position: 3rem 5rem; }
.picks { background-position: 8rem 2rem; }

/* =========================================================================
   2 HERO = CHARACTER STAGE
   Layers (back → front): mood colour · flood (rip) · giant word · dog · callouts/pills · controls · wave
   ========================================================================= */
.hero {
  position: relative;
  isolation: isolate;
  block-size: max(100svh, 40rem);
  background-color: var(--mood);
  color: var(--ink);
  overflow: clip;
  transition: background-color 0ms;
}

/* paper-rip flood: wrapper carries the torn white edge (drop-shadow follows the clip) */
.hero__flood {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  filter: drop-shadow(var(--rip-edge, -7px) 0 0 var(--paper));
  visibility: hidden;
}
.hero__flood.is-ripping { visibility: visible; }
.hero__flood-fill { position: absolute; inset: 0; background: var(--flood, var(--mood)); }

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  block-size: 100%;
  max-inline-size: var(--page-max);
  margin-inline: auto;
  padding: calc(var(--header-h) + var(--space-2xs)) var(--gutter) 0;
}

.hero .disclosure {
  justify-self: center;
  padding: 0.3rem 0.875rem;
  border-radius: var(--radius-pill);
  background: oklch(0.972 0.018 85 / 0.72);
  text-align: center;
}

.hero__intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-m);
  margin-block: var(--space-m) var(--space-s);
}
.hero__kicker {
  font-family: var(--font-display);
  font-size: var(--text-kicker);
  font-weight: 700;
  font-stretch: 88%;
  letter-spacing: -0.02em;
  line-height: 1;
}
.scribble-word { position: relative; display: inline-block; white-space: nowrap; }
.scribble {
  position: absolute;
  inset-inline: -4%;
  inset-block-end: -0.45em;
  inline-size: 108%;
  block-size: 0.45em;
  overflow: visible;
}
.scribble path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3.2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.hero .scribble path { animation: draw 900ms 500ms var(--ease-out) forwards; }
.scribble--scroll path { transition: stroke-dashoffset 900ms var(--ease-out); }
.scribble--scroll.is-drawn path, html:not(.js) .scribble--scroll path { stroke-dashoffset: 0; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.hero__intro { position: relative; }
/* out of flow: a font swap re-wraps this text, and it must not resize the dog stage below (CLS) */
.hero__lead {
  position: absolute;
  inset-inline-end: 0;
  inset-block-end: 0;
  max-inline-size: 30ch;
  font-size: var(--text-ui);
  font-weight: 500;
  line-height: 1.45;
  text-align: end;
}

/* ---------- mood stack ---------- */
.hero__moods {
  display: grid;
  /* one fixed-width column: a hidden mood's word (e.g. SPA DAYS in a wide fallback font) must never widen it (CLS) */
  grid-template-columns: minmax(0, 1fr);
  min-block-size: 0;
  touch-action: pan-y;
}
.mood {
  --word-size: clamp(18vw, calc(92vw / var(--word-w, 3)), min(24vw, 36svh));
  --overlap: calc(var(--word-size) * 0.46);
  grid-area: 1 / 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  justify-items: center;
  min-block-size: 0;
  min-inline-size: 0;
  visibility: hidden;
}
.mood.is-active, .mood.is-leaving { visibility: visible; }
.mood.is-leaving { z-index: 1; }
.mood.is-active { z-index: 2; }

.mood__word {
  position: relative;
  z-index: var(--z-hero-word);
  font-family: var(--font-display);
  font-size: var(--word-size);
  font-weight: 800;
  font-stretch: 75%;
  letter-spacing: -0.015em; /* tall letters need air: R-I-C fused at -0.035em */
  line-height: 0.78;
  white-space: nowrap;
  text-transform: uppercase;
  user-select: none;
  /* lock-screen clock look: tall letters, the dog stands in front of their lower half.
     scaleY does not change layout, so the stage below does not move (and CLS stays 0) */
  transform: scaleY(var(--stretch, 1.55));
  transform-origin: 50% 0;
}
.ch { display: inline-block; transform-origin: 50% 100%; }
.ch--space { inline-size: 0.22em; }

.mood__stage {
  position: relative;
  z-index: var(--z-hero-dog);
  block-size: calc(100% + var(--overlap));
  margin-block-start: calc(-1 * var(--overlap));
}
.dog-box {
  position: relative;
  block-size: min(100%, calc((100vw - 2 * var(--gutter)) * 1.25));
  aspect-ratio: 4 / 5;
  container-type: inline-size;
}
.dog, .dog__tilt, .dog__breathe { position: absolute; inset: 0; }
.dog__tilt { transform-origin: 50% 85%; }
.dog__breathe { transform-origin: 50% 100%; }
.dog { transform-origin: 50% 100%; }
.layer {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  /* sticker cut-out edge: works on the SVG placeholders and on real transparent WebP cutouts */
  filter:
    drop-shadow(0 0 0 var(--paper))
    drop-shadow(2.5px 0 0 var(--paper)) drop-shadow(-2.5px 0 0 var(--paper))
    drop-shadow(0 2.5px 0 var(--paper)) drop-shadow(0 -2.5px 0 var(--paper));
}
.layer--body { filter: drop-shadow(3px 0 0 var(--paper)) drop-shadow(-3px 0 0 var(--paper)) drop-shadow(0 -3px 0 var(--paper)) drop-shadow(0 18px 24px oklch(0.235 0.022 50 / 0.18)); }
.prop { transform-origin: var(--ox, 50%) var(--oy, 50%); }

/* REST: floating Zzz */
.zzz {
  position: absolute;
  inset-block-start: max(22%, calc(var(--overlap) + 0.75rem)); /* below the word's ink, never on it */
  inset-inline-start: 68%;
  display: flex;
  align-items: flex-end;
  gap: 0.1em;
  font-family: var(--font-marker);
  font-size: 11cqi;
  line-height: 1;
  color: var(--ink);
}
.zzz span { display: inline-block; }
.zzz span:nth-child(2) { font-size: 1.25em; }
.zzz span:nth-child(3) { font-size: 1.6em; }

/* ---------- callouts: lines + anchor dots + pills ---------- */
.callouts {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
  pointer-events: none;
}
.callouts path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.4;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
/* the giant letters are ink too: a thin paper halo keeps a line readable where it crosses them */
.callouts { filter: drop-shadow(0 0 1px var(--paper)) drop-shadow(0 0 1px var(--paper)); }
.anchor {
  position: absolute;
  inset-inline-start: var(--x);
  inset-block-start: var(--y);
  display: grid;
  place-items: center;
  inline-size: 0.875rem;
  block-size: 0.875rem;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 0 2px var(--ink);
  font-size: 0;
  transform: translate(-50%, -50%);
}

.pills { position: absolute; inset: 0; pointer-events: none; }
.pill {
  position: absolute;
  inset-inline-start: var(--px);
  inset-block-start: var(--py);
  pointer-events: auto;
  translate: 0 -50%;
}
.pill[data-side="left"] { translate: -100% -50%; }
.pill a {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-block-size: 2.75rem;
  padding: 0.375rem 0.375rem 0.375rem 1.125rem;
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-sticker);
  font-size: var(--text-ui);
  font-weight: 650;
  line-height: 1.15;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 200ms var(--ease-out);
}
.pill a:active { transform: scale(0.97); }
.pill__arrow {
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 50%;
  background: var(--mood);
  transition: transform 200ms var(--ease-out);
}
.pill__arrow::before {
  content: "";
  inline-size: 0.8rem;
  block-size: 0.8rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17L17 7M9 7h8v8' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17L17 7M9 7h8v8' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (hover: hover) and (pointer: fine) {
  .pill a:hover { transform: translateY(-2px); }
  .pill a:hover .pill__arrow { transform: rotate(45deg); }
}

/* ---------- controls ---------- */
.hero__controls {
  position: relative;
  z-index: var(--z-hero-ui);
  display: flex;
  align-items: center;
  gap: var(--space-m);
  padding-block: var(--space-s) calc(var(--space-l) + 1.5rem);
  margin-block-start: calc(-1 * (var(--space-l) + 6.25rem));
  pointer-events: none;
}
.hero__controls > * { pointer-events: auto; }
.counter {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 85%;
  font-variant-numeric: tabular-nums;
}
.counter__now { font-size: 2rem; line-height: 1; }
.counter__sep, .counter__total { font-size: 1rem; }
.counter__label {
  margin-inline-start: 0.5rem;
  font-family: var(--font-marker);
  font-weight: 400;
  font-size: 1.375rem;
}
.progress {
  position: relative;
  inline-size: 4.5rem;
  block-size: 3px;
  border-radius: 2px;
  background: oklch(0.235 0.022 50 / 0.18);
  overflow: hidden;
}
.progress__bar {
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.hero.is-autoplay .progress__bar { animation: progress 6s linear forwards; }
.hero.is-paused .progress__bar { animation-play-state: paused; }
@keyframes progress { to { transform: scaleX(1); } }

.hero__buttons { display: flex; gap: var(--space-2xs); }
.ctrl {
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-sticker);
  transition: transform 160ms var(--ease-out);
}
.ctrl svg { inline-size: 1.35rem; }
.ctrl:active { transform: scale(0.94); }
.ctrl .i-play { display: none; }
.ctrl[aria-pressed="true"] .i-play { display: block; }
.ctrl[aria-pressed="true"] .i-pause { display: none; }
.ctrl--next {
  grid-auto-flow: column;
  gap: 0.25rem;
  inline-size: auto;
  padding-inline: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
}
.ctrl__avatar {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 42%;
  background: var(--next-mood, var(--paper-2));
}
html:not(.js) .hero__controls { display: none; }

.hero__wave {
  position: absolute;
  inset-inline: 0;
  inset-block-end: -1px;
  z-index: 2;
  inline-size: 100%;
  block-size: clamp(1.5rem, 3vw, 3rem);
  fill: var(--paper);
  pointer-events: none;
}

/* ---------- first-paint intro (CSS, so the LCP paints without waiting for JS) ---------- */
.mood.is-intro .ch { animation: ch-land 900ms var(--ease-spring) both; }
.mood.is-intro .ch:nth-child(2) { animation-delay: 60ms; }
.mood.is-intro .ch:nth-child(3) { animation-delay: 120ms; }
.mood.is-intro .ch:nth-child(4) { animation-delay: 180ms; }
@keyframes ch-land {
  0%   { transform: translateY(-45%) scaleY(1.35); }
  55%  { transform: translateY(0) scaleY(0.82) scaleX(1.06); }
  100% { transform: none; }
}
.mood.is-intro .dog { animation: dog-pop 1000ms 150ms var(--ease-spring) both; }
@keyframes dog-pop {
  0%   { transform: translateY(18%) scale(0.94, 1.04); }
  100% { transform: none; }
}
.mood.is-intro .prop[data-prop="treats"] { animation: wobble 1600ms 700ms var(--ease-out) both; }
@keyframes wobble {
  0%   { transform: rotate(0); }
  15%  { transform: rotate(-9deg); }
  32%  { transform: rotate(7deg); }
  50%  { transform: rotate(-4.5deg); }
  68%  { transform: rotate(2.5deg); }
  84%  { transform: rotate(-1deg); }
  100% { transform: rotate(0); }
}
.mood.is-intro .callouts path { animation: line-draw 700ms 900ms var(--ease-out) both; }
@keyframes line-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.mood.is-intro .anchor { animation: pop-in 300ms 900ms var(--ease-out) both; }
.mood.is-intro .pill { animation: pop-in 450ms var(--ease-spring) both; }
.mood.is-intro .pill:nth-child(1) { animation-delay: 1150ms; }
.mood.is-intro .pill:nth-child(2) { animation-delay: 1220ms; }
.mood.is-intro .pill:nth-child(3) { animation-delay: 1290ms; }
@keyframes pop-in { from { opacity: 0; scale: 0.9; } to { opacity: 1; scale: 1; } }

/* ---------- tablet ---------- */
@media (max-width: 75rem) {
  .hero__lead { display: none; }
}

/* ---------- tablet + mobile: side pills need width, so they wrap into a centered group over the chest.
   No numbered dots here: on a narrow stage they would sit on the giant word. ---------- */
@media (max-width: 68.75rem) {
  .mood { padding-block-start: var(--space-m); }
  .callouts, .anchor { display: none; }
  .pills {
    inset: auto calc(50% - 50vw) 9.25rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2xs);
    padding-inline: var(--gutter);
  }
  .pill, .pill[data-side="left"] { position: static; translate: none; }
  .pill a { font-size: 0.9375rem; }
}

/* ---------- mobile ---------- */
@media (max-width: 47.99rem) {
  .pills { inset-block-end: 5.75rem; }
  .mood {
    --word-size: min(40vw, calc(88vw / var(--word-w, 3)));
    --overlap: calc(var(--word-size) * 0.5);
  }
  .hero__intro { position: relative; margin-block-start: var(--space-s); }
  .hero__controls {
    justify-content: space-between;
    gap: var(--space-s);
    margin-block-start: calc(-1 * (var(--space-m) + 4.25rem));
    padding-block: var(--space-xs) calc(var(--space-m) + 0.75rem);
  }
  .progress { display: none; }
  .counter__label { display: none; }
}

/* ---------- reduced motion: no wobble, no spin, no draw ---------- */
@media (prefers-reduced-motion: reduce) {
  .mood.is-intro .ch, .mood.is-intro .dog, .mood.is-intro .prop,
  .mood.is-intro .callouts path, .mood.is-intro .anchor { animation: none; }
  .mood.is-intro .pill { animation: fade-in 300ms ease both; }
  .scribble path { animation: none; transition: none; stroke-dashoffset: 0; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }


/* =========================================================================
   SHARED SECTION PARTS (blocks 3–10)
   ========================================================================= */
.wrap {
  max-inline-size: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section-head { max-inline-size: 44rem; margin-block-end: var(--space-xl); }
.section-head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-m);
  max-inline-size: none;
}
.marker-title {
  font-family: var(--font-marker);
  font-size: var(--text-title);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.01em;
}
.marker-title .scribble { inset-block-end: -0.28em; block-size: 0.32em; }
.section-lead {
  max-inline-size: 38ch;
  margin-block-start: var(--space-s);
  font-size: var(--text-lead);
  line-height: 1.4;
  color: var(--color-text-muted);
}
.btn--sm { --btn-h: 2.75rem; padding-inline: 1.125rem; font-size: var(--text-caption); }
.wave {
  position: absolute;
  inset-inline: 0;
  z-index: 1;
  inline-size: 100%;
  block-size: clamp(1.5rem, 3vw, 3rem);
  fill: var(--paper);
  pointer-events: none;
}
.wave--top { inset-block-start: -1px; }
.wave--bottom { inset-block-end: -1px; }

/* =========================================================================
   3 PROBLEM PICKER
   ========================================================================= */
.picker { padding-block: var(--space-2xl); }
.picker:focus { outline: none; }
.picker__body {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-xl);
  align-items: start;
}
.picker__chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.pchip {
  min-block-size: 3.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-pill);
  background: var(--paper);
  box-shadow: inset 0 0 0 2px var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);
  font-weight: 700;
  font-stretch: 88%;
  line-height: 1.1;
  text-align: start;
  transition: transform 200ms var(--ease-out), background-color 200ms ease, box-shadow 200ms ease;
}
.pchip:active { transform: scale(0.97); }
.pchip[aria-pressed="true"] {
  background: var(--mood);
  box-shadow: inset 0 0 0 2px var(--ink), 0 4px 0 var(--ink);
  transform: translateY(-2px) rotate(-1.5deg);
}
@media (hover: hover) and (pointer: fine) {
  .pchip[aria-pressed="false"]:hover { background: var(--mood-soft); }
}

.ppanel {
  padding: var(--space-m);
  border-radius: var(--radius-card);
  background: var(--mood-soft);
}
.js .ppanel { display: none; }
.js .ppanel.is-active { display: block; animation: panel-in 320ms var(--ease-out); }
@keyframes panel-in { from { opacity: 0; transform: translateX(1.5rem); } }
html:not(.js) .ppanel + .ppanel { margin-block-start: var(--space-s); }
.ppanel__label {
  margin-block-end: var(--space-s);
  font-family: var(--font-marker);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--mood-deep);
}
.glist { display: grid; gap: var(--space-xs); }
.gitem {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--space-s);
  align-items: center;
  padding: var(--space-s) var(--space-s) var(--space-s) var(--space-m);
  border-radius: 1.25rem;
  background: var(--paper);
  box-shadow: var(--shadow-sticker);
  color: var(--ink);
  text-decoration: none;
  transition: transform 200ms var(--ease-out);
}
.gitem:active { transform: scale(0.98); }
.gitem > span:not(.gitem__arrow) { grid-column: 1; }
.gitem__pillar {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.gitem__pillar::before {
  content: "";
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background: var(--mood-deep);
}
.gitem__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  font-weight: 700;
  font-stretch: 85%;
  line-height: 1.1;
}
.gitem__line { color: var(--color-text-muted); font-size: var(--text-ui); }
.gitem__arrow {
  grid-column: 2;
  grid-row: 1 / span 3;
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 50%;
  background: var(--mood);
  transition: transform 200ms var(--ease-out);
}
.gitem__arrow::before, .btile__go::before {
  content: "";
  inline-size: 1rem;
  block-size: 1rem;
  background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17L17 7M9 7h8v8' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17L17 7M9 7h8v8' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (hover: hover) and (pointer: fine) {
  .gitem:hover { transform: translateX(4px); }
  .gitem:hover .gitem__arrow { transform: rotate(45deg); }
}

/* =========================================================================
   4 PILLAR BENTO — dogs break out over the top edge on hover / focus / in view (touch)
   ========================================================================= */
.bento { padding-block: var(--space-xl) var(--space-2xl); }
.bento__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(15rem, auto);
  gap: var(--space-m);
  padding-block-start: var(--space-xl);
}
.btile {
  position: relative;
  border-radius: var(--radius-card);
  background: var(--mood);
  transition: transform 450ms var(--ease-spring);
}
.btile--play  { grid-column: 1 / 8;  grid-row: span 2; }
.btile--train { grid-column: 8 / 13; margin-block-start: var(--space-xl); }
.btile--gear  { grid-column: 8 / 13; margin-block-end: calc(-1 * var(--space-l)); }
.btile--rest  { grid-column: 1 / 6;  margin-block-start: var(--space-l); }
.btile--spa   { grid-column: 6 / 13; margin-block-start: calc(var(--space-l) + var(--space-l)); }
.btile > a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  block-size: 100%;
  min-block-size: inherit;
  padding: var(--space-m) var(--space-m) var(--space-l);
  border-radius: inherit;
  color: var(--ink);
  text-decoration: none;
}
.btile__name {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-size: clamp(3rem, 2rem + 4vw, 6.5rem);
  font-weight: 800;
  font-stretch: 75%;
  letter-spacing: -0.03em;
  line-height: 0.82;
  text-transform: uppercase;
}
.btile__line {
  position: relative;
  z-index: 2;
  max-inline-size: 20ch;
  margin-block-start: var(--space-xs);
  font-weight: 550;
  line-height: 1.35;
}
.btile__go {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  margin-block-start: auto;
  border-radius: 50%;
  background: var(--paper);
  transition: transform 200ms var(--ease-out);
}
/* clip at the tile's bottom edge only, so the dog can rise out over the top */
.btile__dog {
  position: absolute;
  inset: 0;
  z-index: 1;
  clip-path: inset(-80% -10% 0 -10% round 0 0 var(--radius-card) var(--radius-card));
  pointer-events: none;
}
.btile__pop {
  position: absolute;
  inset-inline-end: 4%;
  inset-block-end: 0;
  inline-size: min(44%, 17rem);
  aspect-ratio: 4 / 5;
  transform: translateY(16%);
  transition: transform 650ms var(--ease-spring);
}
.btile--play .btile__pop { inline-size: min(56%, 26rem); }
.btile--rest .btile__pop { inline-size: min(56%, 17rem); }
.btile__pop img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  filter: drop-shadow(2.5px 0 0 var(--paper)) drop-shadow(-2.5px 0 0 var(--paper)) drop-shadow(0 -2.5px 0 var(--paper));
}
.btile:nth-child(odd).is-popped, .btile:nth-child(odd):has(a:focus-visible) { transform: rotate(-1.5deg); }
.btile:nth-child(even).is-popped, .btile:nth-child(even):has(a:focus-visible) { transform: rotate(1.5deg); }
.btile.is-popped .btile__pop, .btile:has(a:focus-visible) .btile__pop { transform: translateY(-12%); }
@media (hover: hover) and (pointer: fine) {
  .btile:nth-child(odd):hover { transform: rotate(-1.5deg); }
  .btile:nth-child(even):hover { transform: rotate(1.5deg); }
  .btile:hover .btile__pop { transform: translateY(-12%); }
  .btile:hover .btile__go { transform: rotate(45deg); }
}
.btile > a:active { transform: scale(0.99); }

/* =========================================================================
   5 FRESH GUIDES — draggable rail, wavy photo bottoms
   ========================================================================= */
.guides {
  position: relative;
  padding-block: calc(var(--space-2xl) + 1.5rem);
  background: var(--paper-2);
}
.rail-buttons { display: flex; gap: var(--space-2xs); }
.rail {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: max(var(--gutter), calc(50vw - 42rem + var(--gutter)));
  scrollbar-width: none;
  cursor: grab;
}
.rail::-webkit-scrollbar { display: none; }
.rail:focus-visible { outline-offset: -3px; }
.rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.rail.is-dragging a { pointer-events: none; }
.rail__track {
  display: flex;
  gap: var(--space-m);
  inline-size: max-content;
  padding: var(--space-s) max(var(--gutter), calc(50vw - 42rem + var(--gutter))) var(--space-m);
}
.gcard {
  position: relative;
  display: flex;
  flex-direction: column;
  inline-size: clamp(15rem, 22vw, 20rem);
  block-size: 100%;
  color: var(--ink);
  text-decoration: none;
  scroll-snap-align: start;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 160ms var(--ease-out);
}
.gcard:active { transform: scale(0.98); }
/* plate: the picture tilts a little, and a dashed outline of the same shape sits offset behind it, tilted the other way */
.gcard::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  aspect-ratio: 4 / 3.4;
  border: 2px dashed var(--mood-deep);
  border-radius: 1.5rem;
  transform: translate(0.55rem, -0.45rem) rotate(2.4deg);
  pointer-events: none;
}
.gcard__img { position: relative; transform: rotate(-1.4deg); }
.gcard:nth-child(even)::before { transform: translate(-0.55rem, -0.45rem) rotate(-2.4deg); }
.gcard:nth-child(even) .gcard__img { transform: rotate(1.4deg); }
.gcard img { -webkit-user-drag: none; }
.gcard__img {
  display: block;
  aspect-ratio: 4 / 3.4;
  overflow: hidden;
  border-radius: 1.5rem 1.5rem 0 0;
  background: var(--mood);
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 22' preserveAspectRatio='none'%3E%3Cpath d='M0 0H200V9C170 21 130 21 100 11S30 0 0 13Z'/%3E%3C/svg%3E") bottom / 100% 1.375rem no-repeat,
    linear-gradient(#000 0 0) top / 100% calc(100% - 1.3rem) no-repeat;
          mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 22' preserveAspectRatio='none'%3E%3Cpath d='M0 0H200V9C170 21 130 21 100 11S30 0 0 13Z'/%3E%3C/svg%3E") bottom / 100% 1.375rem no-repeat,
    linear-gradient(#000 0 0) top / 100% calc(100% - 1.3rem) no-repeat;
}
.gcard__img img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 32%);
  transition: transform 450ms var(--ease-out);
}
.gcard__pillar {
  margin-block-start: var(--space-xs);
  font-family: var(--font-marker);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--mood-deep);
}
.gcard__title {
  margin-block-start: var(--space-3xs);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  font-weight: 700;
  font-stretch: 88%;
  line-height: 1.12;
  text-wrap: balance;
}
.gcard__meta {
  margin-block-start: var(--space-2xs);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}
@media (hover: hover) and (pointer: fine) {
  .gcard:hover .gcard__img img { transform: scale(1.05); }
  .gcard:hover .gcard__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.15em; }
}

/* =========================================================================
   6 PICKS SHELF
   ========================================================================= */
.picks { padding-block: var(--space-2xl); }
.shelf {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-m);
  padding-block-end: 1.375rem;
}
.shelf::after {
  content: "";
  position: absolute;
  inset-inline: calc(-1 * var(--space-s));
  inset-block-end: 0;
  block-size: 0.875rem;
  border-radius: 0.4rem;
  background: var(--ink);
  box-shadow: 0 16px 24px -12px oklch(0.235 0.022 50 / 0.5);
}
.pick {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-s) var(--space-s) var(--space-m);
  border-radius: 1.5rem 1.5rem 0.5rem 0.5rem;
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--color-line);
}
.pick:nth-child(odd)  { rotate: -1deg; }
.pick:nth-child(even) { rotate: 0.8deg; }
.pick__img {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  margin-block-end: var(--space-2xs);
  border-radius: 1rem;
  background: var(--mood-soft);
  outline: 2px dashed oklch(0.235 0.022 50 / 0.35);
  outline-offset: -8px;
}
.pick__ph {
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.pick__tag {
  position: absolute;
  inset-block-start: var(--space-xs);
  inset-inline-end: var(--space-xs);
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--paper);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  rotate: 5deg;
  box-shadow: var(--shadow-sticker);
}
.pick__name {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  font-stretch: 88%;
  line-height: 1.15;
}
.pick__retailer {
  align-self: flex-start;
  padding: 0.1rem 0.6rem;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1.5px var(--ink);
  font-size: var(--text-caption);
  font-weight: 650;
}
.pick .btn { align-self: flex-start; margin-block-start: auto; }
.picks__note { margin-block-start: var(--space-l); font-size: var(--text-caption); }
.picks__note a { font-weight: 650; text-underline-offset: 0.2em; }

/* =========================================================================
   7 PUPPY WEEK BY WEEK — pinned, scroll-scrubbed horizontal track
   ========================================================================= */
.puppy {
  position: relative;
  background: var(--play-soft);
  overflow: clip;
}
/* the whole pinned block must fit one screen, so every vertical size follows the screen height (svh) */
.puppy__pin { padding-block: clamp(5.5rem, 12svh, 8.5rem) clamp(1.5rem, 4svh, 3rem); }
.puppy .section-head { margin-block-end: clamp(1rem, 3svh, 2rem); }
.puppy__viewport { overflow-x: auto; scrollbar-width: none; }
.puppy__viewport::-webkit-scrollbar { display: none; }
.js .puppy.is-scrubbed .puppy__viewport { overflow: visible; }
.puppy__track {
  display: flex;
  align-items: flex-start; /* every step hangs from its own rising top margin, so nothing depends on how many lines its text has */
  gap: clamp(2rem, 5vw, 5rem);
  inline-size: max-content;
  padding: var(--space-s) max(var(--gutter), calc(50vw - 42rem + var(--gutter))) clamp(1rem, 2.5svh, 2rem);
}
/* A staircase: --i is the step (0 = week 8 … 4 = week 16). Each step is one --rise higher than the last and its puppy
   is one --pup-step wider. The puppy's top margin takes up the width it did not grow, so every puppy stands on the same
   line inside its step and the feet climb in an exact straight line. */
.pstep {
  --rise: clamp(0.5rem, 1.6svh, 1.5rem);
  --pup-min: clamp(4.4rem, 10svh, 6.4rem);
  --pup-step: clamp(0.9rem, 2.2svh, 1.5rem);
  display: grid;
  justify-items: start;
  gap: var(--space-xs);
  inline-size: clamp(14rem, 24vw, 19rem);
  margin-block-start: calc((4 - var(--i, 4)) * var(--rise));
}
.pstep__week {
  font-family: var(--font-display);
  font-size: clamp(3rem, 2rem + 3vw, 5rem);
  font-weight: 800;
  font-stretch: 75%;
  letter-spacing: -0.03em;
  line-height: 0.85;
  font-variant-numeric: tabular-nums;
}
.pstep__week span {
  display: block;
  font-family: var(--font-marker);
  font-size: 0.36em;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--play-deep);
}
.pstep__pup {
  inline-size: calc(var(--pup-min) + var(--i) * var(--pup-step));
  block-size: auto;
  margin-block-start: calc((4 - var(--i)) * var(--pup-step));
  order: -1; /* the puppy stands on top of its week number; the img is decorative, so the reading order stays week then text */
  transform-origin: 50% 100%;
}
.pstep__line { max-inline-size: 26ch; font-size: var(--text-body); line-height: 1.45; }
.verify {
  display: inline-block;
  padding: 0 0.3rem;
  border: 1.5px dashed currentColor;
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  vertical-align: 0.15em;
  opacity: 0.75;
}
.pstep--end { align-self: center; gap: var(--space-s); }
.pstep__end-title { font-family: var(--font-marker); font-size: 2rem; line-height: 1; }
.puppy__progress {
  display: block;
  block-size: 4px;
  margin-inline: max(var(--gutter), calc(50vw - 42rem + var(--gutter)));
  border-radius: 2px;
  background: oklch(0.235 0.022 50 / 0.15);
  overflow: hidden;
}
.puppy__progress span {
  display: block;
  block-size: 100%;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.puppy:not(.is-scrubbed) .puppy__progress { display: none; }

/* =========================================================================
   8 HOW WE PICK — ink band, a dog peeks up from the bottom edge
   ========================================================================= */
.trust {
  position: relative;
  padding-block: var(--space-2xl) calc(var(--space-2xl) + 7rem);
  background: var(--ink);
  color: var(--paper);
  overflow: clip;
}
.trust .section-lead { color: var(--paper-2); }
.trust .scribble path { stroke: var(--play); }
.promises {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  row-gap: var(--space-xl);
  column-gap: var(--space-m);
}
.promise:nth-child(1) { grid-column: 1 / 6; }
.promise:nth-child(2) { grid-column: 7 / 12; margin-block-start: var(--space-2xl); }
.promise:nth-child(3) { grid-column: 3 / 9; }
/* a hand-drawn tick, not a number: the promises are not a sequence */
.promise::before {
  content: "";
  display: block;
  inline-size: clamp(3.5rem, 2.8rem + 2.5vw, 5rem);
  aspect-ratio: 1;
  background: var(--mood);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M8 36c6 3 11 8 15 15C31 33 42 18 57 8' fill='none' stroke='black' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M8 36c6 3 11 8 15 15C31 33 42 18 57 8' fill='none' stroke='black' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.promise__title {
  margin-block: var(--space-xs) var(--space-s);
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  font-weight: 800;
  font-stretch: 80%;
  letter-spacing: -0.02em;
  line-height: 0.95;
}
.promise p { max-inline-size: 36ch; color: var(--paper-2); }
.trust__more { margin-block-start: var(--space-xl); }
.trust__more a { font-weight: 650; text-underline-offset: 0.2em; color: var(--paper); }
.trust :focus-visible { outline-color: var(--paper); }
.trust__peek {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 12%;
  inline-size: clamp(11rem, 20vw, 17rem);
  aspect-ratio: 4 / 5;
  transform: translateY(50%);
  pointer-events: none;
}
.js .trust__peek { transform: translateY(100%); transition: transform 1100ms var(--ease-spring); }
.js .trust__peek.is-peeking { transform: translateY(50%); }
.trust__peek img {
  inline-size: 100%;
  block-size: 100%;
  filter: drop-shadow(3px 0 0 var(--paper)) drop-shadow(-3px 0 0 var(--paper)) drop-shadow(0 -3px 0 var(--paper));
}

/* =========================================================================
   9 NEWSLETTER — The Treat Drop
   ========================================================================= */
.treat { padding-block: var(--space-2xl); }
.treat__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--space-l);
  padding: clamp(2rem, 1rem + 4vw, 4.5rem);
  padding-block-end: 0;
  border-radius: 2.5rem;
  background: var(--mood);
  overflow: clip;
}
.treat__copy { padding-block-end: clamp(2rem, 1rem + 4vw, 4.5rem); }
.treat__kicker {
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.treat__title {
  margin-block: var(--space-2xs) var(--space-s);
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 1.8rem + 6vw, 7.5rem);
  font-weight: 800;
  font-stretch: 75%;
  letter-spacing: -0.035em;
  line-height: 0.84;
  text-transform: uppercase;
}
.treat__lead { max-inline-size: 34ch; font-size: var(--text-lead); line-height: 1.4; }
.treat__form { margin-block-start: var(--space-l); max-inline-size: 32rem; }
.treat__label { display: block; margin-block-end: var(--space-2xs); font-weight: 650; font-size: var(--text-ui); }
.treat__row { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.treat__row input {
  flex: 1 1 14rem;
  min-block-size: 3rem;
  padding-inline: 1.25rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--paper);
  box-shadow: inset 0 0 0 2px var(--ink);
  font-size: max(16px, var(--text-body));
}
.treat__row input::placeholder { color: var(--ink-soft); }
.treat__row input[aria-invalid="true"] { box-shadow: inset 0 0 0 3px var(--ink), 0 0 0 4px var(--paper); }
.treat__msg { min-block-size: 1.6em; margin-block-start: var(--space-xs); font-weight: 650; }
.treat__form.is-done .treat__row, .treat__form.is-done .treat__label { display: none; }
.treat__stage {
  position: relative;
  isolation: isolate;
  align-self: end;
  min-block-size: 22rem;
}
/* plate behind the dog: a cream tilted plate, and a dashed outline of it, offset and tilted the other way */
.treat__stage::before, .treat__stage::after {
  content: "";
  position: absolute;
  inset-block: 14% 0;
  inset-inline: 6%;
  border-radius: 2.25rem 2.25rem 0 0;
}
.treat__stage::before { z-index: -2; border: 2px dashed var(--ink); border-block-end: 0; transform: translate(0.8rem, -0.6rem) rotate(3deg); transform-origin: 50% 100%; }
.treat__stage::after { z-index: -1; background: oklch(0.972 0.018 85 / 0.55); transform: rotate(-3deg); transform-origin: 50% 100%; }
.treat__dog {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  inline-size: min(100%, 24rem);
  margin-inline: auto;
  transform-origin: 50% 100%;
  filter: drop-shadow(3px 0 0 var(--ink)) drop-shadow(-3px 0 0 var(--ink)) drop-shadow(0 -3px 0 var(--ink));
}
.treat__treat {
  position: absolute;
  inset-inline-start: calc(50% - 2rem);
  inset-block-start: 0;
  inline-size: 4rem;
  opacity: 0;
}

/* =========================================================================
   10 FOOTER — giant wordmark, a dog peeks over it, a paw trail walks along
   ========================================================================= */
.site-footer {
  position: relative;
  padding-block-start: var(--space-xl);
  background: var(--ink);
  color: var(--paper);
  overflow: clip;
}
.site-footer :focus-visible { outline-color: var(--paper); }
.paw-trail {
  display: flex;
  justify-content: space-between;
  block-size: 3rem;
  padding-inline: var(--gutter);
  margin-block-end: var(--space-l);
}
.paw { inline-size: 1.75rem; block-size: 1.75rem; fill: var(--play); }
.paw:nth-of-type(odd)  { translate: 0 1.1rem; rotate: 82deg; }
.paw:nth-of-type(even) { rotate: 98deg; }
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-xl);
  padding-block-end: var(--space-xl);
}
.footer__head {
  margin-block-end: var(--space-s);
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-2);
}
.footer__col ul { display: grid; gap: var(--space-2xs); }
.footer__col a { text-underline-offset: 0.2em; }
.footer__col li a { display: inline-flex; align-items: center; gap: 0.5rem; padding-block: 0.25rem; text-decoration: none; font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .footer__col li a:hover { text-decoration: underline; } }
.footer__col .dot { inline-size: 0.625rem; block-size: 0.625rem; border-radius: 50%; background: var(--mood); }
.footer__notes p { max-inline-size: 46ch; color: var(--paper-2); }
.footer__notes p + p { margin-block-start: var(--space-s); }
.footer__notes a { color: var(--paper); font-weight: 650; }
.footer__mark {
  padding-block-start: clamp(4rem, 2rem + 8vw, 9rem);
  text-align: center;
}
.footer__word {
  position: relative;
  isolation: isolate;
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--footer-word, 36vw);
  font-weight: 800;
  font-stretch: 75%;
  letter-spacing: -0.015em;
  line-height: 0.74;
  color: var(--play);
  white-space: nowrap;
  user-select: none;
}
.footer__peek {
  position: absolute;
  /* centred on the top of the "c" (measured in em, 2026-10-02, self-hosted Bricolage: the c's apex is 1.147em from the word's left edge and
     0.158em below its top; the paws are +-0.094em from the box centre, where the arc has dropped only 0.025em). Re-measure if the font changes. */
  inset-inline-start: 0.897em;
  inset-block-end: var(--peek-bottom, 0.43em);
  inline-size: 0.5em;
  aspect-ratio: 4 / 5;
}
.footer__peek img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
/* dog behind the letters, cut just under the c's apex (image y 805 of 1000: the arc is >= 0.026em lower beside the neck, so the cut edge hides
   behind the ink, and the wide shoulders below it never show like a cape); paws in front, gripping the top */
.footer__peek--dog { z-index: -1; clip-path: inset(-60% -40% 19.5% -40%); }
.footer__peek--paws { z-index: 1; }
.footer__legal {
  padding-block: var(--space-m) var(--space-l);
  font-size: var(--text-caption);
  color: var(--paper-2);
}
.temp-inline { opacity: 0.8; }

/* =========================================================================
   BLOCKS 3–10: tablet + mobile
   ========================================================================= */
@media (max-width: 60rem) {
  .picker__body { grid-template-columns: 1fr; }
  .bento__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(14rem, auto); }
  .btile--play  { grid-column: 1 / -1; grid-row: auto; min-block-size: 20rem; }
  .btile--train, .btile--gear, .btile--rest, .btile--spa { grid-column: auto; margin: 0; }
  .btile:nth-child(3), .btile:nth-child(5) { margin-block-start: var(--space-l); }
  .shelf {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(14rem, 62%);
    overflow-x: auto;
    padding: var(--space-s) var(--gutter) 1.375rem;
    margin-inline: calc(-1 * var(--gutter));
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .shelf::after { inset-inline: 0; }
  .pick { scroll-snap-align: center; }
  .promise:nth-child(n) { grid-column: 1 / -1; margin: 0; }
  .treat__card { grid-template-columns: 1fr; }
  .treat__copy { padding-block-end: 0; }
  .treat__stage { min-block-size: 17rem; }
  .treat__dog { inline-size: min(100%, 13.5rem); } /* 4:5 → 17rem tall, stays inside its stage */
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__notes { grid-column: 1 / -1; }
}
@media (max-width: 34rem) {
  .bento__grid { grid-template-columns: 1fr; }
  .btile:nth-child(n) { grid-column: 1; margin-block-start: 0; min-block-size: 15rem; }
  .btile:nth-child(n+2) { margin-block-start: var(--space-s); }
  .section-head--row { align-items: flex-start; flex-direction: column; }
  .paw:nth-of-type(n+7) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .btile, .btile__pop, .gitem, .gcard__img img { transition: none; }
  .js .ppanel.is-active { animation: fade-in 200ms ease; }
  .js .trust__peek, .js .trust__peek.is-peeking { transform: translateY(50%); transition: none; }
}