/* ============================================================
   Dogtors Orders — shared stylesheet
   v3 · 2026-04-23 · Apothecary Garden palette (Convening #2)
           + Voice-light + Kitchen + Crest + animated hero (Convening #3)
   Built to Brand Spine v4. If this file drifts from the Spine,
   the Spine wins. See: Atlas/Dogtors/Dogtors - Brand Spine.md
   Bright-lines:
     • Honey ochre NEVER on Dispensary Forest ground.
     • No ℞ decoration. Plain cards only. Rx/Sig./Refill formatting retired.
     • The gift tier is "The Kitchen"; everyday tier has no branded label.
   ============================================================ */

/* --- Fonts --------------------------------------------------
   Moved out of CSS as a render-blocking @import — loaded now
   via <link rel="preconnect"> + <link rel="stylesheet"> in each
   HTML head so first paint isn't delayed by a Google Fonts
   round-trip. If this stylesheet is used without that head
   markup, the fallback stack below ensures the page still
   renders (serif/sans/mono).                                 */

/* --- Palette (locked by Cabinet Convening #2) --------------- */
:root {
  --forest:   #1E3A2F;   /* Dispensary Forest — primary dark, Dispensary ground */
  --sage:     #8BA082;   /* Apothecary Sage — mission color, ribbons, accents */
  --kraft:    #C9A877;   /* Kraft Tan — everyday pouches, warm ground */
  --honey:    #B8823A;   /* Honey Ochre — warm accent (cream/sage grounds ONLY) */
  --cream:    #F3EAD7;   /* Bone Cream — primary light ground, label stock */

  /* Working tones */
  --forest-2:   #16281F;       /* deeper forest for shadows */
  --forest-ink: #122018;       /* near-black forest for type on light grounds */
  --kraft-dark: #8c6f3e;       /* aged kraft for borders, muted text */
  --cream-2:    #e8ddc3;       /* deeper cream for card edges */
  --sage-dim:   #6b7f65;       /* muted sage for dividers, rules */
  --honey-dim:  #8a6122;       /* muted honey for body-size on cream */

  /* Type stack */
  --display: 'Playfair Display', Georgia, serif;
  --body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:    'JetBrains Mono', 'IBM Plex Mono', Menlo, monospace;
  --script:  'Caveat', cursive;

  /* Rhythm */
  --radius-sm: 4px;
  --radius-md: 10px;
  --max-width: 1160px;
}

/* --- Reset + base ------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  background: var(--cream);
  color: var(--forest-ink);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration-color: rgba(18,32,24,0.35); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--sage); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.3rem; }

p { margin: 0 0 1em; }

.mono { font-family: var(--mono); letter-spacing: 0.02em; }
.script { font-family: var(--script); font-weight: 700; }
.caps  { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.82em; }

/* --- Layout helpers ----------------------------------------- */
.wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 28px; }
.stack > * + * { margin-top: 1em; }
.center { text-align: center; }

/* --- Navigation --------------------------------------------- */
.nav {
  background: var(--forest);
  color: var(--cream);
  padding: 18px 0;
  border-bottom: 1px solid rgba(139,160,130,0.35);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.nav-brand {
  font-family: var(--display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--cream);
  text-decoration: none;
}
.nav-brand .brand-dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--sage);
  border-radius: 50%;
  margin: 0 6px 2px 0;
  vertical-align: middle;
}
.nav-links { display: flex; gap: 24px; align-items: center; }
.nav-links a {
  font-family: var(--body);
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--cream);
  text-decoration: none;
  opacity: 0.85;
}
.nav-links a:hover { color: var(--sage); opacity: 1; }

/* --- Surfaces — The Kitchen (forest + cream + sage accent) ---
   The gift tier. BRIGHT-LINE: honey NEVER appears on this surface
   directly. Honey only on cream-card inserts placed on this ground.
   (Class name was .surface-dispensary pre-Convening #3.)
   Layered background: radial cream warmth at top-center + darker
   forest at bottom corners — gives depth without breaking the
   forest-dominant register.                                  */
.surface-kitchen {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(243,234,215,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 120% 80% at 50% 110%, rgba(22,40,31,0.8) 0%, transparent 50%),
    linear-gradient(180deg, var(--forest) 0%, #1a3329 50%, var(--forest-2) 100%);
  color: var(--cream);
  padding: 88px 0;
  position: relative;
  overflow: hidden;
}
.surface-kitchen::before {
  /* subtle sage botanical grid texture — denser near center */
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(139,160,130,0.12) 1px, transparent 1.5px),
    radial-gradient(rgba(201,168,119,0.06) 1px, transparent 1px);
  background-size: 28px 28px, 44px 44px;
  background-position: 0 0, 14px 20px;
  pointer-events: none;
  opacity: 0.7;
}
.surface-kitchen::after {
  /* Warm kraft-cream grain overlay — parchment feel, low opacity */
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 25% 35%, rgba(201,168,119,0.04) 0%, transparent 40%),
    radial-gradient(circle at 75% 65%, rgba(243,234,215,0.035) 0%, transparent 45%);
  pointer-events: none;
}
.surface-kitchen .wrap { position: relative; z-index: 1; }
.surface-kitchen h1, .surface-kitchen h2, .surface-kitchen h3 { color: var(--cream); }
.surface-kitchen .accent { color: var(--sage); }

/* --- Surfaces — Everyday pouches (kraft + forest ink) -------
   The unbranded everyday tier. Class name .surface-housecall
   kept as a code identifier; user-facing label retired. ---- */
.surface-housecall {
  background: var(--kraft);
  color: var(--forest-ink);
  padding: 88px 0;
  background-image:
    radial-gradient(rgba(18,32,24,0.04) 1px, transparent 1px),
    radial-gradient(rgba(18,32,24,0.03) 1px, transparent 1px);
  background-size: 14px 14px, 20px 20px;
  background-position: 0 0, 7px 10px;
}
.surface-housecall h1, .surface-housecall h2, .surface-housecall h3 { color: var(--forest-ink); }

/* --- Surfaces — Cream (neutral) ----------------------------- */
.surface-cream {
  background: var(--cream);
  color: var(--forest-ink);
  padding: 72px 0;
}

/* --- .rx-seal — DEPRECATED post-Convening-#3 ----------------
   The typographic ℞ seal is retired from the site hero and
   replaced by the Cane Corso crest SVG (see .crest below).
   Rules retained only so legacy markup doesn't break; do not
   use in new sections.
   On The Kitchen ground: border = sage, text = cream.
   On cream ground: .rx-seal.on-cream gets honey border + ink. */
.rx-seal {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 32px;
  border: 1.5px solid var(--sage);
  border-radius: 50%;
  min-width: 200px;
  min-height: 200px;
  justify-content: center;
  position: relative;
}
.rx-seal .seal-rx {
  font-family: var(--display);
  font-size: 3.4rem;
  font-style: italic;
  font-weight: 500;
  color: var(--cream);
  line-height: 1;
}
.rx-seal .seal-mark {
  font-family: var(--display);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--sage);
  margin-top: 10px;
}
.rx-seal .seal-est {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--sage);
  opacity: 0.9;
  margin-top: 4px;
  letter-spacing: 0.12em;
}
/* Honey-on-cream variant — used inside cream-inset cards */
.rx-seal.on-cream { border-color: var(--honey); background: var(--cream); }
.rx-seal.on-cream .seal-rx { color: var(--honey); }
.rx-seal.on-cream .seal-mark,
.rx-seal.on-cream .seal-est { color: var(--honey-dim); }

/* --- Hero ---------------------------------------------------- */
.hero { text-align: center; padding: 110px 0 100px; }
.hero h1 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  max-width: 16ch;
  margin: 28px auto 20px;
  text-shadow: 0 2px 16px rgba(22,40,31,0.35);
}
.hero .lede {
  max-width: 52ch;
  margin: 0 auto 36px;
  font-size: 1.08rem;
  color: var(--cream);
  opacity: 0.92;
}
.hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Warm eyebrow line above the headline — kraft accent */
.hero-eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--kraft);
  margin-bottom: 4px;
  padding: 6px 22px;
  border-top: 1px solid rgba(201,168,119,0.4);
  border-bottom: 1px solid rgba(201,168,119,0.4);
  background: linear-gradient(90deg, transparent, rgba(201,168,119,0.08), transparent);
}

/* --- Buttons ------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 14px 28px;
  font-family: var(--body);
  font-weight: 500;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: all 160ms ease;
  border: 1.5px solid transparent;
  cursor: pointer;
}

/* Primary CTA on The Kitchen (forest) ground: cream fill */
.btn-cream {
  background: var(--cream);
  color: var(--forest);
  border-color: var(--cream);
}
.btn-cream:hover { background: transparent; color: var(--cream); }

/* Ghost CTA on The Kitchen: cream outline */
.btn-ghost-cream {
  background: transparent;
  color: var(--cream);
  border-color: var(--cream);
}
.btn-ghost-cream:hover { background: var(--cream); color: var(--forest); }

/* Sage accent button — usable on forest OR cream (sage is register-neutral) */
.btn-sage {
  background: var(--sage);
  color: var(--forest);
  border-color: var(--sage);
}
.btn-sage:hover { background: transparent; color: var(--sage); }

/* Honey CTA — ONLY on cream or sage grounds. Never inside .surface-kitchen. */
.btn-honey {
  background: var(--honey);
  color: var(--cream);
  border-color: var(--honey);
}
.btn-honey:hover { background: transparent; color: var(--honey); }

/* Forest-ink button for use on kraft/cream grounds */
.btn-ink {
  background: var(--forest);
  color: var(--cream);
  border-color: var(--forest);
}
.btn-ink:hover { background: transparent; color: var(--forest); }

.btn-ghost-ink {
  background: transparent;
  color: var(--forest);
  border-color: var(--forest);
}
.btn-ghost-ink:hover { background: var(--forest); color: var(--cream); }

/* --- Dual register cards ------------------------------------ */
.duo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 40px;
}
@media (max-width: 780px) { .duo-grid { grid-template-columns: 1fr; } }

.register-card {
  padding: 40px 34px;
  border-radius: var(--radius-md);
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.register-card .tag {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.8;
}
.register-card h3 {
  font-family: var(--display);
  font-size: 1.9rem;
  margin: 10px 0 16px;
}

.register-card.housecall {
  background: var(--kraft);
  color: var(--forest-ink);
  border: 1px solid rgba(18,32,24,0.08);
}
.register-card.housecall .tag { color: var(--forest-ink); }

.register-card.kitchen {
  background: var(--forest);
  color: var(--cream);
  border: 1px solid rgba(139,160,130,0.35);
}
.register-card.kitchen .tag { color: var(--sage); }
.register-card.kitchen h3 { color: var(--cream); }

/* --- Product cards (prescription-pad layout) ---------------- */
.rx-card {
  background: var(--cream);
  border: 1px solid var(--cream-2);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  position: relative;
  overflow: hidden;
}
.rx-card::before {
  /* subtle prescription-pad ruling — sage pen-line */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--sage) 0 60px, transparent 60px);
}
.rx-card .rx-header {
  font-family: var(--display);
  font-style: italic;
  font-size: 2rem;
  color: var(--sage-dim);
  line-height: 1;
  margin-bottom: 8px;
}
.rx-card .rx-sku-name {
  font-family: var(--display);
  font-size: 1.35rem;
  margin: 0 0 8px;
  color: var(--forest-ink);
}
.rx-card .rx-ingredient {
  font-family: var(--mono);
  font-size: 0.86rem;
  letter-spacing: 0.05em;
  color: var(--kraft-dark);
  text-transform: uppercase;
  margin-bottom: 18px;
  border-bottom: 1px dashed var(--kraft-dark);
  padding-bottom: 12px;
}
.rx-card dl.rx-lines {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 6px 14px;
  font-size: 0.94rem;
  margin: 0 0 18px;
}
.rx-card dl.rx-lines dt {
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--kraft-dark);
  padding-top: 3px;
}
.rx-card dl.rx-lines dd { margin: 0; }
.rx-card .rx-sig {
  font-family: var(--body);
  color: var(--forest-ink);
}
.rx-card .rx-signature {
  font-family: var(--script);
  font-size: 1.4rem;
  color: var(--sage-dim);
  border-top: 1px solid var(--cream-2);
  padding-top: 14px;
  margin-top: 18px;
  text-align: right;
}
.rx-card .rx-status {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
}
.rx-card .rx-status.gift { background: var(--kraft); color: var(--forest-ink); }
.rx-card .rx-status.shop { background: var(--forest); color: var(--cream); }

/* --- Card grid ---------------------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 780px) { .card-grid { grid-template-columns: 1fr; } }

/* --- Featured (sticker pack) --------------------------------
   Lives on .surface-cream — so honey accents are permitted. -- */
.featured-sticker {
  background: var(--forest);
  color: var(--cream);
  border-radius: var(--radius-md);
  padding: 52px 44px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: center;
  border: 1px solid rgba(139,160,130,0.45);
  position: relative;
}
.featured-sticker .tag {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage);
}
.featured-sticker h2 {
  font-family: var(--display);
  font-style: italic;
  color: var(--cream);
  margin: 8px 0 16px;
}
.featured-sticker .price {
  font-family: var(--display);
  font-size: 2.2rem;
  color: var(--sage);
  margin: 12px 0;
}
/* The sticker-visual is a cream card INSIDE forest — honey allowed here. */
.featured-sticker .sticker-visual {
  background: var(--cream);
  color: var(--forest-ink);
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px;
  font-family: var(--display);
  font-style: italic;
  position: relative;
  border: 1px solid var(--honey);
}
@media (max-width: 780px) {
  .featured-sticker { grid-template-columns: 1fr; padding: 36px 28px; }
}

/* --- Laurel divider ----------------------------------------- */
.laurel {
  display: block;
  text-align: center;
  margin: 48px auto;
  font-family: var(--display);
  font-style: italic;
  color: var(--sage-dim);
  font-size: 0.88rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.laurel::before, .laurel::after {
  content: "— — — — —";
  opacity: 0.5;
  margin: 0 14px;
  letter-spacing: 0;
}

/* --- Signature block (founders) ----------------------------- */
.signatures {
  display: flex;
  justify-content: center;
  gap: 42px;
  margin: 40px 0 12px;
  flex-wrap: wrap;
}
.signatures .sig {
  text-align: center;
}
.signatures .sig .handwriting {
  font-family: var(--script);
  font-size: 2.1rem;
  color: var(--sage-dim);
  line-height: 1;
  margin-bottom: 4px;
}
.signatures .sig .credential {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kraft-dark);
}

/* --- Footer -------------------------------------------------- */
.site-footer {
  background: var(--forest);
  color: var(--cream);
  padding: 48px 0 36px;
  font-size: 0.92rem;
  border-top: 1px solid rgba(139,160,130,0.3);
}
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; align-items: center; }
.site-footer a { color: var(--sage); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: var(--cream); }
.footer-meta {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(243,234,215,0.55);
}

/* --- Forms (waitlist / DM-to-order) ------------------------- */
.inline-form {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.inline-form input[type="email"] {
  flex: 1;
  min-width: 240px;
  padding: 13px 16px;
  font-family: var(--body);
  font-size: 0.95rem;
  border: 1.5px solid var(--cream);
  background: transparent;
  color: var(--cream);
  border-radius: var(--radius-sm);
}
.inline-form input[type="email"]::placeholder { color: rgba(243,234,215,0.55); }
.inline-form input[type="email"]:focus { outline: none; border-color: var(--sage); }

/* On cream grounds, the form needs different contrast */
.surface-cream .inline-form input[type="email"],
.surface-housecall .inline-form input[type="email"] {
  border-color: var(--forest);
  color: var(--forest-ink);
}
.surface-cream .inline-form input[type="email"]::placeholder,
.surface-housecall .inline-form input[type="email"]::placeholder { color: rgba(18,32,24,0.45); }

/* --- Story-page specific ------------------------------------- */
.story-block {
  max-width: 680px;
  margin: 0 auto;
  font-size: 1.08rem;
  line-height: 1.78;
}
.story-block p:first-of-type::first-letter {
  font-family: var(--display);
  font-size: 3.4rem;
  float: left;
  line-height: 1;
  padding: 4px 10px 0 0;
  color: var(--honey-dim);
}
.pull-quote {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.6rem;
  line-height: 1.4;
  color: var(--honey-dim);
  border-left: 3px solid var(--sage);
  padding: 8px 0 8px 22px;
  max-width: 620px;
  margin: 36px auto;
}

/* --- Utility ------------------------------------------------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--sage);
  margin-bottom: 14px;
}
.surface-housecall .eyebrow { color: var(--forest-ink); opacity: 0.85; }
.surface-cream .eyebrow { color: var(--honey-dim); }
/* Default .small color was kraft-dark which disappears on kraft surfaces;
   override on housecall ground for legibility. */
.surface-housecall .small { color: var(--forest-ink); opacity: 0.78; }

.small { font-size: 0.85rem; color: var(--kraft-dark); }

/* --- Comparison table (Dogtors vs. typical commercial treat) -
   Two-column side-by-side showing factual differences. Claims-floor
   compliant: no therapeutic claims, ingredient/production facts only. */
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: 980px;
  margin: 48px auto 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(22, 40, 31, 0.08);
  position: relative;
}
.compare-grid::after {
  /* center divider — sage */
  content: "";
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: var(--sage);
  opacity: 0.3;
  transform: translateX(-0.5px);
}
@media (max-width: 780px) {
  .compare-grid { grid-template-columns: 1fr; }
  .compare-grid::after { display: none; }
}
.compare-card {
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
}
.compare-card.ours {
  background: var(--cream);
  color: var(--forest-ink);
  border-left: 4px solid var(--sage);
}
.compare-card.theirs {
  background: var(--cream-2);
  color: var(--forest-ink);
  border-right: 4px solid rgba(140, 111, 62, 0.3);
}
.compare-card .compare-head {
  font-family: var(--display);
  font-size: 1.35rem;
  margin: 0 0 6px;
  color: var(--forest-ink);
}
.compare-card.theirs .compare-head {
  color: var(--forest-ink);
  opacity: 0.78;
  font-style: italic;
}
.compare-card .compare-sub {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 18px;
}
.compare-card.theirs .compare-sub { color: var(--forest-ink); opacity: 0.6; }
.compare-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.compare-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 0.98rem;
  line-height: 1.45;
}
.compare-list .label {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--kraft-dark);
  margin-bottom: 2px;
}
.compare-card.ours .compare-list li .icon {
  color: var(--sage);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1;
  padding-top: 2px;
}
.compare-card.theirs .compare-list li .icon {
  color: var(--kraft-dark);
  opacity: 0.45;
  font-size: 1rem;
  line-height: 1;
  padding-top: 4px;
}
.compare-card.ours .compare-list li strong { color: var(--forest-ink); }
.compare-card.theirs .compare-list li strong { color: var(--forest-ink); opacity: 0.85; }

/* --- Compliance notice -------------------------------------- */
.compliance-note {
  background: var(--cream-2);
  border: 1px dashed var(--kraft-dark);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  font-size: 0.92rem;
  color: var(--kraft-dark);
  font-family: var(--mono);
  margin: 32px 0;
}
.compliance-note strong { color: var(--forest-ink); font-family: var(--display); font-style: italic; font-size: 1.05rem; }

/* --- Image frames ------------------------------------------- */
.img-frame {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--forest);
}
.img-frame.kraft { background: var(--kraft); }
.img-frame.sage  { background: var(--sage); }
.img-frame img { display: block; width: 100%; height: auto; }

/* --- Crest (Convening #3 — primary web logo) ----------------
   v4: real packaging PNG + cream radial backlight.
   Sharpness fix (2026-04-23): the crest bitmap no longer scales
   — scale transforms at non-integer fractions resample the PNG
   and soften edges. Only the ::before halo animates now.
   GPU-layer promotion via translateZ(0) + backface-visibility to
   stabilize subpixel rendering. Explicit block + margin-auto for
   bulletproof centering. */
.crest {
  display: block;
  margin: 0 auto;
  width: 320px;
  max-width: 84%;
  height: auto;
  line-height: 0;
  filter: drop-shadow(0 8px 28px rgba(0, 0, 0, 0.45));
  position: relative;
  /* Promote to its own compositor layer so the filter doesn't
     re-rasterize against moving backgrounds. */
  transform: translateZ(0);
  backface-visibility: hidden;
}
.crest::before {
  /* subtle warm cream halo around the masked crest, bleeds to transparent */
  content: "";
  position: absolute;
  inset: -15%;
  background: radial-gradient(circle, rgba(243,234,215,0.10) 0%, rgba(201,168,119,0.04) 35%, transparent 60%);
  z-index: -1;
  pointer-events: none;
  animation: backlight-breathe 10s ease-in-out infinite;
  animation-fill-mode: both;
  will-change: opacity, transform;
}
.crest img, .crest svg {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 1;
  image-rendering: auto;
  /* Force high-quality scaling on Chromium/WebKit when the
     rendered width rounds to non-integer pixels. */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.crest.sm { width: 160px; }
.crest.lg { width: 400px; }

@keyframes backlight-breathe {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .crest::before { animation: none; }
}

/* --- Hero botanicals (Convening #3 animated flourishes) -----
   Two sage-leaf sprigs flanking the hero, gentle sway.
   BRIGHT-LINE: pointer-events none (decorative), reduced-motion respected. */
.hero { position: relative; }  /* upgrade existing .hero to positioned */
.hero-botanicals {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.hero > .wrap { position: relative; z-index: 1; }
.sage-sprig {
  position: absolute;
  width: 190px;
  height: auto;
  opacity: 0.6;
  transform-origin: top center;
  filter: drop-shadow(0 2px 18px rgba(22, 40, 31, 0.55));
}
/* Moved inward toward the midline — closer to the crest, away from the edges.
   At typical 1160px-wide hero wraps, ~18% lands roughly 200px from each edge. */
/* animation-fill-mode: both on all sprigs/specks/dust so the
   element sits at the 0% keyframe pose BEFORE animation starts,
   eliminating the load-time visual snap. */
.sage-sprig.left  { left:  18%; top: 8%;  animation: sway-l 7s ease-in-out infinite; animation-fill-mode: both; }
.sage-sprig.right { right: 18%; top: 14%; animation: sway-r 8.3s ease-in-out infinite 0.6s; animation-fill-mode: both; transform: scaleX(-1); }

/* Back-layer sprigs — smaller, lower opacity, parallax depth */
.sage-sprig.back {
  width: 120px;
  opacity: 0.22;
  filter: blur(1px) drop-shadow(0 2px 12px rgba(22,40,31,0.4));
}
.sage-sprig.back.left  { left:  8%; top: 28%; animation: sway-l 11s ease-in-out infinite 1.2s; animation-fill-mode: both; }
.sage-sprig.back.right { right: 8%; top: 32%; animation: sway-r 12s ease-in-out infinite 1.8s; animation-fill-mode: both; transform: scaleX(-1); }

/* Front specks — cream/sage/kraft dust motes drifting up */
.sage-speck {
  position: absolute;
  width: 40px;
  height: auto;
  opacity: 0;              /* starts invisible — fill-mode: both brings 0% in */
  animation: float-up 14s linear infinite;
  animation-fill-mode: both;
}
.sage-speck.s1 { left: 12%; top: 78%; animation-delay: 0s;  }
.sage-speck.s2 { left: 82%; top: 72%; animation-delay: 5s;  width: 28px; }
.sage-speck.s3 { left: 48%; top: 88%; animation-delay: 9s;  width: 34px; }
.sage-speck.s4 { left: 22%; top: 92%; animation-delay: 3s;  width: 22px; animation-duration: 16s; }
.sage-speck.s5 { left: 68%; top: 95%; animation-delay: 7s;  width: 26px; animation-duration: 18s; }
.sage-speck.s6 { left: 38%; top: 82%; animation-delay: 11s; width: 18px; animation-duration: 13s; }
.sage-speck.s7 { left: 88%; top: 90%; animation-delay: 2s;  width: 24px; animation-duration: 17s; }
.sage-speck.s8 { left: 6%;  top: 84%; animation-delay: 8s;  width: 30px; animation-duration: 15s; }

/* Warm cream/kraft dust — adds beige warmth without crowding */
.cream-dust {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(243,234,215,0.6) 0%, rgba(201,168,119,0.3) 50%, transparent 80%);
  pointer-events: none;
  opacity: 0;              /* starts invisible — fill-mode: both */
  animation: cream-drift 18s linear infinite;
  animation-fill-mode: both;
}
.cream-dust.d1 { left: 18%; top: 65%; animation-delay: 0s;  }
.cream-dust.d2 { left: 72%; top: 55%; animation-delay: 4s;  width: 4px; height: 4px; }
.cream-dust.d3 { left: 42%; top: 70%; animation-delay: 8s;  width: 8px; height: 8px; }
.cream-dust.d4 { left: 58%; top: 80%; animation-delay: 12s; width: 5px; height: 5px; }
.cream-dust.d5 { left: 28%; top: 85%; animation-delay: 6s;  width: 7px; height: 7px; }
.cream-dust.d6 { left: 84%; top: 75%; animation-delay: 2s;  }
.cream-dust.d7 { left: 12%; top: 50%; animation-delay: 10s; width: 4px; height: 4px; }

@keyframes sway-l {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2.5deg); }
}
@keyframes sway-r {
  0%, 100% { transform: scaleX(-1) rotate(-2.5deg); }
  50%      { transform: scaleX(-1) rotate(2deg); }
}
@keyframes float-up {
  0%   { transform: translateY(0)    translateX(0)    rotate(0deg);   opacity: 0; }
  15%  { opacity: 0.28; }
  50%  { transform: translateY(-90px) translateX(12px) rotate(10deg); }
  85%  { opacity: 0.28; }
  100% { transform: translateY(-200px) translateX(-8px) rotate(20deg); opacity: 0; }
}
@keyframes cream-drift {
  0%   { transform: translateY(0)     translateX(0)   scale(1);   opacity: 0; }
  20%  { opacity: 0.55; }
  50%  { transform: translateY(-120px) translateX(20px) scale(1.2); }
  80%  { opacity: 0.55; }
  100% { transform: translateY(-280px) translateX(-15px) scale(0.8); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sage-sprig, .sage-speck, .cream-dust { animation: none; }
}

@media (max-width: 780px) {
  .sage-sprig  { width: 110px; opacity: 0.38; }
  .sage-sprig.left  { left: 4%; }
  .sage-sprig.right { right: 4%; }
  .sage-speck { display: none; }
}

/* --- Plain product card (Convening #3 — replaces Rx card) ---
   Use .plain-card going forward. .rx-card remains for any
   legacy usage but should be migrated away from.            */
.plain-card {
  background: var(--cream);
  border: 1px solid var(--cream-2);
  border-left: 4px solid var(--sage);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  box-shadow: 0 1px 3px rgba(22, 40, 31, 0.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.plain-card .pc-status {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  align-self: flex-start;
  margin-bottom: 4px;
}
.plain-card .pc-status.gift { background: var(--kraft); color: var(--forest-ink); }
.plain-card .pc-status.shop { background: var(--forest); color: var(--cream); }
.plain-card .pc-name {
  font-family: var(--display);
  font-size: 1.4rem;
  color: var(--forest-ink);
  margin: 0;
}
.plain-card .pc-ingredient {
  font-family: var(--mono);
  font-size: 0.84rem;
  letter-spacing: 0.05em;
  color: var(--honey-dim);
  text-transform: uppercase;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--kraft-dark);
}
.plain-card .pc-blurb {
  font-family: var(--body);
  font-size: 0.98rem;
  color: var(--forest-ink);
  margin: 0;
}
.plain-card .pc-sig {
  font-family: var(--script);
  font-size: 1.2rem;
  color: var(--sage-dim);
  text-align: right;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--cream-2);
}
.plain-card .pc-price {
  font-family: var(--display);
  font-size: 1.1rem;
  color: var(--honey-dim);
  font-style: italic;
}

/* Forest variant — plain card on The Kitchen surface */
.plain-card.on-forest {
  background: var(--forest-2);
  color: var(--cream);
  border-color: rgba(139,160,130,0.3);
  border-left-color: var(--sage);
}
.plain-card.on-forest .pc-name { color: var(--cream); }
.plain-card.on-forest .pc-ingredient { color: var(--sage); border-color: rgba(139,160,130,0.35); }
.plain-card.on-forest .pc-blurb { color: rgba(243,234,215,0.9); }
.plain-card.on-forest .pc-sig { color: var(--sage); border-color: rgba(139,160,130,0.25); }
.plain-card.on-forest .pc-price { color: var(--sage); }

/* --- Placeholder frames (pre-launch photo/video slots) ------
   Intentional empty slots where founders drop media later.
   Reads as "coming soon," not as "broken." If a real <img> or
   <video> is dropped inside, it fills the frame via object-fit
   and the .placeholder-content block can be hidden with
   .has-media on the parent. Used on the landing page for the
   pouch showcase, the Nova video slot, and on the products
   page for product-card image headers.                        */
.placeholder-frame {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--cream-2);
  border: 1.5px dashed var(--kraft-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kraft-dark);
  font-family: var(--mono);
  font-size: 0.82rem;
  text-align: center;
  padding: 28px;
  min-height: 240px;
}
.placeholder-frame.ratio-4-5  { aspect-ratio: 4/5; min-height: 0; }
.placeholder-frame.ratio-16-9 { aspect-ratio: 16/9; min-height: 0; }
.placeholder-frame.ratio-1-1  { aspect-ratio: 1/1; min-height: 0; }
.placeholder-frame.ratio-3-2  { aspect-ratio: 3/2; min-height: 0; }
.placeholder-frame.ratio-4-3  { aspect-ratio: 4/3; min-height: 0; }
.placeholder-frame .placeholder-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 36ch;
}
.placeholder-frame .placeholder-icon {
  font-family: var(--display);
  font-style: italic;
  font-size: 2.2rem;
  color: var(--sage);
  margin-bottom: 10px;
  line-height: 1;
}
.placeholder-frame .placeholder-label {
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage-dim);
  margin-bottom: 6px;
  font-size: 0.72rem;
  font-weight: 600;
}
.placeholder-frame .placeholder-hint {
  color: var(--kraft-dark);
  opacity: 0.85;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-transform: none;
  line-height: 1.5;
}
.placeholder-frame > img,
.placeholder-frame > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.placeholder-frame.has-media .placeholder-content { display: none; }

/* Forest-ground variant (for Nova video on The Kitchen surface) */
.placeholder-frame.on-forest {
  background: rgba(22,40,31,0.45);
  border-color: rgba(139,160,130,0.5);
}
.placeholder-frame.on-forest .placeholder-icon  { color: var(--sage); }
.placeholder-frame.on-forest .placeholder-label { color: var(--sage); }
.placeholder-frame.on-forest .placeholder-hint  { color: rgba(243,234,215,0.7); opacity: 0.95; }

/* --- Pouch showcase (landing-page pouch photo slot) ---------
   Photo-forward hero B-side, immediately below the forest hero.
   Gives a skeptical reader something concrete — pouch in frame,
   price & ingredient adjacent — before the pillar cards.
   Ground: cream (kraft pouch pops, honey accents allowed).    */
.pouch-showcase {
  background: var(--cream);
  padding: 88px 0;
}
.pouch-showcase .wrap {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 860px) {
  .pouch-showcase .wrap { grid-template-columns: 1fr; gap: 36px; }
}
.pouch-showcase .ps-frame {
  aspect-ratio: 4/5;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--kraft);
  box-shadow: 0 20px 60px rgba(22,40,31,0.18);
  position: relative;
}
.pouch-showcase .ps-frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pouch-showcase .ps-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--honey-dim);
  margin: 20px 0 6px;
}
.pouch-showcase .ps-meta .dot {
  width: 4px; height: 4px; background: var(--sage); border-radius: 50%; display: inline-block;
}

/* --- Video frame ---------------------------------------------
   Nova b-roll on The Kitchen surface. 16:9 default, portrait
   option for phone-shot vertical footage.                    */
.video-frame {
  aspect-ratio: 16/9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--forest-2);
  border: 6px solid var(--cream-2);
  box-shadow: 0 12px 44px rgba(22,40,31,0.3);
  position: relative;
  max-width: 920px;
  margin: 0 auto;
}
.video-frame.portrait {
  aspect-ratio: 9/16;
  max-width: 380px;
}
.video-frame > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Duo-video grid (Nova + Diesel side-by-side) ------------
   Two portrait clips laid out in one row on desktop, stacked
   on narrow screens. Each cell is capped smaller than a
   standalone portrait frame so the pair fits comfortably
   above the fold.                                           */
.duo-videos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  max-width: 640px;          /* ~ 306px per cell on desktop */
  margin: 0 auto;
  align-items: start;
}
.duo-videos .video-cell {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.duo-videos .video-frame.portrait {
  max-width: none;
  width: 100%;
}
.duo-videos figcaption {
  text-align: center;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(243,234,215,0.65);
  margin-top: 14px;
  line-height: 1.5;
}
.duo-videos figcaption strong {
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--cream);
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 4px;
  font-weight: 500;
}
@media (max-width: 720px) {
  .duo-videos { grid-template-columns: 1fr; max-width: 340px; gap: 32px; }
}
.video-caption {
  text-align: center;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
  margin-top: 18px;
  opacity: 0.85;
}

/* --- Product card — image header + price tag ----------------
   Extends .plain-card with a top image band (or placeholder)
   and a visible price tag for the products page.            */
.plain-card .pc-image {
  aspect-ratio: 4/3;
  margin: -32px -28px 18px;
  background: var(--cream-2);
  border-bottom: 1px solid var(--cream-2);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kraft-dark);
}
.plain-card .pc-image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.plain-card.on-forest .pc-image {
  background: var(--forest);
  border-bottom-color: rgba(139,160,130,0.25);
  color: var(--sage);
}
.plain-card .pc-image-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  padding: 0 18px;
  opacity: 0.75;
}
.plain-card .pc-price-tag {
  font-family: var(--display);
  font-size: 1.9rem;
  color: var(--honey-dim);
  font-style: italic;
  margin: 4px 0 0;
  line-height: 1;
}
.plain-card .pc-price-tag .unit {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kraft-dark);
  margin-left: 8px;
  vertical-align: middle;
}
.plain-card.on-forest .pc-price-tag { color: var(--sage); }
.plain-card.on-forest .pc-price-tag .unit { color: rgba(243,234,215,0.6); }

/* --- Accessibility ------------------------------------------ */
:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* --- Nav brand mark — small inline logo next to wordmark (added 2026-04-25) --- */
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.nav-brand .brand-mark {
  width: 32px;
  height: 32px;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}

/* --- Chicken-breast card image — match the dual-pouch landscape photo (1.4:1) so no kraft strip shows under the image --- */
#pouch .pc-image {
  aspect-ratio: 7/5;
  background: var(--forest);
}
#pouch .pc-image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* --- Scroll-triggered reveal motion (added 2026-04-25) --------
   Gentle fade-up as sections enter the viewport. Disabled when
   the user has prefers-reduced-motion set, per accessibility
   defaults. Initial state is invisible/translated; .is-visible
   restores. Stagger variant cascades children with a small delay. */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.75s ease-out, transform 0.75s ease-out;
    will-change: opacity, transform;
  }
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Stagger children — each card/row enters in sequence */
  .reveal-stagger > * {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.65s ease-out, transform 0.65s ease-out;
    will-change: opacity, transform;
  }
  .reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.06s; }
  .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.16s; }
  .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.26s; }
  .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.36s; }
  .reveal-stagger.is-visible > * {
    opacity: 1;
    transform: translateY(0);
  }

  /* Origin pull-quote — slightly larger arrival, longer ease */
  .reveal-origin {
    opacity: 0;
    transform: translateY(22px) scale(0.985);
    transition: opacity 1.1s ease-out, transform 1.1s ease-out;
    will-change: opacity, transform;
  }
  .reveal-origin.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* prefers-reduced-motion: reveals collapse to no-op, content stays visible */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > *, .reveal-origin {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --- Plain-card hover interactivity (added 2026-04-25) --------
   Subtle, classy lift + slight rotational tilt on hover. Restrained
   — like a card being lifted off a counter, not a 3D web demo.
   Applies to all .plain-card instances (products page SKUs +
   homepage pillar grid). Disabled under prefers-reduced-motion. */

.plain-card {
  transition:
    transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-left-color 320ms ease-out;
  transform-origin: center bottom;
  will-change: transform;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .plain-card:hover {
    transform: translateY(-5px) rotate(0.5deg) scale(1.006);
    box-shadow:
      0 14px 32px rgba(22, 40, 31, 0.12),
      0 4px 10px rgba(22, 40, 31, 0.08);
    border-left-color: var(--honey);
  }
}

/* --- Image rendering hint — sharpens browser downscale of large photo
   sources (especially the dual-pouch product studio shot at 1484×1060
   rendered into ~336px card slots). Only kicks in where supported;
   safe fallback to default rendering elsewhere. */
.plain-card .pc-image > img,
.img-frame > img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* --- Featured reveal — pouch showcase ("One pouch. One ingredient.")
   Heavier than standard .reveal — text rises with cascaded children,
   image slides in from the right with a soft scale bloom. This is
   the audience-capture section, so it gets the most prominent motion.
   Designed to feel like the page is exhaling into this view. */

@media (prefers-reduced-motion: no-preference) {
  /* Text column — children stagger up */
  .reveal-feature-text > * {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.85s ease-out, transform 0.85s ease-out;
    will-change: opacity, transform;
  }
  .reveal-feature-text.is-visible > *:nth-child(1) { transition-delay: 0.10s; }
  .reveal-feature-text.is-visible > *:nth-child(2) { transition-delay: 0.22s; }
  .reveal-feature-text.is-visible > *:nth-child(3) { transition-delay: 0.34s; }
  .reveal-feature-text.is-visible > *:nth-child(4) { transition-delay: 0.46s; }
  .reveal-feature-text.is-visible > *:nth-child(5) { transition-delay: 0.58s; }
  .reveal-feature-text.is-visible > * {
    opacity: 1;
    transform: translateY(0);
  }

  /* Image column — slides in from the right + soft scale bloom */
  .reveal-feature-image {
    opacity: 0;
    transform: translateX(48px) scale(0.94);
    transition:
      opacity 1.15s cubic-bezier(0.2, 0.8, 0.2, 1),
      transform 1.15s cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-delay: 0.18s;
    will-change: opacity, transform;
  }
  .reveal-feature-image.is-visible {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-feature-text > *, .reveal-feature-image {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --- Chicken-breast card image — final fix for the persistent kraft strip.
   Drop the fixed aspect-ratio frame entirely; let the image render at its
   natural ratio so there is no empty container space. !important wins
   regardless of cascade order against the .plain-card .pc-image base
   rules above. */
#pouch .pc-image {
  aspect-ratio: auto !important;
  display: block !important;
  background: transparent !important;
  height: auto !important;
}
#pouch .pc-image > img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* --- img-frame fill (added 2026-04-25) — when an .img-frame has a fixed
   aspect-ratio, force the inner img to fill the frame with object-fit: cover
   instead of using natural height. Prevents the image from rendering at the
   wrong height (or seeming invisible) in containers with a forced ratio. */
.img-frame { display: block; }
.img-frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* --- Nav IG link promoted to primary CTA (added 2026-04-25) ----
   Pill style on the IG link so the most-important pre-launch
   action — follow on Instagram — reads as the visual destination
   in the nav. Stays subtle on cream/forest grounds. */
.nav-links a[href*="instagram"] {
  background: var(--sage);
  color: var(--forest);
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: background 240ms ease-out, transform 240ms ease-out;
}
.nav-links a[href*="instagram"]:hover {
  background: var(--cream);
  transform: translateY(-1px);
}

/* --- Top "Two of us" band — mobile collapse to single column ----
   The 3-cell trio (family-trail photo + Nova rolling video + Nova
   candid video) stacks on phones so each cell is readable instead
   of squeezed to ~110px wide. Targets the inline grid set on the
   homepage's first cream section. */
@media (max-width: 780px) {
  .surface-cream .wrap > [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
  }
}

/* --- Comparison list bullet rhythm (added 2026-04-25 per design critique) ----
   ✓ in honey ochre (the brand's "yes" color); — in muted forest at low
   opacity. Lets the eye scan the table as scoring rather than decoration. */
.compare-card.ours .compare-list li .icon {
  color: var(--honey);
  font-weight: 700;
  font-size: 1.1em;
}
.compare-card.theirs .compare-list li .icon {
  color: var(--forest-ink);
  opacity: 0.32;
  font-weight: 400;
}

/* Loosen body copy leading on long-form text (critique recommendation) */
.compare-list li, .story-block p, .lede {
  line-height: 1.7;
}

/* --- Inline form mobile stack (added 2026-04-25) — on narrow viewports the
   email field + button stack vertically so the input doesn't get crushed
   below its 240px min-width when the band is on a phone. */
@media (max-width: 540px) {
  .inline-form {
    flex-direction: column;
    align-items: stretch;
  }
  .inline-form input[type="email"] {
    min-width: 0;
    width: 100%;
  }
  .inline-form button {
    width: 100%;
  }
}

/* --- Product detail hero (stickers.html) — image left, info right.
   Stacks on mobile so neither side feels squeezed. */
.product-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
  max-width: 1080px;
}
.product-hero-media { min-width: 0; }
.product-hero-info  { min-width: 0; }
@media (max-width: 860px) {
  .product-hero {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* Soft hover affordance on the sticker card — links into stickers.html. */
.plain-card.is-link {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
@media (hover: hover) {
  .plain-card.is-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(22,40,31,0.12);
  }
}