/* Shared styles for the guide pages and creators page. index.html keeps its own inline CSS. */
:root{
  --coral:#EA5A35;
  --coral-deep:#D6431F;
  --coral-ink:#C93A17; /* button fill: 5.1:1 with white text */
  --orange:#F0793F;
  --navy:#16382B;
  --navy-70:rgba(22,56,43,.7);
  --navy-50:rgba(22,56,43,.5);
  --yellow:#F9BE4E;
  --peach:#FDEEE2;
  --cream:#FFFCF9;
  --teal:#5FC7BC;
  --serif:'Fraunces',Georgia,serif;
  --sans:'Poppins',-apple-system,sans-serif;
  --mono:'JetBrains Mono',monospace;
  --max:1060px;
  --pad:clamp(20px,5vw,60px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--navy);font-family:var(--sans);font-size:16.5px;line-height:1.68;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--coral);color:#fff}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.eyebrow .bar{width:4px;height:16px;background:var(--coral);flex:none}
.eyebrow span{font-size:12.5px;font-weight:500;color:var(--navy-70)}
.btn{display:inline-block;background:var(--navy);color:#fff;font-size:14px;font-weight:600;padding:15px 32px;border-radius:4px;text-decoration:none;transition:background .2s;text-align:center}
.btn:hover,.btn:focus-visible{background:#0D2A1F}
.btn.coral{background:var(--coral-ink)}
.btn.coral:hover,.btn.coral:focus-visible{background:#A82E10}
.btn.ghost{background:transparent;border:1.5px solid rgba(255,255,255,.8);color:#fff}
.btn.ghost:hover{background:rgba(255,255,255,.1)}

nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,252,249,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(22,56,43,.08)}
.nav-inner{max-width:var(--max);margin:0 auto;padding:0 var(--pad);height:66px;display:flex;align-items:center;justify-content:space-between}
.wordmark{font-family:var(--serif);font-weight:900;font-size:22px;text-decoration:none;color:var(--navy)}
.wordmark span{color:var(--coral)}
.nav-links{display:flex;gap:28px;align-items:center;font-size:13px;font-weight:500}
.nav-links a{text-decoration:none;color:var(--navy-70);transition:color .2s}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--navy)}
.nav-cta{background:var(--navy);color:#fff!important;padding:10px 22px;border-radius:4px}
.nav-cta:hover{background:#0D2A1F}
.nav-signin{font-weight:600}
@media(max-width:720px){.nav-links a:not(.nav-cta):not(.nav-signin){display:none}}

/* article body */
main{padding-top:66px}
section.content{padding:clamp(72px,11vh,132px) 0}
.article main .wrap{max-width:760px}
.article h1{font-family:var(--serif);font-weight:900;font-size:clamp(34px,4.6vw,56px);line-height:1.08;letter-spacing:-.015em;text-wrap:balance}
.article .lead{margin-top:22px;font-size:clamp(17px,1.5vw,19.5px);color:var(--navy);max-width:34em}
.article h2{font-family:var(--serif);font-weight:900;font-size:clamp(24px,2.8vw,34px);line-height:1.18;letter-spacing:-.01em;margin-top:56px;text-wrap:balance}
.article h3{font-family:var(--sans);font-weight:600;font-size:17.5px;margin-top:28px}
.article p{margin-top:14px;color:var(--navy);max-width:38em}
.article h2 + p,.article h3 + p{margin-top:12px}
.article ul{margin:16px 0 0 20px;max-width:38em}
.article li{margin-top:10px;padding-left:4px}
.article li::marker{color:var(--coral)}
.article main > section > .wrap > p:last-child{margin-top:32px;font-weight:500}

/* price band */
.band{background:var(--navy);color:#fff;padding:clamp(56px,8vh,84px) 0}
.band-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.band-price{font-family:var(--serif);font-weight:900;font-size:clamp(40px,5vw,60px);letter-spacing:-.02em;line-height:1}
.band-price span{font-family:var(--mono);font-weight:500;font-size:.38em;letter-spacing:.08em;color:var(--teal);vertical-align:.9em;margin-right:6px}
.band-price small{display:block;font-family:var(--sans);font-weight:400;font-size:14px;color:rgba(255,255,255,.7);margin-top:8px;letter-spacing:0}
.band p{margin-top:18px;color:rgba(255,255,255,.8);max-width:34em;font-size:15.5px}
.band-ctas{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:760px){.band-grid{grid-template-columns:1fr}.band-ctas{justify-content:flex-start}}

/* related */
.related{padding:clamp(48px,7vh,72px) 0}
.guide-links{display:flex;flex-wrap:wrap;gap:10px}
.guide-links a{text-decoration:none;font-size:13.5px;font-weight:500;padding:10px 16px;border:1.5px solid rgba(22,56,43,.18);border-radius:999px;transition:border-color .2s,background .2s}
.guide-links a:hover{border-color:var(--navy);background:var(--peach)}

/* footer */
.site-foot{background:var(--navy);color:#fff;padding-top:28px}
.foot-inner{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-bottom:28px}
.foot-links{display:flex;gap:22px;font-family:var(--mono);font-size:11.5px;flex-wrap:wrap}
.foot-links a{color:rgba(255,255,255,.55);text-decoration:none;transition:color .2s}
.foot-links a:hover{color:#fff}
.foot-wm{font-family:var(--serif);font-weight:900;font-size:16px}
.foot-wm span{color:var(--coral)}
.stripe{height:13px}
.stripe.c1{background:var(--coral)}
.stripe.c2{background:var(--coral-deep)}

/* sticky mobile CTA */
.sticky-cta{display:none}
@media(max-width:760px){
  body{padding-bottom:76px}
  .sticky-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:90;background:rgba(255,252,249,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid rgba(22,56,43,.1);padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));align-items:center;justify-content:space-between;gap:12px}
  .sc-text{font-size:12.5px;color:var(--navy-70);line-height:1.3}
  .sc-text b{color:var(--navy);font-weight:600}
  .sticky-cta .btn{padding:12px 18px;font-size:13px;flex:none}
}