/* =============================================================================
   seo-landing.css — occasion / category landing pages
   Self-contained, brand-matched (cream + serif display + sage/gold), light
   theme (the site forces light). Mobile-first.
   ========================================================================== */
:root{
  --cream:#FBF4E6; --cream-2:#F6ECD7; --paper:#FFFDF8;
  --ink:#33352B; --ink-2:#5C5A49; --muted:#8A836E;
  --sage:#7C9A62; --sage-d:#5E7A47; --gold:#C4912B; --rose:#E67C93;
  --line:#E9DEC6;
  --serif:'Boska','Cormorant Garamond',Georgia,serif;
  --body:'General Sans','Inter','Helvetica Neue',system-ui,sans-serif;
  --script:'Caveat','Brush Script MT',cursive;
  --wrap:1080px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--body); color:var(--ink);
  background:
    radial-gradient(120% 60% at 50% -10%, #FEFBF3 0%, var(--cream) 46%, var(--cream-2) 100%)
    no-repeat, var(--cream);
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--sage-d)}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 22px}

/* header */
.lp-header{position:sticky; top:0; z-index:20; background:rgba(251,244,230,.82);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.lp-header__in{display:flex; align-items:center; justify-content:space-between; height:66px}
.lp-brand{display:flex; align-items:center; gap:.5em; font-weight:700; font-size:1.15rem;
  color:var(--ink); text-decoration:none; letter-spacing:.01em}
.lp-brand svg{width:24px; height:24px; color:var(--sage)}
.lp-nav{display:flex; gap:20px; align-items:center; font-weight:600; font-size:.95rem}
.lp-nav a{color:var(--ink-2); text-decoration:none}
.lp-nav a:hover{color:var(--sage-d)}
.lp-cta{background:var(--gold); color:#fff !important; padding:9px 18px; border-radius:999px;
  box-shadow:0 10px 22px -10px rgba(196,145,43,.7)}
@media (max-width:620px){ .lp-nav a:not(.lp-cta){display:none} }

/* breadcrumbs */
.lp-crumbs{font-size:.82rem; color:var(--muted); padding:16px 0 0}
.lp-crumbs a{color:var(--muted); text-decoration:none}
.lp-crumbs a:hover{color:var(--sage-d)}
.lp-crumbs span{margin:0 .4em; color:var(--gold)}

/* hero */
.lp-hero{padding:26px 0 8px; text-align:center}
.lp-eyebrow{font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--sage-d); font-size:.72rem}
.lp-h1{font-family:var(--serif); font-weight:500; line-height:1.03; letter-spacing:-.5px;
  font-size:clamp(2.2rem,7vw,3.6rem); margin:.28em auto .2em; max-width:14ch; text-wrap:balance}
.lp-sub{font-size:clamp(1.02rem,2.4vw,1.22rem); color:var(--ink-2); max-width:62ch;
  margin:0 auto 22px; text-wrap:balance}
.lp-hero__cta{display:inline-flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-bottom:6px}
.btn{display:inline-block; font-weight:700; text-decoration:none; border-radius:999px; padding:14px 30px; font-size:1.02rem}
.btn--primary{background:var(--sage); color:#fff; box-shadow:0 16px 34px -16px rgba(94,122,71,.7)}
.btn--ghost{background:var(--paper); color:var(--ink); border:1px solid var(--line)}
.lp-price{color:var(--muted); font-weight:600; font-size:.9rem; margin-top:12px; letter-spacing:.03em}

/* template cards */
.lp-section{padding:40px 0}
.lp-section h2{font-family:var(--serif); font-weight:500; font-size:clamp(1.6rem,4.4vw,2.3rem);
  line-height:1.1; margin:0 0 .5em; text-wrap:balance}
.lp-section p{margin:0 0 1em; max-width:70ch}
.lp-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:22px; margin-top:8px}
.lp-card{background:var(--paper); border:1px solid var(--line); border-radius:20px; overflow:hidden;
  text-decoration:none; color:inherit; display:flex; flex-direction:column;
  box-shadow:0 22px 44px -30px rgba(70,55,25,.5); transition:transform .18s ease, box-shadow .18s ease}
.lp-card:hover{transform:translateY(-4px); box-shadow:0 30px 54px -28px rgba(70,55,25,.55)}
.lp-card__img{aspect-ratio:5/7; width:100%; object-fit:cover; object-position:top; display:block; background:var(--cream-2)}
.lp-card__body{padding:16px 18px 20px}
.lp-card__name{font-family:var(--serif); font-size:1.35rem; line-height:1.05; margin:0 0 .15em}
.lp-card__sub{color:var(--muted); font-size:.86rem; margin:0 0 .7em}
.lp-card__row{display:flex; align-items:center; justify-content:space-between}
.lp-card__price{font-weight:700; color:var(--gold)}
.lp-card__go{font-weight:700; color:var(--sage-d); font-size:.9rem}

/* prose sections */
.lp-prose{padding:8px 0 8px}
.lp-prose .lp-block{padding:26px 0; border-top:1px solid var(--line)}
.lp-prose .lp-block:first-child{border-top:0}

/* faq */
.lp-faq details{border-bottom:1px solid var(--line); padding:6px 0}
.lp-faq summary{font-family:var(--serif); font-size:1.2rem; padding:14px 0; cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; gap:16px; align-items:center}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{content:"+"; color:var(--gold); font-family:var(--body); font-weight:700; font-size:1.4rem}
.lp-faq details[open] summary::after{content:"–"}
.lp-faq p{margin:0 0 16px; color:var(--ink-2); max-width:70ch}

/* related */
.lp-related{display:flex; flex-wrap:wrap; gap:12px; margin-top:8px}
.lp-chip{background:var(--paper); border:1px solid var(--line); border-radius:999px;
  padding:10px 20px; text-decoration:none; color:var(--ink); font-weight:600; font-size:.95rem}
.lp-chip:hover{border-color:var(--sage); color:var(--sage-d)}

/* closing cta band */
.lp-band{margin:30px 0 12px; background:linear-gradient(180deg,#fff 0%, var(--paper) 100%);
  border:1px solid var(--line); border-radius:26px; padding:40px 28px; text-align:center}
.lp-band h2{font-family:var(--serif); font-weight:500; font-size:clamp(1.7rem,4.6vw,2.4rem); margin:0 0 .35em}
.lp-band p{color:var(--ink-2); max-width:52ch; margin:0 auto 22px}

/* footer */
.lp-footer{border-top:1px solid var(--line); margin-top:36px; padding:30px 0; color:var(--muted); font-size:.9rem}
.lp-footer__in{display:flex; flex-wrap:wrap; gap:18px 26px; align-items:center; justify-content:space-between}
.lp-footer__links{display:flex; flex-wrap:wrap; gap:16px}
.lp-footer a{color:var(--ink-2); text-decoration:none}
.lp-footer a:hover{color:var(--sage-d)}

@media (prefers-reduced-motion:reduce){ .lp-card{transition:none} }

/* ---- comparison table ---- */
.lp-tablewrap{overflow-x:auto; margin-top:8px}
.lp-table{width:100%; border-collapse:collapse; min-width:520px; background:var(--paper);
  border:1px solid var(--line); border-radius:16px; overflow:hidden}
.lp-table th,.lp-table td{padding:14px 16px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; font-size:.96rem}
.lp-table thead th{background:var(--cream-2); font-family:var(--body); font-weight:700; font-size:.9rem}
.lp-table thead th:nth-child(2){color:var(--sage-d)}
.lp-table tbody th{font-weight:600; color:var(--ink); width:34%}
.lp-table td:nth-child(2){color:var(--ink); font-weight:600}
.lp-table tr:last-child th,.lp-table tr:last-child td{border-bottom:0}
.lp-tablenote{font-size:.82rem; color:var(--muted); margin-top:12px}

/* ---- article ---- */
.lp-hero--article{padding-top:20px; text-align:left}
.lp-hero--article .lp-h1{max-width:20ch; margin-left:0; text-align:left}
.lp-hero--article .lp-sub{margin-left:0; text-align:left}
.lp-hero--article .lp-eyebrow{display:block}
.lp-byline{color:var(--muted); font-size:.9rem; font-weight:600; margin-top:6px}
.lp-article .lp-prose p{font-size:1.06rem}
.lp-article .lp-block h2{font-size:clamp(1.4rem,3.6vw,1.8rem)}

/* ---- blog hub ---- */
.lp-posts{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px}
.lp-postcard{display:flex; flex-direction:column; gap:8px; text-decoration:none; color:inherit;
  background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:24px 24px 22px;
  box-shadow:0 22px 44px -34px rgba(70,55,25,.5); transition:transform .18s ease}
.lp-postcard:hover{transform:translateY(-3px)}
.lp-postcard__tag{font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--sage-d)}
.lp-postcard__title{font-family:var(--serif); font-weight:500; font-size:1.5rem; line-height:1.08; margin:0}
.lp-postcard__sub{color:var(--ink-2); font-size:.95rem; margin:0}
.lp-postcard__go{font-weight:700; color:var(--gold); font-size:.9rem; margin-top:2px}