/* Prelude at Home — site styles. Single committed light look: ivory ground, navy ink, gold accent, blush panels. */
:root {
  --bg:#F7F3EC; --bg2:#EADFD3; --bg3:#FBF9F5; --fg:#1C2333; --muted:#5e6475; --accent:#B89B5E; --accent2:#9A7F45; --line:#dccfbf; --card:#ffffff; --ink:#1f1f1f;
  --display:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --body:'Inter', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --radius:22px; --shadow:0 24px 60px rgba(28,35,51,.14);
  color-scheme: light;
}
* { box-sizing:border-box }
html { scroll-behavior:smooth }
body { margin:0; background:var(--bg); color:var(--fg); font-family:var(--body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased }
img, svg { max-width:100% }
a { color:inherit }
h1,h2,h3,h4 { font-family:var(--display); font-weight:500; line-height:1.08; margin:0; text-wrap:balance; letter-spacing:-0.005em }
h1 { font-size:clamp(2.7rem, 6.2vw, 4.8rem) }
h2 { font-size:clamp(2rem, 4.2vw, 3.1rem) }
h3 { font-size:1.65rem }
h4 { font-size:1.3rem }
p { margin:0 0 1rem }
.wrap { max-width:1120px; margin:0 auto; padding-left:max(20px, env(safe-area-inset-left, 0px)); padding-right:max(20px, env(safe-area-inset-right, 0px)) }
.eyebrow { display:block; font-size:.74rem; letter-spacing:.24em; text-transform:uppercase; color:var(--accent2); font-weight:600; margin-bottom:.8rem }
.muted { color:var(--muted) }
.lead { font-size:1.2rem; max-width:34em }
.center { text-align:center }
.center .lead { margin-left:auto; margin-right:auto }

/* buttons */
.btn { display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; background:var(--fg); color:var(--bg); padding:.95rem 1.7rem; border-radius:999px; font-weight:600; font-size:1rem; border:1.5px solid var(--fg); cursor:pointer; font-family:var(--body); transition:transform .15s ease, background .15s ease }
.btn:hover { transform:translateY(-1px) }
.btn.ghost { background:transparent; color:var(--fg) }
.btn.gold { background:var(--accent); border-color:var(--accent); color:#1C2333 }
.btn.small { padding:.6rem 1.1rem; font-size:.9rem }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible { outline:3px solid var(--accent); outline-offset:3px }
.cta { display:flex; gap:.8rem; flex-wrap:wrap; align-items:center }
.price { font-family:var(--display); font-size:1.45rem; font-weight:500 }
.note { font-size:.9rem; color:var(--muted); margin-top:.9rem }

/* header */
.announce { background:var(--fg); color:var(--bg); font-size:.85rem; text-align:center; padding:.5rem 1rem; letter-spacing:.04em }
.announce a { color:var(--accent) }
header.site { position:sticky; top:0; z-index:20; background:rgba(247,243,236,.92); backdrop-filter:saturate(1.2) blur(10px); border-bottom:1px solid var(--line) }
header.site .wrap { display:flex; justify-content:space-between; align-items:center; height:72px; gap:1rem }
.logo { display:flex; align-items:center; gap:.6rem; font-family:var(--display); font-size:1.4rem; text-decoration:none; color:var(--fg); white-space:nowrap }
.logo svg { width:34px; height:34px; flex:0 0 34px }
nav.main { display:flex; align-items:center; gap:1.5rem }
nav.main a { color:var(--muted); text-decoration:none; font-size:.95rem }
nav.main a:hover, nav.main a[aria-current="page"] { color:var(--fg) }
nav.main .btn { color:var(--bg) }
.menu-btn { display:none; background:none; border:1.5px solid var(--line); border-radius:999px; padding:.5rem .9rem; font:inherit; font-size:.9rem; cursor:pointer; color:var(--fg) }
nav.mobile { display:none; border-top:1px solid var(--line); background:var(--bg) }
nav.mobile.open { display:block }
nav.mobile a { display:block; padding:.9rem 0; border-bottom:1px solid var(--line); text-decoration:none; color:var(--fg) }

/* sections */
section.band { padding-block:5rem }
section.band.tight { padding-block:3.5rem }
section.blush { background:var(--bg2) }
section.ink { background:var(--fg); color:var(--bg) }
section.ink .eyebrow { color:var(--accent) }
section.ink .muted { color:#c9c6bd }
section.ink .btn { background:var(--accent); border-color:var(--accent); color:#1C2333 }
section.ink .btn.ghost { background:transparent; color:var(--bg); border-color:var(--bg) }
.divider { border:none; border-top:1px solid var(--line); margin:0 }

/* hero */
.hero { display:grid; grid-template-columns:1.05fr .95fr; gap:3.5rem; align-items:center; padding-block:4.5rem 4rem }
.hero img { width:100%; border-radius:30px; box-shadow:var(--shadow); display:block }
.hero .trust { display:flex; gap:1.2rem; flex-wrap:wrap; margin-top:1.6rem; font-size:.9rem; color:var(--muted) }
.hero .trust span::before { content:"✓ "; color:var(--accent2) }

/* grids */
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.2rem }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center }
.grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-top:2.2rem }
.card { background:var(--card); border-radius:var(--radius); padding:1.8rem; min-width:0 }
.card .n { font-family:var(--display); font-size:2.6rem; color:var(--accent); line-height:1 }
.card h3 { margin:.6rem 0 .4rem }
.card p:last-child { margin:0 }
.card.product { padding:0; overflow:hidden; display:flex; flex-direction:column; border:1px solid var(--line) }
.card.product img { width:100%; aspect-ratio:1; object-fit:cover; display:block }
.card.product .body { padding:1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column; gap:.5rem; flex:1 }
.card.product .body .cta { margin-top:auto; padding-top:.8rem }
.badge { display:inline-block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; background:var(--bg2); color:var(--fg); padding:.3rem .7rem; border-radius:999px }
.badge.soon { background:transparent; border:1px solid var(--line); color:var(--muted) }

/* pages preview */
.pages { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2.4rem }
.pages figure { margin:0; min-width:0 }
.pages img { width:100%; border-radius:18px; box-shadow:0 18px 40px rgba(28,35,51,.14); display:block }
.pages figcaption { text-align:center; margin-top:.7rem; font-size:.9rem; color:var(--muted) }

/* days */
.days { list-style:none; padding:0; margin:2.2rem 0 0; display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); gap:1.2rem }
.day { display:flex; gap:1rem; align-items:center; background:var(--card); border-radius:20px; padding:1rem; min-width:0 }
.thumb { flex:0 0 88px; height:116px; border-radius:12px; background:var(--bg3); color:var(--ink); padding:6px; overflow:hidden }
.thumb img, .thumb svg { width:100%; height:100%; display:block; object-fit:cover }
.day h3 { font-size:1.45rem }
.day p { margin:0; font-size:.88rem; color:var(--muted) }
.day .eyebrow { margin-bottom:.1rem }

/* quote / proof */
.quote { font-family:var(--display); font-size:clamp(1.5rem, 2.6vw, 2.1rem); line-height:1.3; max-width:30em; margin:0 auto; text-align:center }
.quote cite { display:block; font-family:var(--body); font-style:normal; font-size:.9rem; color:var(--muted); margin-top:1rem; letter-spacing:.06em }
.stats { display:flex; gap:2.5rem; justify-content:center; flex-wrap:wrap; margin-top:2.5rem; text-align:center }
.stats b { display:block; font-family:var(--display); font-size:2.6rem; font-weight:500; line-height:1 }
.stats span { font-size:.85rem; color:var(--muted); letter-spacing:.06em; text-transform:uppercase }
.reviews { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2rem }
.review { background:var(--card); border-radius:20px; padding:1.5rem; border:1px dashed var(--line); color:var(--muted); min-width:0 }

/* faq */
.faq { max-width:46em; margin-top:1.5rem }
details { border-top:1px solid var(--line); padding:1rem 0 }
details:last-child { border-bottom:1px solid var(--line) }
summary { cursor:pointer; font-family:var(--display); font-size:1.4rem; font-weight:500; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem }
summary::-webkit-details-marker { display:none }
summary::after { content:"+"; color:var(--accent); font-size:1.6rem; font-family:var(--body) }
details[open] summary::after { content:"−" }
details p { margin:.8rem 0 0; color:var(--muted) }

/* forms */
form.capture { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem }
form.capture input[type=email], form.capture input[type=text], textarea, select { font:inherit; padding:.9rem 1.1rem; border-radius:999px; border:1.5px solid var(--line); background:var(--card); color:var(--fg); min-width:0; flex:1 1 240px }
textarea { border-radius:18px; width:100%; min-height:140px }
section.ink form.capture input { border-color:transparent }
.form-msg { font-size:.9rem; margin-top:.6rem; min-height:1.3em }
label { font-size:.9rem; font-weight:600; display:block; margin:.9rem 0 .35rem }

/* quiz */
.quiz { max-width:40em; margin:2rem auto 0; background:var(--card); border-radius:26px; padding:2.2rem; box-shadow:var(--shadow) }
.quiz .q { font-family:var(--display); font-size:1.7rem; margin-bottom:1rem }
.opts { display:grid; gap:.6rem }
.opts button { text-align:left; font:inherit; padding:.95rem 1.1rem; border-radius:16px; border:1.5px solid var(--line); background:var(--bg3); cursor:pointer; color:var(--fg) }
.opts button:hover { border-color:var(--accent) }
.progress { height:4px; background:var(--bg2); border-radius:4px; overflow:hidden; margin-bottom:1.5rem }
.progress i { display:block; height:100%; background:var(--accent); width:0; transition:width .3s }
.result { display:none }
.result.show { display:block }

/* product page */
.gallery { display:grid; grid-template-columns:2fr 1fr 1fr; gap:.8rem }
.gallery img { width:100%; border-radius:18px; display:block; box-shadow:0 12px 30px rgba(28,35,51,.12) }
.gallery img.big { grid-row:span 2 }
.buybox { background:var(--card); border-radius:26px; padding:2rem; border:1px solid var(--line); position:sticky; top:96px }
.buybox ul { padding-left:1.1rem; margin:1rem 0; color:var(--muted); font-size:.95rem }
.buybox li { margin-bottom:.35rem }
.includes { display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem 1.5rem; margin-top:1.5rem }
.includes div { display:flex; gap:.7rem; align-items:flex-start }
.includes div::before { content:"✓"; color:var(--accent2); font-weight:700 }
.compare { width:100%; border-collapse:collapse; margin-top:1.5rem; font-size:.95rem }
.compare th, .compare td { text-align:left; padding:.8rem .6rem; border-bottom:1px solid var(--line); vertical-align:top }
.compare th { font-weight:600; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted) }
.table-wrap { overflow-x:auto }

/* sticky mobile cta */
.sticky-cta { display:none; position:fixed; left:0; right:0; bottom:0; z-index:30; background:var(--card); border-top:1px solid var(--line); padding:.7rem max(16px, env(safe-area-inset-right, 0px)) calc(.7rem + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); justify-content:space-between; align-items:center; gap:1rem }
.sticky-cta .t { font-size:.9rem; line-height:1.2 }
.sticky-cta .t b { display:block; font-family:var(--display); font-size:1.1rem; font-weight:500 }

/* footer */
footer.site { padding-block:3.5rem 2.5rem; border-top:1px solid var(--line); color:var(--muted); font-size:.92rem }
footer.site .cols { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem }
footer.site h4 { font-family:var(--body); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--fg); margin-bottom:.8rem }
footer.site a { color:var(--muted); text-decoration:none; display:block; margin-bottom:.45rem }
footer.site a:hover { color:var(--fg) }
footer.site .legal { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--line); font-size:.82rem }
.toast { position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); background:var(--fg); color:var(--bg); padding:.7rem 1.2rem; border-radius:999px; font-size:.95rem; opacity:0; pointer-events:none; transition:opacity .25s; z-index:40 }
.toast.show { opacity:1 }
.prose { max-width:42em }
.prose h2 { font-size:2rem; margin:2.2rem 0 .8rem }
.prose h3 { margin:1.6rem 0 .5rem }

@media (max-width: 900px) {
  .hero, .grid2 { grid-template-columns:1fr }
  .grid3, .grid4, .reviews { grid-template-columns:1fr }
  .pages { grid-template-columns:repeat(3,1fr); gap:.6rem }
  .gallery { grid-template-columns:1fr 1fr }
  .gallery img.big { grid-column:span 2; grid-row:auto }
  .buybox { position:static }
  .includes { grid-template-columns:1fr }
  footer.site .cols { grid-template-columns:1fr 1fr }
  nav.main { display:none }
  .menu-btn { display:inline-block }
  .sticky-cta { display:flex }
  body { padding-bottom:84px }
  .hero { padding-block:2.5rem 2rem }
  section.band { padding-block:3.5rem }
}
@media (max-width: 520px) {
  footer.site .cols { grid-template-columns:1fr }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto } .btn, .progress i { transition:none } }