/* RFPG guide pages — shared design system.
   Tokens, header, footer and components lifted from the approved landing page
   (/landing/index.html) so guides read as pages of the same site.
   Body font is Nunito and headings are Baloo 2, matching the landing page. */

:root{
  --bg:#120a1f; --bg2:#1a0f2e; --purple:#9333ea; --purple2:#c05af5;
  --white:#f0ebfa; --muted:#c9bfe0; --gold:#e6a03c; --card:#1c1130; --border:#3a2560;
  --grad:linear-gradient(135deg,var(--purple),var(--purple2));
}
*{box-sizing:border-box; margin:0; padding:0;}
body{background:var(--bg); color:var(--white); font-family:'Nunito',-apple-system,BlinkMacSystemFont,Arial,sans-serif; line-height:1.6;}
a{color:inherit;}
h1,h2,h3,h4,.logo,.btn,.cta,.eyebrow{font-family:'Baloo 2','Nunito',sans-serif;}

/* ---- header (same as landing) ---- */
header{display:flex; align-items:center; justify-content:space-between; padding:18px 24px; border-bottom:1px solid var(--border); background:rgba(18,10,31,.9); backdrop-filter:blur(6px); position:sticky; top:0; z-index:10; flex-wrap:wrap; gap:12px;}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:22px; text-decoration:none;}
.logo .dot{color:var(--purple2);}
.logo-icon{filter:drop-shadow(0 0 10px rgba(147,51,234,.6));}
nav{display:flex; align-items:center; flex-wrap:wrap;}
nav a{margin-left:24px; color:var(--muted); text-decoration:none; font-size:14px; font-weight:600;}
nav a:hover{color:var(--white);}
.cta{background:var(--grad); color:#fff !important; padding:10px 20px; border-radius:10px; font-weight:700; text-decoration:none; display:inline-block; box-shadow:0 4px 18px rgba(147,51,234,.45); margin-left:24px;}

/* ---- article ---- */
main{max-width:820px; margin:0 auto; padding:48px 24px 80px;}
.badge{display:inline-flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--border); border-radius:999px; padding:7px 18px 7px 14px; font-size:13px; color:var(--muted); margin-bottom:22px; font-weight:600;}
.badge b{color:var(--gold); border:1px solid var(--gold); border-radius:999px; padding:3px 12px; font-size:12px; font-family:'Baloo 2',sans-serif; letter-spacing:.3px;}
h1{font-size:40px; font-weight:800; line-height:1.18; margin-bottom:14px;}
.lead{color:var(--muted); font-size:18px; margin-bottom:34px;}
h2{font-size:27px; font-weight:800; margin-top:44px; margin-bottom:12px;}
h3{font-size:18px; font-weight:700; margin-top:24px; margin-bottom:6px;}
main p{color:var(--muted); margin-bottom:14px;}
main p strong{color:var(--white);}

/* ---- cost tables as branded cards ---- */
table{width:100%; border-collapse:collapse; margin:22px 0; font-size:15px; background:var(--card); border:1px solid var(--border); border-radius:16px; overflow:hidden;}
th,td{text-align:left; padding:13px 16px; border-bottom:1px solid var(--border);}
tr:last-child td{border-bottom:none;}
th{color:var(--white); font-weight:700; font-family:'Baloo 2',sans-serif; background:rgba(147,51,234,.10);}
td{color:var(--muted);}
td:last-child{color:var(--white); font-weight:600; white-space:nowrap;}

/* ---- note card ---- */
.note{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:18px 20px; color:var(--muted); font-size:15px; margin:24px 0;}

/* ---- primary CTA (gradient + glow, never flat) ---- */
a.cta-block{display:block; text-align:center; background:var(--grad); color:#fff; font-weight:700; padding:16px; border-radius:12px; text-decoration:none; margin:34px 0; font-size:16px; font-family:'Baloo 2',sans-serif; box-shadow:0 6px 24px rgba(147,51,234,.5);}
a.cta-block:hover{opacity:.94;}

/* ---- more guides ---- */
.more-guides{margin-top:52px; padding-top:28px; border-top:1px solid var(--border);}
.more-guides .eyebrow{color:var(--purple2); font-size:13px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:14px;}
.guide-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
.guide-grid a{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px 16px; text-decoration:none; color:var(--white); font-weight:600; font-size:14px; transition:border-color .2s;}
.guide-grid a:hover{border-color:var(--purple2);}

/* ---- footer (same as landing) ---- */
footer{border-top:1px solid var(--border); padding:32px 24px; text-align:center; color:#8b7fa8; font-size:13px;}
footer a{color:#8b7fa8;}
.social{margin-top:14px;}
.social a{color:var(--muted); text-decoration:none; margin:0 10px; font-size:14px;}
.fineprint{color:#8b7fa8; font-size:13px;}

@media(max-width:800px){
  h1{font-size:30px;}
  h2{font-size:22px;}
  nav a{margin-left:14px;}
  .cta{margin-left:14px;}
  .guide-grid{grid-template-columns:1fr;}
  main{padding:32px 20px 60px;}
}