/* ============================================================
   landing.css — shared styles for the keyword landing pages
   (memorial-memory-book.html, retirement-memory-book.html,
   wedding-guest-book-alternative.html, birthday-memory-book.html,
   instead-of-flowers.html, group-photo-book.html)

   Loaded AFTER icons.css and BEFORE brand.css so brand tokens
   still win. Every color here is a brand.css variable — no new
   hexes — so a palette change in brand.css flows through.
   Breakpoints follow the brand.css system: 900 (md), 600 (sm).
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Source Sans 3',sans-serif;background:var(--white);color:var(--charcoal);font-size:16px;line-height:1.65}
img{max-width:100%}

/* ── NAV (replaced at runtime by shared-nav.js; these rules keep
      the first paint from flashing unstyled) ── */
nav{background:var(--white);border-bottom:1px solid var(--border);padding:6px 40px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:200}
.nav-logo{text-decoration:none;display:flex;align-items:center}
.nav-logo img{height:34px;width:auto}
.nav-links{display:flex;gap:24px;align-items:center;position:absolute;left:50%;transform:translateX(-50%)}
.nav-links a{font-size:12px;color:#000;text-decoration:none;text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.nav-links a:hover{color:var(--accent-warm-deep)}
.nav-right{display:flex;gap:10px;align-items:center}

/* ── Shared layout ── */
.lp-wrap{max-width:1080px;margin:0 auto;padding:0 48px}
.lp-narrow{max-width:760px;margin:0 auto}
.lp-section{padding:72px 0}
.lp-section.tint{background:var(--cream);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.lp-eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-warm-deep);margin-bottom:12px}
h1,h2,h3{font-family:'Playfair Display',serif;letter-spacing:-.01em;line-height:1.2}
h2{font-size:clamp(26px,3.2vw,34px);font-weight:700;margin-bottom:14px}
h3{font-size:19px;font-weight:600;margin-bottom:6px}
.lp-lede{font-size:18px;color:var(--mid);line-height:1.75;max-width:640px}
.lp-section p+p{margin-top:14px}
.lp-section p{color:var(--mid)}

/* ── Breadcrumb ──
   It is a <nav> for semantics, so every property the nav rule above sets has
   to be unset here or it inherits the sticky top bar. It also carries
   data-no-shared-nav so shared-nav.js never mistakes it for the main nav. */
.lp-crumb{position:static;display:block;background:transparent;border-bottom:none;
  max-width:1080px;margin:0 auto;padding:16px 48px 0;font-size:13px;color:var(--light)}
.lp-crumb a{color:var(--light);text-decoration:none}
.lp-crumb a:hover{color:var(--accent-deep);text-decoration:underline}

/* ── Hero ── */
.lp-hero{padding:52px 0 64px}
.lp-hero h1{font-size:clamp(31px,4vw,44px);font-weight:700;margin-bottom:18px;max-width:18ch}
.lp-hero .lp-hero-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.lp-hero-sub{font-size:19px;color:var(--mid);line-height:1.7;margin-bottom:28px}
.lp-hero-card{background:var(--cream);border:1px solid var(--border);border-radius:14px;padding:28px 30px}
.lp-hero-card h2{font-family:'Source Sans 3',sans-serif;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mid);margin-bottom:16px}
.lp-hero-card li{list-style:none;display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--charcoal);padding:9px 0;border-bottom:1px solid var(--border)}
.lp-hero-card li:last-child{border-bottom:none}
.lp-hero-card li svg{width:17px;height:17px;color:var(--success);flex-shrink:0;margin-top:3px}

/* ── Buttons ── */
.lp-btn{display:inline-block;background:var(--accent-warm);color:#fff;padding:14px 32px;border-radius:8px;font-size:16px;font-weight:700;text-decoration:none;border:none;cursor:pointer;font-family:'Source Sans 3',sans-serif;transition:background .2s}
.lp-btn:hover{background:var(--accent-warm-deep)}
.lp-btn-ghost{display:inline-block;padding:14px 26px;border-radius:8px;font-size:16px;font-weight:600;text-decoration:none;color:var(--charcoal);border:1px solid var(--border);background:var(--white);margin-left:10px;transition:border-color .2s}
.lp-btn-ghost:hover{border-color:var(--accent)}
.lp-btn-note{font-size:13px;color:var(--light);margin-top:12px}

/* ── Steps ── */
.lp-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:36px}
.lp-step{position:relative;padding-top:14px;border-top:2px solid var(--accent)}
.lp-step-n{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--accent-deep);margin-bottom:6px}
.lp-step p{font-size:15px;line-height:1.6}

/* ── Feature / prompt cards ── */
.lp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:36px}
.lp-card{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:24px}
.lp-card svg{width:26px;height:26px;color:var(--accent-warm-deep);margin-bottom:12px}
.lp-card p{font-size:15px;line-height:1.6}

.lp-prompts{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lp-prompt{background:var(--white);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:8px;padding:14px 18px;font-size:15px;color:var(--charcoal);font-style:italic}

/* ── Pricing ── */
.lp-price{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:32px}
.lp-price-cell{text-align:center;padding:26px 18px;background:var(--white);border:1px solid var(--border);border-radius:12px}
.lp-price-num{font-family:'Playfair Display',serif;font-size:34px;font-weight:700;color:var(--charcoal);margin-bottom:4px}
.lp-price-cell p{font-size:14px;line-height:1.55}

/* ── FAQ ── */
.lp-faq{margin-top:30px}
.lp-faq details{border-bottom:1px solid var(--border);padding:18px 0}
.lp-faq summary{cursor:pointer;font-size:17px;font-weight:600;color:var(--charcoal);list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{content:'+';font-size:22px;color:var(--accent-deep);line-height:1;flex-shrink:0}
.lp-faq details[open] summary::after{content:'\2212'}
.lp-faq details p{margin-top:12px;font-size:16px;line-height:1.7}

/* ── Related links ── */
.lp-related{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.lp-related a{display:inline-block;padding:10px 18px;border:1px solid var(--border);border-radius:999px;font-size:14px;font-weight:600;color:var(--charcoal);text-decoration:none;background:var(--white);transition:border-color .2s,color .2s}
.lp-related a:hover{border-color:var(--accent);color:var(--accent-deep)}

/* ── Closing CTA ── */
.lp-cta{background:var(--charcoal);padding:68px 48px;text-align:center}
.lp-cta h2{color:#fff;margin-bottom:12px}
.lp-cta p{color:rgba(255,255,255,.62);font-size:17px;max-width:520px;margin:0 auto 28px;line-height:1.7}

/* ── Inline links in body copy ── */
.lp-section a:not(.lp-btn):not(.lp-btn-ghost){color:var(--accent-deep);text-decoration:underline;text-underline-offset:2px}

/* ── Footer (copied structure from the rest of the site) ── */
footer{background:#fff;color:var(--mid);padding:64px 48px 32px;border-top:1px solid var(--border)}
.footer-inner{max-width:1080px;margin:0 auto}
.footer-top{display:grid;grid-template-columns:220px 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.footer-brand .logo img{height:26px;width:auto;margin-bottom:12px}
.footer-brand p{font-size:14px;line-height:1.7}
.footer-col h4{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mid);margin-bottom:16px}
.footer-col a{display:block;font-size:15px;color:var(--mid);text-decoration:none;margin-bottom:8px}
.footer-col a:hover{color:var(--accent-deep)}
.footer-col .contact-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--light);margin:16px 0 6px}
.footer-col .contact-item{font-size:15px}
.footer-bottom{border-top:1px solid var(--border);padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--light)}
.footer-bottom a{color:var(--light);text-decoration:none}

/* ── Responsive ── */
@media(max-width:900px){
  .lp-wrap,.lp-crumb{padding-left:28px;padding-right:28px}
  .lp-hero .lp-hero-inner{grid-template-columns:1fr;gap:34px}
  .lp-hero h1{max-width:none}
  .lp-steps{grid-template-columns:1fr 1fr}
  .lp-cards{grid-template-columns:1fr}
  .lp-price{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  nav{padding:6px 20px}
  .nav-links{display:none!important}
  .lp-wrap,.lp-crumb{padding-left:20px;padding-right:20px}
  .lp-section{padding:52px 0}
  .lp-hero{padding:34px 0 44px}
  .lp-steps{grid-template-columns:1fr}
  .lp-prompts{grid-template-columns:1fr}
  .lp-btn,.lp-btn-ghost{display:block;text-align:center}
  .lp-btn-ghost{margin-left:0;margin-top:10px}
  .lp-cta{padding:52px 24px}
  footer{padding:48px 24px 28px}
  .footer-top{grid-template-columns:1fr}
}

/* ── Content figures ──────────────────────────────────────
   The occasion landing pages carried no imagery at all, which
   made them weaker for image-led search and left nothing on the
   page to pin. Two variants so a portrait photo isn't cropped
   through someone's face by a 16:9 frame. */
.lp-figure{margin:0 auto 8px;padding:0;max-width:900px}
.lp-figure img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  border-radius:14px;background:var(--cream)}
.lp-figure--tall{max-width:460px}
.lp-figure--tall img{aspect-ratio:4/5}
.lp-figure figcaption{margin-top:12px;font-size:14px;line-height:1.6;color:var(--mid);
  text-align:center;max-width:640px;margin-left:auto;margin-right:auto}
.lp-figure-band{padding:0 0 8px}
@media(max-width:600px){
  .lp-figure img{aspect-ratio:4/3}
  .lp-figure--tall img{aspect-ratio:4/5}
  .lp-figure figcaption{font-size:13.5px}
}