@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Playfair+Display:wght@600;700;800&family=Inter:wght@400;600&display=swap');

:root{
  --navy:#0F1B2C; --cream:#FAF7F0; --gold:#8C7434; --rule:#CFC7B3;
  --paper:#FFFFFF; --muted:#6B6356; --soft:#F1EBDD;
  --font-serif:"EB Garamond",Georgia,serif;
  --font-sans:"Inter",-apple-system,"Segoe UI",sans-serif;
  --font-display:"Playfair Display","EB Garamond",serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-serif);font-size:19px;line-height:1.6;color:var(--navy);background:var(--cream);margin:0}
.shell{max-width:760px;margin:0 auto;padding:0 1.4rem}
.prose{max-width:680px}
a{color:var(--gold)}
h1{font-family:var(--font-display);font-weight:800;font-size:2.6rem;line-height:1.1;margin:.2em 0 .35em;letter-spacing:-.5px;font-feature-settings:'lnum' 1}
h2{font-family:var(--font-display);font-weight:700;font-size:1.7rem;line-height:1.2;margin:1.6em 0 .5em}
h3{font-family:var(--font-display);font-weight:700;font-size:1.25rem;line-height:1.3;margin:1.2em 0 .3em}
p{margin:.6em 0}
@media(max-width:600px){h1{font-size:2rem}body{font-size:18px}}

/* nav */
.topbar{background:var(--paper);border-bottom:1px solid var(--rule);font-family:var(--font-sans)}
.topbar .shell{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:1rem 1.4rem;flex-wrap:wrap}
.brand{font-weight:600;font-size:1.05rem;color:var(--navy);text-decoration:none}
.topbar nav a{color:var(--muted);text-decoration:none;font-size:.95rem;margin-left:1.3rem}
.topbar nav a:hover{color:var(--gold)}

/* hero */
.hero{background:var(--paper);border-bottom:1px solid var(--rule);padding:3rem 0 3.2rem}
.kicker{font-family:var(--font-sans);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:.7rem}
.sub{font-size:1.3rem;margin-bottom:1.4rem}

/* opt-in */
.optin{background:var(--soft);border:1px solid var(--rule);border-radius:6px;padding:1.5rem 1.6rem;margin:1.4rem 0 1rem}
.optin .lab{font-family:var(--font-sans);font-weight:600;font-size:1.05rem;margin-bottom:.8rem}
form.kit{display:flex;gap:.6rem;flex-wrap:wrap}
form.kit input[type=email]{flex:1 1 260px;font-family:var(--font-sans);font-size:1.1rem;padding:.95rem 1rem;border:1px solid var(--rule);border-radius:4px;background:var(--paper);color:var(--navy)}
form.kit input[type=email]:focus{outline:3px solid var(--gold);outline-offset:1px}
form.kit button{font-family:var(--font-sans);font-weight:600;font-size:1.1rem;padding:.95rem 1.7rem;border:none;border-radius:4px;background:var(--navy);color:var(--cream);cursor:pointer}
form.kit button:hover{background:#1A2638}
.micro{font-family:var(--font-sans);font-size:.85rem;color:var(--muted);margin-top:.9rem;line-height:1.5}
.honest{font-family:var(--font-sans);font-size:.9rem;color:var(--muted);margin-top:.4rem}

/* buttons */
.btn{display:inline-block;font-family:var(--font-sans);font-weight:600;font-size:1.1rem;padding:.95rem 2.2rem;border-radius:4px;background:var(--navy);color:var(--cream);text-decoration:none}
.btn:hover{background:#1A2638}
.btn.disabled{background:var(--muted);cursor:not-allowed;opacity:.8}

/* sections + content */
section.content{padding:2.4rem 0}
.lead{font-size:1.2rem;color:var(--navy)}
ul.list{list-style:none;padding:0;margin:1rem 0}
ul.list li{padding:.6rem 0 .6rem 1.8rem;border-bottom:1px solid var(--rule);position:relative}
ul.list li:before{content:"→";position:absolute;left:0;color:var(--gold);font-family:var(--font-sans);font-weight:600}
ul.list li b{font-weight:600}
.more{color:var(--muted);font-style:italic;margin-top:.8rem}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin:1.4rem 0}
.steps .step{background:var(--paper);border:1px solid var(--rule);border-radius:6px;padding:1.1rem}
.steps .n{font-family:var(--font-display);font-weight:700;color:var(--gold);font-size:1.4rem;font-feature-settings:'lnum' 1}
.steps .step p{font-size:.98rem;margin:.3rem 0 0}
@media(max-width:600px){.steps{grid-template-columns:1fr}}
.card{background:var(--paper);border:1px solid var(--rule);border-radius:6px;padding:1.1rem 1.3rem;margin:.8rem 0}
.card h3{margin-top:0}
.card .tag{font-family:var(--font-sans);font-size:.85rem;color:var(--muted);display:block;margin-top:.3rem}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
@media(max-width:600px){.two-col{grid-template-columns:1fr}}
details{border-bottom:1px solid var(--rule);padding:.8rem 0}
summary{font-family:var(--font-sans);font-weight:600;cursor:pointer}
details p{margin:.5em 0 0}

.cta2{background:var(--paper);border:1px solid var(--rule);border-radius:6px;padding:1.8rem;text-align:center;margin-top:1.6rem}
.cta2 .btn{margin-top:.5rem}

/* placeholder marker for things still to add */
.todo{border:2px dashed var(--gold);border-radius:6px;background:#FBF6E9;padding:1.1rem 1.3rem;margin:1.2rem 0;font-family:var(--font-sans);font-size:.95rem;color:var(--navy)}
.todo .todo-tag{display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--gold);border-radius:3px;padding:.15rem .5rem;margin-bottom:.5rem}
.todo p{margin:.3rem 0}

/* legal / seller / disclaimer */
.note{font-family:var(--font-sans);font-size:.85rem;color:var(--muted);background:var(--soft);border:1px solid var(--rule);border-radius:4px;padding:.8rem 1rem;margin:1.2rem 0}
.seller,.disclaimer{font-family:var(--font-sans);font-size:.85rem;color:var(--muted);line-height:1.55}
.seller{border-top:1px solid var(--rule);margin-top:2rem;padding-top:1.1rem}

/* footer */
footer{background:var(--paper);border-top:1px solid var(--rule);font-family:var(--font-sans);font-size:.82rem;color:var(--muted);padding:1.6rem 0;line-height:1.6}
footer a{color:var(--muted)}
footer .links{margin-bottom:.6rem}
footer .links a{margin-right:1rem}

/* ===== Landing hero two-column + cover ===== */
.hero-grid{display:grid;grid-template-columns:0.8fr 1fr;gap:2.4rem;align-items:start;margin-top:1.8rem}
@media(max-width:720px){.hero-grid{grid-template-columns:1fr;gap:1.6rem}}
.book-stage{text-align:center}
.book-mockup{display:block;margin:0 auto;width:300px;max-width:100%;height:auto}
.book-caption{font-family:var(--font-sans);font-size:.9rem;color:var(--muted);margin-top:1rem;line-height:1.5}

/* ===== Opt-in (labelled fields, JS states) ===== */
.optin h2{font-family:var(--font-display);font-weight:700;font-size:1.45rem;margin:0 0 .2rem}
.optin-lede{font-family:var(--font-sans);font-size:.95rem;color:var(--muted);margin:0 0 1rem}
.optin .field{margin-bottom:.9rem}
.optin label{display:block;font-family:var(--font-sans);font-size:.9rem;font-weight:600;margin-bottom:.3rem}
.optin input{width:100%;font-family:var(--font-sans);font-size:1.1rem;padding:.85rem 1rem;border:1px solid var(--rule);border-radius:4px;background:var(--paper);color:var(--navy)}
.optin input:focus{outline:3px solid var(--gold);outline-offset:1px}
.btn-primary{width:100%;font-family:var(--font-sans);font-weight:600;font-size:1.1rem;padding:.95rem 1.2rem;border:none;border-radius:4px;background:var(--navy);color:var(--cream);cursor:pointer;margin-top:.3rem}
.btn-primary:hover{background:#1A2638}
.btn-primary:disabled{opacity:.7;cursor:default}
.optin-micro{font-family:var(--font-sans);font-size:.83rem;color:var(--muted);margin-top:.9rem;line-height:1.5}
.optin-error{display:none;background:#FDE8E2;border:1px solid #E0A99A;color:#8C3434;font-family:var(--font-sans);font-size:.9rem;border-radius:4px;padding:.6rem .8rem;margin-bottom:.8rem}
.optin-error.visible{display:block}
.optin-success{display:none}
.optin-success.visible{display:block}

/* ===== Contents list (numbered, title + desc) ===== */
ol.contents-list{list-style:none;counter-reset:c;padding:0;margin:1.2rem 0}
ol.contents-list li{counter-increment:c;position:relative;padding:.7rem 0 .7rem 2.6rem;border-bottom:1px solid var(--rule)}
ol.contents-list li:before{content:counter(c);position:absolute;left:0;top:.7rem;font-family:var(--font-display);font-weight:700;color:var(--gold);font-feature-settings:'lnum' 1;font-size:1.1rem;width:1.8rem;text-align:right}
.item-title{font-weight:600;margin:0}
.item-desc{font-family:var(--font-sans);font-size:.92rem;color:var(--muted);margin:.2rem 0 0}

/* ===== Confirmation / state page ===== */
.shell-narrow{max-width:680px;margin:0 auto;padding:0 1.4rem}
.section{padding:2.4rem 0}
.section-intro{color:var(--muted)}
.state-block{background:var(--paper);border-bottom:1px solid var(--rule);padding:3rem 0;text-align:center}
.state-icon{width:64px;height:64px;line-height:60px;margin:0 auto 1rem;border-radius:50%;background:var(--soft);border:2px solid var(--gold);color:var(--gold);font-size:1.9rem;font-weight:700}
.state-lede{font-size:1.2rem;max-width:560px;margin:.6rem auto 0}
ol.numbered-steps{text-align:left;max-width:560px;margin:0 auto;padding-left:1.2rem}
ol.numbered-steps li{margin:.5em 0}
.video-placeholder{background:var(--soft);border:2px dashed var(--gold);border-radius:6px;padding:2.6rem 1.2rem;text-align:center;font-family:var(--font-sans);color:var(--muted);margin:1.2rem 0}
.video-frame{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:6px;border:1px solid var(--rule);margin:1.2rem 0}
.video-frame iframe{position:absolute;top:0;left:0;width:100%;height:100%}