:root { --cream:#f7f1e7; --paper:#fffdf8; --navy:#18324a; --gold:#c69a4b; --clay:#c97a67; --ink:#203445; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }
.shell { width:min(1160px, calc(100% - 40px)); margin-inline:auto; }
.nav { height:84px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:12px; color:var(--navy); font-family:Georgia,serif; font-weight:700; letter-spacing:.02em; }
.navCta { border:1px solid rgba(24,50,74,.25); border-radius:999px; padding:12px 20px; font-size:14px; font-weight:700; }
.mark { position:relative; width:46px; height:38px; flex:none; }
.mark .page { position:absolute; top:4px; width:25px; height:28px; background:var(--navy); border-radius:3px 3px 8px 3px; }
.mark .left { left:0; transform:skewY(12deg); }
.mark .right { right:0; transform:skewY(-12deg); border-radius:3px 3px 3px 8px; }
.mark .envelope { position:absolute; z-index:2; left:9px; top:11px; width:28px; height:18px; display:grid; place-items:center; background:var(--paper); color:var(--gold); font-size:10px; clip-path:polygon(0 0,100% 0,100% 100%,50% 72%,0 100%); }
.hero { min-height:680px; border-top:1px solid rgba(24,50,74,.1); border-bottom:1px solid rgba(24,50,74,.12); overflow:hidden; }
.heroGrid { min-height:680px; display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:70px; }
.eyebrow { margin:0 0 20px; color:var(--gold); font-size:12px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }
h1,h2 { margin:0; color:var(--navy); font-family:Georgia,serif; font-weight:500; line-height:1.03; }
h1 { font-size:clamp(54px,7vw,90px); letter-spacing:-.045em; }
h1 em { color:var(--clay); font-weight:400; }
.lede { max-width:590px; margin:28px 0; font-size:19px; line-height:1.7; color:#536471; }
.actions { display:flex; flex-wrap:wrap; gap:12px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:52px; border-radius:999px; padding:0 26px; font-size:14px; font-weight:800; transition:.2s ease; }
.button:hover,.navCta:hover { transform:translateY(-2px); }
.primary { background:var(--navy); color:white; }
.secondary { border:1px solid rgba(24,50,74,.25); }
.micro { font-size:12px; color:#78858e; margin-top:16px; }
.heroArt { position:relative; height:520px; display:grid; place-items:center; }
.sun { position:absolute; width:420px; height:420px; border-radius:50%; background:#eed9b5; opacity:.65; }
.bookCard { position:relative; z-index:2; width:310px; min-height:380px; padding:55px 38px; background:var(--paper); box-shadow:0 28px 80px rgba(24,50,74,.16); transform:rotate(-3deg); border-radius:4px; text-align:center; }
.bookCard .mark { transform:scale(1.6); margin:20px auto 55px; }
.bookCard p { color:var(--navy); font:34px/1.18 Georgia,serif; }
.bookCard span { color:var(--gold); font-size:10px; letter-spacing:.13em; text-transform:uppercase; }
.noteCard { position:absolute; z-index:3; right:-10px; bottom:52px; padding:22px; background:var(--clay); color:white; box-shadow:0 16px 50px rgba(24,50,74,.18); transform:rotate(4deg); font:18px/1.45 Georgia,serif; }
.trustStrip { background:var(--navy); color:white; }
.trustGrid { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.trustGrid i { width:4px; height:4px; border-radius:50%; background:var(--gold); }
.section { padding-block:110px; }
.sectionHead { display:grid; grid-template-columns:1fr 1.3fr 1fr; gap:50px; align-items:end; margin-bottom:58px; }
.sectionHead .eyebrow { align-self:start; }
.sectionHead h2 { font-size:clamp(42px,5vw,64px); letter-spacing:-.035em; }
.sectionHead>p:last-child { color:#667680; line-height:1.7; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(24,50,74,.2); }
.steps article { padding:32px 36px 10px 0; }
.steps article+article { border-left:1px solid rgba(24,50,74,.15); padding-left:36px; }
.steps b,.categoryGrid span { color:var(--gold); font-size:12px; letter-spacing:.12em; }
h3 { color:var(--navy); font:26px Georgia,serif; margin:22px 0 12px; }
.steps p,.categoryGrid p { color:#677680; line-height:1.65; }
.categories { background:var(--paper); }
.sectionHead.centered { display:block; text-align:center; }
.categoryGrid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.categoryGrid article { min-height:260px; padding:36px; border:1px solid rgba(24,50,74,.13); background:var(--cream); }
.categoryGrid article:nth-child(2) { background:#e8d3c3; }
.categoryGrid article:nth-child(3) { background:#e8dec1; }
.promise { padding-top:90px; padding-bottom:30px; }
.promiseCard { display:grid; grid-template-columns:1.15fr .85fr; gap:90px; align-items:center; background:var(--navy); padding:70px; color:white; }
.promiseCard h2 { color:white; font-size:clamp(40px,5vw,58px); }
.promiseCard>p { font:21px/1.7 Georgia,serif; color:#e4e9ec; }
.faq { display:grid; grid-template-columns:.8fr 1.2fr; gap:100px; }
.faq .sectionHead { display:block; margin:0; }
.faq .sectionHead h2 { font-size:54px; }
.faqList details { border-top:1px solid rgba(24,50,74,.2); padding:24px 0; }
.faqList details:last-child { border-bottom:1px solid rgba(24,50,74,.2); }
.faqList summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:20px; color:var(--navy); font:22px Georgia,serif; }
.faqList summary::-webkit-details-marker { display:none; }
.faqList summary span { color:var(--gold); font:24px Arial; }
.faqList p { max-width:650px; color:#667680; line-height:1.7; }
.ctaSection { padding:100px 0; background:var(--clay); text-align:center; color:white; }
.ctaBox .mark { margin:0 auto 28px; transform:scale(1.25); }
.ctaBox .mark .page { background:white; }
.ctaBox h2 { color:white; font-size:clamp(48px,6vw,72px); }
.ctaBox>p:not(.eyebrow) { margin:24px auto 30px; max-width:560px; line-height:1.6; }
.ctaBox .eyebrow { color:#f2d39c; }
.light { background:white; color:var(--navy); }
.waitlistForm { width:min(100%,720px); margin:34px auto 0; display:grid; grid-template-columns:1fr 1fr auto; gap:12px; text-align:left; align-items:end; }
.waitlistForm label span { display:block; margin:0 0 8px 14px; color:white; font-size:12px; font-weight:800; letter-spacing:.04em; }
.waitlistForm label small { font-weight:400; opacity:.8; }
.waitlistForm input { width:100%; height:52px; border:1px solid rgba(255,255,255,.48); border-radius:999px; padding:0 18px; background:rgba(255,255,255,.12); color:white; outline:none; font:15px Arial,sans-serif; }
.waitlistForm input::placeholder { color:rgba(255,255,255,.72); }
.waitlistForm input:focus { background:rgba(255,255,255,.2); border-color:white; }
.waitlistForm button { border:0; cursor:pointer; white-space:nowrap; }
.waitlistForm button:disabled { opacity:.7; cursor:wait; }
.formMessage,.privacyNote { grid-column:1/-1; margin:0; text-align:center; }
.formMessage { min-height:20px; font-size:14px; font-weight:700; }
.formMessage.error { color:#4f1c18; }
.privacyNote { color:rgba(255,255,255,.78); font-size:11px; line-height:1.5; }
.footer { min-height:180px; display:grid; grid-template-columns:1.4fr 1fr 1fr; align-items:center; gap:20px; }
.footer p,.footer a,.footer small { font-size:13px; color:#667680; }
.footer small { grid-column:1/-1; padding-bottom:28px; }

@media (max-width:850px) {
  .heroGrid { grid-template-columns:1fr; padding:80px 0 30px; }
  .heroArt { height:470px; }
  .sectionHead { grid-template-columns:1fr; gap:16px; }
  .steps,.categoryGrid { grid-template-columns:1fr; }
  .steps article+article { border-left:0; border-top:1px solid rgba(24,50,74,.15); padding-left:0; }
  .promiseCard,.faq { grid-template-columns:1fr; gap:50px; padding:48px 30px; }
  .faq { padding-inline:0; }
  .trustGrid { flex-wrap:wrap; justify-content:center; padding:20px 0; }
  .footer { grid-template-columns:1fr; padding:45px 0; }
  .footer small { grid-column:auto; }
  .waitlistForm { grid-template-columns:1fr; width:min(100%,520px); }
  .formMessage,.privacyNote { grid-column:auto; }
}
@media (max-width:560px) {
  .shell { width:min(100% - 28px,1160px); }
  .nav { height:72px; }
  .brand span { font-size:14px; }
  .navCta { padding:10px 13px; font-size:12px; }
  .heroGrid { min-height:auto; gap:20px; }
  h1 { font-size:52px; }
  .lede { font-size:17px; }
  .heroArt { transform:scale(.85); margin-inline:-30px; }
  .noteCard { right:10px; }
  .section { padding-block:76px; }
  .promise { padding-block:30px; }
  .promiseCard { margin-inline:-14px; }
  .faq .sectionHead h2 { font-size:44px; }
}
