/* =========================================================================
   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, 22vw); /* "nosefirstdog" is 4.262em wide: 22vw = about 94vw */
  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;
  /* one photo: a dog looks over the top of the "o" in "dog", paws on the letter. Measured in em, 2026-10-05, self-hosted Bricolage:
     the o's apex is 3.644em from the word's left edge. The photo sits on the bottom edge of its 4:5 canvas, so the box bottom is the paw line.
     Re-measure if the font or the word changes. */
  inset-inline-start: 3.434em;
  inset-block-end: var(--peek-bottom, 0.522em);
  inline-size: 0.42em;
  aspect-ratio: 4 / 5;
  z-index: 1;
  clip-path: inset(-20% -20% 0 -20%); /* the dog climbs up from behind this edge */
}
.footer__peek img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.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; }
}