/* The First 14 Days With Your Puppy landing page. Loaded after styles.min.css on puppy.html only,
   so the certification landing page is unaffected. Uses the shared palette variables. */
.puppy-page { --sage: #86c4a3; --sage-soft: #e8f0eb; }
.puppy-page h2 { text-wrap: balance; }

.pup-section-title,
.pup-recognition h2, .pup-bedtime h2, .pup-preview h2, .pup-order h2, .pup-tired h2, .pup-get-copy h2, .pup-promise h2 {
  margin: 0 0 18px;
  color: var(--navy);
  font: 700 clamp(2rem, 3.8vw, 2.9rem)/1.02 var(--display);
}
.puppy-page main p { line-height: 1.62; }
.pup-narrow { max-width: 720px; }
.pup-narrow p { margin: 0 0 14px; color: #384254; font-size: 17px; }
.pup-strong { color: var(--navy) !important; font-weight: 750; }
.pup-small { color: var(--muted) !important; font-size: 14px !important; }

/* Hero */
.pup-hero { padding: clamp(56px, 7vw, 96px) 0 clamp(48px, 6vw, 80px); }
.pup-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}
.pup-hero-copy { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.pup-eyebrow {
  margin: 0 0 12px;
  color: var(--rust);
  font-size: clamp(.78rem, 1.4vw, .9rem);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.pup-hero h1 { margin: 0 0 16px; font-size: clamp(2.8rem, 5.6vw, 4.5rem); line-height: .96; }
.pup-sub { max-width: 560px; margin: 0 0 26px; color: #384254; font-size: 18px; line-height: 1.6; }
.pup-trust { justify-content: flex-start; margin-top: 16px; }
.pup-trust li:first-child { padding-left: 0; }
.pup-hero-photo { margin: 0; }
.pup-hero-photo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 640px;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: var(--shadow);
}

/* Recognition */
.pup-recognition { padding: clamp(56px, 7vw, 92px) 0; background: var(--paper); }
.pup-recognition .pup-narrow { margin-inline: auto; }

/* By bedtime */
.pup-bedtime { padding: clamp(56px, 7vw, 92px) 0; background: var(--cream); }
.pup-bedtime-grid, .pup-order-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: start;
  gap: clamp(32px, 5vw, 64px);
}
.pup-bedtime p, .pup-order p { margin: 0 0 14px; color: #384254; font-size: 17px; }
.pup-checks { margin: 6px 0 20px; padding: 0; list-style: none; }
.pup-checks li {
  position: relative;
  padding: 11px 0 11px 30px;
  border-top: 1px solid var(--line);
  color: #384254;
  font-size: 16px;
  line-height: 1.55;
}
.pup-checks li:last-child { border-bottom: 1px solid var(--line); }
.pup-checks li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 19px;
  width: 11px;
  height: 6px;
  border-left: 2.5px solid var(--green);
  border-bottom: 2.5px solid var(--green);
  transform: rotate(-45deg);
}
.pup-checks strong { color: var(--navy); }
.pup-inline-cta { margin-top: 6px; }
.pup-card-shot { margin: 0; }
.pup-card-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  box-shadow: var(--shadow-soft);
}
.pup-card-shot figcaption { margin-top: 10px; color: var(--muted); font-size: 13px; text-align: center; }
.pup-bedtime .pup-card-shot { position: sticky; top: 96px; max-width: 420px; justify-self: center; }

/* Preview */
.pup-preview { padding: clamp(56px, 7vw, 92px) 0; background: var(--paper); }
.pup-preview-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
}
.pup-preview p { margin: 0 0 12px; color: #384254; font-size: 16px; }
.pup-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--navy-deep);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

/* The order */
.pup-order { padding: clamp(56px, 7vw, 92px) 0; background: var(--sage-soft); }
.pup-order-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }

/* How it works */
.pup-method h2 { margin: 0 0 30px; color: white; font: 700 clamp(2rem, 4vw, 3rem)/1.02 var(--display); }
.pup-steps { max-width: 820px; }
.pup-topics { max-width: 900px; margin: 36px 0 0; }
.pup-topics img { display: block; width: 100%; height: auto; border-radius: 10px; }

/* Tired evenings */
.pup-tired { padding: clamp(56px, 7vw, 92px) 0; background: var(--cream); }
.pup-left { margin: 0 0 30px; }
.pup-video-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pup-video-grid img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: var(--shadow-soft); }
.pup-video-grid p { display: flex; flex-direction: column; gap: 2px; margin: 12px 0 0; }
.pup-video-grid strong { color: var(--navy); font-size: 15px; line-height: 1.3; }
.pup-video-grid span { color: var(--muted); font-size: 13px; }

/* What you get */
.pup-get-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(32px, 5vw, 64px);
}
.pup-get { margin: 0; }
.pup-get div { padding: 14px 0; border-top: 1px solid var(--line); }
.pup-get dt { color: var(--navy); font-weight: 800; font-size: 16px; }
.pup-get dd { margin: 4px 0 0; color: #384254; font-size: 15px; line-height: 1.55; }
.pup-get-visuals { display: flex; flex-direction: column; gap: 28px; }
.pup-scene-main { box-shadow: var(--shadow); }
.pup-planner-shot { margin: 0; }
.pup-planner-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-soft); }

/* Promise */
.pup-promise { padding: clamp(48px, 6vw, 76px) 0; background: var(--paper); }
.pup-promise .pup-narrow { margin-inline: auto; }

/* Offer */
.puppy-page .offer-copy h2 { font-size: clamp(2.3rem, 4.4vw, 3.6rem); }
.puppy-page .offer-copy > p { margin-bottom: 18px; }
.pup-offer-list { margin: 0; padding: 0; list-style: none; }
.pup-offer-list li {
  position: relative;
  padding: 8px 0 8px 28px;
  color: rgba(255, 255, 255, .9);
  font-size: 16px;
}
.pup-offer-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 15px;
  width: 11px;
  height: 6px;
  border-left: 2.5px solid var(--gold);
  border-bottom: 2.5px solid var(--gold);
  transform: rotate(-45deg);
}

/* Close */
.puppy-page .closing-cta h2 { margin-bottom: 10px; font-size: clamp(2rem, 3.6vw, 3rem); }
.pup-close-sub { margin: 0; color: #384254; font-size: 17px; }

@media (max-width: 980px) {
  .pup-video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pup-get-grid, .pup-order-grid, .pup-bedtime-grid { grid-template-columns: 1fr; }
  .pup-bedtime .pup-card-shot { position: static; }
}
@media (max-width: 760px) {
  .pup-hero-grid, .pup-preview-grid { grid-template-columns: 1fr; }
  .pup-hero-photo { order: -1; }
  .pup-hero-photo img { max-height: 340px; }
  .pup-hero h1 { font-size: clamp(2.5rem, 11vw, 3.3rem); }
  .pup-sub { font-size: 16px; }
  .pup-trust li { padding: 0 10px; }
  .puppy-page .closing-cta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 420px) {
  .pup-video-grid { grid-template-columns: 1fr; }
}