/* Only Dan's Garden — free hydrangea guide landing page.
   Everything shared with the rest of the site (colours, fonts, buttons,
   hero, cards, form fields) already comes from css/style.css. This file
   only adds the handful of things unique to this one page. */

/* This page's background is plain and light (the body's default cream,
   already set in style.css), not the illustrated hero. The header no
   longer floats over a dark image, so give it a solid green bar instead
   of the homepage's transparent-until-scrolled treatment. */
.site-header {
  position: relative;
  background: var(--dark-green);
}
.site-header.scrolled {
  background: var(--dark-green);
  backdrop-filter: none;
}
.site-header .logo-mark { filter: none !important; }
.site-header.scrolled .nav-link { color: rgba(255,255,255,0.88); }
.site-header.scrolled .nav-link:hover,
.site-header.scrolled .nav-link.active { color: var(--white); }
.site-header.scrolled .header-phone { color: var(--white); }
.site-header.scrolled .nav-toggle span { background: var(--white); }

.lead-hero { padding: 60px 0 90px; }
.lead-hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  /* Column 1 now runs on to include the "what's inside" list, so it's
     taller than the form card - align both to the top rather than
     centering the form against the full height of column 1. */
  align-items: start;
}
.lead-hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 4vw, 2.9rem);
  line-height: 1.18;
  color: var(--black);
  margin-bottom: 20px;
}
.lead-hero-title span { color: var(--pastel-pink-deep); }
.lead-hero-sub { font-size: 1.1rem; color: var(--gray); max-width: 460px; }

.whats-inside { margin-top: 28px; }
.whats-inside-list { max-width: 480px; }

.lead-hero-form .contact-form { margin: 0; }

/* Guide cover + a couple of inside pages fanned out behind it. Sits
   above the eyebrow/headline in the copy column, on both desktop and
   mobile. The stack is wider/taller than the cover itself so the
   fanned pages have room to peek out to the right without clipping. */
.guide-cover-stack {
  position: relative;
  width: 280px;
  height: 300px;
  margin: 0 0 24px;
}
.guide-cover {
  position: absolute;
  left: 0;
  top: 8px;
  width: 190px;
  aspect-ratio: 1414 / 2000;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 45px 90px -14px rgba(26, 26, 26, 0.55), 0 16px 32px rgba(26, 26, 26, 0.32);
  transform: rotate(-4deg);
  z-index: 3;
}
.guide-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The two inside pages - same treatment, smaller and progressively
   more muted the further back they sit. */
.guide-page {
  position: absolute;
  top: 0;
  width: 160px;
  aspect-ratio: 595.5 / 842.25;
  border-radius: 10px;
  object-fit: cover;
  object-position: top;
}
.guide-page-mid {
  left: 92px;
  top: 34px;
  transform: rotate(9deg);
  box-shadow: 0 26px 48px rgba(26, 26, 26, 0.35);
  z-index: 2;
  opacity: 0.97;
}
.guide-page-back {
  left: 118px;
  top: 56px;
  transform: rotate(16deg);
  box-shadow: 0 20px 38px rgba(26, 26, 26, 0.26);
  z-index: 1;
  opacity: 0.9;
}

@media (min-width: 861px) {
  /* Keep the form in view while someone reads the longer copy column. */
  .lead-hero-form { position: sticky; top: 110px; }
}

@media (max-width: 860px) {
  .lead-hero-inner { grid-template-columns: 1fr; gap: 34px; }
  .lead-hero { padding: 44px 0 56px; }
}

/* First name and email stacked full-width, rather than the shared
   .form-row's default side-by-side layout on desktop. */
.lead-form .form-row { grid-template-columns: 1fr; }
.lead-form .btn { margin-top: 4px; }

.consent-note {
  margin-top: 14px;
  font-size: 0.82rem;
  color: var(--gray);
  text-align: center;
  line-height: 1.5;
}

.guide-success-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--dark-green);
  margin-bottom: 8px;
}
.guide-success-body { color: var(--gray); margin-bottom: 18px; }

/* "Share this guide" nudge shown under the download button once someone's
   signed up - capitalises on momentum while they're already engaged. */
.share-nudge {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid rgba(26, 26, 26, 0.08);
  text-align: center;
}
.share-nudge-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--black);
  margin: 0 0 4px;
}
.share-nudge-body {
  color: var(--gray);
  font-size: 0.92rem;
  margin: 0 0 16px;
  line-height: 1.5;
}
.share-actions { display: flex; gap: 10px; }
.btn-whatsapp {
  background: #25d366;
  color: var(--white);
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35);
  flex: 1.3;
}
.btn-whatsapp:hover { background: #1ebe5a; transform: translateY(-2px); }
.btn-whatsapp svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-copy {
  background: var(--cream);
  color: var(--dark-green);
  border: 1.5px solid rgba(30, 68, 48, 0.18);
  flex: 1;
  font-size: 0.92rem;
  padding: 15px 16px;
}
.btn-copy:hover { background: #f3ecdd; }
.btn-copy.copied { background: var(--dark-green); color: var(--white); border-color: var(--dark-green); }
@media (max-width: 420px) {
  .share-actions { flex-direction: column; }
}

.whats-inside-list li { align-items: flex-start; }
.whats-inside-list .check { margin-top: 2px; }

.simple-footer { padding-top: 40px; }
.simple-footer .footer-inner {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  padding-bottom: 30px;
}
.simple-footer .footer-brand p { max-width: 420px; }