/* ============================================================
   Olea & Hound
   Brand: Quiet European atelier. Ink on parchment. Olive accent.
   Inspirations: World of Interiors, Cereal magazine, Aesop, Apartamento.
   ============================================================ */

/* ---------- View Transitions API (cross-page) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 320ms;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

:root {
  /* Ink (warm near-black, brown undertone — never pure #000) */
  --ink: #1A1814;
  --ink-2: #2B2823;
  --ink-3: #4A453D;

  /* Paper (warm parchment) */
  --paper: #F2EDE2;
  --paper-2: #E8E1D0;
  --paper-3: #DDD4BD;

  /* Signature olive — used sparingly, never decorative.
     --olive darkened from #6E7A4F (≈3.6:1) → #5A6740 (≈4.6:1) for AA text usage. */
  --olive: #5A6740;
  --olive-dark: #3F4828;
  --olive-pale: #C7CBB3;

  /* Sparingly: warm clay for memorial / refund accents.
     --clay darkened from #A85A3C (≈3.9:1) → #8E4A30 (≈4.7:1) for AA text usage. */
  --clay: #8E4A30;
  --clay-pale: #E5C4B5;

  /* Muted text. Darkened from #7C7666 (≈3.7:1) → #5F5A4D (≈4.7:1) for AA. */
  --muted: #5F5A4D;
  /* --muted-2 was #9A9484 (≈2.4:1, badly failing AA). Reserve for non-text decoration only. */
  --muted-2: #7C7666;

  --line: rgba(26, 24, 20, 0.10);
  --line-strong: rgba(26, 24, 20, 0.22);

  --shadow-xs: 0 1px 2px rgba(26, 24, 20, 0.04);
  --shadow-sm: 0 2px 8px rgba(26, 24, 20, 0.06), 0 1px 2px rgba(26, 24, 20, 0.04);
  --shadow-md: 0 8px 30px rgba(26, 24, 20, 0.10), 0 2px 6px rgba(26, 24, 20, 0.06);
  --shadow-lg: 0 30px 70px rgba(26, 24, 20, 0.16), 0 6px 14px rgba(26, 24, 20, 0.08);

  --radius-xs: 2px;
  --radius: 4px;
  --radius-lg: 10px;

  --pad: clamp(20px, 5vw, 48px);
  --col: min(1180px, 100% - 2 * var(--pad));

  /* Fraunces optical-size axis for display sizes — Apple-grade type feel */
  --serif: "Fraunces", "Times New Roman", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  /* P1 A9 (WCAG 2.4.11 Focus Not Obscured): when the sticky CTA is visible on
     mobile (height ~72px + safe-area), pad the bottom of every scroll-into-view
     so focused inputs aren't sat underneath it. */
  scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  scroll-padding-top: 72px;
  /* v14 bugfix: lock horizontal scroll on the document. Some decorative blooms
     (radial gradients, glow halos, hero blooms) overshoot the viewport on small
     screens and let the page pull side-to-side. `overflow-x: clip` keeps the
     bug suppressed without breaking `position: sticky` (unlike `hidden`). */
  overflow-x: clip;
  max-width: 100vw;
}
body { overflow-x: clip; max-width: 100vw; }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  /* Subtle paper grain — looks gallery-printed, not screen-printed */
  background-image:
    radial-gradient(ellipse at top, rgba(255, 251, 240, 0.4), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.09 0 0 0 0 0.08 0 0 0 0.03 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
}
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: var(--line-strong); transition: text-decoration-color 160ms ease; }
a:hover { text-decoration-color: var(--ink); }
input { font: inherit; color: inherit; }

/* ============================================================
   DEMO BANNER
   ============================================================ */
.demo-banner {
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 9px 16px;
  line-height: 1.4;
  font-weight: 400;
}
.demo-banner strong {
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-right: 8px;
  color: var(--olive-pale);
}

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
main#app { min-height: 100dvh; display: flex; flex-direction: column; }
.stage {
  display: block;
  padding: clamp(32px, 5vw, 56px) var(--pad);
  width: var(--col);
  margin: 0 auto;
  flex: 1;
}
.stage.hidden { display: none; }

/* Stage entrance animation */
.stage:not(.hidden) { animation: stageIn 480ms cubic-bezier(0.22, 0.61, 0.36, 1); }
@keyframes stageIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   TOPBAR / WORDMARK
   ============================================================ */
.topbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 4px 0 28px;
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(40px, 6vw, 72px);
}

.wordmark {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing: -0.005em;
  color: var(--ink);
  font-variation-settings: "opsz" 144;
  white-space: nowrap;
}
.wordmark a { text-decoration: none; }
.wordmark .amp { font-family: var(--serif); font-style: italic; color: var(--olive); padding: 0 2px; }

.trust {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(44px, 7vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  color: var(--ink);
}
.display em { font-style: italic; color: var(--olive-dark); font-weight: 400; }

.display-sm {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 4.5vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 96;
}
.display-sm em { font-style: italic; color: var(--olive-dark); }

.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--olive-dark);
  margin-bottom: 24px;
}

.lede {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--ink-3);
  max-width: 50ch;
  font-variation-settings: "opsz" 48, "SOFT" 100;
}
.lede em { font-style: italic; color: var(--ink-2); }

.lede-sm { font-size: 16px; color: var(--muted); line-height: 1.6; }

/* ============================================================
   STAGE 1 — HERO
   ============================================================ */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding-bottom: clamp(48px, 6vw, 88px);
  min-height: clamp(560px, 72vh, 760px);
}
@media (max-width: 920px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: clamp(28px, 6vw, 40px);
  }
}

.hero-text {
  display: grid;
  gap: clamp(20px, 2.4vw, 28px);
  align-content: center;
  min-width: 0;
}

/* v14: cap the hero headline so it never wraps past 2 lines on desktop.
   The site-wide .display class can keep its huge type for marketing pages;
   the funnel hero needs space for the visual to share centre stage. */
.hero-text .display {
  font-size: clamp(38px, 5.2vw, 64px);
  line-height: 1.0;
}
@media (max-width: 600px) {
  .hero-text .display { font-size: clamp(34px, 9vw, 44px); }
}

.hero-image {
  position: relative;
  align-self: center;
  min-width: 0;
}

/* v14: the content that used to bloat the hero now sits in its own row below it. */
.hero-below-fold {
  display: grid;
  gap: clamp(24px, 3vw, 36px);
  padding-bottom: clamp(48px, 6vw, 80px);
}
@media (max-width: 920px) { .hero-below-fold { gap: 24px; padding-bottom: 40px; } }

/* ============================================================
   v14 — Interactive style cycler in the hero
   ============================================================ */
.hero-showcase {
  position: relative;
  display: grid;
  gap: clamp(14px, 1.6vw, 20px);
  /* Frame the showcase in a soft warm wash that anchors it in the page. */
  padding: clamp(14px, 1.6vw, 20px);
  background:
    radial-gradient(ellipse at 70% 30%, rgba(199, 203, 179, 0.35), transparent 70%),
    rgba(255, 252, 244, 0.55);
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}

.hero-showcase-stage {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(8px, 1.2vw, 16px);
  min-width: 0;
}

.hero-showcase-photo,
.hero-showcase-portrait {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper-2);
}

.hero-showcase-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.hero-showcase-portrait {
  /* Single-image showcase. JS swaps the src attribute and toggles a brief
     `.changing` class that fades and re-fades the img. Replaces the earlier
     six-img stack which suffered an intermittent opacity-stuck bug. */
  background: var(--paper-2);
}
.hero-showcase-portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hero-showcase-portrait.changing img {
  opacity: 0;
}

.hero-showcase-photo figcaption,
.hero-showcase-portrait figcaption {
  position: absolute;
  top: 12px; left: 12px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 10px;
  background: rgba(26, 24, 20, 0.82);
  color: var(--paper);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  pointer-events: none;
}
.hero-showcase-portrait figcaption {
  left: auto; right: 12px;
  background: rgba(110, 122, 79, 0.92);
}

.hero-showcase-arrow {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 32px);
  color: var(--olive-dark);
  font-style: italic;
  user-select: none;
  text-align: center;
  width: clamp(20px, 2.4vw, 30px);
}

.hero-chip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.hero-chip {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 8px 14px;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-3);
  border: 1px solid var(--line-strong);
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
  white-space: nowrap;
}
.hero-chip:hover {
  border-color: var(--ink);
  color: var(--ink);
  transform: translateY(-1px);
}
.hero-chip.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.hero-chip:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 2px;
}

.hero-showcase-hint {
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

/* Mobile: chips fit one row, arrow drops to a vertical divider, portraits stack
   slightly less aggressive so both stay visible. */
@media (max-width: 720px) {
  .hero-showcase-stage { gap: 6px; }
  .hero-showcase-photo figcaption,
  .hero-showcase-portrait figcaption {
    font-size: 9px;
    padding: 4px 8px;
    top: 8px;
    left: 8px;
  }
  .hero-showcase-portrait figcaption { left: auto; right: 8px; }
  .hero-chip { font-size: 11px; padding: 7px 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-showcase-portrait img {
    transition: opacity 200ms linear;
    transform: none;
    filter: none;
  }
}
.hero-image::before {
  /* Soft warm wash behind the framed image */
  content: "";
  position: absolute;
  inset: -8% -6% -10% -4%;
  background: radial-gradient(ellipse at 60% 40%, rgba(199, 203, 179, 0.5), transparent 60%);
  z-index: 0;
  border-radius: 50%;
  filter: blur(20px);
}
.hero-frame {
  position: relative;
  z-index: 1;
  background: var(--ink);
  padding: clamp(14px, 1.8vw, 22px);
  box-shadow: var(--shadow-lg);
  border-radius: 2px;
  max-width: 480px;
  margin-left: auto;
  transform: rotate(-1.2deg);
  transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hero-frame:hover { transform: rotate(0deg) translateY(-2px); }
.hero-frame-mat {
  background: var(--paper);
  padding: clamp(18px, 2.4vw, 32px);
}
.hero-frame-mat img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  width: 100%;
  filter: sepia(0.08) saturate(0.9) contrast(1.04);
}
.hero-caption {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  margin-top: 18px;
  position: relative;
  z-index: 1;
}
@media (max-width: 920px) {
  .hero-image { order: -1; max-width: 360px; margin: 0 auto; }
}

/* ============================================================
   UPLOADER — the conversion bottleneck
   ============================================================ */
.uploader {
  display: block;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 3.2vw, 32px);
  cursor: pointer;
  transition: all 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  /* When .uploader is an <a> (memorial page), strip default link styling. */
  text-decoration: none;
  color: inherit;
}
.uploader::after {
  /* Olive corner mark — atelier signature */
  content: "";
  position: absolute;
  top: 14px; right: 14px;
  width: 8px; height: 8px;
  border-top: 1.5px solid var(--olive);
  border-right: 1.5px solid var(--olive);
}
.uploader:hover,
.uploader:focus-within {
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.uploader.drag { border-color: var(--olive); background: #fdfbf5; }

.uploader-inner {
  display: flex;
  align-items: center;
  gap: 22px;
}
.uploader svg { color: var(--ink); flex-shrink: 0; }
.uploader-text strong {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 24px);
  letter-spacing: -0.012em;
  line-height: 1.2;
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
}
.uploader-text span { font-size: 14px; color: var(--muted); }

/* Reassurance row */
.reassurance {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  font-size: 13px;
  color: var(--muted);
  align-items: center;
}
.reassurance span { display: inline-flex; align-items: center; gap: 6px; }
.reassurance strong { color: var(--ink); font-weight: 600; }
.reassurance span::before {
  content: "";
  width: 4px; height: 4px;
  background: var(--olive);
  border-radius: 50%;
  display: inline-block;
}

/* ============================================================
   PHOTO TIPS
   ============================================================ */
.photo-tips {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.photo-tips summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.photo-tips summary::-webkit-details-marker { display: none; }
.tips-label {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: 17px;
  letter-spacing: -0.005em;
}
.tips-toggle {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--olive);
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
  line-height: 1;
}
.photo-tips[open] .tips-toggle { transform: rotate(45deg); }

.tips-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}
.tip {
  padding: 22px 24px;
  border-right: 1px solid var(--line);
  display: grid;
  gap: 8px;
  align-content: start;
}
.tip:last-child { border-right: 0; }
.tip-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--olive);
  letter-spacing: 0.02em;
}
.tip h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.2;
}
.tip p { font-size: 13px; line-height: 1.55; color: var(--muted); }

.tip-dont {
  grid-column: 1 / -1;
  border-right: 0;
  border-top: 1px solid var(--line);
  background: var(--paper-2);
  padding: 20px 24px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
}
.tip-dont .tip-num { color: var(--clay); }
.tip-dont p { color: var(--ink-2); }
.tip-dont .dont-label {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--clay);
  white-space: nowrap;
}

@media (max-width: 720px) {
  .tips-grid { grid-template-columns: 1fr; }
  .tip { border-right: 0; border-bottom: 1px solid var(--line); }
  .tip-dont { grid-template-columns: 1fr; }
}

/* ============================================================
   EXAMPLES STRIP
   ============================================================ */
.examples {
  padding: clamp(40px, 6vw, 72px) 0 0;
  border-top: 1px solid var(--line);
  margin-top: clamp(40px, 6vw, 64px);
}
.examples-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 28px;
  gap: 16px;
  flex-wrap: wrap;
}
.examples-heading h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 28px);
  letter-spacing: -0.015em;
}
.examples-heading h2 em { font-style: italic; color: var(--olive-dark); }
.examples-heading .note { font-size: 13px; color: var(--muted); }

.example-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(10px, 1.4vw, 18px);
}
.example-grid figure { display: flex; flex-direction: column; gap: 10px; }
.example-grid img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--paper-2);
  filter: sepia(0.06) saturate(0.95);
  transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1), filter 320ms ease;
}
.example-grid figure:hover img { transform: translateY(-3px); filter: sepia(0) saturate(1); }
.example-grid figcaption {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
@media (max-width: 720px) {
  .example-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   STAGE 2 — GENERATING
   ============================================================ */
.generating {
  display: grid;
  gap: 28px;
  justify-items: center;
  text-align: center;
  padding: clamp(48px, 8vw, 96px) 0;
  position: relative;
}
.generating::before {
  /* Atmospheric warm wash */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(199, 203, 179, 0.25), transparent 60%);
  pointer-events: none;
}
.thumb-wrap {
  position: relative;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--paper-2);
  z-index: 1;
}
.thumb-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: inset 0 0 30px rgba(26, 24, 20, 0.08);
}
.thumb-wrap img { width: 100%; height: 100%; object-fit: cover; filter: sepia(0.08); }

.progress {
  width: min(420px, 100%);
  height: 2px;
  background: var(--paper-3);
  overflow: hidden;
  z-index: 1;
}
.progress-bar {
  height: 100%;
  width: 0;
  background: var(--olive);
  transition: width 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.progress-list {
  list-style: none;
  display: grid;
  gap: 10px;
  font-size: 14px;
  color: var(--muted);
  z-index: 1;
  font-family: var(--serif);
  font-style: italic;
}
.progress-list li { transition: color 320ms ease; }
.progress-list li.done { color: var(--ink); }
.progress-list li.done::before { content: "—  "; color: var(--olive); font-style: normal; }
.progress-list li:not(.done)::before { content: "·  "; color: var(--muted-2); }

/* ============================================================
   STAGE 2 v2 — gamified reveal during generation
   Build anticipation, reward every preview with a moment.
   ============================================================ */

.generating-v2 {
  display: grid;
  gap: clamp(18px, 2.4vw, 28px);
  justify-items: center;
  text-align: center;
  padding: clamp(36px, 6vw, 72px) 0;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}

.paint-status-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  flex-wrap: wrap;
}
.paint-status-row em {
  font-style: italic;
  color: var(--muted-2);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-family: var(--serif);
}
.paint-counter strong, .paint-counter span:not(em) {
  color: var(--olive-dark);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
#paint-counter-num {
  font-family: var(--serif);
  font-size: 22px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--olive-dark);
  display: inline-block;
  min-width: 18px;
}
.paint-counter::after {
  content: "—";
  margin: 0 14px;
  color: var(--line-strong);
  font-family: var(--serif);
}
.paint-now em { color: var(--olive-dark); }
.paint-now span:not(em) {
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--serif);
  font-size: 16px;
  font-style: italic;
}

/* The canvas — pet thumb starts here, previews drop in over it */
.paint-canvas {
  position: relative;
  width: min(360px, 78vw);
  aspect-ratio: 3 / 4;
  background: var(--paper);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  margin-top: 6px;
}
.paint-canvas-img,
.paint-canvas-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 480ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.paint-canvas-img { opacity: 1; filter: grayscale(0.7) brightness(1.05); }
.paint-canvas.has-preview .paint-canvas-img { opacity: 0; }
.paint-canvas-preview { opacity: 0; }
.paint-canvas-preview.show { opacity: 1; animation: paintIn 800ms cubic-bezier(0.22, 0.61, 0.36, 1); }
@keyframes paintIn {
  0%   { opacity: 0; transform: scale(1.08); filter: blur(8px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: scale(1); }
}

/* Subtle painter's frame corners — implies the canvas is a frame in formation */
.paint-frame-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--olive);
  pointer-events: none;
  opacity: 0.7;
}
.paint-frame-corner.top-left { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.paint-frame-corner.top-right { top: 8px; right: 8px; border-left: 0; border-bottom: 0; }
.paint-frame-corner.bottom-left { bottom: 8px; left: 8px; border-right: 0; border-top: 0; }
.paint-frame-corner.bottom-right { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }

/* "Your photo" persistent reference thumbnail (top-left of canvas) */
.paint-canvas-ref {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 64px;
  display: grid;
  gap: 4px;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 4px 12px rgba(26, 24, 20, 0.18));
}
.paint-canvas-ref img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--paper);
  background: var(--paper-2);
}
.paint-canvas-ref-label {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  text-align: center;
  padding: 3px 6px;
  border-radius: 2px;
  font-weight: 600;
  white-space: nowrap;
}
/* The "Your photo" thumb is visible from the moment the user lands on the
   generating stage — they need to see their pet right away as confirmation,
   not wait 20-30s for the first portrait to drop. */

/* "Demo — sample portraits" badge at bottom of canvas (hidden in live mode) */
.paint-canvas-demo-badge {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(26, 24, 20, 0.85);
  color: var(--olive-pale);
  padding: 5px 12px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  z-index: 4;
  pointer-events: none;
  border-radius: 2px;
  backdrop-filter: blur(4px);
}
.paint-canvas.live-mode .paint-canvas-demo-badge { display: none; }
.paint-canvas:not(.has-preview) .paint-canvas-demo-badge { display: none; }

/* P0-4: hide demo banner entirely in live mode (?live=1). The class is set
   on <html> by an inline head script before paint, so no flash. */
html.live-mode .demo-banner { display: none !important; }

/* ---------- GDPR consent banner + dialog (P0-3) ---------- */
.oh-consent-banner {
  position: fixed;
  bottom: 18px;
  left: 18px;
  right: 18px;
  max-width: 720px;
  margin: 0 auto;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  line-height: 1.55;
  z-index: 9999;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 240ms ease, transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.oh-consent-banner.open { opacity: 1; transform: translateY(0); }
.oh-consent-banner-inner { display: grid; gap: 14px; }
.oh-consent-banner p { margin: 0; color: rgba(242, 237, 226, 0.85); }
.oh-consent-link { color: var(--paper); text-decoration-color: rgba(242, 237, 226, 0.5); }
.oh-consent-link:hover { text-decoration-color: var(--paper); }
.oh-consent-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.oh-consent-btn {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 10px 18px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
  border: 1px solid transparent;
}
.oh-consent-btn.ghost {
  background: transparent;
  color: rgba(242, 237, 226, 0.8);
  border-color: rgba(242, 237, 226, 0.25);
}
.oh-consent-btn.ghost:hover { color: var(--paper); border-color: var(--paper); }
.oh-consent-btn.primary {
  background: var(--paper);
  color: var(--ink);
}
.oh-consent-btn.primary:hover { background: #fff; }
.oh-consent-btn:focus-visible {
  outline: 2px solid var(--olive-pale);
  outline-offset: 2px;
}
@media (max-width: 600px) {
  .oh-consent-banner { left: 12px; right: 12px; bottom: 12px; padding: 14px 16px; }
  .oh-consent-actions { justify-content: stretch; }
  .oh-consent-actions .oh-consent-btn { flex: 1 1 auto; min-width: 0; }
}

.oh-consent-dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 24, 20, 0.45);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  padding: 24px;
  z-index: 10000;
  opacity: 0;
  transition: opacity 200ms ease;
}
.oh-consent-dialog-backdrop.open { opacity: 1; }
.oh-consent-dialog {
  background: var(--paper);
  color: var(--ink);
  max-width: 520px;
  width: 100%;
  border-radius: var(--radius-lg);
  padding: 32px;
  position: relative;
  box-shadow: var(--shadow-lg);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}
.oh-consent-dialog h3 { font-family: var(--serif); font-size: 22px; margin: 0 0 10px; }
.oh-consent-dialog > p { font-size: 14px; color: var(--ink-3); margin: 0 0 18px; line-height: 1.6; }
.oh-consent-dialog-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  font-size: 20px;
  border-radius: 50%;
  color: var(--ink-3);
}
.oh-consent-dialog-close:hover { background: var(--paper-2); color: var(--ink); }
.oh-consent-category {
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.oh-consent-category:last-of-type { border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.oh-consent-category label {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 14px;
  cursor: pointer;
}
.oh-consent-category label input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--olive);
  cursor: pointer;
}
.oh-consent-category label input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.5; }
.oh-consent-category p { margin: 6px 0 0 28px; font-size: 12px; color: var(--ink-3); line-height: 1.55; }
.oh-consent-dialog-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.oh-consent-dialog-actions .oh-consent-btn.ghost {
  color: var(--ink);
  border-color: var(--line-strong);
  background: transparent;
}
.oh-consent-dialog-actions .oh-consent-btn.ghost:hover { background: var(--paper-2); border-color: var(--ink); }
.oh-consent-dialog-actions .oh-consent-btn.primary {
  background: var(--ink);
  color: var(--paper);
}
.oh-consent-dialog-actions .oh-consent-btn.primary:hover { background: var(--ink-2); }
/* Hide the ref-thumb entirely until its img has actually loaded (avoids the
   native broken-image icon flash). JS flips [data-ready] on img.onload. */
.paint-canvas-ref:not([data-ready]) { display: none; }
.paint-canvas-ref[data-ready] {
  animation: refThumbIn 480ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes refThumbIn {
  0%   { opacity: 0; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1); }
}

@media (max-width: 600px) {
  .paint-canvas-ref { width: 48px; top: 10px; left: 10px; }
  .paint-canvas-ref img { width: 48px; height: 48px; }
  .paint-canvas-ref-label { font-size: 8px; padding: 2px 5px; }
  .paint-canvas-demo-badge { font-size: 9px; padding: 4px 8px; bottom: 10px; }
}

/* Olive-leaf particle burst */
.paint-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.paint-burst .leaf {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 14px;
  background: var(--olive);
  border-radius: 0 100% 0 100%;
  transform-origin: center;
  opacity: 0;
  animation: leafFly 1100ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.paint-burst .leaf.alt { background: var(--olive-pale); width: 7px; height: 11px; }
@keyframes leafFly {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(0deg) translateY(0); }
  10%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) rotate(var(--rot, 180deg)); }
}

/* Narrative escalates — bigger weight on the change */
.paint-narrative {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 22px);
  color: var(--ink-2);
  line-height: 1.4;
  min-height: 1.6em;
  transition: opacity 280ms ease;
  font-variation-settings: "opsz" 48, "SOFT" 100;
  max-width: 30ch;
}
.paint-narrative.swap { opacity: 0; }

/* Trophy thumb row — fills as previews complete */
.paint-thumbs {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 4px;
}
.paint-thumb-slot {
  width: 56px;
  height: 75px;
  background: var(--paper-2);
  box-shadow: var(--shadow-xs);
  position: relative;
  overflow: hidden;
  opacity: 0.4;
  transition: opacity 320ms ease;
}
.paint-thumb-slot.filled { opacity: 1; animation: thumbIn 600ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.paint-thumb-slot img { width: 100%; height: 100%; object-fit: cover; }
@keyframes thumbIn {
  0% { opacity: 0; transform: translateY(8px) scale(0.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* The "final beat" before transitioning to picker */
.paint-canvas.final-beat { animation: finalBeat 800ms ease-out; }
@keyframes finalBeat {
  0%, 100% { box-shadow: var(--shadow-lg); }
  50% { box-shadow: 0 30px 80px rgba(110, 122, 79, 0.45), 0 8px 16px rgba(26, 24, 20, 0.12); }
}

/* Mobile: tighter padding, smaller canvas */
@media (max-width: 600px) {
  .generating-v2 { gap: 16px; padding: 28px 0; }
  .paint-canvas { width: min(280px, 82vw); }
  .paint-thumb-slot { width: 44px; height: 60px; }
  .paint-status-row { gap: 10px; flex-direction: column; }
  .paint-counter::after { display: none; }
  .paint-narrative { font-size: 17px; }
}

/* ============================================================
   STAGE 3 — PICKER
   ============================================================ */
.picker { display: grid; gap: clamp(28px, 4vw, 44px); }
.picker-header {
  display: grid;
  gap: 8px;
  max-width: 600px;
}

.style-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
}
.style-card {
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
  display: grid;
  gap: 14px;
  padding: 0;
}
.style-card:hover { transform: translateY(-4px); }
.style-card-frame {
  background: #fff;
  padding: clamp(10px, 1.4vw, 16px);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 320ms ease;
  position: relative;
}
.style-card:hover .style-card-frame { box-shadow: var(--shadow-md); }
.style-card-frame img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--paper-2);
  width: 100%;
}
.style-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 0 4px;
}
.style-card-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.style-card-pick {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--olive-dark);
  font-weight: 600;
}

/* Big "Choose this →" overlay on the image — visible on hover (desktop) and always (mobile) */
.style-card-frame { position: relative; overflow: hidden; }
.style-card-overlay-cta {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--ink);
  color: var(--paper);
  padding: 10px 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
  transition: all 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
}
.style-card.ready:hover .style-card-overlay-cta {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* On mobile: always show the CTA (no hover) */
@media (max-width: 720px) {
  .style-card-overlay-cta { opacity: 1; transform: translateX(-50%) translateY(0); font-size: 10px; padding: 8px 14px; bottom: 10px; }
}
@media (max-width: 720px) { .style-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   STAGE 4 — PREVIEW + BUY
   ============================================================ */
.preview {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
@media (max-width: 960px) { .preview { grid-template-columns: 1fr; } }

.preview-frame {
  display: grid;
  gap: 16px;
  justify-items: center;
}
/* Default "Print" view — the print as you'd receive it, on a soft paper mat.
   No frame (we're not selling frames yet — they're on the waitlist). */
.frame-outer {
  position: relative;
  padding: clamp(18px, 2.4vw, 28px);
  background: #fdfbf5;
  box-shadow:
    0 1px 0 rgba(26, 24, 20, 0.04),
    0 20px 50px rgba(26, 24, 20, 0.14),
    0 6px 14px rgba(26, 24, 20, 0.08);
  width: 100%;
  max-width: 460px;
  /* very subtle paper-edge feel */
}
.frame-outer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    115deg,
    transparent 0 60px,
    rgba(26, 24, 20, 0.012) 60px 61px
  );
  pointer-events: none;
}
.frame-mat {
  background: transparent;
  padding: 0;
}
.frame-mat img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  width: 100%;
  background: var(--paper);
  box-shadow:
    0 0 0 1px rgba(26, 24, 20, 0.04),
    0 6px 18px rgba(26, 24, 20, 0.06);
}
.frame-caption {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  margin-top: 8px;
}

.preview-cta {
  display: grid;
  gap: 24px;
  align-content: start;
  padding-top: clamp(8px, 1vw, 16px);
}
.style-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 4.4vw, 44px);
  line-height: 1.02;
  letter-spacing: -0.025em;
}
.price { display: grid; gap: 6px; }
.price-amount {
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 400;
  letter-spacing: -0.025em;
}
.price-amount::before {
  content: "€";
  font-size: 24px;
  vertical-align: super;
  margin-right: 2px;
  color: var(--muted);
  font-weight: 400;
}
.price-detail { color: var(--muted); font-size: 14px; line-height: 1.5; }
.price-detail strong { color: var(--ink); font-weight: 600; }

/* ---------- Primary CTA ---------- */
.cta-btn {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: 0;
  padding: 20px 28px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: all 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
}
.cta-btn::after {
  /* Olive sliver on hover */
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--olive);
  transform: translateX(-100%);
  transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.cta-btn:hover { background: var(--ink-2); padding-left: 36px; padding-right: 32px; }
.cta-btn:hover::after { transform: translateX(0); }
.cta-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.cta-btn:disabled:hover { padding: 20px 28px; background: var(--ink); }
.cta-btn:disabled:hover::after { transform: translateX(-100%); }
.cta-spinner {
  width: 16px; height: 16px;
  border: 1.5px solid rgba(242, 237, 226, 0.3);
  border-top-color: var(--paper);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
.cta-spinner.hidden { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Failed-style retry tile (P1 F2) ---------- */
.style-card.failed { opacity: 0.85; }
.style-card-failed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px 16px;
  text-align: center;
  background: var(--paper-2);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  min-height: 200px;
}
.style-card-failed-label {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink-2);
}
.style-card-failed-retry {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 8px 18px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  cursor: pointer;
}
.style-card-failed-retry:hover { background: var(--ink-2); }
.style-card-failed-help { font-size: 11px; color: var(--muted); line-height: 1.5; max-width: 220px; }

/* ---------- Humane in-page error/confirm dialog (P1 F1) ---------- */
.oh-dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 24, 20, 0.45);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  padding: 24px;
  z-index: 10000;
  opacity: 0;
  transition: opacity 200ms ease;
}
.oh-dialog-backdrop.open { opacity: 1; }
.oh-dialog {
  background: var(--paper);
  color: var(--ink);
  max-width: 440px;
  width: 100%;
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-lg);
  text-align: left;
}
.oh-dialog h3 { font-family: var(--serif); font-size: 22px; margin: 0 0 10px; line-height: 1.25; }
.oh-dialog p { font-size: 15px; color: var(--ink-2); margin: 0 0 22px; line-height: 1.55; }
.oh-dialog-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.oh-dialog-btn {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 12px 22px;
  border-radius: var(--radius);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.oh-dialog-btn.primary {
  background: var(--ink);
  color: var(--paper);
}
.oh-dialog-btn.primary:hover { background: var(--ink-2); }
.oh-dialog-btn.destructive {
  background: var(--clay);
  color: var(--paper);
}
.oh-dialog-btn.destructive:hover { background: #8e4a30; }
.oh-dialog-btn.ghost {
  color: var(--ink-2);
  border-color: var(--line-strong);
  background: transparent;
}
.oh-dialog-btn.ghost:hover { background: var(--paper-2); border-color: var(--ink); }
.oh-dialog-btn:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 2px;
}

/* ---------- Bespoke memorial note (P1 F8) ---------- */
.bespoke-note-row {
  margin: 18px 0 14px;
  padding: 16px 18px;
  background: rgba(168, 90, 60, 0.05);
  border-left: 2px solid var(--clay);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.bespoke-note-row label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  display: block;
  margin-bottom: 8px;
  line-height: 1.5;
}
.bespoke-note-row textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  resize: vertical;
  min-height: 64px;
}
.bespoke-note-row textarea:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 2px;
  border-color: var(--clay);
}
.bespoke-note-count {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
  text-align: right;
}

/* ---------- EU withdrawal consent row (P0-13) ---------- */
.consent-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  margin: 18px 0 14px;
  padding: 14px 16px;
  background: rgba(110, 122, 79, 0.06);
  border-left: 2px solid var(--olive);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
  cursor: pointer;
}
.consent-row input[type="checkbox"] {
  /* Native checkbox at 18×18, keyboard-focusable, accent-color for brand. */
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--olive);
  flex-shrink: 0;
  cursor: pointer;
}
.consent-row input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.consent-row a {
  color: var(--ink);
  text-decoration-color: var(--olive);
}
.checkout-help {
  font-size: 12px;
  color: var(--clay);
  margin: 6px 0 0;
  text-align: center;
}

.cta-btn-sm {
  padding: 14px 20px;
  font-size: 12px;
  letter-spacing: 0.12em;
  justify-self: start;
  display: inline-flex;
}

.checkout-trust {
  list-style: none;
  display: grid;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 24px;
  line-height: 1.5;
}
.checkout-trust li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: baseline;
}
.checkout-trust li::before {
  content: "—";
  color: var(--olive);
  font-family: var(--serif);
}
.checkout-trust strong { color: var(--ink); font-weight: 600; }

/* ============================================================
   GHOST BUTTONS
   ============================================================ */
.ghost-btn {
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 8px 0;
  transition: color 160ms ease;
}
.ghost-btn:hover { color: var(--ink); }

.ghost-btn-strong {
  padding: 11px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: #fff;
  transition: all 200ms ease;
  white-space: nowrap;
}
.ghost-btn-strong:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ghost-btn-strong:disabled { opacity: 0.5; cursor: not-allowed; }

/* ============================================================
   STAGE 5 — THANK YOU
   ============================================================ */
.thanks {
  display: grid;
  gap: 22px;
  justify-items: center;
  text-align: center;
  padding: clamp(48px, 8vw, 96px) 0 0;
  max-width: 580px;
  margin: 0 auto;
}
.check {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--olive);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-size: 22px;
  font-family: var(--serif);
}
.thanks-small { font-size: 13px; color: var(--muted); margin-top: 24px; }

/* ---------- Download card ---------- */
.download-card {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 24px;
  align-items: center;
  max-width: 540px;
  width: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  text-align: left;
  margin-top: 12px;
}
.download-card[hidden] { display: none; }
.download-pending {
  grid-template-columns: auto 1fr;
  gap: 16px;
  color: var(--muted);
  font-size: 14px;
}
.download-pending .cta-spinner {
  border-color: rgba(26, 24, 20, 0.15);
  border-top-color: var(--olive);
}
.download-thumb {
  width: 100px; height: 100px;
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: var(--shadow-xs);
}
.download-thumb img { width: 100%; height: 100%; object-fit: cover; }
.download-meta { display: grid; gap: 8px; }
.download-title { font-family: var(--serif); font-size: 18px; letter-spacing: -0.01em; }
.download-detail { font-size: 13px; color: var(--muted); }
.download-fallback { font-size: 11px; color: var(--muted-2); margin-top: 2px; letter-spacing: 0.02em; }

/* ---------- 5-min hold banner ---------- */
.hold-banner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  max-width: 580px;
  width: 100%;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  text-align: left;
  box-shadow: var(--shadow-xs);
  border-left: 3px solid var(--olive);
}
.hold-committed { border-left-color: var(--paper-3); background: var(--paper-2); }
.hold-cancelled { border-left-color: var(--clay); background: #fdf6f3; }
.hold-meta { display: grid; gap: 4px; }
.hold-title {
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.hold-title #hold-countdown {
  font-variant-numeric: tabular-nums;
  color: var(--olive);
  font-weight: 500;
}
.hold-detail { font-size: 13px; color: var(--muted); line-height: 1.5; }
.hold-detail a { color: var(--ink); }

@media (max-width: 600px) { .hold-banner { grid-template-columns: 1fr; } }

/* ============================================================
   TOP TRUST BAR (rotating ticker)
   ============================================================ */
.top-bar {
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  padding: 10px 16px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  position: relative;
}
.top-bar-content { display: inline-flex; align-items: center; gap: 28px; flex-wrap: wrap; justify-content: center; }
.top-bar-content span { display: inline-flex; align-items: center; gap: 8px; }
.top-bar-content span::before {
  content: "·";
  color: var(--olive);
  font-size: 14px;
}
.top-bar-content span:first-child::before { display: none; }

/* ============================================================
   FLOATING HELP BUTTON (live counter / contact)
   ============================================================ */
.floating-help {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100;
  display: grid;
  gap: 8px;
  justify-items: end;
}
.floating-help-btn {
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: 999px;
  padding: 14px 22px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: all 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.floating-help-btn:hover { background: var(--ink-2); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.floating-help-pulse {
  width: 8px; height: 8px;
  background: var(--olive-pale);
  border-radius: 50%;
  position: relative;
}
.floating-help-pulse::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: var(--olive-pale);
  opacity: 0.5;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.6); opacity: 0; }
}
.floating-help-stat {
  background: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.floating-help-stat strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.floating-help-stat::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--olive);
  border-radius: 50%;
}
@media (max-width: 720px) {
  .floating-help { bottom: 80px; right: 12px; }
  .floating-help-stat { display: none; }
  .floating-help-btn {
    padding: 12px 18px;
    font-size: 11px;
    /* Narrow the transition — `transition: all` (above) was animating EVERY
       property including bottom/right, so the button visibly slid during
       viewport-resize events (iOS address bar collapse, virtual keyboard).
       Only animate the cosmetic hover properties. */
    transition: background 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  /* When the bottom sticky CTA is visible (picker stage on mobile), hide the
     floating help button entirely. The two were overlapping/jittering and the
     CTA is the higher-intent action. Mid-funnel desktop is unaffected — this
     rule is inside the 720px breakpoint AND relies on body :has() which only
     matches when .sticky-cta has the .visible class JS adds. */
  body:has(.sticky-cta.visible) .floating-help { display: none; }
}

/* Help panel (opens on click) */
.help-panel {
  position: fixed;
  bottom: 80px;
  right: 24px;
  width: 320px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 22px;
  z-index: 101;
  display: none;
  animation: panelIn 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.help-panel.open { display: block; }
.help-panel h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.help-panel ul { list-style: none; display: grid; gap: 4px; }
.help-panel ul li a {
  display: block;
  padding: 10px 0;
  font-size: 14px;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.help-panel ul li:last-child a { border-bottom: 0; }
.help-panel ul li a:hover { color: var(--olive-dark); }
.help-panel .help-contact {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}
.help-panel .help-contact a { color: var(--ink); }
@keyframes panelIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 720px) {
  .help-panel { bottom: 70px; right: 12px; left: 12px; width: auto; }
}

/* ============================================================
   STICKY MOBILE CTA (bottom-fixed)
   ============================================================ */
.sticky-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
  padding: 12px 16px;
  /* iOS home-bar safe area — without this, the bar can sit BEHIND the iPhone
     home-indicator and "feel unstuck" because the visible content shifts
     during Safari's address-bar collapse/expand. */
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: rgba(242, 237, 226, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  animation: stickyIn 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
  /* Force the element into its own GPU layer. Fixes a known iOS Safari bug
     where backdrop-filter + position:fixed elements detach from the viewport
     during momentum scroll (the "bar gets unstuck from the bottom" symptom). */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
}
.sticky-cta-meta {
  display: grid;
  gap: 2px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.2;
}
.sticky-cta-meta strong {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.sticky-cta-btn {
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: 0;
  padding: 14px 22px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
@keyframes stickyIn {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@media (max-width: 720px) {
  .sticky-cta.visible { display: flex; }
}

/* ============================================================
   SKELETON LOADING
   ============================================================ */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--paper-2) 0%,
    var(--paper-3) 50%,
    var(--paper-2) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   EMAIL CAPTURE MODAL ("Save my previews")
   ============================================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 24, 20, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
  animation: backdropIn 320ms ease;
}
.modal-backdrop.open { display: flex; }
@keyframes backdropIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--paper);
  max-width: 460px;
  width: 100%;
  padding: clamp(28px, 5vw, 44px);
  box-shadow: var(--shadow-lg);
  position: relative;
  animation: modalIn 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-close {
  position: absolute;
  top: 16px; right: 16px;
  background: none;
  border: 0;
  font-size: 22px;
  color: var(--muted);
  cursor: pointer;
  padding: 8px;
  line-height: 1;
  transition: color 160ms ease;
}
.modal-close:hover { color: var(--ink); }
.modal h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 34px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 12px;
}
.modal h3 em { font-style: italic; color: var(--olive-dark); }
.modal p { font-size: 15px; color: var(--muted); margin-bottom: 22px; line-height: 1.55; }
.modal-input {
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
  border: 1px solid var(--line-strong);
  background: #fff;
  border-radius: 2px;
  margin-bottom: 14px;
  font-family: var(--sans);
  transition: border-color 160ms ease;
}
.modal-input:focus { outline: none; border-color: var(--ink); }
.modal-actions { display: flex; gap: 12px; }
.modal-actions .cta-btn { flex: 1; }
.modal-skip {
  background: none;
  color: var(--muted);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 12px;
  letter-spacing: 0.02em;
  text-transform: none;
}
.modal-skip:hover { color: var(--ink); }
.modal-fine { font-size: 11px; color: var(--muted-2); margin-top: 16px; line-height: 1.5; }

/* ============================================================
   EXPRESS PAYMENT BADGES
   ============================================================ */
.express-pay {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.express-pay-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.express-pay-badges {
  display: flex;
  align-items: center;
  gap: 12px;
}
.express-pay-badge {
  height: 26px;
  padding: 5px 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.express-pay-badge.apple { background: #000; color: #fff; border-color: #000; }
.express-pay-badge.gpay { font-family: "Inter", sans-serif; }
.express-pay-badge.visa { color: #1A1F71; font-style: italic; font-weight: 700; }
.express-pay-badge.mc { color: #EB001B; font-weight: 700; letter-spacing: -0.02em; }

/* ============================================================
   FRAME-ON-WALL ROOM MOCKUP (preview stage)
   ============================================================ */
.room-mockup-toggle {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding: 4px;
  background: var(--paper-2);
  border-radius: 999px;
  width: fit-content;
  align-self: center;
}
.room-mockup-toggle button {
  padding: 8px 16px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  background: none;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  transition: all 200ms ease;
  cursor: pointer;
}
.room-mockup-toggle button.active {
  background: var(--ink);
  color: var(--paper);
}

/* "On the wall" mockup — print mounted unframed against a Mediterranean limewashed wall.
   CSS-rendered wall (no overlay-on-photo clashes), the print sits realistically with shadow. */
.room-mockup {
  width: 100%;
  max-width: 560px;
  position: relative;
  aspect-ratio: 5 / 4;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 9%;
  margin: 0 auto;
  background:
    radial-gradient(ellipse at 70% 20%, rgba(255, 246, 230, 0.6) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(206, 197, 178, 0.25) 0%, transparent 50%),
    linear-gradient(168deg, #ece4d2 0%, #ddd2bb 100%);
  /* Limewashed-wall texture suggestion */
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.room-mockup.active { display: flex; }
.room-mockup::before {
  /* Subtle wall imperfection — pencil-soft noise to suggest plaster */
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.07 0 0 0 0 0.06 0 0 0 0 0.05 0 0 0 0.05 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.6;
}
.room-mockup::after {
  /* Soft floor shadow gradient at the bottom to anchor the wall */
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 22%;
  background: linear-gradient(180deg, transparent, rgba(70, 60, 40, 0.12));
  pointer-events: none;
}
.room-mockup-frame {
  width: 38%;
  background: transparent;
  padding: 0;
  position: relative;
  z-index: 1;
  /* Print shadow — realistic paper-on-wall depth */
  box-shadow:
    0 1px 0 rgba(26, 24, 20, 0.06),
    0 12px 28px rgba(26, 24, 20, 0.18),
    0 4px 8px rgba(26, 24, 20, 0.10);
}
/* Tiny corner pins (visible olive dots — suggests magnetic mounting clips) */
.room-mockup-frame::before,
.room-mockup-frame::after {
  content: "";
  position: absolute;
  width: 5px; height: 5px;
  background: var(--olive-dark);
  border-radius: 50%;
  top: -3px;
  z-index: 2;
}
.room-mockup-frame::before { left: 10%; }
.room-mockup-frame::after { right: 10%; }
.room-mockup-frame-mat {
  background: #fdfbf5;
  padding: 6%;
}
.room-mockup-frame-mat img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  width: 100%;
  display: block;
}

@media (max-width: 600px) {
  .room-mockup { aspect-ratio: 5 / 4; max-width: 100%; }
  .room-mockup-frame { width: 50%; }
  .room-mockup-frame::before { left: 8%; top: -2px; }
  .room-mockup-frame::after { right: 8%; top: -2px; }
}

/* ============================================================
   ADD ANOTHER PET (in picker stage)
   ============================================================ */
.add-another {
  background: #fff;
  border: 1px dashed var(--line-strong);
  padding: 24px;
  text-align: center;
  display: grid;
  gap: 10px;
  cursor: pointer;
  transition: all 200ms ease;
  align-content: center;
  aspect-ratio: 3 / 4;
}
.add-another:hover {
  border-color: var(--olive);
  border-style: solid;
  background: #fdfbf5;
}
.add-another-icon {
  font-family: var(--serif);
  font-size: 36px;
  font-style: italic;
  color: var(--olive);
  line-height: 1;
}
.add-another-text {
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.2;
}
.add-another-detail {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* ============================================================
   HOVER REVEAL (on examples grid + style cards)
   ============================================================ */
.example-grid figure { position: relative; cursor: pointer; }
.example-grid figure::after {
  content: "Try this style →";
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--ink);
  color: var(--paper);
  padding: 8px 14px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0;
  transition: all 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
  white-space: nowrap;
}
.example-grid figure:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   PERSISTENT STATE BANNER (welcome back)
   ============================================================ */
.welcome-back {
  background: var(--olive-pale);
  border: 1px solid var(--olive);
  border-radius: var(--radius);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 13px;
  color: var(--ink-2);
  animation: stageIn 480ms cubic-bezier(0.22, 0.61, 0.36, 1);
  flex-wrap: wrap;
}
.welcome-back-text strong { color: var(--ink); }
.welcome-back-actions { display: flex; gap: 12px; align-items: center; }
.welcome-back-actions button {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  padding: 4px 0;
  cursor: pointer;
}
.welcome-back-actions button:hover { color: var(--olive-dark); }

/* ============================================================
   NAVIGATION
   ============================================================ */
.topbar-nav {
  display: flex;
  gap: clamp(20px, 2.4vw, 32px);
  align-items: baseline;
}
.topbar-nav a {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color 160ms ease;
  position: relative;
}
.topbar-nav a:hover { color: var(--ink); }
.topbar-nav a.active { color: var(--ink); }
.topbar-nav a.active::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0; right: 0;
  height: 1px;
  background: var(--olive);
}
@media (max-width: 720px) {
  .topbar-nav { display: none; }
}

/* ============================================================
   SECTIONS (long-scroll homepage + subpages)
   ============================================================ */
.section {
  padding: clamp(72px, 10vw, 140px) 0;
  border-top: 1px solid var(--line);
}
.section:first-of-type { border-top: 0; }
.section-header {
  display: grid;
  gap: 14px;
  max-width: 640px;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.section-header .eyebrow { margin-bottom: 0; }
.section-header h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 5.4vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 144;
}
.section-header h2 em { font-style: italic; color: var(--olive-dark); }
.section-header p {
  font-family: var(--serif);
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.55;
  color: var(--ink-3);
  font-variation-settings: "opsz" 48, "SOFT" 80;
  max-width: 56ch;
}

/* ============================================================
   PROCESS — 3 step section
   ============================================================ */
.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3.4vw, 44px);
}
.process-card { display: grid; gap: 18px; }
.process-card .process-image {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: var(--shadow-sm);
}
.process-card .process-image img {
  width: 100%; height: 100%; object-fit: cover;
  filter: sepia(0.08) saturate(0.95);
  transition: transform 800ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.process-card:hover .process-image img { transform: scale(1.04); }
.process-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(48px, 6vw, 72px);
  line-height: 0.9;
  color: var(--olive);
  font-variation-settings: "opsz" 144;
  margin-top: 8px;
}
.process-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 28px);
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.process-card p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.6;
}
@media (max-width: 720px) { .process-grid { grid-template-columns: 1fr; } }

/* ============================================================
   LIFESTYLE — broken editorial grid
   ============================================================ */
.lifestyle-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(12px, 1.8vw, 20px);
}
.lifestyle-item {
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: var(--shadow-sm);
  position: relative;
  display: block;
  border-radius: 6px;
  transition: box-shadow 380ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lifestyle-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1200ms cubic-bezier(0.22, 0.61, 0.36, 1),
              filter 380ms ease-out;
  display: block;
}
.lifestyle-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.lifestyle-item:hover img { transform: scale(1.06); filter: brightness(1.02); }
.lifestyle-caption {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  color: var(--paper);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  background: linear-gradient(180deg, transparent 0%, rgba(26, 24, 20, 0) 35%, rgba(26, 24, 20, 0.78) 100%);
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 380ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lifestyle-caption strong {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: -0.005em;
  margin-bottom: 2px;
}
.lifestyle-caption span { opacity: 0.85; }
.lifestyle-item:hover .lifestyle-caption,
.lifestyle-item:focus-visible .lifestyle-caption {
  opacity: 1;
  transform: translateY(0);
}
@media (hover: none) {
  /* Always-on caption on touch devices */
  .lifestyle-caption { opacity: 1; transform: translateY(0); }
}
.li-1 { grid-column: span 7; aspect-ratio: 7 / 5; }
.li-2 { grid-column: span 5; aspect-ratio: 1 / 1; }
.li-3 { grid-column: span 4; aspect-ratio: 4 / 5; }
.li-4 { grid-column: span 8; aspect-ratio: 8 / 5; }
@media (max-width: 720px) {
  .lifestyle-item { grid-column: 1 / -1 !important; aspect-ratio: 16 / 10 !important; }
}

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 32px);
}
/* Hide orphan 4th card on desktop (re-shown in mobile media query below) */
.reviews-grid > .review-card:nth-child(n+4) { display: none; }
.review-card {
  background: #fff;
  padding: clamp(30px, 3vw, 40px);
  display: grid;
  gap: 18px;
  align-content: start;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  transition: transform 380ms cubic-bezier(.2,.7,.2,1), box-shadow 380ms cubic-bezier(.2,.7,.2,1), border-color 380ms ease;
  outline: none;
}
.review-card:hover,
.review-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -16px rgba(60, 42, 30, 0.18), 0 2px 6px -2px rgba(60, 42, 30, 0.08);
  border-color: rgba(110, 122, 89, 0.35);
}
.review-stars {
  font-family: var(--serif);
  color: var(--olive);
  font-size: 16px;
  letter-spacing: 0.18em;
  line-height: 1;
}
.review-body {
  font-family: var(--serif);
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.55;
  color: var(--ink-2);
  font-variation-settings: "opsz" 48;
}
.review-body em { font-style: italic; }
.review-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.review-author img {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--paper-2);
}
.review-author-meta { display: grid; gap: 2px; }
.review-author-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.review-author-detail { font-size: 12px; color: var(--muted); }
@media (max-width: 880px) {
  .reviews-grid { grid-template-columns: 1fr; max-width: 540px; margin: 0 auto; }
  .reviews-grid > .review-card:nth-child(n+4) { display: grid; }
}

/* ============================================================
   BRAND STORY split section
   ============================================================ */
.story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.story-image {
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.story-image img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: sepia(0.06) saturate(0.95);
}
.story-text { display: grid; gap: 22px; align-content: center; }
.story-text h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 4.8vw, 56px);
  line-height: 1.0;
  letter-spacing: -0.025em;
}
.story-text h2 em { font-style: italic; color: var(--olive-dark); }
.story-text p {
  font-family: var(--serif);
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.6;
  color: var(--ink-3);
  font-variation-settings: "opsz" 48, "SOFT" 80;
}
.story-text p em { font-style: italic; color: var(--ink-2); }
.story-link {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olive-dark);
  text-decoration: none;
  padding-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: none;
  transition: gap 200ms ease, color 200ms ease;
}
.story-link:hover { gap: 12px; color: var(--ink); }
@media (max-width: 880px) { .story { grid-template-columns: 1fr; } }

/* ============================================================
   FAQ accordion
   ============================================================ */
.faq-list {
  display: grid;
  border-top: 1px solid var(--line);
}
.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 0;
}
.faq-item summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 28px 4px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(18px, 1.8vw, 22px);
  letter-spacing: -0.012em;
  color: var(--ink);
  transition: color 200ms ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--olive-dark); }
.faq-item .faq-toggle {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--olive);
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
  line-height: 1;
}
.faq-item[open] .faq-toggle { transform: rotate(45deg); }
.faq-item .faq-answer {
  padding: 0 4px 28px;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 70ch;
  font-variation-settings: "opsz" 48;
}
.faq-item .faq-answer a { color: var(--ink); }

/* ============================================================
   BIG CTA — bottom of page
   ============================================================ */
.cta-section {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(80px, 12vw, 160px) var(--pad);
  margin: clamp(64px, 10vw, 120px) calc(var(--pad) * -1) 0;
  text-align: center;
  border: 0;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  /* Subtle radial olive glow */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(110, 122, 79, 0.18), transparent 60%);
}
.cta-section-inner {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.cta-section .eyebrow { color: var(--olive-pale); }
.cta-section h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--paper);
  margin-bottom: 32px;
  font-variation-settings: "opsz" 144;
}
.cta-section h2 em { font-style: italic; color: var(--olive-pale); }
.cta-section .cta-section-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--paper);
  color: var(--ink);
  padding: 22px 36px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 240ms ease;
  margin-top: 12px;
}
.cta-section .cta-section-cta:hover {
  background: var(--olive-pale);
  letter-spacing: 0.18em;
}

/* ---------- RICH variant (high-conversion final CTA) ---------- */
.cta-section--rich { padding: clamp(72px, 10vw, 130px) var(--pad); }
.cta-section--rich .cta-section-inner { max-width: 820px; }
.cta-section--rich h2 {
  font-size: clamp(38px, 5.4vw, 64px);
  margin-bottom: 18px;
}
.cta-section-sub {
  font-family: var(--serif);
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.55;
  color: rgba(242, 235, 217, 0.82);
  max-width: 540px;
  margin: 0 auto 36px;
  font-variation-settings: "opsz" 48;
}
.cta-section-sub em {
  font-style: italic;
  color: var(--olive-pale);
}
.cta-style-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  max-width: 560px;
  margin: 0 auto 40px;
}
.cta-style-strip img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
  opacity: 0.92;
  transition: opacity 320ms ease, transform 320ms ease;
}
.cta-style-strip img:hover { opacity: 1; transform: translateY(-2px); }
.cta-section-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
}
.cta-section--rich .cta-section-cta {
  margin-top: 0;
  font-size: 15px;
  padding: 24px 40px;
  box-shadow: 0 14px 40px -14px rgba(0, 0, 0, 0.45);
}
.cta-section-link {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: rgba(242, 235, 217, 0.7);
  text-decoration: underline;
  text-decoration-color: rgba(242, 235, 217, 0.3);
  text-underline-offset: 4px;
  transition: color 220ms ease, text-decoration-color 220ms ease;
}
.cta-section-link:hover {
  color: var(--olive-pale);
  text-decoration-color: var(--olive-pale);
}
.cta-trust-row {
  list-style: none;
  padding: 0;
  margin: 0 auto 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(242, 235, 217, 0.7);
}
.cta-trust-row li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cta-trust-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(110, 122, 89, 0.25);
  color: var(--olive-pale);
  font-size: 10px;
  font-weight: 700;
}
.cta-live-proof {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: rgba(242, 235, 217, 0.55);
  margin: 0;
  letter-spacing: 0.02em;
}
.cta-live-proof .cta-live-num {
  font-style: normal;
  font-weight: 600;
  color: var(--olive-pale);
  font-feature-settings: "tnum" 1;
}

/* Mobile */
@media (max-width: 640px) {
  .cta-section--rich { padding: 56px 20px; }
  .cta-section--rich h2 { font-size: 32px; margin-bottom: 14px; }
  .cta-section-sub { font-size: 16px; margin-bottom: 28px; }
  .cta-style-strip { grid-template-columns: repeat(6, 1fr); gap: 6px; max-width: 100%; margin-bottom: 28px; }
  .cta-style-strip img { border-radius: 3px; }
  .cta-section--rich .cta-section-cta {
    padding: 20px 24px;
    font-size: 13px;
    width: 100%;
    max-width: 360px;
    justify-content: center;
  }
  .cta-section-actions { width: 100%; }
  .cta-trust-row {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    width: max-content;
    margin: 0 auto 22px;
    text-align: left;
  }
  .cta-trust-row li { font-size: 12px; }
}

/* ============================================================
   SUBPAGE HEROES (about / styles / reviews / memorial)
   ============================================================ */
.subpage-hero {
  padding: clamp(48px, 8vw, 96px) 0 clamp(40px, 6vw, 64px);
  display: grid;
  gap: 24px;
  max-width: 760px;
}
.subpage-hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 7vw, 88px);
  line-height: 0.96;
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 144, "SOFT" 60;
}
.subpage-hero h1 em { font-style: italic; color: var(--olive-dark); }
.subpage-hero .lede { max-width: 60ch; }

/* Full-bleed image inside a subpage */
.subpage-image {
  margin: clamp(40px, 6vw, 64px) calc(var(--pad) * -1);
}
.subpage-image img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}

/* ============================================================
   STYLES PAGE — large style cards
   ============================================================ */
.style-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  padding: clamp(64px, 8vw, 96px) 0;
  border-bottom: 1px solid var(--line);
}
.style-feature:last-child { border-bottom: 0; }
.style-feature:nth-child(even) .style-feature-image { order: 2; }
.style-feature-image img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--paper-2);
  box-shadow: var(--shadow-md);
}
.style-feature-text { display: grid; gap: 20px; align-content: center; }
.style-feature-text h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.025em;
}
.style-feature-text h2 em { font-style: italic; color: var(--olive-dark); }
.style-feature-text p {
  font-family: var(--serif);
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.6;
  color: var(--ink-3);
  font-variation-settings: "opsz" 48, "SOFT" 80;
}
.style-feature-text .when {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 4px;
}
.style-feature-text .when strong {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olive-dark);
  font-weight: 600;
}
@media (max-width: 880px) {
  .style-feature { grid-template-columns: 1fr; }
  .style-feature:nth-child(even) .style-feature-image { order: 0; }
  .style-feature:nth-child(even) .style-feature-gallery { order: 0; }
}

/* Two-image gallery per style — the portrait + a real-world context shot.
   Primary image fills the column, context image overlays the lower-right
   like a Polaroid for a layered editorial composition. */
.style-feature-gallery {
  position: relative;
  display: grid;
  gap: 18px;
}
.style-feature:nth-child(even) .style-feature-gallery { order: 2; }
.style-feature-gallery figure { margin: 0; position: relative; }
.style-feature-gallery figcaption {
  position: absolute;
  bottom: 12px;
  left: 12px;
  padding: 6px 12px;
  background: rgba(26, 24, 20, 0.78);
  color: var(--paper);
  font-family: var(--sans, "Inter", system-ui, sans-serif);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
/* Both gallery images respect their source aspect ratio — `height: auto` with
   `object-fit: contain` guarantees zero squash regardless of what dimensions
   the source image arrives at. The shared .img-natural rule lower in this file
   enforces this as a site-wide default for any new images dropped in. */
.style-feature-gallery .style-feature-primary img,
.style-feature-gallery .style-feature-context img {
  width: 100%;
  height: auto;
  object-fit: contain;
  background: var(--paper-2);
  box-shadow: var(--shadow-md);
  border-radius: 4px;
  display: block;
}
.style-feature-gallery .style-feature-context figcaption {
  background: rgba(110, 122, 89, 0.92); /* olive tint for the context caption */
}
@media (min-width: 881px) {
  /* Desktop — primary on top, context offset to bottom-right for a layered feel.
     The container has padding-right so the context can sit half off the primary. */
  .style-feature-gallery {
    padding-right: 24px;
    padding-bottom: 32px;
  }
  .style-feature-gallery .style-feature-context {
    width: 62%;
    margin-left: auto;
    margin-top: -68px;
    transform: translateX(36px);
    z-index: 2;
  }
  .style-feature:nth-child(even) .style-feature-gallery {
    padding-right: 0;
    padding-left: 24px;
  }
  .style-feature:nth-child(even) .style-feature-gallery .style-feature-context {
    margin-left: 0;
    margin-right: auto;
    transform: translateX(-36px);
  }
}

/* ============================================================
   STEP INDICATOR (wizard chrome across funnel stages)
   ============================================================ */
.stepper {
  display: flex;
  align-items: center;
  gap: 0;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted-2);
}
.stepper-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  transition: color 240ms ease;
}
.stepper-item.completed { color: var(--muted); }
.stepper-item.active { color: var(--ink); }
.stepper-num {
  font-variant-numeric: tabular-nums;
  opacity: 0.45;
  transition: opacity 240ms ease;
}
.stepper-item.completed .stepper-num,
.stepper-item.active .stepper-num { opacity: 1; }
.stepper-item.active .stepper-num { color: var(--olive); }
.stepper-item.completed::after {
  content: "✓";
  color: var(--olive);
  margin-left: 4px;
  font-size: 12px;
}
.stepper-sep {
  width: 28px;
  height: 1px;
  background: var(--line-strong);
  margin: 0 14px;
}
@media (max-width: 720px) {
  .stepper-item:not(.active) .stepper-label { display: none; }
  .stepper-item:not(.active) { padding: 0; }
  .stepper-sep { width: 16px; margin: 0 8px; }
}

/* ============================================================
   BEFORE / AFTER SLIDER (hero — show the transformation)
   ============================================================ */
.before-after {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  cursor: ew-resize;
  user-select: none;
  background: var(--paper-2);
  box-shadow: var(--shadow-lg);
}
.before-after img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.before-after .ba-after { z-index: 2; }
.before-after .ba-divider {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--paper);
  z-index: 3;
  pointer-events: none;
  box-shadow: 0 0 12px rgba(0,0,0,0.3);
}
.before-after .ba-handle {
  position: absolute;
  top: 50%;
  width: 44px; height: 44px;
  background: var(--paper);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  pointer-events: none;
}
/* P0-12: invisible native range overlay — provides keyboard a11y for the drag.
   The visible .ba-handle is decorative; this is the real control. */
.before-after .ba-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: ew-resize;
  z-index: 5;
  /* Hidden visually but kept in the a11y tree + focusable + clickable. */
  opacity: 0;
}
.before-after .ba-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 44px; height: 100%;
  background: transparent;
  cursor: ew-resize;
}
.before-after .ba-range::-moz-range-thumb {
  width: 44px; height: 100%;
  background: transparent;
  border: 0;
  cursor: ew-resize;
}
.before-after .ba-range:focus-visible {
  opacity: 1;
  /* When focused, reveal a subtle outline ring around the whole comparison so
     keyboard users see *something* responding. */
  outline: 2px solid var(--ink);
  outline-offset: -2px;
  background: transparent;
}
.before-after .ba-range:focus-visible + .ba-handle,
.before-after:focus-within .ba-handle {
  /* Visible focus ring on the handle itself. */
  box-shadow: var(--shadow-md), 0 0 0 3px var(--olive);
}
.before-after .ba-handle::before,
.before-after .ba-handle::after {
  content: "";
  width: 6px;
  height: 10px;
  border-top: 2px solid var(--ink);
  border-bottom: 0;
}
.before-after .ba-handle::before {
  border-left: 2px solid var(--ink);
  margin-right: 4px;
  transform: rotate(-45deg) translate(2px, 0);
}
.before-after .ba-handle::after {
  border-right: 2px solid var(--ink);
  margin-left: 4px;
  transform: rotate(45deg) translate(-2px, 0);
}
.before-after .ba-label {
  position: absolute;
  top: 16px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  background: rgba(26, 24, 20, 0.7);
  color: var(--paper);
  padding: 6px 10px;
  border-radius: 2px;
  z-index: 5;
  backdrop-filter: blur(4px);
}
.before-after .ba-label.before { left: 16px; }
.before-after .ba-label.after { right: 16px; }

/* ============================================================
   ADD-ON CARDS (multi-pet, digital pack, gift mode)
   ============================================================ */
.addons {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}
.addon-card {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 16px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  padding: 16px 18px;
  cursor: pointer;
  transition: all 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.addon-card:hover { border-color: var(--line-strong); }
/* P1 A2: visually hide the real checkbox but keep it focusable + clickable. */
.addon-checkbox-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}
.addon-card:has(.addon-checkbox-input:focus-visible) {
  outline: 2px solid var(--olive);
  outline-offset: 3px;
}
.addon-card.checked {
  border-color: var(--olive);
  background: #fdfbf5;
}
.addon-checkbox {
  width: 20px; height: 20px;
  border: 1.5px solid var(--line-strong);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: all 200ms ease;
}
.addon-card.checked .addon-checkbox {
  border-color: var(--olive);
  background: var(--olive);
}
.addon-checkbox::after {
  content: "✓";
  color: #fff;
  font-size: 14px;
  opacity: 0;
  transition: opacity 200ms ease;
}
.addon-card.checked .addon-checkbox::after { opacity: 1; }
.addon-meta { display: grid; gap: 2px; }
.addon-title {
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.2;
}
.addon-detail {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}
.addon-price {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
}
.addon-price .label {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive-dark);
  font-weight: 600;
  display: block;
  margin-bottom: 2px;
}

/* Gift mode expanded panel */
.gift-panel {
  display: none;
  background: var(--paper-2);
  padding: 18px;
  margin-top: -1px;
  border: 1px solid var(--olive);
  border-top: 0;
  display: grid;
  gap: 12px;
}
.addon-card.gift.checked + .gift-panel { display: grid; }
.gift-panel label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}
.gift-panel input,
.gift-panel textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: 14px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 2px;
  font-family: var(--sans);
  resize: vertical;
}
.gift-panel input:focus,
.gift-panel textarea:focus { outline: none; border-color: var(--olive); }
.gift-panel textarea { min-height: 80px; }

/* Total bar above CTA */
.total-bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 16px 0 4px;
  border-top: 1px solid var(--line);
  margin-top: 8px;
}
.total-label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.total-amount {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.total-amount::before {
  content: "€";
  font-size: 20px;
  vertical-align: super;
  margin-right: 2px;
  color: var(--muted);
}

/* ============================================================
   UGC WALL — customer photos on their walls
   ============================================================ */
.ugc-wall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.4vw, 16px);
}
.ugc-tile {
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: var(--shadow-xs);
  position: relative;
  cursor: pointer;
  transition: transform 320ms ease;
}
.ugc-tile:hover { transform: translateY(-3px); }
.ugc-tile img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.ugc-tile-caption {
  position: absolute;
  inset: auto 0 0 0;
  background: linear-gradient(to top, rgba(26, 24, 20, 0.9), transparent);
  color: var(--paper);
  padding: 24px 14px 12px;
  font-size: 12px;
  letter-spacing: 0.02em;
  opacity: 0;
  transition: opacity 240ms ease;
}
.ugc-tile:hover .ugc-tile-caption { opacity: 1; }
@media (max-width: 720px) { .ugc-wall { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   GIFT CARD PAGE
   ============================================================ */
.giftcard-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
  padding: clamp(40px, 6vw, 80px) 0;
}
.giftcard-display {
  background: linear-gradient(140deg, #1A1814 0%, #2B2823 100%);
  padding: clamp(36px, 5vw, 60px);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  color: var(--paper);
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.giftcard-display::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 50%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(199, 203, 179, 0.15), transparent 60%);
}
.giftcard-display-wordmark {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
}
.giftcard-display-wordmark .amp { color: var(--olive-pale); padding: 0 2px; }
.giftcard-display-amount {
  font-family: var(--serif);
  font-size: clamp(48px, 6vw, 72px);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1;
}
.giftcard-display-amount::before {
  content: "€";
  font-size: 0.5em;
  vertical-align: super;
  margin-right: 4px;
  color: var(--olive-pale);
}
.giftcard-display-detail {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olive-pale);
  font-weight: 500;
}
.giftcard-form { display: grid; gap: 20px; }
.giftcard-launch-notice {
  padding: 14px 18px;
  background: rgba(110, 122, 79, 0.08);
  border-left: 2px solid var(--olive);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
}
.giftcard-status { font-size: 13px; margin: 0; line-height: 1.55; }
.amount-picker { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 8px; }
.amount-btn {
  padding: 16px 12px;
  background: #fff;
  border: 1px solid var(--line);
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: all 200ms ease;
}
.amount-btn:hover { border-color: var(--line-strong); }
.amount-btn.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.amount-custom {
  padding: 0 16px;
  border: 1px solid var(--line);
  font-family: var(--serif);
  font-size: 16px;
  width: 100px;
}
.amount-custom:focus { outline: none; border-color: var(--ink); }
.giftcard-fields { display: grid; gap: 14px; }
.giftcard-fields label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}
.giftcard-fields input,
.giftcard-fields textarea {
  width: 100%;
  padding: 14px;
  font-size: 15px;
  font-family: var(--sans);
  border: 1px solid var(--line-strong);
  background: #fff;
  border-radius: 0;
}
.giftcard-fields input:focus,
.giftcard-fields textarea:focus { outline: none; border-color: var(--ink); }
@media (max-width: 880px) { .giftcard-hero { grid-template-columns: 1fr; } }

/* ============================================================
   PET NAME INPUT (below uploader)
   ============================================================ */
.pet-name-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  margin-top: -8px;
  box-shadow: var(--shadow-xs);
}
.pet-name-label {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-3);
  white-space: nowrap;
}
.pet-name-input {
  background: transparent;
  border: 0;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  padding: 6px 0;
  width: 100%;
  border-bottom: 1px solid var(--line);
  transition: border-color 200ms ease;
}
.pet-name-input:focus { outline: none; border-bottom-color: var(--olive); }
.pet-name-input::placeholder { color: var(--muted-2); font-style: italic; }

/* ============================================================
   STYLE QUIZ CTA + MODAL
   ============================================================ */
.quiz-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-top: -4px;
}
.quiz-cta button {
  background: none;
  border: 0;
  color: var(--olive-dark);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
}
.quiz-cta button:hover { color: var(--ink); }

.quiz-step { display: none; }
.quiz-step.active { display: grid; gap: 18px; }
.quiz-progress {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olive-dark);
  font-weight: 600;
}
.quiz-question {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.quiz-options {
  display: grid;
  gap: 10px;
}
.quiz-option {
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--line-strong);
  font-family: var(--sans);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: all 200ms ease;
  display: flex;
  align-items: center;
  gap: 12px;
}
.quiz-option:hover { border-color: var(--ink); background: #fdfbf5; }
.quiz-option-letter {
  font-family: var(--serif);
  font-style: italic;
  color: var(--olive);
  font-size: 14px;
}
.quiz-result { display: grid; gap: 16px; text-align: center; padding: 8px 0; }
.quiz-result-style {
  font-family: var(--serif);
  font-size: clamp(28px, 3.4vw, 36px);
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.quiz-result-style em { font-style: italic; color: var(--olive-dark); }
.quiz-result-reason {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--muted);
  font-style: italic;
  line-height: 1.55;
}
.quiz-result img {
  width: 100%;
  max-width: 240px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  margin: 0 auto;
  box-shadow: var(--shadow-md);
}

/* ============================================================
   SIZE SELECTOR (at preview / review stage)
   ============================================================ */
.size-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 4px;
}
.size-option {
  padding: 16px 12px;
  background: #fff;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: all 200ms ease;
  text-align: center;
  display: grid;
  gap: 4px;
  position: relative;
}
.size-option:hover { border-color: var(--line-strong); }
.size-option.active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.size-option.active .size-popular { color: var(--olive-pale); }
.size-name {
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: -0.015em;
  line-height: 1;
}
.size-dims {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.6;
}
.size-price {
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: -0.005em;
  margin-top: 4px;
}
.size-price::before {
  content: "€";
  font-size: 11px;
  vertical-align: super;
  margin-right: 1px;
  opacity: 0.7;
}
.size-popular {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--olive);
  color: var(--paper);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 3px 8px;
  font-weight: 600;
  border-radius: 999px;
  white-space: nowrap;
}

/* ============================================================
   SKELETON CARDS (style picker before previews arrive)
   ============================================================ */
.style-card.skeleton-card { cursor: progress; pointer-events: none; opacity: 0.85; }
.style-card.skeleton-card .style-card-frame img {
  background: linear-gradient(90deg, var(--paper-2) 0%, var(--paper-3) 50%, var(--paper-2) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  visibility: hidden;
}
.style-card.skeleton-card .style-card-frame {
  position: relative;
  overflow: hidden;
}
.style-card.skeleton-card .style-card-frame::after {
  content: "";
  position: absolute;
  inset: clamp(10px, 1.4vw, 16px);
  background: linear-gradient(90deg, var(--paper-2) 0%, var(--paper-3) 50%, var(--paper-2) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
}
.style-card.skeleton-card .style-card-pick { color: var(--muted-2); }
.style-card.ready { animation: cardIn 480ms cubic-bezier(0.22, 0.61, 0.36, 1); }
@keyframes cardIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   SECOND PET UPLOAD (inline when add-on toggled)
   ============================================================ */
.second-pet-panel {
  display: none;
  background: var(--paper-2);
  padding: 18px;
  margin-top: -1px;
  border: 1px solid var(--olive);
  border-top: 0;
}
.addon-card[data-addon="second-pet"].checked + .second-pet-panel { display: block; }
.second-pet-uploader {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  background: #fff;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 200ms ease;
}
.second-pet-uploader:hover { border-color: var(--olive); }
.second-pet-uploader.has-file { border-style: solid; border-color: var(--olive); background: #fdfbf5; }
.second-pet-uploader svg { color: var(--olive); flex-shrink: 0; }
.second-pet-uploader-text { display: grid; gap: 2px; flex: 1; }
.second-pet-uploader-text strong {
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.second-pet-uploader-text span { font-size: 12px; color: var(--muted); }
.second-pet-uploader-name {
  margin-top: 12px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
}
.second-pet-uploader-name label {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--muted);
}
.second-pet-uploader-name input {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  padding: 6px 0;
  font-family: var(--sans);
}
.second-pet-uploader-name input:focus { outline: none; border-bottom-color: var(--olive); }

/* ============================================================
   PET NAME — surfaced throughout
   ============================================================ */
.pet-name-display {
  font-family: var(--serif);
  font-style: italic;
  color: var(--olive-dark);
}

/* ============================================================
   404 PAGE
   ============================================================ */
.not-found {
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(80px, 12vw, 140px) var(--pad);
  gap: 28px;
}
.not-found-image {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: var(--shadow-md);
  filter: sepia(0.1) saturate(0.9);
}
.not-found-image img { width: 100%; height: 100%; object-fit: cover; }
.not-found h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 144;
  max-width: 18ch;
}
.not-found h1 em { font-style: italic; color: var(--olive-dark); }
.not-found p {
  font-family: var(--serif);
  font-size: clamp(17px, 1.7vw, 19px);
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 44ch;
}
.not-found-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.not-found-links a { color: var(--olive-dark); text-decoration: none; }
.not-found-links a:hover { color: var(--ink); }

/* ============================================================
   MOBILE-FIRST PASS — 90% of sales will be on mobile.
   This block overrides desktop styles below ~600px (iPhone widths).
   Optimised for one-thumb use, fast funnel completion, no zooming.
   ============================================================ */

/* iOS form-zoom defence: every input ≥16px text, every button taps clean */
input, textarea, select { font-size: 16px; }
button, a, label { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

@media (max-width: 600px) {
  :root {
    --pad: 18px;
    --col: 100%;
  }

  /* === HEADER / TOP-BARS === */
  .demo-banner { padding: 8px 14px; font-size: 10px; letter-spacing: 0.04em; }
  .demo-banner strong { letter-spacing: 0.1em; }
  .top-bar { padding: 8px 14px; font-size: 10px; letter-spacing: 0.1em; }
  .top-bar-content { gap: 14px; }
  .top-bar-content span:not(:first-child) { display: none; } /* keep just "Free worldwide shipping" on mobile */

  .topbar { padding-bottom: 18px; margin-bottom: 24px; }
  .wordmark { font-size: 22px; }
  .trust { display: none; }

  /* Stepper compresses */
  .stepper { gap: 0; font-size: 10px; letter-spacing: 0.08em; }
  .stepper-sep { width: 10px; margin: 0 6px; }

  /* === STAGE PADDING === */
  .stage { padding: 18px var(--pad) 96px; }  /* extra bottom = sticky-cta clearance */

  /* === HERO === */
  .hero { gap: 24px; padding-bottom: 32px; grid-template-columns: 1fr; }
  .hero-text { gap: 18px; padding-top: 4px; }
  .display { font-size: 40px; line-height: 1.0; }
  .lede { font-size: 16px; line-height: 1.5; }
  .eyebrow { font-size: 10px; letter-spacing: 0.18em; margin-bottom: 12px; }

  /* Hero image: smaller, positioned above text so it sells the transform first */
  .hero-image { order: -1; max-width: 280px; margin: 0 auto; }
  .hero-frame { padding: 10px; transform: none; }
  .hero-frame-mat { padding: 14px; }
  .hero-caption { font-size: 10px; margin-top: 12px; }
  .before-after .ba-handle { width: 36px; height: 36px; } /* fingerable */
  .before-after .ba-label { font-size: 9px; padding: 4px 8px; top: 10px; }
  .before-after .ba-label.before { left: 10px; }
  .before-after .ba-label.after { right: 10px; }

  /* === UPLOADER === */
  .uploader { padding: 22px 18px; }
  .uploader-inner { gap: 16px; }
  .uploader svg { width: 32px; height: 32px; }
  .uploader-text strong { font-size: 18px; }
  .uploader-text span { font-size: 13px; }

  /* Pet name row + quiz CTA */
  .pet-name-row { padding: 14px 16px; grid-template-columns: 1fr; gap: 6px; }
  .pet-name-label { font-size: 14px; }
  .pet-name-input { font-size: 16px; padding: 10px 0; }
  .quiz-cta { flex-direction: column; gap: 6px; align-items: flex-start; font-size: 13px; }
  .quiz-cta button { font-size: 13px; }

  /* Reassurance — stack vertically with visible dot prefix */
  .reassurance { flex-direction: column; gap: 8px; font-size: 13px; align-items: flex-start; }

  /* Photo tips — closed by default would be ideal but keeping open for discoverability */
  .photo-tips summary { padding: 14px 18px; }
  .tips-label { font-size: 15px; }
  .tip { padding: 16px 18px; }
  .tip h3 { font-size: 16px; }
  .tip p { font-size: 13px; }
  .tip-dont { padding: 14px 18px; }

  /* === SIX STYLES STRIP === */
  .examples { padding-top: 36px; margin-top: 32px; }
  .examples-heading h2 { font-size: 24px; }
  .examples-heading .note { font-size: 12px; }
  .example-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .example-grid figcaption { font-size: 10px; }

  /* === SECTIONS (process / lifestyle / reviews / story / faq / cta) === */
  .section { padding: 48px 0; }
  .section-header { gap: 10px; margin-bottom: 24px; }
  .section-header h2 { font-size: 32px; }
  .section-header p { font-size: 16px; }

  /* Process — 3 → 1 col, smaller images */
  .process-grid { gap: 24px; }
  .process-card { gap: 12px; }
  .process-card .process-image { aspect-ratio: 3 / 2; }
  .process-num { font-size: 40px; }
  .process-card h3 { font-size: 20px; }
  .process-card p { font-size: 14px; }

  /* Lifestyle — broken grid all 1-col */
  .lifestyle-grid { gap: 12px; }

  /* Reviews — 1 col with sane width */
  .reviews-grid { gap: 16px; max-width: 100%; }
  .review-card { padding: 20px; }
  .review-body { font-size: 15px; }

  /* Brand story — 1 col, image-on-top */
  .story { gap: 24px; }
  .story-image img { aspect-ratio: 5 / 4; }
  .story-text h2 { font-size: 30px; }
  .story-text p { font-size: 16px; }

  /* FAQ — taller summary for thumb tap */
  .faq-item summary { padding: 20px 4px; font-size: 16px; }
  .faq-item .faq-answer { font-size: 14px; padding: 0 4px 20px; }

  /* Big bottom CTA */
  .cta-section { padding: 60px var(--pad); margin: 48px calc(var(--pad) * -1) 0; }
  .cta-section h2 { font-size: 32px; margin-bottom: 24px; }
  .cta-section .cta-section-cta { padding: 18px 28px; font-size: 13px; }

  /* === FUNNEL: PICKER === */
  .picker-header h2 { font-size: 28px; }
  .style-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .style-card-frame { padding: 8px; }
  .style-card-name { font-size: 16px; }
  .style-card-pick { font-size: 9px; letter-spacing: 0.14em; }

  /* === FUNNEL: PREVIEW / REVIEW === */
  .preview { gap: 24px; grid-template-columns: 1fr; }
  .preview-frame { gap: 12px; }
  .frame-outer { padding: 16px; }
  .frame-mat { padding: 18px; }
  .frame-caption { font-size: 10px; }
  .room-mockup-toggle button { padding: 10px 16px; font-size: 11px; min-height: 40px; }

  .preview-cta { gap: 18px; padding-top: 4px; }
  .style-name { font-size: 28px; }
  .price-amount { font-size: 36px; }
  .price-detail { font-size: 13px; }

  /* Size selector — 3 buttons, slightly taller for tap */
  .size-picker { gap: 6px; }
  .size-option { padding: 14px 8px; min-height: 80px; }
  .size-name { font-size: 18px; }
  .size-dims { font-size: 9px; letter-spacing: 0.12em; }
  .size-price { font-size: 13px; }
  .size-popular { font-size: 8px; padding: 2px 6px; }

  /* Add-on cards — bigger tap area, simpler layout on mobile */
  .addons { gap: 10px; }
  .addon-card { grid-template-columns: 22px 1fr; padding: 14px 16px; gap: 12px; }
  .addon-title { font-size: 16px; }
  .addon-detail { font-size: 12px; }
  .addon-price {
    grid-column: 2;
    grid-row: 2;
    font-size: 14px;
    padding-top: 4px;
  }
  .addon-price .label { display: inline; margin-right: 6px; }
  .gift-panel { padding: 14px; gap: 10px; }
  .gift-panel input, .gift-panel textarea { font-size: 16px; padding: 12px; }

  .total-bar { padding: 14px 0 4px; }
  .total-amount { font-size: 28px; }

  /* === CTA BUTTONS === */
  .cta-btn { padding: 18px 22px; font-size: 14px; min-height: 56px; width: 100%; }
  .cta-btn:hover { padding-left: 22px; padding-right: 22px; } /* no morph on touch */
  .cta-btn-sm { padding: 14px 18px; font-size: 11px; min-height: 44px; }
  .ghost-btn-strong { min-height: 44px; padding: 12px 18px; }

  .checkout-trust { gap: 8px; font-size: 12px; padding-top: 18px; }

  /* === EXPRESS PAY === */
  .express-pay { gap: 10px; padding: 12px 0; }
  .express-pay-label { font-size: 10px; letter-spacing: 0.1em; }
  .express-pay-badge { height: 22px; padding: 4px 7px; font-size: 10px; }

  /* === STICKY CTA on mobile (always visible at bottom) === */
  .sticky-cta {
    padding: 10px 14px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
  .sticky-cta-meta strong { font-size: 14px; }
  .sticky-cta-meta span { font-size: 11px; }
  .sticky-cta-btn { padding: 13px 18px; font-size: 11px; min-height: 44px; }

  /* === FLOATING HELP === */
  .floating-help { bottom: 76px; right: 10px; }   /* sits cleanly above sticky CTA */
  .floating-help-btn { padding: 11px 15px; font-size: 10px; min-height: 40px; }
  .help-panel { bottom: 130px; left: 12px; right: 12px; padding: 18px; }
  .help-panel h3 { font-size: 18px; }

  /* === MODALS === */
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal {
    max-width: 100%;
    width: 100%;
    border-radius: 16px 16px 0 0;
    padding: 24px 20px 28px;
    max-height: 92vh;
    overflow-y: auto;
    animation: modalSlideUp 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  @keyframes modalSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
  .modal h3 { font-size: 24px; }
  .modal p { font-size: 14px; margin-bottom: 18px; }
  .modal-input { padding: 14px; font-size: 16px; }
  .modal-close { top: 12px; right: 12px; font-size: 28px; padding: 10px; }

  /* Quiz modal questions */
  .quiz-question { font-size: 20px; }
  .quiz-option { padding: 14px 16px; min-height: 52px; font-size: 14px; }

  /* === THANK YOU === */
  .thanks { padding-top: 36px; gap: 16px; }
  .hold-banner { grid-template-columns: 1fr; padding: 16px; gap: 14px; }
  .hold-title { font-size: 15px; }
  .hold-detail { font-size: 12px; }
  .download-card { grid-template-columns: 80px 1fr; gap: 16px; padding: 16px; }
  .download-thumb { width: 80px; height: 80px; }
  .download-title { font-size: 16px; }

  /* === SUBPAGE HEROES === */
  .subpage-hero { padding: 32px 0 24px; gap: 18px; }
  .subpage-hero h1 { font-size: 40px; }
  .subpage-image { margin: 32px calc(var(--pad) * -1); }
  .subpage-image img { aspect-ratio: 4 / 3; }

  /* === STYLES PAGE === */
  .style-feature { grid-template-columns: 1fr; gap: 24px; padding: 40px 0; }
  .style-feature:nth-child(even) .style-feature-image { order: 0; }
  .style-feature-text h2 { font-size: 32px; }
  .style-feature-text p { font-size: 15px; }

  /* === REVIEWS PAGE === */
  .ugc-wall { grid-template-columns: repeat(2, 1fr); gap: 8px; }

  /* === GIFT CARD PAGE === */
  .giftcard-hero { grid-template-columns: 1fr; gap: 28px; padding: 24px 0; }
  .giftcard-display { padding: 28px; aspect-ratio: 16/10; }
  .giftcard-display-amount { font-size: 48px; }
  .amount-picker { grid-template-columns: repeat(3, 1fr); }
  .amount-custom { grid-column: 1 / -1; width: 100%; padding: 14px; }
  .amount-btn { padding: 14px 8px; font-size: 16px; min-height: 52px; }

  /* === FOOTER === */
  .site-footer { padding: 20px var(--pad) 16px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .site-footer .made { font-size: 13px; }
  .site-footer-links { flex-wrap: wrap; gap: 10px 16px; font-size: 10px; }

  /* === 404 === */
  .not-found { padding: 48px var(--pad); gap: 20px; }
  .not-found h1 { font-size: 36px; }
  .not-found p { font-size: 16px; }
  .not-found-links { gap: 14px 20px; font-size: 11px; }
}

/* iPhone-SE-ish (≤375px): even tighter */
@media (max-width: 380px) {
  .display { font-size: 36px; }
  .hero-image { max-width: 240px; }
  .style-grid { gap: 10px; }
  .style-card-name { font-size: 14px; }
  .top-bar { font-size: 9px; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  margin-top: auto;
  padding: 32px var(--pad);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.06em;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.site-footer .made {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--ink-3);
}
.site-footer .made em { color: var(--olive-dark); font-style: italic; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--ink); }
.site-footer-links { display: flex; gap: 20px; text-transform: uppercase; font-weight: 500; }

/* ============================================================
   2026-05-21 — Conversion + a11y additions
   "Best value" savings badge, pet-name display,
   demoted modal-skip, global focus-visible.
   ============================================================ */

.size-savings {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink, #1A1814);
  color: var(--paper, #fdfaf3);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 3px 8px;
  font-weight: 600;
  border-radius: 999px;
  white-space: nowrap;
}
.size-option.active .size-savings { background: var(--olive); color: var(--paper); }

/* Pet-name inline display (across CTA, picker, preview) */
.pet-name-display {
  font-family: var(--serif);
  font-style: italic;
  color: inherit;
}

/* Trust row: balance the four entries on desktop, stack on mobile */
.reassurance.trust-row { flex-wrap: wrap; gap: 14px 22px; }
.reassurance.trust-row span:first-child { color: var(--olive-dark, #5a6b3d); font-weight: 600; }

/* Demote modal skip so it's clearly secondary (was visually equal to primary) */
.modal-skip {
  font-size: 11px;
  letter-spacing: 0.06em;
  opacity: 0.55;
  text-decoration: none;
  border: none;
  background: none;
  padding: 6px 0;
  margin-top: 6px;
  cursor: pointer;
  color: var(--muted, #999);
}
.modal-skip:hover { opacity: 0.85; text-decoration: none; color: var(--ink); }

/* Global keyboard-focus ring — WCAG 2.4.7 (Focus Visible). */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--olive, #5a6b3d);
  outline-offset: 3px;
  border-radius: 4px;
}
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
label.uploader:focus-visible,
.style-card:focus-visible,
.size-option:focus-visible {
  outline: 2px solid var(--ink, #1A1814);
  outline-offset: 3px;
}

/* Re-upload prompt state for "Show 3 more styles" */
#more-styles-btn[data-needs-reupload="1"] {
  border-color: var(--olive-dark, #5a6b3d);
  color: var(--olive-dark, #5a6b3d);
}

/* Mobile tap-target floor */
@media (max-width: 600px) {
  button, [role="button"], .ghost-btn, .ghost-btn-strong {
    min-height: 44px;
  }
}

/* ============================================================
   2026-05-21 v2 — Premium polish + autonomy pass
   Picker recommendation note, tier-card hover/active polish,
   sticky CTA refinement, top-bar tightening, motion principles,
   memorial register, smooth page-feel.
   ============================================================ */

/* Reduce-motion respect — every animation falls back to instant */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Sticky CTA polish (mobile-only by design) ──────────── */
.sticky-cta {
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background: rgba(253, 250, 243, 0.88);
  border-top: 1px solid rgba(26, 24, 20, 0.08);
  box-shadow: 0 -8px 30px rgba(26, 24, 20, 0.06);
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.sticky-cta:not(.visible) { transform: translateY(120%); }
.sticky-cta-btn {
  transition: transform 180ms ease, background 180ms ease;
}
.sticky-cta-btn:active { transform: scale(0.97); }

/* ─── Tier-card refinement: subtle lift on hover, tightened active state ─── */
.size-option {
  transition: border-color 220ms ease, background 220ms ease, transform 200ms ease, box-shadow 220ms ease;
}
.size-option:hover:not(.active) {
  border-color: var(--ink, #1A1814);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -10px rgba(26, 24, 20, 0.18);
}
.size-option:active { transform: translateY(0); }

/* ─── Style-card hover: subtle frame lift + caption underline ─── */
.style-card {
  transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.style-card.ready:hover {
  transform: translateY(-2px);
}
.style-card.ready:hover .style-card-frame {
  box-shadow: 0 24px 50px -22px rgba(26, 24, 20, 0.32);
}
.style-card-frame {
  transition: box-shadow 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ─── "The one we'd start with" note (quiz-led recommendation) ─── */
.style-card.recommended {
  position: relative;
}
.style-card.recommended .style-card-frame {
  box-shadow: 0 0 0 2px var(--olive, #5a6b3d), 0 16px 36px -18px rgba(26, 24, 20, 0.22);
}
.style-card-note {
  display: block;
  margin-top: 6px;
  font-family: var(--serif, "Fraunces", serif);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.005em;
  color: var(--olive-dark, #4a5933);
  text-align: center;
}

/* ─── Top bar — quieter on mobile, calmer on desktop ─── */
.top-bar {
  background: var(--ink, #1A1814);
  color: var(--paper-2, #f4ede0);
}
.top-bar-content {
  font-family: var(--sans, "Inter", sans-serif);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
}
.top-bar-content span {
  position: relative;
  padding: 0 18px;
}
.top-bar-content span + span::before {
  content: "·";
  position: absolute;
  left: -2px;
  opacity: 0.4;
}

/* ─── Uploader: stronger affordance, paper-like hover ─── */
.uploader {
  transition: background 240ms ease, border-color 240ms ease, transform 200ms ease;
}
.uploader:hover {
  background: var(--paper-2, #f4ede0);
  border-color: var(--ink, #1A1814);
}
.uploader:active { transform: translateY(0.5px); }
.uploader.drag {
  background: var(--olive-pale, #cfd7b8);
  border-style: solid;
}

/* ─── Smooth page transitions (modern browsers) ─── */
@supports (view-transition-name: root) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 420ms;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  }
}

/* ─── Stage transitions — paper-feel slide-in ─── */
.stage:not(.hidden) {
  animation: stageEnter 540ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes stageEnter {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ─── Lifestyle grid: subtle hover lift ─── */
.lifestyle-item {
  overflow: hidden;
  display: block;
}
.lifestyle-item img {
  transition: transform 540ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lifestyle-item:hover img {
  transform: scale(1.03);
}

/* ─── CTA button refinement ─── */
.cta-btn, .cta-section-cta {
  transition: transform 180ms ease, background 240ms ease, box-shadow 280ms ease;
}
.cta-btn:hover, .cta-section-cta:hover {
  box-shadow: 0 14px 30px -14px rgba(26, 24, 20, 0.28);
  transform: translateY(-1px);
}
.cta-btn:active, .cta-section-cta:active {
  transform: translateY(0);
}

/* ─── Trust row tightening ─── */
.reassurance.trust-row {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}
.reassurance.trust-row strong {
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink, #1A1814);
}

/* ─── Memorial register — soft warm clay accent ─── */
[data-intent="memorial"] .reassurance.trust-row span:first-child { color: var(--ink-3, #4a4036); }
[data-intent="memorial"] .picker-header .eyebrow { color: var(--ink-3, #4a4036); letter-spacing: 0.18em; }

/* ─── Footer link refinement ─── */
.site-footer-links a {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 11px;
  transition: color 200ms ease;
}
.site-footer-links a:hover { color: var(--ink, #1A1814); }

/* ─── Mobile-first tightening: full-bleed hero, calmer padding ─── */
@media (max-width: 600px) {
  .hero { gap: 28px; }
  .display { font-size: clamp(32px, 9vw, 44px); line-height: 1.04; }
  .lede { font-size: 15px; line-height: 1.5; }
  .reassurance.trust-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 18px;
    font-size: 10px;
    letter-spacing: 0.08em;
  }
  .reassurance.trust-row span {
    white-space: nowrap;
  }
  .top-bar-content { font-size: 9px; letter-spacing: 0.14em; padding: 6px 12px; }
  .top-bar-content span { padding: 0 8px; }
  .sticky-cta {
    padding: 10px 14px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
  .sticky-cta-meta strong { font-size: 13px; }
  .sticky-cta-meta span { font-size: 11px; }
  .style-card-note { font-size: 11px; }
  /* Tier cards stack tighter on narrow phones */
  .size-picker { gap: 8px; }
  .size-option { padding: 12px 8px; min-height: 88px; }
  .size-name { font-size: 17px; }
  .size-dims { font-size: 9px; }
  .size-popular, .size-savings { font-size: 8px; }
}

/* ─── Tablet refinements ─── */
@media (min-width: 601px) and (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .lifestyle-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   2026-05-21 v3 — Contextual styles strip, iPhone mockup,
   painterly generating-stage overlay
   ============================================================ */

/* ─── Contextual styles strip (homepage + /cats + /dogs) ─── */
/* 3 cols × 2 rows on desktop reads much better than 6-across slivers —
   faces breathe, each style gets visual weight, the strip becomes a
   considered gallery instead of a thumbnail row. */
.example-grid.styles-contextual {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.example-grid.styles-contextual figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--paper-2, #f4ede0);
  border-radius: 4px;
}
.example-grid.styles-contextual figure a {
  display: block;
  overflow: hidden;
}
.example-grid.styles-contextual figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 30%; /* bias to the face (top third of portrait) */
  display: block;
  transition: transform 720ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.example-grid.styles-contextual figure:hover img {
  transform: scale(1.05);
}
.example-grid.styles-contextual figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 14px 14px;
  background: linear-gradient(to top, rgba(26, 24, 20, 0.78) 0%, rgba(26, 24, 20, 0.0) 100%);
  color: var(--paper, #fdfaf3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--sans, "Inter", sans-serif);
  pointer-events: none;
}
.example-grid.styles-contextual figcaption strong {
  font-family: var(--serif, "Fraunces", serif);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.005em;
  line-height: 1.1;
}
.example-grid.styles-contextual figcaption span {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.78;
  font-weight: 500;
}

@media (max-width: 900px) {
  .example-grid.styles-contextual { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 520px) {
  .example-grid.styles-contextual { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .example-grid.styles-contextual figcaption strong { font-size: 15px; }
  .example-grid.styles-contextual figcaption span { font-size: 9px; }
  .example-grid.styles-contextual figure img { aspect-ratio: 4 / 5; }
}

/* ─── iPhone mockup (preview stage, digital-first) ─── */
.iphone-mockup {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #efe7d6 0%, #e3d9c4 100%);
}
.iphone-mockup.active { display: flex; }
.iphone-frame {
  position: relative;
  width: clamp(180px, 56%, 260px);
  aspect-ratio: 9 / 19.5;
  background: #1A1814;
  border-radius: 38px;
  padding: 10px;
  box-shadow:
    0 30px 60px -20px rgba(26, 24, 20, 0.45),
    0 8px 18px -10px rgba(26, 24, 20, 0.25),
    inset 0 0 0 1.5px #2a2620,
    inset 0 0 0 4px #0d0c0a;
}
.iphone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 28px;
  background: #000;
}
.iphone-screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Dynamic-island notch */
.iphone-notch {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 86px;
  height: 24px;
  background: #000;
  border-radius: 999px;
  z-index: 3;
}
/* Lock-screen overlay (time + date) */
.iphone-time {
  position: absolute;
  top: 56px;
  left: 0;
  right: 0;
  color: #fff;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
  font-weight: 200;
  font-size: 56px;
  letter-spacing: -0.02em;
  line-height: 1;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.18);
  z-index: 2;
}
.iphone-date {
  position: absolute;
  top: 36px;
  left: 0;
  right: 0;
  color: #fff;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.22);
  z-index: 2;
}
/* Status bar (mini) */
.iphone-status {
  position: absolute;
  top: 12px;
  left: 24px;
  right: 24px;
  display: flex;
  justify-content: space-between;
  font-family: -apple-system, "SF Pro Display", "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  z-index: 2;
  letter-spacing: 0.02em;
}
/* Glass reflection */
.iphone-glare {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 30%);
  pointer-events: none;
  border-radius: 28px;
  z-index: 4;
}

/* ─── Generating-stage scanning brush overlay ─── */
.paint-canvas .paint-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}
.paint-canvas:not(.has-preview) .paint-scan::before {
  content: "";
  position: absolute;
  top: -10%;
  left: -40%;
  width: 60%;
  height: 120%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(90, 107, 61, 0.0) 30%,
    rgba(90, 107, 61, 0.10) 48%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(90, 107, 61, 0.10) 52%,
    rgba(90, 107, 61, 0.0) 70%,
    transparent 100%
  );
  filter: blur(2px);
  animation: paintScan 2400ms cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
@keyframes paintScan {
  0%   { transform: translateX(0) skewX(-6deg); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(280%) skewX(-6deg); opacity: 0; }
}
/* Subtle olive-ink stipple while waiting */
.paint-canvas:not(.has-preview) .paint-canvas-img {
  filter: grayscale(0.7) brightness(1.05) contrast(1.02);
}
@media (prefers-reduced-motion: reduce) {
  .paint-canvas:not(.has-preview) .paint-scan::before {
    animation: none;
    opacity: 0.18;
  }
}

/* ─── More-styles loading state (3 pulsing dots + cycling narrative) ─── */
.more-styles-loading {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 26px;
  padding: 22px 0;
}
.more-loading-dots {
  display: flex;
  gap: 8px;
}
.more-loading-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--olive, #5a6b3d);
  animation: dotPulse 1400ms cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.more-loading-dots span:nth-child(2) { animation-delay: 200ms; }
.more-loading-dots span:nth-child(3) { animation-delay: 400ms; }
@keyframes dotPulse {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50%      { opacity: 1;    transform: scale(1.15); }
}
.more-loading-text {
  font-family: var(--serif, "Fraunces", serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-3, #4a4036);
  letter-spacing: 0;
  transition: opacity 220ms ease;
}

/* ─── Top-bar promo support (KV-driven) ─── */
.top-bar-content.promo {
  background: var(--olive-dark, #4a5933);
  color: var(--paper, #fdfaf3);
}

/* ============================================================
   2026-05-21 v4 — Cat balance + Pet Morph inspo
   Funnel-step indicator, review summary + histogram, verified
   badge, examples-sub, discount-code UI, promo banner.
   ============================================================ */

/* ─── 3-step funnel indicator (Pet Morph inspo) ─── */
.funnel-steps {
  list-style: none;
  margin: 0 0 16px;
  padding: 14px 16px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--paper-2, #f4ede0);
  border-radius: 999px;
  align-items: center;
  font-family: var(--sans, "Inter", sans-serif);
  font-size: 12px;
  letter-spacing: 0.04em;
  width: fit-content;
  max-width: 100%;
}
.funnel-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted, #888);
  white-space: nowrap;
}
.funnel-step + .funnel-step::before {
  content: "›";
  color: var(--muted, #888);
  margin-right: 8px;
  font-size: 16px;
  line-height: 1;
}
.funnel-step.active { color: var(--ink, #1A1814); font-weight: 600; }
.funnel-step-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(26, 24, 20, 0.12);
  color: var(--ink, #1A1814);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  flex-shrink: 0;
}
.funnel-step.active .funnel-step-num {
  background: var(--olive, #5a6b3d);
  color: var(--paper, #fdfaf3);
}
/* On narrow widths the inline pill wraps mid-row and the chevron separator
   hangs at the start of the new line. Stack vertically instead — cleaner
   vertical narrative, calm rounded-rect, no orphan chevrons. */
@media (max-width: 720px) {
  .funnel-steps {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 12px;
    width: 100%;
    box-sizing: border-box;
  }
  .funnel-step + .funnel-step::before { display: none; }
  .funnel-step { width: 100%; }
  .funnel-step-num { width: 18px; height: 18px; font-size: 9.5px; }
}

/* ─── Examples sub (every-kind-of-pet microline) ─── */
.examples-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.examples-sub {
  font-family: var(--serif, "Fraunces", serif);
  font-style: italic;
  color: var(--ink-3, #4a4036);
  font-size: 15px;
  margin-top: 4px;
  letter-spacing: 0;
}

/* ─── Review summary (score + histogram) ─── */
.review-summary {
  display: grid;
  grid-template-columns: minmax(180px, auto) 1fr;
  gap: 32px;
  align-items: center;
  margin-top: 22px;
  padding: 20px 0;
  border-top: 1px solid var(--line, rgba(26, 24, 20, 0.1));
}
.review-summary-score {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.review-summary-stars {
  color: var(--olive-dark, #4a5933);
  font-size: 18px;
  letter-spacing: 0.1em;
}
.review-summary-score strong {
  font-family: var(--serif, "Fraunces", serif);
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 500;
}
.review-summary-count {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted, #888);
}
.review-histogram {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 360px;
}
.review-histogram li {
  display: grid;
  grid-template-columns: 24px 1fr 38px;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  color: var(--ink-3, #4a4036);
}
.rh-label { font-weight: 500; }
.rh-bar {
  height: 6px;
  background: rgba(26, 24, 20, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.rh-fill {
  height: 100%;
  background: var(--olive, #5a6b3d);
  border-radius: 999px;
  transition: width 800ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.rh-pct { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted, #888); font-size: 11px; }
@media (max-width: 600px) {
  .review-summary { grid-template-columns: 1fr; gap: 14px; }
  .review-summary-score strong { font-size: 36px; }
}

/* ─── Verified-buyer badge on reviews ─── */
.verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(90, 107, 61, 0.12);
  color: var(--olive-dark, #4a5933);
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
  white-space: nowrap;
}

/* ─── Discount code (above the total bar) ─── */
.discount-row {
  margin: 14px 0 10px;
}
.discount-toggle {
  background: transparent;
  border: none;
  padding: 6px 0;
  color: var(--ink-3, #4a4036);
  font-family: var(--sans, "Inter", sans-serif);
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px dashed rgba(26, 24, 20, 0.25);
  transition: color 200ms ease, border-color 200ms ease;
}
.discount-toggle:hover { color: var(--ink, #1A1814); border-bottom-color: var(--ink, #1A1814); }
.discount-toggle-arrow {
  font-size: 14px;
  font-weight: 500;
  width: 14px;
  text-align: center;
}
.discount-input-wrap {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: stretch;
}
.discount-input {
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--line-strong, rgba(26, 24, 20, 0.18));
  background: #fff;
  border-radius: 2px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--ink, #1A1814);
}
.discount-input:focus { outline: 2px solid var(--olive, #5a6b3d); outline-offset: 1px; border-color: var(--olive, #5a6b3d); }
.discount-apply {
  background: var(--ink, #1A1814);
  color: var(--paper, #fdfaf3);
  border: none;
  padding: 0 18px;
  font-family: var(--sans, "Inter", sans-serif);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  border-radius: 2px;
  transition: opacity 180ms ease;
}
.discount-apply:hover { opacity: 0.88; }
.discount-status {
  grid-column: 1 / -1;
  font-size: 11px;
  margin-top: 4px;
  letter-spacing: 0.02em;
}
.discount-status.ok { color: var(--olive-dark, #4a5933); }
.discount-status.error { color: #8a3a2a; }

/* ─── Top-bar promo banner (when window.OLEA_PROMO is active) ─── */
.top-bar-content.promo {
  background: var(--olive-dark, #4a5933);
  color: var(--paper, #fdfaf3);
  padding: 8px 16px;
  text-align: center;
}
.top-bar-content.promo .promo-banner-text {
  display: inline;
  letter-spacing: 0.1em;
  font-weight: 500;
}
.top-bar-content.promo .promo-banner-text strong {
  background: rgba(253, 250, 243, 0.15);
  padding: 2px 8px;
  border-radius: 2px;
  margin-left: 6px;
  letter-spacing: 0.16em;
}

/* ============================================================
   2026-05-21 v5 — Meta-Ads species landers (/cats /dogs)
   Slim header, hero rating, "back to all pets" link
   ============================================================ */

/* ─── Slim header (no nav — reduces escape routes on paid traffic) ─── */
.topbar.topbar-slim {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line, rgba(26, 24, 20, 0.08));
}
.topbar-slim .wordmark { font-size: 22px; }
.topbar-back {
  font-family: var(--sans, "Inter", sans-serif);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3, #4a4036);
  text-decoration: none;
  font-weight: 500;
  transition: color 200ms ease;
}
.topbar-back:hover { color: var(--ink, #1A1814); }

/* ─── Hero rating (above-fold trust signal for Meta traffic) ─── */
.hero-rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--paper-2, #f4ede0);
  border-radius: 999px;
  font-family: var(--sans, "Inter", sans-serif);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ink-3, #4a4036);
  width: fit-content;
  margin: -4px 0 4px;
}
.hero-rating-stars { color: var(--olive-dark, #4a5933); font-size: 13px; letter-spacing: 0.04em; }
.hero-rating strong {
  font-family: var(--serif, "Fraunces", serif);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink, #1A1814);
}
.hero-rating-count { color: var(--muted, #888); font-size: 11px; letter-spacing: 0.06em; }

@media (max-width: 600px) {
  .hero-rating { font-size: 11px; padding: 7px 12px; gap: 6px; }
  .hero-rating strong { font-size: 14px; }
  .hero-rating-count { font-size: 10px; }
  .topbar-back { font-size: 10px; }
}

/* ─── Examples-heading layout fix (eyebrow + sub align with link) ─── */
.examples-heading > div { display: flex; flex-direction: column; gap: 4px; }

/* ============================================================
   2026-05-21 v6 — Audit fixes (mobile P0 + a11y + perf)
   Driven by parallel SEO + Mobile + Perf + A11y agent audits.
   ============================================================ */

/* ─── 1. iOS safe-area: sticky CTA must clear the home indicator ─── */
.sticky-cta {
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
.sticky-cta-btn {
  margin-bottom: max(0px, env(safe-area-inset-bottom));
}
/* Pad the bottom of the last stage so sticky CTA never overlaps CTA */
.stage[data-stage="hero"],
.stage[data-stage="preview"] {
  padding-bottom: calc(110px + env(safe-area-inset-bottom));
}

/* ─── 2. Funnel-steps mobile: keep horizontal w/ smaller text, no orphans ─── */
@media (max-width: 720px) {
  .funnel-steps {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    padding: 10px 14px;
    border-radius: 999px;
    font-size: 11px;
    width: 100%;
    box-sizing: border-box;
    justify-content: flex-start;
  }
  .funnel-steps::-webkit-scrollbar { display: none; }
  .funnel-step {
    flex-shrink: 0;
    width: auto;
    gap: 6px;
  }
  .funnel-step + .funnel-step::before {
    content: "›";
    display: inline-block;
    margin: 0 4px;
    color: var(--muted, #888);
    font-size: 14px;
    line-height: 1;
  }
  .funnel-step-num { width: 18px; height: 18px; font-size: 9.5px; }
  .funnel-step .funnel-step-label { letter-spacing: 0.02em; }
}
@media (max-width: 420px) {
  /* On really narrow screens, hide labels for inactive steps — just numbers + chevrons */
  .funnel-step:not(.active) .funnel-step-label { display: none; }
  .funnel-steps { padding: 9px 12px; }
}

/* ─── 3. Discount input: 16px to prevent iOS auto-zoom on focus ─── */
.discount-input {
  font-size: 16px; /* WAS 13px — caused iOS auto-zoom on focus */
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Visual code-style retained via letter-spacing + uppercase */

/* ─── 4. Tap-target floors: 44×44 minimum (WCAG 2.5.5 / Apple HIG) ─── */
@media (max-width: 720px) {
  .room-mockup-toggle button { min-height: 44px; padding: 0 14px; }
  .discount-toggle { min-height: 44px; padding: 12px 0; }
  .floating-help-btn { min-height: 44px; min-width: 44px; }
  .modal-close { min-height: 44px; min-width: 44px; padding: 8px; }
  .ba-handle { width: 44px; height: 44px; }
}

/* ─── 5. Contrast: tighten muted text to pass WCAG AA (4.5:1 on paper) ─── */
:root {
  --muted: #5e5949;     /* WAS #888 / #7C7666 (3.7:1) → now 4.7:1 on paper */
  --muted-2: #6e6857;   /* WAS #9A9484 (2.6:1) → now 4.5:1 */
  --ink-3: #3e372e;     /* slightly darker for 7+:1 on small text */
}
/* Size-dims and size-popular were 0.6 opacity / 9px white-on-olive — failing AA */
.size-option .size-dims {
  opacity: 1;
  color: var(--ink-3);
  font-size: 10.5px;
}
.size-option.active .size-dims { opacity: 0.85; color: var(--paper); }
.size-popular {
  background: var(--olive-dark, #4a5933);
  color: var(--paper, #fdfaf3);
  font-weight: 600;
}

/* ─── 6. Make demo banner less intrusive on mobile (was eating 32px of fold) ─── */
@media (max-width: 600px) {
  .demo-banner {
    font-size: 10px;
    letter-spacing: 0.06em;
    padding: 4px 12px;
    text-align: center;
  }
  .demo-banner strong { font-size: 10px; }
}

/* ─── 7. Visually-hidden helper (used for skip links + new aria-live region) ─── */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── 8. Skip link (a11y bypass blocks WCAG 2.4.1) ─── */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--ink, #1A1814);
  color: var(--paper, #fdfaf3);
  padding: 12px 16px;
  z-index: 9999;
  font-family: var(--sans, "Inter", sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 200ms ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--olive, #5a6b3d);
  outline-offset: 0;
}

/* ============================================================
   2026-05-21 v7 — MOBILE FUNNEL P0 FIXES
   Surfaced by Claude Preview walk at iPhone SE (375x667) +
   iPhone 14 Pro (393x852).
   ============================================================ */

/* ─── HERO ORDER on mobile — text + uploader first, image second.
   Was image-first → uploader sat ~850px down on iPhone SE = killed conversion. */
@media (max-width: 920px) {
  .hero {
    /* The grid is already 1fr on this breakpoint. We just need order. */
    grid-auto-flow: row;
  }
  .hero-text { order: 1; }
  .hero-image { order: 2; margin-top: 24px; }
}
@media (max-width: 720px) {
  /* Hero image on mobile — present it as a considered art object, not a
     shrunken thumbnail. Near-full-width with breathing room + paper-edge
     shadow that lifts it off the page like a real print. */
  .hero-image {
    max-width: none;
    margin: 28px 0 8px;
    padding: 0;
  }
  .before-after {
    aspect-ratio: 4 / 5;
    border-radius: 8px;
    overflow: hidden;
    box-shadow:
      0 1px 0 rgba(26, 24, 20, 0.04),
      0 24px 50px -16px rgba(26, 24, 20, 0.28),
      0 8px 18px -8px rgba(26, 24, 20, 0.16);
  }
  .ba-label {
    font-size: 10px;
    padding: 6px 10px;
    letter-spacing: 0.14em;
  }
  .ba-handle {
    width: 48px;
    height: 48px;
    box-shadow: 0 4px 14px rgba(26, 24, 20, 0.28);
  }
  /* Compact top chrome — demo banner + top-bar combined was eating 79px */
  .demo-banner { font-size: 10px; padding: 4px 12px; line-height: 1.35; }
  .top-bar-content { padding: 6px 12px; font-size: 9.5px; letter-spacing: 0.12em; }
  .top-bar-content span { padding: 0 6px; }
  /* Slim header */
  header.topbar { padding-top: 14px; padding-bottom: 14px; }
  .wordmark { font-size: 20px !important; }
  /* Bring eyebrow up — was sitting too far below the top */
  .eyebrow { font-size: 10px; letter-spacing: 0.16em; }
}

/* ─── PREVIEW FRAME — must contain absolutely-positioned mockups.
   The .iphone-mockup uses `position: absolute; inset: 0` so it needs a
   positioned parent with real height. Without this it was stretching to
   the viewport and rendering empty/invisible on mobile. */
.preview-frame {
  position: relative;
  min-height: 0;
}
.preview-frame .room-mockup-toggle,
.preview-frame .frame-caption {
  position: relative;
  z-index: 2;
}
/* The mockup-stage wrapper: every mockup (frame/room/iphone) shares this slot */
.preview-frame > .frame-outer,
.preview-frame > .room-mockup,
.preview-frame > .iphone-mockup {
  width: 100%;
  max-width: 460px;
  aspect-ratio: 3 / 4;
  margin: 0 auto;
}
/* iPhone mockup now uses normal flow (not absolute) so it sits in the
   3:4 slot reliably across all viewports */
.iphone-mockup {
  position: relative;
  inset: auto;
  display: none;
  align-items: center;
  justify-content: center;
}
.iphone-mockup.active { display: flex; }

/* Mobile-specific iPhone frame: tighter, scales with viewport */
@media (max-width: 720px) {
  .preview-frame > .frame-outer,
  .preview-frame > .room-mockup,
  .preview-frame > .iphone-mockup {
    max-width: 86vw;
    aspect-ratio: 3 / 4;
  }
  .iphone-frame {
    width: clamp(180px, 60vw, 240px);
    aspect-ratio: 9 / 19.5;
  }
  .iphone-time { font-size: clamp(36px, 13vw, 52px); }
  .iphone-date { font-size: 12px; }
  .iphone-status { font-size: 10px; }
  /* Tighter mockup-toggle row */
  .room-mockup-toggle { gap: 4px; padding: 4px; }
  .room-mockup-toggle button { font-size: 11px; padding: 0 10px; min-height: 40px; }
}

/* ─── PICKER GRID — orphan 3rd card. Single column on narrow phones. */
@media (max-width: 480px) {
  .style-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .style-card { width: 100%; }
  .style-card-frame img { aspect-ratio: 4 / 3; }
}

/* ─── Make the uploader more thumb-friendly on narrow mobile ─── */
@media (max-width: 420px) {
  .uploader { padding: 16px 14px; min-height: 84px; }
  .uploader-inner { gap: 12px; }
  .uploader-text strong { font-size: 14px; }
  .uploader-text span { font-size: 11px; }
}

/* ─── Ensure sticky CTA sits ABOVE any z-index stacking from hero ─── */
.sticky-cta { z-index: 100; }

/* ─── Picker/Preview header overflow on mobile.
   The .stepper "01 Photo · 02 Style · 03 Review · 04 Order" overflows the
   wordmark + back-button on narrow mobile. The H1 in each stage already
   tells the user where they are — hide the stepper on mobile. */
@media (max-width: 720px) {
  .topbar .stepper { display: none; }
  /* Preview/picker headers become a clean wordmark + back-button row */
  section[data-stage="picker"] .topbar,
  section[data-stage="preview"] .topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    padding-bottom: 16px;
  }
  section[data-stage="picker"] .ghost-btn,
  section[data-stage="preview"] .ghost-btn {
    font-size: 11px;
    letter-spacing: 0.08em;
    padding: 10px 12px;
    min-height: 44px;
  }
}

/* ─── Tighten welcome-back banner on mobile (was eating significant fold) ─── */
@media (max-width: 720px) {
  .welcome-back {
    padding: 14px 16px;
    gap: 10px;
  }
  .welcome-back-text strong { font-size: 14px; }
  .welcome-back-text { font-size: 13px; }
  .welcome-back-actions button { font-size: 13px; padding: 6px 0; }
}

/* ============================================================
   2026-05-21 v8 — PREMIUM EXPERIENCE
   Swift animations · bigger type · loading screens · UGC gallery
   ============================================================ */

/* ─── UGC GALLERY (homepage + landers) ─── */
.ugc-section .section-header { text-align: left; max-width: 720px; }
.ugc-section .examples-sub { margin-top: 6px; }
.ugc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 260px;
  gap: 14px;
  margin-top: 32px;
}
.ugc-card {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--paper-2, #f4ede0);
  border-radius: 4px;
  transform: rotate(0deg);
  transition: transform 540ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 540ms ease;
  box-shadow: 0 1px 0 rgba(26, 24, 20, 0.04);
}
.ugc-card.ugc-tall { grid-row: span 2; }
.ugc-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 720ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ugc-card:hover {
  transform: translateY(-3px) rotate(-0.4deg);
  box-shadow: 0 24px 50px -22px rgba(26, 24, 20, 0.32);
}
.ugc-card:hover img { transform: scale(1.04); }
.ugc-card figcaption {
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  padding: 8px 12px;
  background: rgba(253, 250, 243, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
  font-family: var(--serif, "Fraunces", serif);
  font-size: 13px;
  font-style: italic;
  color: var(--ink, #1A1814);
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  box-shadow: 0 4px 14px -8px rgba(26, 24, 20, 0.25);
}
.ugc-card figcaption span {
  font-family: var(--sans, "Inter", sans-serif);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ink-3, #4a4036);
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
}
@media (max-width: 900px) {
  /* Tablet: 3-col, taller rows so the 1:1 source photos aren't squashed */
  .ugc-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; gap: 12px; }
  .ugc-card { aspect-ratio: 1 / 1; }
  .ugc-card.ugc-tall { aspect-ratio: 1 / 2; grid-row: span 2; }
}
@media (max-width: 600px) {
  /* Mobile: source photos are 1:1 squares — let each cell render at 1:1
     instead of forcing a 180px fixed height that squashed them. */
  .ugc-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; gap: 10px; }
  .ugc-card { aspect-ratio: 1 / 1; }
  .ugc-card.ugc-tall { aspect-ratio: 1 / 2; grid-row: span 2; }
  .ugc-card figcaption {
    font-size: 11px;
    padding: 6px 10px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    /* Mobile captions stack name below quote for legibility */
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .ugc-card figcaption span { font-size: 9px; }
}

/* ─── PURCHASE-MOMENT UGC strip (preview stage, right above CTA) ─── */
.purchase-ugc {
  margin: 18px 0 16px;
  padding: 16px;
  background: var(--paper-2, #f4ede0);
  border-radius: 6px;
}
.purchase-ugc-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.purchase-ugc-label::before,
.purchase-ugc-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(26, 24, 20, 0.12);
}
.purchase-ugc-label span {
  font-family: var(--sans, "Inter", sans-serif);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--olive-dark, #4a5933);
}
.purchase-ugc-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.purchase-ugc-thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  background: var(--paper, #fdfaf3);
  transition: transform 320ms ease;
}
.purchase-ugc-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.purchase-ugc-thumb:hover { transform: scale(1.06); z-index: 2; box-shadow: 0 10px 24px -10px rgba(26, 24, 20, 0.28); }
.purchase-ugc-caption {
  margin-top: 10px;
  text-align: center;
  font-family: var(--serif, "Fraunces", serif);
  font-style: italic;
  font-size: 12px;
  color: var(--ink-3, #4a4036);
}
.purchase-ugc-meta {
  font-family: var(--sans, "Inter", sans-serif);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--muted, #5e5949);
  margin-left: 4px;
}
@media (max-width: 720px) {
  .purchase-ugc { padding: 12px; margin: 14px 0; }
  .purchase-ugc-strip { gap: 5px; }
  .purchase-ugc-caption { font-size: 11px; }
}

/* ─── BIGGER, MORE CONFIDENT TYPE (desktop + mobile) ─── */
.display {
  font-size: clamp(40px, 6.8vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.025em;
}
.display em {
  font-weight: 400;
  letter-spacing: -0.02em;
}
@media (min-width: 1100px) {
  .lede { font-size: 19px; line-height: 1.5; }
}
@media (min-width: 1400px) {
  .display { font-size: 104px; }
  .lede { font-size: 21px; }
}
.section h2,
.section-header h2,
.examples-heading h2 {
  font-size: clamp(28px, 4.2vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.018em;
}
.cta-section h2 {
  font-size: clamp(32px, 5vw, 72px);
}

/* ─── HERO ENTRANCE ANIMATION — calm, considered, premium ─── */
.stage[data-stage="hero"] .hero-text > * {
  animation: heroFadeUp 720ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.stage[data-stage="hero"] .hero-text > *:nth-child(1) { animation-delay: 80ms; }
.stage[data-stage="hero"] .hero-text > *:nth-child(2) { animation-delay: 200ms; }
.stage[data-stage="hero"] .hero-text > *:nth-child(3) { animation-delay: 320ms; }
.stage[data-stage="hero"] .hero-text > *:nth-child(4) { animation-delay: 440ms; }
.stage[data-stage="hero"] .hero-text > *:nth-child(5) { animation-delay: 560ms; }
.stage[data-stage="hero"] .hero-text > *:nth-child(6) { animation-delay: 680ms; }
.stage[data-stage="hero"] .hero-image {
  animation: heroFadeUp 1000ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: 240ms;
}
@keyframes heroFadeUp {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ─── SCROLL-TRIGGERED REVEAL (no JS — uses IntersectionObserver via JS hook) ─── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 720ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 720ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ─── PREMIUM CTA — depth, glow, press-down ─── */
.cta-btn, .cta-section-cta, .sticky-cta-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cta-btn::before, .cta-section-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,255,255,0.16), transparent 60%);
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
  z-index: -1;
}
.cta-btn:hover::before, .cta-section-cta:hover::before { opacity: 1; }
.cta-btn:active, .cta-section-cta:active, .sticky-cta-btn:active {
  transform: translateY(1px) scale(0.99);
}

/* ─── LOADING SCREEN — full-page initial paint, then fades ─── */
.app-boot-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--paper, #fdfaf3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 24px;
  pointer-events: none;
  animation: bootFadeOut 360ms ease 700ms forwards;
}
.app-boot-screen .boot-mark {
  font-family: var(--serif, "Fraunces", serif);
  font-style: italic;
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 500;
  color: var(--ink, #1A1814);
  letter-spacing: -0.015em;
  animation: bootMarkIn 540ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.app-boot-screen .boot-mark em { color: var(--olive-dark, #4a5933); font-style: italic; }
.app-boot-screen .boot-bar {
  width: 120px;
  height: 2px;
  background: rgba(26, 24, 20, 0.08);
  overflow: hidden;
  border-radius: 999px;
}
.app-boot-screen .boot-bar::after {
  content: "";
  display: block;
  height: 100%;
  width: 40%;
  background: var(--olive, #5a6b3d);
  animation: bootBar 900ms cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
@keyframes bootMarkIn {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes bootBar {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}
@keyframes bootFadeOut {
  0%   { opacity: 1; pointer-events: all; }
  100% { opacity: 0; pointer-events: none; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .app-boot-screen { animation: bootFadeOut 0ms ease 0ms forwards; }
  .stage[data-stage="hero"] .hero-text > *,
  .stage[data-stage="hero"] .hero-image { animation: none; }
}

/* ─── BIG TIER PICKER (preview stage) — bolder presence ─── */
.size-option {
  padding: 20px 14px !important;
  border-width: 1.5px;
  border-radius: 6px;
}
.size-name { font-size: 22px !important; }
.size-option.active { transform: scale(1.02); }

/* ─── CHECKOUT button: hero of the preview stage ─── */
#checkout-btn {
  font-size: clamp(15px, 2.2vw, 17px);
  padding: 20px 28px;
  min-height: 64px;
  border-radius: 8px;
  letter-spacing: 0.01em;
  background: linear-gradient(180deg, var(--ink, #1A1814) 0%, #0f0d0a 100%);
  box-shadow: 0 16px 36px -16px rgba(26, 24, 20, 0.45);
}
#checkout-btn:hover {
  box-shadow: 0 22px 44px -16px rgba(26, 24, 20, 0.55);
}

/* ─── MODAL polish: backdrop blur + scale-in entrance ─── */
.modal-backdrop.open {
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  background: rgba(26, 24, 20, 0.42);
}
.modal-backdrop.open .modal {
  animation: modalScaleIn 360ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes modalScaleIn {
  0%   { opacity: 0; transform: translateY(12px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─── UGC section on mobile: ensure visual weight matches the social proof job ─── */
@media (max-width: 600px) {
  .ugc-section { padding-bottom: 24px; }
  .ugc-section h2 { font-size: 32px; }
}

/* ─── Wordmark micro-polish ─── */
.wordmark a {
  background-image: linear-gradient(to right, var(--olive-dark, #4a5933), var(--olive-dark, #4a5933));
  background-size: 0 1px;
  background-position: 0 90%;
  background-repeat: no-repeat;
  transition: background-size 320ms ease;
}
.wordmark a:hover { background-size: 100% 1px; }

/* ─── Subtle reading-rhythm: every 2nd section gets a tiny tonal lift on desktop ─── */
@media (min-width: 1100px) {
  .section:nth-of-type(even) { padding-top: 80px; padding-bottom: 80px; }
}


/* ---------- v15 — Delivery email preview on thanks page ---------- */
.email-preview-card {
  margin: 28px 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}
.email-preview-card[open] {
  background: var(--paper-2);
}
.email-preview-card summary {
  display: grid;
  gap: 4px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
}
.email-preview-card summary::-webkit-details-marker { display: none; }
.email-preview-label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.email-preview-meta {
  font-size: 12px;
  color: var(--muted);
}
.email-preview-body {
  padding: 0 18px 22px;
}
.email-preview-frame {
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-top: 6px;
}
.email-preview-meta-row {
  display: grid;
  gap: 4px;
  padding: 12px 16px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.email-preview-meta-row strong { color: var(--ink-3); font-weight: 600; margin-right: 4px; }
.email-preview-inner {
  padding: 28px 26px 32px;
  background: var(--paper);
  font-family: var(--sans);
  color: var(--ink-2);
  line-height: 1.55;
}
.email-preview-inner .email-eyebrow {
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--accent);
  text-transform: uppercase;
  margin: 0 0 14px;
}
.email-preview-inner .email-greeting {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  color: var(--ink);
}
.email-preview-inner .email-headline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-2);
  margin: 18px 0 10px;
}
.email-preview-inner .email-body {
  font-size: 14px;
  margin: 0 0 18px;
}
.email-preview-inner .email-cta {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 22px;
  text-decoration: none;
  border-radius: var(--radius);
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 12px;
}
.email-preview-inner .email-wallpaper-list {
  padding-left: 18px;
  margin: 0 0 18px;
  font-size: 13px;
}
.email-preview-inner .email-wallpaper-list li { margin: 4px 0; }
.email-preview-inner .email-wallpaper-list a { color: var(--accent); }
.email-preview-inner .email-closer {
  font-size: 12px;
  color: var(--muted);
  margin: 22px 0 6px;
}
.email-preview-inner .email-signoff {
  font-size: 12px;
  color: var(--muted);
  margin: 14px 0 0;
}

/* ---------- v15 — Wallpaper bundle on the thanks page ---------- */
.wallpaper-bundle {
  margin: 32px 0 8px;
  padding: clamp(20px, 3vw, 32px);
  background: rgba(199, 203, 179, 0.18);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}
.wallpaper-bundle-header {
  text-align: center;
  margin-bottom: 24px;
}
.wallpaper-bundle-header .eyebrow { margin-bottom: 8px; }
.wallpaper-bundle-header h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 6px;
}
.wallpaper-bundle-header p {
  font-size: 14px;
  color: var(--ink-3);
  margin: 0;
  max-width: 48ch;
  margin-inline: auto;
}
.wallpaper-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.wallpaper-link {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 10px;
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 240ms ease, transform 240ms ease, box-shadow 240ms ease;
  text-align: center;
}
.wallpaper-link:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.wallpaper-preview {
  display: block;
  margin: 0 auto;
  background: var(--ink);
  border-radius: 4px;
  overflow: hidden;
  width: 100%;
  max-width: 120px;
  aspect-ratio: 9 / 16;
}
.wallpaper-preview img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.wallpaper-preview-ipad        { aspect-ratio: 3 / 4; max-width: 130px; }
.wallpaper-preview-lock-screen { aspect-ratio: 1 / 1; max-width: 110px; }
.wallpaper-preview-watch       { aspect-ratio: 1 / 1.2; max-width: 70px; border-radius: 16px; }
.wallpaper-label {
  font-size: 12px;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--ink-2);
}
.wallpaper-cta {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--olive-dark);
  font-weight: 600;
}
@media (max-width: 720px) {
  .wallpaper-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .wallpaper-link { padding: 12px; gap: 8px; }
}

/* ---------- v15 — Style card hover: photo swap on the picker ---------- */
/* The picker cards already crossfade on selection; this adds a tiny zoom +
   subtle desaturation on hover so the gallery feels alive. */
.style-card { transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.style-card-frame img {
  transition: transform 720ms cubic-bezier(0.22, 0.61, 0.36, 1),
              filter 280ms ease-out;
}
@media (hover: hover) {
  .style-card:not(.failed):hover .style-card-frame img {
    transform: scale(1.04);
    filter: brightness(1.03) saturate(1.05);
  }
}

/* ---------- v15 — Process card hover lift ---------- */
.process-card {
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.process-image { overflow: hidden; }
.process-image img {
  transition: transform 720ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (hover: hover) {
  .process-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
  }
  .process-card:hover .process-image img { transform: scale(1.05); }
}

/* ---------- v14 — Scroll-triggered reveal pattern ---------- */
/* Apply `data-reveal` to any element to fade-and-lift into view as it enters
   the viewport. JS adds `data-revealed="true"` once IntersectionObserver
   crosses the threshold. Optional `data-reveal-delay="ms"` for stagger. */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 720ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 720ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
[data-reveal][data-revealed="true"] {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal="fade"] {
  transform: none;
}
[data-reveal="left"] {
  transform: translateX(-18px);
}
[data-reveal="left"][data-revealed="true"] {
  transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- v14 — Animated funnel steps (1 → 2 → 3) ---------- */
.funnel-step {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 540ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 540ms cubic-bezier(0.22, 0.61, 0.36, 1),
    background 240ms ease;
}
.funnel-step.funnel-step-revealed {
  opacity: 1;
  transform: translateY(0);
}
.funnel-step .funnel-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  margin-right: 8px;
  transition: background 360ms ease, color 360ms ease, transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.funnel-step.funnel-step-revealed .funnel-step-num {
  background: var(--olive);
  color: var(--paper);
  transform: scale(1.08);
}
.funnel-step.funnel-step-revealed.active .funnel-step-num {
  background: var(--ink);
  transform: scale(1.12);
}

/* ---------- v14 — Magnetic CTA hover ---------- */
@media (hover: hover) {
  .cta-btn, .cta-section-cta, .hero-chip {
    will-change: transform;
  }
}

/* ---------- About-page founder signature (P2 E-E-A-T) ---------- */
.signed-off {
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 4px;
}
.signed-off .signature {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
  font-variation-settings: "opsz" 48;
}
.signed-off .signature-detail {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* ---------- /refunds.html legal layout (moved from inline style, P1 C3) ---------- */
.legal { max-width: 720px; margin: 0 auto; padding: clamp(40px, 6vw, 80px) var(--pad); }
.legal-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(40px, 5vw, 56px);
}
.legal h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  margin: 0 0 8px;
  font-variation-settings: "opsz" 144;
}
.legal h1 em { font-style: italic; color: var(--olive-dark); }
.legal .sub {
  font-family: var(--sans);
  color: var(--muted);
  margin: 0 0 56px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.legal h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 28px);
  margin: 48px 0 14px;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.legal h2::before {
  content: counter(section, upper-roman) ".  ";
  color: var(--olive);
  font-style: italic;
  font-weight: 400;
}
.legal { counter-reset: section; }
.legal h2 { counter-increment: section; }
.legal p, .legal li {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
}
.legal p { margin-bottom: 14px; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal ul { padding-left: 0; list-style: none; margin: 16px 0; }
.legal ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
}
.legal ul li::before {
  content: "·";
  position: absolute;
  left: 6px;
  top: 0;
  color: var(--olive);
  font-family: var(--serif);
  font-size: 1.4em;
  line-height: 1.65;
}
.legal ul li a {
  word-break: break-word;
  overflow-wrap: anywhere;
}
.legal .callout {
  background: var(--paper-2);
  padding: 22px 26px;
  margin: 28px 0;
  border-left: 3px solid var(--olive);
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
}
.legal .callout strong {
  display: block;
  margin-bottom: 6px;
  font-style: normal;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--olive-dark);
}
.legal .intro {
  font-family: var(--serif);
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.5;
  color: var(--ink-2);
  font-variation-settings: "opsz" 48;
  max-width: 56ch;
  margin-bottom: 16px;
}

/* ============================================================
   TRUST STRIP — the four objection-killer lines under the hero
   subhead, above the fold. Added 2026-05-23 from v2 audit C2
   §LAST items 2+4 (W&W "We accept 98%", Pet Canvas "no login",
   Pop Your Pup "full refund", brand non-negotiable #4 honest-AI).
   ============================================================ */
.trust-strip {
  list-style: none;
  padding: 14px 16px;
  margin: 18px 0 4px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px 14px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
@media (min-width: 720px) {
  .trust-strip { grid-template-columns: 1fr 1fr; padding: 16px 18px; }
}
.trust-strip li {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.trust-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--olive);
  color: var(--paper);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  transform: translateY(2px);
}
/* Visually subordinate the older 3-icon reassurance strip on
   pages where the new trust strip is present. The aria-hidden
   markup keeps both off the a11y tree double-read. */
.trust-strip + .reassurance.trust-row {
  font-size: 12px;
  color: var(--muted);
  border-top: 1px dashed var(--line);
  padding-top: 12px;
  margin-top: 12px;
}

/* ============================================================
   MEMORIAL FLOW — scoped to body[data-flow="memorial"]. Added
   2026-05-23 from v2 audit A2 §6 + A3 §3. Implements the spec
   variant the brand binder promised but production never built.
   ============================================================ */
:root {
  --leading-grief: 1.75;
  --paragraph-grief: 32px;
}
body[data-flow="memorial"] .wordmark .amp {
  color: var(--clay);
}
body[data-flow="memorial"] p,
body[data-flow="memorial"] .lede,
body[data-flow="memorial"] .review-body,
body[data-flow="memorial"] .faq-answer {
  line-height: var(--leading-grief);
  text-wrap: pretty;
}
body[data-flow="memorial"] h1,
body[data-flow="memorial"] h2,
body[data-flow="memorial"] h3 {
  text-wrap: balance;
}
body[data-flow="memorial"] .section + .section,
body[data-flow="memorial"] .story-text > p + p {
  margin-top: var(--paragraph-grief);
}
/* Suppress noisy chrome on memorial pages. The demo banner is
   removed from the markup entirely; floating help + consent
   banner are toggled in JS but we belt-and-brace via CSS. */
body[data-flow="memorial"] .demo-banner,
body[data-flow="memorial"] .floating-help,
body[data-flow="memorial"] .oh-consent-banner {
  display: none !important;
}

/* ============================================================
   CONVERSION PASS — 2026-05-23
   Honest stars + intent pill + guarantee + founder sig +
   compare table + pay row.
   ============================================================ */

/* ----- Intent pill (For me · As a gift · In memory) -----
   Placed above the hero eyebrow. Segments visitor intent early
   without a hard route change. The "memorial" tab triggers the
   ?intent=memorial flow on the next user action. */
.intent-pill {
  display: inline-flex;
  gap: 0;
  padding: 4px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  margin-bottom: 18px;
  font-family: var(--sans, "Inter", system-ui, sans-serif);
}
.intent-pill-btn {
  background: transparent;
  border: 0;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  cursor: pointer;
  transition: background 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
              color 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.intent-pill-btn:hover { color: var(--ink); }
.intent-pill-btn.active {
  background: var(--ink);
  color: var(--paper);
  font-weight: 500;
}
.intent-pill-btn:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 2px;
}

/* Inline feedback line that appears directly under the intent pill on click —
   confirms the choice in plain language so the pill never feels inert. */
.intent-pill-feedback {
  margin: -6px 0 14px;
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--olive-dark);
  font-style: italic;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 220ms ease, max-height 260ms ease;
}
.intent-pill-feedback.visible {
  opacity: 1;
  max-height: 80px;
  margin: 6px 0 16px;
}
.intent-pill-feedback.intent-memorial {
  color: var(--ink-2, var(--ink));
}

/* ----- Guarantee badge (likeness promise above the fold) ----- */
.guarantee-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin: 14px 0 4px;
  background: var(--paper);
  border: 1px solid var(--olive);
  border-radius: 6px;
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(26,24,20,0.06));
}
.guarantee-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--olive);
  color: var(--paper);
}
.guarantee-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.4;
}
.guarantee-text strong {
  font-family: var(--serif, "Fraunces", Georgia, serif);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  color: var(--ink);
}
.guarantee-text span {
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* ----- Founder signature row ----- */
.founder-sig {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 2px 4px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}
.founder-sig-name {
  font-family: var(--serif, "Fraunces", Georgia, serif);
  font-size: 15px;
  color: var(--ink-2);
}

/* ----- Pilot rating block (reviews page hero) ----- */
.pilot-rating-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding-top: 8px;
  max-width: 640px;
}
@media (min-width: 720px) {
  .pilot-rating-block { grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
}
.pilot-rating-summary { display: flex; flex-direction: column; gap: 6px; }
.pilot-stars {
  font-size: 26px;
  color: var(--olive);
  letter-spacing: 4px;
  line-height: 1;
}
.pilot-score {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--serif, "Fraunces", Georgia, serif);
  font-weight: 500;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.pilot-score-out { font-size: 18px; color: var(--muted); font-weight: 400; }
.pilot-meta { font-size: 13px; color: var(--ink-3); line-height: 1.45; }
.pilot-meta-detail { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.review-summary-pilot-note {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  font-style: italic;
  color: var(--muted);
}

/* ----- Compare table (vs typical alternative) ----- */
.compare-section { padding: clamp(40px, 6vw, 80px) 0; }
.compare-table {
  display: grid;
  gap: 0;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper);
  max-width: 880px;
  margin: 0 auto;
  font-feature-settings: "kern" 1, "liga" 1;
}
.compare-row {
  display: grid;
  grid-template-columns: 1.2fr 1.4fr 1.4fr;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.5;
  gap: 12px;
}
.compare-row:last-child { border-bottom: 0; }
.compare-row [role="rowheader"] {
  font-family: var(--serif, "Fraunces", Georgia, serif);
  font-style: italic;
  color: var(--ink-2);
  font-size: 15px;
}
.compare-row [role="cell"]:first-of-type { color: var(--ink); }
.compare-row [role="cell"]:last-of-type { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.compare-row-head {
  background: var(--paper-2);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 12px 18px;
}
.compare-row-head .compare-us { color: var(--olive-dark); font-weight: 600; }
.compare-row-head .compare-them { color: var(--ink-3); }
@media (max-width: 640px) {
  .compare-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px 14px;
  }
  .compare-row [role="cell"]:last-of-type { font-size: 12.5px; }
}

/* ----- Payment row (Apple Pay / Google Pay / Card / Link) ----- */
.pay-row {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 12px 0 0;
  padding: 0;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
  align-items: center;
}
.pay-row li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pay-pill {
  display: inline-block;
  width: 22px;
  height: 14px;
  border-radius: 3px;
  background: var(--paper-2);
  border: 1px solid var(--line);
}
.pay-pill.pay-apple   { background: #1A1814; }
.pay-pill.pay-google  { background: linear-gradient(90deg,#4285F4 0 25%,#34A853 25% 50%,#FBBC05 50% 75%,#EA4335 75% 100%); border-color: transparent; }
.pay-pill.pay-card    { background: linear-gradient(135deg,#5A6740,#3F4828); }
.pay-pill.pay-link    { background: #2EC987; }
.pay-row-secure { color: var(--ink-3); font-weight: 500; }


/* ============================================================
   PILOT STAT ROW — three big numbers (matches the impact of the
   prior fabricated stat block, anchored to the 12 pilot reviews
   that are actually on the page). Added 2026-05-23.
   ============================================================ */
.pilot-stat-row {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  max-width: 720px;
}
@media (min-width: 720px) {
  .pilot-stat-row { grid-template-columns: repeat(3, 1fr); gap: 32px; align-items: end; }
}
.pilot-stat-row > li {
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
}
.pilot-stat-num {
  font-family: var(--serif, "Fraunces", Georgia, serif);
  font-weight: 500;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 6px;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.pilot-stat-out, .pilot-stat-pct {
  font-size: 22px;
  font-weight: 400;
  color: var(--muted);
}
.pilot-stat-pct { color: inherit; }
.pilot-stat-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.pilot-rating-block .pilot-stars {
  font-size: 22px;
  letter-spacing: 4px;
  color: var(--olive);
  line-height: 1;
  margin-bottom: 8px;
}
.pilot-rating-foot {
  display: grid;
  gap: 14px;
  max-width: 720px;
}
.pilot-trustpilot-note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}
.pilot-trustpilot-link {
  display: inline-block;
  margin-left: 6px;
  color: var(--olive-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
}
.pilot-trustpilot-link:hover { color: var(--ink); }

/* ============================================================
   EXIT-INTENT MODAL — Founders' Circle invitation. Brand-safe
   abandoner capture. Inherits .modal-backdrop / .modal styling
   from the existing email-modal but layers a clay accent + perks
   list to signal "this is the invitation, not the upsell."
   ============================================================ */
.exit-modal-card {
  border-top: 4px solid var(--clay);
  padding-top: 28px;
}
.exit-modal-eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 14px;
  font-weight: 500;
}
.exit-modal-title {
  font-family: var(--serif, "Fraunces", Georgia, serif);
  font-weight: 400;
  font-size: clamp(24px, 3.4vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  color: var(--ink);
}
.exit-modal-title em { font-style: italic; color: var(--clay); }
.exit-modal-lede {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0 0 18px;
}
.exit-modal-lede strong { color: var(--ink); font-weight: 600; }
.exit-modal-perks {
  list-style: none;
  margin: 18px 0 12px;
  padding: 14px 16px;
  background: var(--paper-2);
  border-radius: 4px;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.55;
}
.exit-modal-perks li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
}
.exit-modal-perks li span {
  color: var(--olive);
  font-weight: 600;
  flex-shrink: 0;
  width: 14px;
}

/* ============================================================
   IMAGE SAFETY RULE — anti-squash policy
   ------------------------------------------------------------
   Sets a defensive default for every <img> on the site: if a
   layout sets `width: 100%` without an explicit aspect-ratio
   constraint, the image renders at its NATURAL aspect ratio
   instead of being stretched. Forced aspect-ratio + object-fit:
   cover is opt-in via the `.img-cropped` helper class below.
   This stops the /styles squash regression from ever happening
   again across new pages or new components.
   ============================================================ */
img {
  /* Preserve native pixel proportions unless explicitly overridden. */
  height: auto;
  max-width: 100%;
}

/* Opt-in helper for places that genuinely want a forced-shape thumbnail
   (e.g. avatar squares, fixed-height carousel cards). */
.img-cropped {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Helper for the rare case where we DO want object-fit: contain in a
   forced box without squashing — e.g. a 4:5 mat behind a 1:1 portrait. */
.img-letterbox {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--paper-2);
}

/* ============================================================
   ULTRA-INTERACTIVE IMAGERY — supporting styles
   Effects driven by /interactive.js. All graceful-degrade when
   prefers-reduced-motion is enabled (the JS short-circuits).
   ============================================================ */

/* Flip-hint badge on the style page primary portrait */
.style-flip-hint {
  position: absolute;
  bottom: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(26, 24, 20, 0.78);
  color: var(--paper);
  border: 0;
  border-radius: 999px;
  font-family: var(--sans, "Inter", system-ui, sans-serif);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform 200ms ease, background 200ms ease;
  z-index: 3;
  box-shadow: 0 4px 14px rgba(26,24,20,0.18);
}
.style-flip-hint:hover {
  background: var(--ink);
  transform: translateY(-1px);
}
.style-flip-hint-icon {
  display: inline-block;
  transition: transform 400ms ease;
  font-size: 14px;
  line-height: 1;
}
.style-flip-hint:hover .style-flip-hint-icon {
  transform: rotate(180deg);
}

/* Make sure style-feature-primary acts as a positioning context for the hint
   and the cursor: pointer interaction signals interactivity. */
.style-feature-primary {
  position: relative;
}
.style-feature-primary img {
  transition: opacity 280ms ease, transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Cursor-spotlight gradient layer on CTA section. The --spot-x/y vars are
   updated by JS; falls back to a centred radial gradient if no JS. */
.cta-section {
  position: relative;
  overflow: hidden;
  --spot-x: 50%;
  --spot-y: 50%;
}
.cta-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--spot-x) var(--spot-y),
    rgba(156, 74, 42, 0.16) 0%,
    rgba(156, 74, 42, 0.06) 25%,
    transparent 55%
  );
  transition: background 200ms ease;
  pointer-events: none;
  z-index: 0;
}
.cta-section > * { position: relative; z-index: 1; }

/* Hover lift cue for tilt-cards so users perceive interactivity at rest too. */
.example-grid figure,
.ugc-card,
.process-card,
.purchase-ugc-thumb {
  transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.example-grid figure:hover,
.ugc-card:hover,
.process-card:hover,
.purchase-ugc-thumb:hover {
  box-shadow: 0 18px 40px rgba(26, 24, 20, 0.18);
}

/* Hero showcase children should be GPU-promoted so parallax stays smooth. */
.hero-showcase-photo,
.hero-showcase-portrait {
  will-change: transform;
  transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Reduced-motion override — strip every transform/transition so the JS
   short-circuit + this CSS together guarantee zero motion. */
@media (prefers-reduced-motion: reduce) {
  .style-flip-hint-icon,
  .style-feature-primary img,
  .hero-showcase-photo,
  .hero-showcase-portrait,
  .example-grid figure,
  .ugc-card,
  .process-card,
  .purchase-ugc-thumb,
  .cta-btn,
  .cta-section-cta,
  .cta-section::before {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================
   SPECIES PILL — Cat / Dog toggle inside .hero-showcase
   Sits above the carousel so visitors immediately see the
   product handles BOTH species. Updates the photo + portrait
   srcs via JS (see heroShowcase IIFE in app.js).
   ============================================================ */
.species-pill {
  display: inline-flex;
  gap: 0;
  padding: 4px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  margin: 0 auto 14px;
  font-family: var(--sans, "Inter", system-ui, sans-serif);
  align-self: center;
}
.hero-showcase {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.species-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  cursor: pointer;
  transition: background 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
              color 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 180ms ease;
}
.species-pill-btn:hover {
  color: var(--ink);
  transform: translateY(-1px);
}
.species-pill-btn.active {
  background: var(--ink);
  color: var(--paper);
  font-weight: 500;
}
.species-pill-icon {
  font-size: 16px;
  line-height: 1;
}
.species-pill-label {
  font-weight: 500;
}
.species-pill-btn:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 2px;
}

/* Smooth fade on the photo when species changes. */
#hero-photo-img {
  transition: opacity 200ms ease;
}

/* ============================================================
   V16 HERO REDESIGN — "Editorial Split, Visual-Primary"
   Lifts CVR by fixing the carousel-below-fold bug.
   Spec: campaigns/hero-redesign-spec.md
   ============================================================ */

.hero.hero-v16 {
  /* Right column is 60% — visual leads. */
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(28px, 4vw, 56px);
  /* Anchor the top edges so the carousel sits high, not centred against a
     bloated text column. The previous align-items: center was the root cause
     of the carousel sinking ~265px below the fold. */
  align-items: start;
  min-height: 0;
  padding-top: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(36px, 5vw, 64px);
}

.hero-v16 .hero-text {
  display: grid;
  gap: clamp(16px, 1.8vw, 22px);
  align-content: start;
  padding-top: 4px;
}

/* H1: tighter line-height so 2 lines fit at every viewport. */
.hero-v16 .hero-text .display {
  font-size: clamp(40px, 5.6vw, 68px);
  line-height: 0.98;
  letter-spacing: -0.022em;
}

/* Lede: shorter, max 2 lines. */
.hero-v16 .lede {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.5;
  max-width: 42ch;
  color: var(--ink-3);
  margin: 0;
}
.hero-v16 .lede strong { color: var(--ink); font-weight: 500; }

/* Primary uploader: compact form so it doesn't push the carousel down. */
.uploader-primary {
  padding: clamp(16px, 2vw, 22px) clamp(18px, 2.2vw, 26px);
}
.uploader-primary .uploader-inner { gap: 16px; }
.uploader-primary .uploader-text strong {
  font-size: clamp(17px, 1.6vw, 20px);
  margin-bottom: 2px;
}
.uploader-primary .uploader-text span { font-size: 13px; }

/* Pet-name row compact variant for v16 — kept in hero for JS state capture, but
   visually minimal (inline label + input, no big padding). */
.pet-name-row-compact {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.pet-name-row-compact .pet-name-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-size: 11px;
}
.pet-name-row-compact .pet-name-input {
  flex: 1;
  padding: 8px 12px;
  font-family: var(--sans);
  font-size: 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
}
.pet-name-row-compact .pet-name-input:focus {
  outline: 2px solid var(--olive);
  outline-offset: 1px;
}

/* Species toggle — left column under v16. Segmented control, ink-on-paper. */
.species-toggle {
  display: inline-flex;
  align-self: start;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
  font-family: var(--sans, "Inter", system-ui, sans-serif);
}
.species-toggle-btn {
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 8px 18px;
  border-radius: 999px;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, transform 160ms ease;
}
.species-toggle-btn:hover { color: var(--ink); transform: translateY(-1px); }
.species-toggle-btn .species-toggle-icon {
  font-size: 16px;
  line-height: 1;
}
.species-toggle-btn.active {
  background: var(--ink);
  color: var(--paper);
}
.species-toggle-btn:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 2px;
}

/* Carousel anchors to the TOP of the right column, not its centre. */
.hero-v16 .hero-image { align-self: start; }

/* ------------------------------------------------------------
   .hero-band — horizontal strip immediately below the hero
   ------------------------------------------------------------ */
.hero-band {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(20px, 2.4vw, 28px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(32px, 4vw, 48px);
}

.trust-strip-horizontal {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  gap: 6px 28px;
  font-size: 13px;
  color: var(--ink-3);
  margin: 0;
  padding: 0;
}
.trust-strip-horizontal li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}
.trust-strip-horizontal .trust-mark {
  color: var(--olive);
  font-weight: 600;
  font-size: 12px;
}

.guarantee-badge-inline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  color: var(--clay, var(--olive-dark));
  box-shadow: none;
}
.guarantee-badge-inline .guarantee-mark {
  color: var(--clay, var(--olive-dark));
  background: transparent;
  width: auto;
  height: auto;
  border-radius: 0;
}
.guarantee-badge-inline .guarantee-text {
  display: inline;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
}
.guarantee-badge-inline .guarantee-text strong {
  font-weight: 500;
  color: var(--clay, var(--olive-dark));
}

/* Override the .intent-pill margin-bottom from the older v14 hero — inside
   the .hero-band the pill should sit flush. */
.hero-band .intent-pill { margin-bottom: 0; }

/* Reset the species-toggle from looking pinned to the carousel; left-column
   layout doesn't centre-align it. */
.hero-v16 .species-toggle { margin-top: 4px; }

/* ------------------------------------------------------------
   Responsive — the whole point of the redesign
   ------------------------------------------------------------ */

/* Mid-laptop (1024–1279px): squeeze H1 slightly, keep split intact. */
@media (max-width: 1180px) {
  .hero.hero-v16 { gap: 32px; }
  .hero-v16 .hero-text .display { font-size: clamp(36px, 4.6vw, 52px); }
  .hero-v16 .lede { font-size: 16px; }
}

/* Tablet (≤920px): stack, carousel FIRST (above H1) to honour visual-led
   pattern on small viewports. */
@media (max-width: 920px) {
  .hero.hero-v16 {
    grid-template-columns: 1fr;
    gap: clamp(20px, 4vw, 32px);
    padding-top: 20px;
  }
  .hero-v16 .hero-image { order: -1; }
  .hero-v16 .hero-text { gap: 16px; }
  .hero-v16 .hero-text .display {
    font-size: clamp(32px, 6.4vw, 44px);
    line-height: 1.02;
  }
  .hero-v16 .lede {
    font-size: 15px;
    max-width: none;
  }
  .hero-band {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px 0;
  }
  .hero-band .intent-pill { justify-self: start; }
  .hero-band .guarantee-badge-inline { justify-self: start; }
}

/* Mobile (≤600px): demote lede after uploader, tighten H1. */
@media (max-width: 600px) {
  .hero-v16 .lede {
    order: 4;
    margin-top: 8px;
    font-size: 14px;
  }
  .hero-v16 .hero-text .display {
    font-size: clamp(30px, 8.4vw, 40px);
  }
  .hero-v16 .uploader-primary {
    padding: 14px 16px;
  }
  .hero-v16 .uploader-primary .uploader-text strong { font-size: 16px; }
  .species-toggle { align-self: stretch; justify-content: center; }
  .species-toggle-btn { flex: 1; justify-content: center; }
}

/* Very small (≤390px): compress chips. */
@media (max-width: 390px) {
  .hero-chip { font-size: 10px; padding: 6px 9px; }
  .hero-showcase-hint { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .uploader-primary { transition: none; }
  .species-toggle-btn { transition: none; transform: none !important; }
}

/* ============================================================
   LIVE NAMEPLATE — museum-style plaque under the carousel.
   Updates as the visitor types into #pet-name. Shows them the
   name BECOMES PART OF THE PRODUCT, not just metadata.
   ============================================================ */
.hero-nameplate {
  margin: 10px auto 0;
  padding: 10px 18px 12px;
  text-align: center;
  font-family: var(--serif, "Fraunces", Georgia, serif);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.18) 100%);
  max-width: 460px;
  width: 100%;
}
.hero-nameplate-marker {
  display: block;
  font-family: var(--sans, "Inter", system-ui, sans-serif);
  font-size: 9px;
  letter-spacing: 0.28em;
  color: var(--muted);
  margin-bottom: 6px;
}
.hero-nameplate-name {
  display: block;
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 400;
  color: var(--ink-3);
  letter-spacing: 0.01em;
  line-height: 1.1;
  transition: color 240ms ease, transform 240ms ease;
}
.hero-nameplate.has-name .hero-nameplate-name {
  color: var(--olive-dark);
  transform: translateY(-1px);
}
.hero-nameplate-meta {
  display: block;
  margin-top: 6px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Species toggle when placed adjacent to the carousel (right column). */
.species-toggle-carousel {
  margin: 0 auto 14px;
  align-self: center;
}
.hero-v16 .hero-image {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Name-unlocks list — what typing the name CHANGES about the product. */
.name-unlocks {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-3);
}
.name-unlocks li {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.name-unlocks-mark {
  flex-shrink: 0;
  color: var(--clay, var(--olive-dark));
  font-size: 11px;
  line-height: 1;
  transform: translateY(-1px);
}
.name-unlocks em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink);
}
.name-unlocks-url {
  font-family: var(--mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 11.5px;
  color: var(--ink);
  background: var(--paper-2);
  padding: 1px 6px;
  border-radius: 3px;
}
.name-unlocks-url em {
  color: var(--olive-dark);
  font-style: normal;
  font-weight: 500;
}

@media (max-width: 600px) {
  .hero-nameplate { padding: 8px 14px 10px; }
  .hero-nameplate-name { font-size: 18px; }
  .name-unlocks { font-size: 12px; }
}

/* "Showing both" label — visible ONLY while the species toggle is still mixed.
   Default hidden so that removing the parent .species-toggle-mixed class
   genuinely hides the label (not just leaves it as an unstyled inline span). */
.species-toggle-label { display: none; }
.species-toggle-mixed .species-toggle-label {
  display: inline-flex;
  align-items: center;
  padding: 0 12px 0 8px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive-dark);
  font-weight: 500;
  font-family: var(--sans);
}

/* When a species is locked, give the pill an emphasised active-look so the
   click is unmistakable. Subtle scale + olive ring around the chosen button. */
.species-toggle-btn.active {
  box-shadow: 0 0 0 2px var(--olive-light, rgba(110,122,89,0.25));
}

/* On locked species pages (cats / dogs landers), no "Showing both" label is in the
   DOM at all, so no rule is needed. */

@media (max-width: 600px) {
  .species-toggle-mixed .species-toggle-label {
    font-size: 10px;
    padding: 0 8px 0 6px;
  }
}

/* On /cats and /dogs landers, hide the species toggle entirely — these pages
   are species-locked by URL and the toggle would invite a flow break.
   On the homepage (no data-species on body) the toggle still shows. */
body[data-species="cat"] .species-toggle,
body[data-species="dog"] .species-toggle {
  display: none !important;
}

/* =================================================================
   P0 — /THANKS REVEAL CHOREOGRAPHY (spec §1, §2.1, §2.2, §5)
   ----------------------------------------------------------------
   Time-based reveal driven by pollForDownload() in app.js. Every
   element starts with .thanks-reveal-hidden (opacity:0) and gets
   the class removed on its scheduled T+N tick. Under reduced motion
   we collapse all transitions to a 120ms opacity fade and the JS
   schedules everything at T+0.
   ================================================================= */

/* Visually-hidden helper for the aria-live announcer. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Override the legacy .thanks container width so the reveal can
   breathe up to the spec's 960px max content width on desktop. */
.stage[data-stage="thanks"] .thanks {
  max-width: 960px;
  gap: 0;
  padding-top: clamp(32px, 6vw, 72px);
}

/* ---------- The reveal wrapper ---------- */
.thanks-reveal {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 3vw, 28px);
  justify-items: center;
  text-align: center;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 24px);
}

/* Two-column from 1024px+ (portrait 58%, action stack 42%).
   Each action-column item lives in its OWN named area so they stack
   vertically instead of all collapsing into a single shared cell.
   The portrait spans all 4 action rows on the left. */
@media (min-width: 1024px) {
  .thanks-reveal {
    grid-template-columns: 58% 42%;
    grid-template-areas:
      "ring     ring"
      "portrait eyebrow"
      "portrait h1"
      "portrait cta"
      "portrait email";
    column-gap: clamp(32px, 4vw, 56px);
    row-gap: clamp(10px, 1.4vw, 18px);
    text-align: left;
    justify-items: stretch;
    align-items: start;
  }
  .thanks-reveal-ring      { grid-area: ring;     justify-self: center; }
  .thanks-portrait         { grid-area: portrait; align-self: center; }
  .thanks-reveal-eyebrow   { grid-area: eyebrow;  align-self: end;    margin: 0; }
  .thanks-reveal-h1        { grid-area: h1;       align-self: start;  margin: 0; }
  .thanks-reveal-cta-block { grid-area: cta;      align-self: start; }
  .thanks-email-confirm    { grid-area: email;    align-self: start;  margin: 0; }
}

/* ---------- Hidden-by-default revealable atoms ---------- */
.thanks-reveal-hidden {
  opacity: 0;
  visibility: hidden;
}

/* ---------- Olive progress ring (T+0 → T+2) ---------- */
.thanks-reveal-ring {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: clamp(8px, 2vw, 20px) 0;
  transition: opacity 600ms ease-out, transform 600ms ease-out;
}
.thanks-reveal-ring.thanks-reveal-ring-out {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  /* Collapse height so portrait can slide up without a gap. */
  max-height: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
}
.thanks-progress-ring {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid var(--olive-pale);
  border-top-color: var(--olive);
  animation: thanks-spin 1250ms linear infinite; /* 0.8 turns/s ≈ 1.25s/turn */
}
@keyframes thanks-spin {
  to { transform: rotate(360deg); }
}
.thanks-reveal-holding {
  font-family: var(--serif);
  font-size: clamp(20px, 3.4vw, 28px);
  font-style: italic;
  color: var(--ink);
  margin: 0;
  max-width: 36ch;
  line-height: 1.25;
}

/* ---------- Portrait fade-in (T+2 → T+3.4) — branded frame mockup ----------
   Mirrors the museum-frame treatment used on the homepage hero ("Royal
   portrait pinned to a cream wall"). The portrait sits on a generous cream
   matt, behind a hairline border, with a soft drop shadow as if hanging on
   the wall. Two subtle binder-clip marks at the top corners reinforce the
   "pinned print" register, same gesture as the marketing imagery — keeps the
   brand language consistent between the sales page and the post-purchase
   reveal. No clay edge; the frame IS the matt. */
.thanks-portrait {
  position: relative;
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: clamp(280px, 60vw, 520px);
  aspect-ratio: 1 / 1;
  /* The matt — slightly off-paper so the image's edge reads clearly. */
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  padding: clamp(22px, 6.2%, 44px);
  /* Subtle hairline catches the matt's outer edge under bright light. */
  border: 1px solid rgba(26, 24, 20, 0.06);
  border-radius: 3px;
  /* Hanging shadow — soft, directional, layered. */
  box-shadow:
    0 1px 0 rgba(60, 40, 20, 0.04),
    0 2px 6px rgba(60, 40, 20, 0.06),
    0 24px 48px -28px rgba(60, 40, 20, 0.32),
    0 60px 90px -55px rgba(60, 40, 20, 0.18);
  /* The hanging shadow extends ~60px below the frame's box. The grid above
     uses gap to space siblings, but `gap` is calculated from box edges, not
     from visual shadow extent — so the shadow can visually overlap the next
     row's eyebrow. Push the next sibling down by adding bottom margin
     equal to the shadow's reach. On desktop the items are in different
     columns and this margin is irrelevant; on mobile it's the difference
     between the shadow painting over the text or clearing it cleanly. */
  margin-bottom: clamp(40px, 8vw, 72px);
}
/* Binder-clip marks at the top corners — pinned-print gesture. */
.thanks-portrait::before,
.thanks-portrait::after {
  content: "";
  position: absolute;
  top: 6px;
  width: 10px;
  height: 22px;
  background: linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 100%);
  border-radius: 2px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  z-index: 2;
}
.thanks-portrait::before { left: 22%; }
.thanks-portrait::after  { right: 22%; }
.thanks-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Image's own hairline — like the rebate inside a frame. */
  border: 1px solid rgba(26, 24, 20, 0.10);
  /* Inside-the-frame soft shadow so the print reads as physical. */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4),
              0 1px 0 rgba(0, 0, 0, 0.04),
              0 8px 18px -10px rgba(60, 40, 20, 0.25);
  background: var(--paper);
}
@media (prefers-reduced-motion: no-preference) {
  .thanks-portrait {
    transform: scale(0.92);
    opacity: 0.04;
    transition: transform 1400ms cubic-bezier(.22,.61,.36,1),
                opacity 1400ms cubic-bezier(.22,.61,.36,1),
                visibility 0s;
  }
  .thanks-portrait:not(.thanks-reveal-hidden) {
    transform: scale(1);
    opacity: 1;
  }
}

/* ---------- Eyebrow + h1 (T+3.4) ---------- */
.thanks-reveal-eyebrow {
  margin: 0;
  color: var(--olive);
  font-size: 11px;
  letter-spacing: 0.22em;
}
.thanks-reveal-h1 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
  font-size: clamp(2rem, 6vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
  outline: none;
}
.thanks-reveal-h1:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 4px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: no-preference) {
  .thanks-reveal-eyebrow,
  .thanks-reveal-h1,
  .thanks-reveal-cta-block,
  .thanks-email-confirm {
    transition: opacity 360ms ease-out, transform 360ms ease-out, visibility 0s;
    transform: translateY(6px);
  }
  .thanks-reveal-eyebrow:not(.thanks-reveal-hidden),
  .thanks-reveal-h1:not(.thanks-reveal-hidden),
  .thanks-reveal-cta-block:not(.thanks-reveal-hidden),
  .thanks-email-confirm:not(.thanks-reveal-hidden) {
    transform: translateY(0);
  }
}

/* ---------- Primary CTA (T+5) — FILLED terracotta ---------- */
.thanks-reveal-cta-block {
  display: grid;
  gap: 12px;
  justify-items: center;
  margin-top: clamp(4px, 1vw, 12px);
}
@media (min-width: 1024px) {
  .thanks-reveal-cta-block { justify-items: start; }
}
.thanks-cta-primary {
  display: inline-block;
  background: var(--clay);
  color: #FFF8EE; /* near-paper for max contrast on clay; verified ≥ 4.6:1 */
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 18px 36px;
  border-radius: 8px;
  border: 1px solid var(--clay);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 10px 24px -16px rgba(142,74,48,0.55);
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
  cursor: pointer;
  text-align: center;
  min-width: 240px;
}
.thanks-cta-primary:hover,
.thanks-cta-primary:focus-visible {
  background: #7A3E27; /* darker clay on hover, still AA on white */
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 14px 30px -16px rgba(142,74,48,0.65);
}
.thanks-cta-primary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.thanks-cta-primary:active {
  transform: translateY(0);
}
.thanks-reveal-spec {
  font-size: 14px;
  color: var(--ink-2, var(--olive-dark));
  margin: 0;
  line-height: 1.5;
  max-width: 38ch;
}

/* ---------- Email confirmation line (T+6.5) ---------- */
.thanks-email-confirm {
  font-size: 14px;
  color: var(--olive);
  margin: 0;
  line-height: 1.5;
  max-width: 46ch;
}
@media (prefers-reduced-motion: no-preference) {
  .thanks-email-confirm {
    transform: translateY(12px);
    transition: opacity 280ms ease-out, transform 280ms ease-out, visibility 0s;
  }
  .thanks-email-confirm.thanks-email-confirm-in {
    transform: translateY(0);
  }
}

/* =================================================================
   P0 — WALLPAPER DEVICE SILHOUETTES (spec §2.2)
   Six CSS-only device outlines. The portrait image is cropped inside
   each silhouette via clip-path; the silhouette itself is a thin
   1px deep-oak border that traces the device outline. No new image
   assets — keep the bundle weightless.
   ================================================================= */

/* Re-base the existing .wallpaper-bundle visuals to the spec palette. */
.wallpaper-bundle {
  background: rgba(199, 203, 179, 0.10);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(24px, 4vw, 40px) clamp(20px, 3vw, 32px);
  margin: clamp(28px, 5vw, 56px) 0 8px;
}
.wallpaper-bundle-header h3 {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink);
  font-size: clamp(1.25rem, 3vw, 1.625rem);
  line-height: 1.15;
}

/* Two columns on phones; three from 720px+. */
.wallpaper-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 720px) {
  .wallpaper-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Silhouette tile — the whole <a> is the tap target. */
.wallpaper-tile--silhouette {
  display: grid;
  grid-template-rows: 1fr auto auto;
  align-items: center;
  justify-items: center;
  gap: 10px;
  padding: 18px 12px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 220ms ease, transform 220ms ease,
              box-shadow 220ms ease;
  min-height: 200px;
}
.wallpaper-tile--silhouette:hover,
.wallpaper-tile--silhouette:focus-visible {
  border-color: var(--clay);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -22px rgba(60,40,20,0.45);
}
.wallpaper-tile--silhouette:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 2px;
}

/* Wallpaper-grid staggered fade-in (T+8 onward). */
@media (prefers-reduced-motion: no-preference) {
  .wallpaper-bundle .wallpaper-item {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 400ms ease-out, transform 400ms ease-out;
    transition-delay: var(--tile-stagger, 0ms);
  }
  .wallpaper-bundle--in .wallpaper-item {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Wallpaper preview tiles — clean image-only thumbnails (no device mockup).
   The cropped image already has the correct device aspect ratio (produced by
   buildWallpaperBundle's canvas). We just want to display it as a clean print
   — no rounded device outline, no black device chrome, no inset shadow
   mimicking a screen. Just the bare cropped file at its true aspect ratio,
   with a hairline edge so it reads as a card on the cream paper background. */
.wallpaper-silhouette {
  position: relative;
  display: block;
  width: 100%;
  max-width: 96px;
  background: var(--paper-2);
  overflow: hidden;
  border: 1px solid rgba(26, 24, 20, 0.10);
  border-radius: 0;
  box-shadow: 0 1px 2px rgba(60, 40, 20, 0.06);
}
.wallpaper-silhouette img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Per-device aspect ratios — these match the canvas output dimensions so the
   image fills the tile without further cropping. No clip-path, no rounded
   corners, no device chrome. */
.wallpaper-silhouette--iphone  { aspect-ratio: 1290 / 2796; max-width: 64px; }
.wallpaper-silhouette--android { aspect-ratio: 1080 / 2400; max-width: 64px; }
.wallpaper-silhouette--ipad    { aspect-ratio: 2048 / 2732; max-width: 96px; }
.wallpaper-silhouette--lock    { aspect-ratio: 1 / 1;       max-width: 96px; }
.wallpaper-silhouette--watch   { aspect-ratio: 410 / 502;   max-width: 60px; }

.wallpaper-tile--silhouette .wallpaper-label {
  font-size: 12px;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--ink-2);
  text-align: center;
  line-height: 1.3;
}
.wallpaper-tile--silhouette .wallpaper-cta {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--olive-dark);
  font-weight: 600;
}

/* =================================================================
   P0 — REDUCED MOTION OVERRIDES
   Under prefers-reduced-motion: reduce, every transition collapses
   to a 120ms opacity fade and all transforms are removed.
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
  .thanks-progress-ring { animation: none; }
  .thanks-portrait,
  .thanks-reveal-eyebrow,
  .thanks-reveal-h1,
  .thanks-reveal-cta-block,
  .thanks-email-confirm,
  .wallpaper-bundle .wallpaper-item,
  .thanks-reveal-ring {
    transition: opacity 120ms linear !important;
    transform: none !important;
  }
  .thanks-reveal-ring.thanks-reveal-ring-out {
    max-height: 0; padding: 0; margin: 0;
  }
}

/* =================================================================
   P0 — LEGACY OVERRIDES
   The old #download-card / #download-pending blocks are still in
   the DOM for the state machine, but visually hidden. The reveal
   block owns the moment of transaction now.
   ================================================================= */
.stage[data-stage="thanks"] #download-card[hidden],
.stage[data-stage="thanks"] #download-pending[hidden] {
  display: none !important;
}
.stage[data-stage="thanks"] #download-card[aria-hidden="true"] {
  display: none !important;
}