/* SOP Writer — landing pages. Reuses the brand design tokens from sopwriter.css */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --midnight:#0C1E45;--deep:#07132C;--deeper:#040C1E;
  --surface:#13305C;--surface-light:#1A3C70;
  --accent:#C8A84B;--accent-light:#E0CA78;--accent-dark:#A88432;
  --accent-dim:rgba(200,168,75,.13);--accent-glow:rgba(200,168,75,.28);
  --ivory:#F5F0E8;--ivory-90:rgba(245,240,232,.9);--ivory-70:rgba(245,240,232,.7);
  --ivory-50:rgba(245,240,232,.5);--ivory-15:rgba(245,240,232,.15);--ivory-08:rgba(245,240,232,.08);
  --slate:#8B9DB5;--teal:#2A7A72;--teal-light:#3A9E94;
  --serif:'Cormorant Garamond',serif;--display:'Fraunces',serif;
  --body:'DM Sans',sans-serif;--mono:'JetBrains Mono',monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:var(--body);background:var(--midnight);color:var(--ivory);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--accent);color:var(--deep)}
a{color:inherit}
img{max-width:100%;height:auto}

/* nav */
.lp-nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  padding:1rem 2rem;background:rgba(7,18,34,.9);backdrop-filter:blur(18px);border-bottom:1px solid var(--ivory-08)}
.lp-nav .brand{font-family:var(--serif);font-size:1.4rem;font-weight:700;text-decoration:none;letter-spacing:.04em}
.lp-nav .brand span{color:var(--accent);font-style:italic}
.lp-nav .brand small{font-family:var(--mono);font-size:.42rem;color:var(--accent);letter-spacing:.28em;margin-left:.5rem}
.lp-nav .cta{background:var(--accent);color:var(--deep);text-decoration:none;font-weight:700;font-size:.8rem;
  padding:.6rem 1.3rem;border-radius:6px;letter-spacing:.04em;transition:transform .3s,box-shadow .3s}
.lp-nav .cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px var(--accent-glow)}

/* layout */
.wrap{max-width:920px;margin:0 auto;padding:0 1.5rem}
.hero{padding:4.5rem 0 3rem;text-align:center;position:relative;background:radial-gradient(80% 120% at 50% 0%,rgba(200,168,75,.08),transparent 60%)}
.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;color:var(--accent);margin-bottom:1.2rem}
h1{font-family:var(--display);font-weight:700;font-size:clamp(2rem,5vw,3.3rem);line-height:1.08;letter-spacing:-.01em;margin-bottom:1.2rem}
h1 em{font-style:italic;color:var(--accent)}
.lede{font-family:var(--serif);font-size:clamp(1.15rem,2.4vw,1.55rem);color:var(--ivory-90);max-width:680px;margin:0 auto 2rem}
.hero-cta{display:inline-flex;gap:.9rem;flex-wrap:wrap;justify-content:center}
.btn{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;font-weight:700;font-size:.9rem;
  padding:.85rem 1.7rem;border-radius:8px;letter-spacing:.03em;transition:transform .3s,box-shadow .3s}
.btn-primary{background:var(--accent);color:var(--deep)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px var(--accent-glow)}
.btn-ghost{border:1px solid var(--ivory-15);color:var(--ivory)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

.trust{display:flex;gap:2.2rem;justify-content:center;flex-wrap:wrap;margin-top:2.4rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ivory-50)}
.trust b{color:var(--accent);font-size:1.15rem;display:block;font-family:var(--display);letter-spacing:0;text-transform:none}

section{padding:3rem 0;border-top:1px solid var(--ivory-08)}
h2{font-family:var(--display);font-weight:600;font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:1.15;margin-bottom:1.2rem}
h2 em{font-style:italic;color:var(--accent)}
h3{font-family:var(--serif);font-weight:600;font-size:1.4rem;color:var(--accent-light);margin:1.6rem 0 .5rem}
p{margin-bottom:1rem;color:var(--ivory-90)}
.muted{color:var(--ivory-70)}
ul.clean{list-style:none;margin:1rem 0}
ul.clean li{position:relative;padding-left:1.6rem;margin-bottom:.7rem;color:var(--ivory-90)}
ul.clean li::before{content:'◆';position:absolute;left:0;color:var(--accent);font-size:.6rem;top:.35rem}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem;margin-top:1.5rem}
.card{background:var(--ivory-08);border:1px solid var(--ivory-08);border-radius:12px;padding:1.5rem;transition:border-color .3s,transform .3s}
.card:hover{border-color:var(--accent-dim);transform:translateY(-3px)}
.card .n{font-family:var(--mono);color:var(--accent);font-size:.8rem;letter-spacing:.1em}
.card h3{margin-top:.4rem;font-size:1.2rem}

.faq details{border-bottom:1px solid var(--ivory-08);padding:1.1rem 0}
.faq summary{cursor:pointer;font-family:var(--serif);font-size:1.25rem;color:var(--ivory);font-weight:600;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:'+';color:var(--accent);margin-right:.7rem;font-family:var(--mono)}
.faq details[open] summary::before{content:'–'}
.faq p{margin-top:.8rem}

.cta-band{text-align:center;background:linear-gradient(135deg,var(--surface),var(--deep));border:1px solid var(--accent-dim);border-radius:16px;padding:2.6rem 1.5rem;margin:1rem 0}
.related{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1rem}
.related a{text-decoration:none;font-size:.82rem;padding:.5rem 1rem;border:1px solid var(--ivory-15);border-radius:20px;color:var(--ivory-70);transition:.3s}
.related a:hover{border-color:var(--accent);color:var(--accent)}

footer{padding:2.5rem 0;border-top:1px solid var(--ivory-08);text-align:center;color:var(--ivory-50);font-size:.82rem}
footer a{color:var(--accent);text-decoration:none}
.bc{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--ivory-50);padding:1rem 0}
.bc a{color:var(--ivory-70);text-decoration:none}
.bc a:hover{color:var(--accent)}