/* ============================================================
   My Dog, My Life — Design System
   Warm & cozy, editorial, personal. No build step, no deps.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Palette — warm & cozy */
  --cream:        #FBF6EE;   /* page background           */
  --cream-deep:   #F3EADC;   /* soft section background   */
  --surface:      #FFFFFF;   /* cards                     */
  --espresso:     #3B2F2A;   /* primary text              */
  --muted:        #6B5D52;   /* secondary text            */
  --brown:        #8B5E3C;   /* brand / links             */
  --brown-dark:   #6E4A2E;   /* hover                     */
  --terracotta:   #C8553D;   /* accent / primary CTA      */
  --terracotta-d: #A8412C;   /* CTA hover                 */
  --sage:         #7C8B6B;   /* secondary accent          */
  --border:       #E8DECE;   /* hairlines                 */
  --gold:         #C9A24B;   /* star / small highlights   */

  /* Type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Spacing scale */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Layout */
  --container: 1120px;
  --container-narrow: 720px;
  --radius:    14px;
  --radius-sm: 8px;
  --shadow:    0 1px 2px rgba(59,47,42,.04), 0 12px 32px rgba(59,47,42,.08);
  --shadow-sm: 0 1px 2px rgba(59,47,42,.06), 0 4px 14px rgba(59,47,42,.06);
  --transition: .2s ease;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--espresso);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--brown);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
a:hover { color: var(--brown-dark); border-bottom-color: currentColor; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--espresso);
  margin: 0 0 var(--space-4);
}
h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
p { margin: 0 0 var(--space-4); }

ul, ol { margin: 0 0 var(--space-4); padding-left: 1.3rem; }
li { margin-bottom: var(--space-2); }

strong { color: var(--espresso); font-weight: 600; }

::selection { background: var(--terracotta); color: #fff; }

:focus-visible {
  outline: 3px solid var(--sage);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.container-narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--space-9); }
.section-sm { padding-block: var(--space-7); }
.section-cream { background: var(--cream-deep); }

.center { text-align: center; }
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: var(--space-3);
}
.lead {
  font-size: 1.2rem;
  line-height: 1.65;
  color: var(--muted);
}
.section-intro { max-width: 620px; margin-inline: auto; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 246, 238, .88);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--espresso);
  border: none;
  letter-spacing: -0.01em;
}
.brand:hover { color: var(--brown); border: none; }
.brand-mark {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: var(--terracotta);
  color: #fff;
  border-radius: 50%;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.brand small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  list-style: none;
  margin: 0; padding: 0;
}
.nav-links a {
  color: var(--espresso);
  font-weight: 500;
  font-size: .98rem;
  border: none;
}
.nav-links a:hover { color: var(--terracotta); }
.nav-cta {
  background: var(--espresso);
  color: #fff !important;
  padding: .6rem 1.1rem;
  border-radius: 999px;
  font-weight: 600;
  border: none !important;
  transition: background var(--transition), transform var(--transition);
}
.nav-cta:hover { background: #2a211d; transform: translateY(-1px); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .5rem .6rem;
  cursor: pointer;
  color: var(--espresso);
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: currentColor; margin: 4px 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  padding: .85rem 1.5rem;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  border-bottom: none !important;
  transition: all var(--transition);
}
.btn-primary {
  background: var(--terracotta);
  color: #fff;
}
.btn-primary:hover { background: var(--terracotta-d); color: #fff; transform: translateY(-2px); }
.btn-ghost {
  background: transparent;
  color: var(--espresso);
  border-color: var(--border);
}
.btn-ghost:hover { border-color: var(--brown); color: var(--brown); }
.btn-large { padding: 1rem 1.9rem; font-size: 1.05rem; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 480px at 80% -10%, rgba(200,85,61,.10), transparent 60%),
    radial-gradient(700px 400px at 0% 110%, rgba(124,139,107,.12), transparent 60%),
    var(--cream);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--space-8);
  align-items: center;
  padding-block: var(--space-9);
}
.hero h1 { margin-bottom: var(--space-4); }
.hero h1 em {
  font-style: italic;
  color: var(--terracotta);
}
.hero .lead { margin-bottom: var(--space-5); }

.hero-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5);
  display: grid;
  gap: var(--space-3);
}
.hero-bullets li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0;
  color: var(--muted);
}
.hero-bullets li::before {
  content: "✓";
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  background: var(--sage);
  color: #fff;
  border-radius: 50%;
  font-size: .8rem;
  font-weight: 700;
  margin-top: 2px;
}

/* Hero visual card */
.hero-visual {
  position: relative;
}
.hero-photo {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--cream-deep);
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow);
  position: relative;
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-photo .photo-placeholder {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--cream-deep), #e7d8c0);
  color: var(--brown);
  font-family: var(--font-display);
  text-align: center;
  padding: var(--space-5);
}
.hero-photo .photo-placeholder .paw { font-size: 3rem; display:block; margin-bottom: var(--space-3); }

.hero-badge {
  position: absolute;
  bottom: -18px; left: -18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 280px;
}
.hero-badge .stars { color: var(--gold); letter-spacing: 1px; }
.hero-badge strong { font-size: .9rem; }
.hero-badge small { display:block; color: var(--muted); font-size: .8rem; }

/* ---------- Subscribe form ---------- */
.subscribe-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.subscribe-form .form-row {
  display: flex;
  gap: var(--space-3);
}
.subscribe-form input[type="email"],
.subscribe-form input[type="text"],
.subscribe-form select {
  flex: 1;
  min-width: 0;
  width: 100%;
  /* Keep inputs and selects on this ONE shared height — see NOTES.md.
     Splitting them into separate rules brings the height mismatch back.

     min-height is load-bearing, not belt-and-braces: `.field` is a COLUMN
     flex container, so the `flex: 1` above resolves to `flex-basis: 0%` on
     the block axis and overrides `height` outright. That silently collapsed
     these inputs to their 22px content height. flex-basis does not override
     min-height, so this is what actually holds the size. */
  height: 56px;
  min-height: 56px;
  padding: 0 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: normal;
  color: var(--espresso);
  background-color: var(--cream);
  box-sizing: border-box;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.subscribe-form select {
  /* arrow + vertically center the chosen value to match text inputs */
  padding: 0 2.4rem 0 1rem;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B5D52' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  cursor: pointer;
}
.subscribe-form input::placeholder { color: #9b8c7e; }
.subscribe-form select:invalid { color: #9b8c7e; }
.subscribe-form input:focus,
.subscribe-form select:focus {
  outline: none;
  border-color: var(--brown);
  box-shadow: 0 0 0 3px rgba(139,94,60,.15);
}
.subscribe-form .btn { flex-shrink: 0; }
.subscribe-form .micro {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: .82rem;
  color: var(--muted);
  margin-top: var(--space-3);
}
.subscribe-form .micro::before { content: "🔒"; }

/* Multi-field subscribe form (email + pet details) */
.subscribe-form .field {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.subscribe-form .field label {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--muted);
}
.subscribe-form .field label .opt {
  font-weight: 400;
  color: var(--border);
  margin-left: .3rem;
}
.subscribe-form .pet-fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.subscribe-form .pet-intro {
  font-size: .85rem;
  color: var(--muted);
  margin: var(--space-4) 0 0;
  padding-top: var(--space-4);
  border-top: 1px dashed var(--border);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.subscribe-form .pet-intro::before { content: "🐾"; }
.subscribe-form .btn-block {
  width: 100%;
  margin-top: var(--space-4);
}

/* Guide chooser (radio cards inside the form) */
.subscribe-form .guide-intro {
  font-size: .85rem;
  color: var(--muted);
  margin: var(--space-4) 0 0;
  padding-top: var(--space-4);
  border-top: 1px dashed var(--border);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.subscribe-form .guide-intro::before { content: "🎁"; }
.guide-chooser {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.guide-option {
  position: relative;
  display: block;
  cursor: pointer;
}
.guide-option input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
  margin: 0;
}
.guide-option .card-box {
  /* .card-box is a <span>. Without an explicit block/flex display the border
     wraps the inline line boxes instead of the element and shatters into
     fragments, while the block-level children stack outside it. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-2);
  text-align: center;
  background: var(--cream);
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
  height: 100%;
}
.guide-option:hover .card-box { border-color: #dcc8a8; }
.guide-option input:checked + .card-box {
  border-color: var(--terracotta);
  background: #fbeee9;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(200,85,61,.12);
}
.guide-option .emoji { font-size: 1.5rem; display: block; }
.guide-option .title {
  font-weight: 600;
  font-size: .9rem;
  color: var(--espresso);
  margin-top: .2rem;
  display: block;
  line-height: 1.2;
}
.guide-option .stage {
  font-size: .75rem;
  color: var(--muted);
  display: block;
}
.guide-option input:focus-visible + .card-box {
  outline: 3px solid var(--sage);
  outline-offset: 2px;
}

/* 3-guide showcase (lead magnet section) */
.guides-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.guide-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition);
}
.guide-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.guide-cover {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: var(--space-4);
  text-align: center;
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.guide-cover.puppy { background: linear-gradient(135deg, var(--terracotta), #b14a35); }
.guide-cover.adult { background: linear-gradient(135deg, var(--brown), var(--brown-dark)); }
.guide-cover.senior { background: linear-gradient(135deg, var(--sage), #5f6e51); }
.guide-cover .emoji { font-size: 2rem; }
.guide-cover .name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  margin-top: var(--space-2);
  line-height: 1.15;
}
.guide-card h3 { font-size: 1.1rem; margin-bottom: var(--space-2); }
.guide-card .stage-pill {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: var(--space-2);
}
.guide-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
  font-size: .92rem;
  color: var(--muted);
}
.guide-card ul li {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.guide-card ul li::before { content: "✓"; color: var(--sage); font-weight: 700; }
.guide-card .btn { margin-top: auto; }

/* form states */
.form-note {
  margin-top: var(--space-3);
  padding: .8rem 1rem;
  border-radius: var(--radius-sm);
  font-size: .95rem;
  display: none;
}
.form-note.success { display:block; background: #e9f0e2; color: #3c5230; border:1px solid #cddcc0; }
.form-note.error   { display:block; background: #f6e4df; color: #8a3220; border:1px solid #e6c4ba; }
.form-note.pending { display:block; background: #f1ece4; color: #6b5c48; border:1px solid #ded5c8; }

/* The field an error message is pointing at.
   !important is deliberate: some contact-form controls carry inline border
   styles, and this error state has to win over them. Scoped to the invalid
   state only — it does not touch the shared form-control sizing rule above. */
.subscribe-form [aria-invalid="true"] {
  border-color: #c1543a !important;
  box-shadow: 0 0 0 3px rgba(193,84,58,.15) !important;
}

/* submit button while a real submission is in flight */
.subscribe-form button[type="submit"]:disabled { opacity: .6; cursor: progress; }

/* ---------- Social proof strip ---------- */
.proof-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  color: var(--muted);
}
.proof-strip .stat {
  text-align: center;
}
.proof-strip .num {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--terracotta);
  display: block;
  line-height: 1;
}
.proof-strip .lbl { font-size: .85rem; }
.proof-divider { width: 1px; height: 36px; background: var(--border); }

/* ---------- Cards / article grid ---------- */
.grid {
  display: grid;
  gap: var(--space-5);
}
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #dcc8a8; }
.card-media {
  aspect-ratio: 16 / 10;
  background: var(--cream-deep);
  display: grid;
  place-items: center;
  color: var(--brown);
  font-size: 2.4rem;
  position: relative;
  overflow: hidden;
}
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.card:hover .card-media img { transform: scale(1.04); }
.card-body { padding: var(--space-5); display:flex; flex-direction:column; flex: 1; }
.card-tag {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: var(--space-2);
}
.card h3 { margin-bottom: var(--space-2); }
.card h3 a { color: var(--espresso); border: none; }
.card h3 a:hover { color: var(--terracotta); }
.card p { color: var(--muted); font-size: .98rem; }
.card .read-more {
  margin-top: auto;
  padding-top: var(--space-4);
  font-weight: 600;
  font-size: .92rem;
}

/* ---------- Lead magnet / feature card ---------- */
.feature-card {
  background: linear-gradient(160deg, #fff, var(--cream-deep));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-7);
  box-shadow: var(--shadow);
}
.lead-magnet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: center;
}
.lead-magnet-cover {
  aspect-ratio: 3 / 4;
  background: linear-gradient(135deg, var(--terracotta), #b14a35);
  border-radius: var(--radius);
  color: #fff;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow);
  transform: rotate(-2deg);
}
.lead-magnet-cover .kicker {
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  opacity: .85;
}
.lead-magnet-cover h3 {
  color: #fff;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 0;
}
.lead-magnet-cover .paw-line { font-size: 1.5rem; opacity:.9; }
.lead-magnet ul.checks { list-style: none; padding: 0; }
.lead-magnet ul.checks li {
  display:flex; gap: var(--space-3); margin-bottom: var(--space-3);
}
.lead-magnet ul.checks li::before { content: "🐾"; }

/* ---------- Testimonials ---------- */
.quote {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--espresso);
  margin: 0;
}
.quote-author {
  margin-top: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.quote-author .avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--cream-deep);
  display: grid; place-items: center;
  font-size: 1.3rem;
}
.quote-author small { color: var(--muted); display: block; }

/* ---------- Final CTA band ---------- */
.cta-band {
  background: var(--espresso);
  color: var(--cream);
  border-radius: var(--radius);
  padding: var(--space-8) var(--space-7);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(500px 240px at 20% 0%, rgba(200,85,61,.4), transparent 60%),
    radial-gradient(400px 240px at 100% 100%, rgba(124,139,107,.3), transparent 60%);
}
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(251,246,238,.78); }
.cta-band .btn-primary { background: var(--terracotta); }
.cta-band .btn-primary:hover { background: #d9654c; }

/* ---------- Article / content page ---------- */
.article-hero { padding-block: var(--space-7) var(--space-5); }
.article-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: .9rem;
  color: var(--muted);
  margin-bottom: var(--space-4);
}
.article-meta .dot { width: 4px; height: 4px; background: var(--border); border-radius: 50%; }
.article-cover {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 8;
  background: var(--cream-deep);
  display: grid; place-items: center;
  font-size: 3rem;
  margin-bottom: var(--space-6);
}
.article-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.prose {
  max-width: 700px;
  margin-inline: auto;
}
.prose h2 { margin-top: var(--space-7); margin-bottom: var(--space-3); }
.prose h3 { margin-top: var(--space-6); margin-bottom: var(--space-3); }
.prose p { font-size: 1.1rem; line-height: 1.8; color: #44362f; }
.prose img { border-radius: var(--radius-sm); margin: var(--space-5) 0; }
.prose blockquote {
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid var(--terracotta);
  background: var(--cream-deep);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--espresso);
}
.prose ul, .prose ol { font-size: 1.05rem; line-height: 1.8; }
.prose .callout {
  background: #eef2e8;
  border: 1px solid #d6e0c9;
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-5) 0;
}
.prose .callout h4 { margin: 0 0 var(--space-2); color: var(--sage); }

.author-box {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
  margin: var(--space-7) 0;
}
.author-box .avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--cream-deep); display:grid; place-items:center; font-size: 2rem; flex-shrink:0; }
.author-box h4 { margin: 0 0 .25rem; }
.author-box p { margin: 0; color: var(--muted); font-size: .95rem; }

/* ---------- Legal / simple content pages ---------- */
.page-header {
  padding-block: var(--space-8) var(--space-5);
  text-align: center;
}
.legal-doc {
  max-width: 760px;
  margin-inline: auto;
  font-size: 1rem;
  line-height: 1.8;
}
.legal-doc h2 { margin-top: var(--space-7); }
.legal-doc h3 { margin-top: var(--space-5); }
.legal-doc .updated { color: var(--muted); font-size: .9rem; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--espresso);
  color: rgba(251,246,238,.78);
  padding-block: var(--space-8) var(--space-5);
  margin-top: var(--space-8);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}
.footer-grid .brand { color: #fff; }
.footer-grid .brand small { color: rgba(251,246,238,.6); }
.footer-tagline { font-size: .95rem; max-width: 280px; }
.site-footer h4 {
  color: #fff;
  font-family: var(--font-body);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: var(--space-2); }
.site-footer a { color: rgba(251,246,238,.78); border: none; font-size: .95rem; }
.site-footer a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(251,246,238,.15);
  padding-top: var(--space-5);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: .85rem;
  color: rgba(251,246,238,.55);
}
.socials { display: flex; gap: var(--space-3); }
.socials a {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(251,246,238,.2);
  display: grid; place-items: center;
  color: rgba(251,246,238,.8);
}
.socials a:hover { background: var(--terracotta); border-color: var(--terracotta); color: #fff; }

/* ---------- Utility ---------- */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.text-center { text-align: center; }
.hide-sm { }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .hero-visual { max-width: 420px; }
  .lead-magnet { grid-template-columns: 1fr; gap: var(--space-5); }
  .lead-magnet-cover { max-width: 280px; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  body { font-size: 1rem; }
  .nav-links {
    position: fixed;
    inset: 64px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--cream);
    border-bottom: 1px solid var(--border);
    padding: var(--space-4) var(--space-5) var(--space-6);
    gap: var(--space-4);
    transform: translateY(-130%);
    transition: transform .3s ease;
    box-shadow: var(--shadow);
  }
  .nav-links.open { transform: translateY(0); }
  .nav-toggle { display: block; }
  .nav-cta { text-align: center; }

  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .section { padding-block: var(--space-8); }
  .subscribe-form .form-row { flex-direction: column; }
  .subscribe-form .btn { width: 100%; }
  .subscribe-form .pet-fields { grid-template-columns: 1fr; }
  .guide-chooser { grid-template-columns: repeat(3, 1fr); }
  .guides-grid { grid-template-columns: 1fr; }
  .hero-badge { left: 0; max-width: 240px; }
  .proof-divider { display: none; }
  .cta-band { padding: var(--space-7) var(--space-5); }
}

/* Narrow phones: three guide cards across leaves them ~80px wide, which wraps
   "New Dog Guide" onto three lines. Lay each one out as a full-width row
   instead — emoji on the left, title over stage on the right. */
@media (max-width: 560px) {
  .guide-chooser {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .guide-option .card-box {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "emoji title"
      "emoji stage";
    column-gap: var(--space-3);
    align-items: center;
    text-align: left;
    padding: var(--space-3);
  }
  .guide-option .emoji { grid-area: emoji; align-self: center; }
  .guide-option .title { grid-area: title; align-self: end; margin-top: 0; }
  .guide-option .stage { grid-area: stage; align-self: start; }
  /* the lift on the selected card reads as a jitter in a stacked list */
  .guide-option input:checked + .card-box { transform: none; }

  /* These intros are flex, which makes the label and its "(parenthetical)"
     two separate flex items that wrap into narrow columns at this width.
     Let the text flow as one paragraph instead. */
  .subscribe-form .guide-intro,
  .subscribe-form .pet-intro {
    display: block;
  }
  .subscribe-form .guide-intro::before,
  .subscribe-form .pet-intro::before {
    margin-right: var(--space-2);
  }
}

@media (max-width: 420px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}