/* ============================================================
   Wedding Workbook — marketing landing page
   Romantic-editorial, same palette as the dashboard.
   ============================================================ */
:root {
  --ivory:#FBF7F2; --paper:#fff; --cream:#F4ECE2; --ink:#2E2A26; --muted:#8A8178;
  --line:#EBE2D6; --clay:#C2785B; --clay-dark:#A65E43; --sage:#8A9A7B; --sage-dark:#6F7E61;
  --blush:#E8D5CC; --gold:#C7A45B;
  --display:"Cormorant Garamond",Georgia,serif; --sans:"Jost",-apple-system,"Segoe UI",sans-serif;
  --shadow:0 1px 2px rgba(46,42,38,.04),0 12px 40px rgba(46,42,38,.08);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:var(--sans); color:var(--ink); background:var(--ivory); line-height:1.6; -webkit-font-smoothing:antialiased; }
h1,h2,h3 { font-family:var(--display); font-weight:600; margin:0; letter-spacing:.3px; line-height:1.1; }
a { color:var(--clay-dark); text-decoration:none; }
.wrap { max-width:1080px; margin:0 auto; padding:0 24px; }
.eyebrow { font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:var(--clay); font-weight:500; }
.script { font-style:italic; color:var(--clay); }

/* buttons */
.btn { display:inline-flex; align-items:center; gap:8px; border:1.5px solid var(--clay); background:var(--clay); color:#fff; padding:13px 26px; border-radius:999px; font-size:15px; font-family:var(--sans); cursor:pointer; transition:.15s; }
.btn:hover { background:var(--clay-dark); border-color:var(--clay-dark); transform:translateY(-1px); }
.btn.ghost { background:transparent; color:var(--clay-dark); }
.btn.ghost:hover { background:var(--cream); }
.btn.lg { padding:16px 34px; font-size:16px; }
.btn.sm { padding:9px 18px; font-size:13.5px; }

/* nav */
.nav { position:sticky; top:0; z-index:50; background:rgba(251,247,242,.85); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.nav .wrap { display:flex; align-items:center; justify-content:space-between; height:68px; }
.nav .logo { font-family:var(--display); font-size:24px; }
.nav .logo .amp { color:var(--clay); font-style:italic; }
.nav .links { display:flex; align-items:center; gap:28px; }
.nav .links a { color:var(--ink); font-size:14px; }
.nav .links a:hover { color:var(--clay-dark); }
@media (max-width:760px){ .nav .links a:not(.btn){ display:none; } }

/* hero */
.hero { text-align:center; padding:72px 0 40px; background:radial-gradient(900px 400px at 50% -5%, #FBEEE4 0%, transparent 65%); }
.hero h1 { font-size:62px; margin:14px 0 18px; }
.hero p.sub { font-size:19px; color:var(--muted); max-width:620px; margin:0 auto 28px; }
.hero .cta-row { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.hero .trust { margin-top:22px; font-size:13px; color:var(--muted); }
.hero .trust .stars { color:var(--gold); letter-spacing:2px; }
@media (max-width:680px){ .hero h1{ font-size:42px; } }

/* hero mock (a faux dashboard preview) */
.mock { max-width:920px; margin:46px auto 0; background:var(--paper); border:1px solid var(--line); border-radius:20px 20px 0 0; box-shadow:var(--shadow); overflow:hidden; }
.mock .bar { display:flex; gap:7px; padding:14px 18px; border-bottom:1px solid var(--line); background:var(--cream); }
.mock .bar i { width:11px; height:11px; border-radius:50%; background:var(--blush); display:inline-block; }
.mock .body { display:grid; grid-template-columns:200px 1fr; min-height:300px; }
.mock .side { border-right:1px solid var(--line); padding:18px 14px; font-size:12.5px; color:var(--muted); }
.mock .side .b { font-family:var(--display); font-size:18px; color:var(--ink); margin-bottom:14px; }
.mock .side div.item { padding:6px 8px; border-radius:7px; }
.mock .side div.item.on { background:var(--cream); color:var(--clay-dark); }
.mock .main { padding:24px; text-align:left; }
.mock .count { font-family:var(--display); font-size:54px; color:var(--clay); line-height:1; }
.mock .tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:18px; }
.mock .tile { background:var(--ivory); border:1px solid var(--line); border-radius:12px; padding:14px; text-align:center; }
.mock .tile b { font-family:var(--display); font-size:26px; color:var(--clay); display:block; }
.mock .tile span { font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); }
@media (max-width:680px){ .mock .body{ grid-template-columns:1fr; } .mock .side{ display:none; } .mock .tiles{ grid-template-columns:1fr 1fr; } }

/* fine-tuned phone layout for the hero + its dashboard graphic */
@media (max-width:480px){
  .hero { padding:44px 0 28px; }
  .hero h1 { font-size:36px; margin:12px 0 14px; }
  .hero p.sub { font-size:16px; margin-bottom:24px; }
  .hero .cta-row { flex-direction:column; align-items:stretch; }
  .hero .cta-row .btn { width:100%; justify-content:center; }
  .hero .trust { font-size:12px; }
  .mock { margin-top:30px; border-radius:14px 14px 0 0; }
  .mock .bar { padding:11px 14px; }
  .mock .main { padding:18px 16px; }
  .mock .count { font-size:46px; }
  .mock .tiles { gap:8px; margin-top:14px; }
  .mock .tile { padding:11px 8px; border-radius:10px; }
  .mock .tile b { font-size:21px; }
  .section-head h2 { font-size:30px; }
  .section-head p { font-size:15px; }
  .final .cta-row { flex-direction:column; align-items:stretch; }
  .final .cta-row .btn { width:100%; justify-content:center; }
  .final h2 { font-size:34px; }
}

/* sections */
section { padding:72px 0; }
.section-head { text-align:center; max-width:640px; margin:0 auto 48px; }
.section-head h2 { font-size:40px; margin:10px 0; }
.section-head p { color:var(--muted); font-size:17px; }
.divider { color:var(--blush); letter-spacing:8px; font-size:14px; }

/* feature grid */
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:880px){ .features{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .features{ grid-template-columns:1fr; } }
.feature { background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:26px 24px; box-shadow:var(--shadow); }
.feature .ic { font-size:28px; }
.feature h3 { font-size:22px; margin:12px 0 6px; }
.feature p { color:var(--muted); font-size:14.5px; margin:0; }

/* steps */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; counter-reset:step; }
@media (max-width:760px){ .steps{ grid-template-columns:1fr; } }
.step { text-align:center; padding:14px; }
.step .num { width:52px; height:52px; border-radius:50%; background:var(--cream); color:var(--clay-dark); font-family:var(--display); font-size:24px; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; border:1.5px solid var(--blush); }
.step h3 { font-size:21px; margin-bottom:6px; }
.step p { color:var(--muted); font-size:14.5px; margin:0; }

/* two ways */
.pricing-single { max-width:440px; margin:0 auto; }
.ways { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.ways.ways-3 { grid-template-columns:repeat(3,1fr); align-items:stretch; }
@media (max-width:880px){ .ways.ways-3{ grid-template-columns:1fr; } }
@media (max-width:760px){ .ways{ grid-template-columns:1fr; } }
.way { background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:34px 30px; box-shadow:var(--shadow); display:flex; flex-direction:column; }
.way.featured { border-color:var(--clay); box-shadow:0 16px 50px rgba(194,120,91,.18); position:relative; }
.way .tag { position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--clay); color:#fff; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; padding:5px 16px; border-radius:999px; }
.way .ic { font-size:32px; }
.way h3 { font-size:26px; margin:12px 0 6px; }
.way .price { font-family:var(--display); font-size:34px; color:var(--ink); margin:6px 0; }
.way .price small { font-size:15px; color:var(--muted); font-family:var(--sans); }
.way ul { list-style:none; padding:0; margin:16px 0 24px; }
.way ul li { padding:7px 0 7px 26px; position:relative; font-size:14.5px; }
.way ul li:before { content:"✓"; position:absolute; left:0; color:var(--sage-dark); font-weight:600; }
.way .btn { margin-top:auto; justify-content:center; }

/* testimonials */
.quotes { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:880px){ .quotes{ grid-template-columns:1fr; } }
.quote { background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:26px; box-shadow:var(--shadow); }
.quote .stars { color:var(--gold); letter-spacing:2px; margin-bottom:10px; }
.quote p { font-size:15px; margin:0 0 16px; }
.quote .who { font-size:13px; color:var(--muted); }
.quote .who b { color:var(--ink); font-weight:500; }

/* faq */
.faq { max-width:760px; margin:0 auto; }
.faq details { border-bottom:1px solid var(--line); padding:18px 4px; }
.faq summary { font-family:var(--display); font-size:20px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary:after { content:"+"; color:var(--clay); font-size:24px; }
.faq details[open] summary:after { content:"–"; }
.faq p { color:var(--muted); font-size:15px; margin:12px 0 0; }

/* final cta */
.final { text-align:center; background:linear-gradient(180deg,#fff,#FBF1E9); border-top:1px solid var(--line); }
.final h2 { font-size:46px; margin-bottom:10px; }
.final p { color:var(--muted); font-size:18px; margin-bottom:26px; }

/* legal pages */
.legal { max-width:760px; margin:0 auto; padding:54px 24px 72px; }
.legal h1 { font-size:40px; margin-bottom:6px; }
.legal .updated { color:var(--muted); font-size:13px; margin-bottom:8px; }
.legal .disclaimer { background:var(--cream); border:1px solid var(--line); border-radius:12px; padding:14px 16px; font-size:13px; color:var(--muted); margin:18px 0 28px; }
.legal h2 { font-size:24px; margin:28px 0 8px; }
.legal p, .legal li { color:#4a443d; font-size:15px; line-height:1.7; }
.legal ul { padding-left:20px; }
.legal a { color:var(--clay-dark); }

/* footer */
footer { background:var(--ink); color:#D9CFC4; padding:40px 0; font-size:13px; }
footer .wrap { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
footer .logo { font-family:var(--display); font-size:22px; color:#fff; }
footer .logo .amp{ color:var(--clay); font-style:italic; }
footer a { color:#D9CFC4; margin-left:20px; }
footer a:hover { color:#fff; }