/* SkillPathHub tokens
   indigo:#232760  cream:#FBFBF9  coral:#FF7A45  teal:#17A398  slate:#5A5F80  line:#E4E3ED
   display:'Poppins'  body:'Inter'
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=Inter:wght@400;500;600&display=swap');

:root{
  --indigo:#232760; --cream:#FBFBF9; --coral:#FF7A45; --teal:#17A398; --slate:#5A5F80; --line:#E4E3ED;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--cream);color:var(--indigo);font-family:'Inter',sans-serif;line-height:1.6;}
h1,h2,h3,.display{font-family:'Poppins',sans-serif;font-weight:700;}
a{color:var(--indigo);}
a:focus-visible,button:focus-visible{outline:3px solid var(--coral);outline-offset:2px;}

.wrap{max-width:1100px;margin:0 auto;padding:0 24px;}
header.site{background:#fff;border-bottom:1px solid var(--line);}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;}
.brand{font-family:'Poppins';font-weight:800;font-size:1.3rem;color:var(--indigo);text-decoration:none;}
.brand span{color:var(--coral);}
nav.main a{color:var(--indigo);text-decoration:none;margin-left:22px;font-family:'Poppins';font-size:0.9rem;font-weight:600;}
nav.main a:hover{color:var(--coral);}

.hero{background:linear-gradient(180deg,#EFEEFA 0%,var(--cream) 100%);padding:60px 0 46px;}
.hero .eyebrow{font-family:'Poppins';font-weight:700;color:var(--teal);font-size:0.82rem;text-transform:uppercase;letter-spacing:0.08em;}
.hero h1{font-size:2.5rem;max-width:18ch;margin:12px 0 14px;}
.hero p.lead{max-width:56ch;color:var(--slate);font-size:1.08rem;}

/* signature: roadmap path */
.roadmap{display:flex;align-items:center;gap:0;margin-top:40px;overflow-x:auto;padding-bottom:8px;}
.roadmap-step{flex:1;min-width:150px;text-align:center;position:relative;padding:0 8px;}
.roadmap-step .dot{width:34px;height:34px;border-radius:50%;background:var(--indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Poppins';font-weight:700;margin:0 auto 10px;font-size:0.9rem;}
.roadmap-step.active .dot{background:var(--coral);}
.roadmap-step:not(:last-child)::after{content:'';position:absolute;top:17px;right:-50%;width:100%;height:2px;background:var(--line);z-index:-1;}
.roadmap-step h4{font-size:0.85rem;margin:0 0 4px;font-family:'Poppins';}
.roadmap-step p{font-size:0.78rem;color:var(--slate);margin:0;}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:44px 0;}
.card{border:1px solid var(--line);border-radius:12px;padding:20px;background:#fff;}
.card .badge{display:inline-block;background:#EAF6F4;color:var(--teal);font-family:'Poppins';font-size:0.7rem;font-weight:700;padding:3px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:0.04em;}
.card h3{margin:10px 0 6px;font-size:1.05rem;}
.card p{color:var(--slate);font-size:0.92rem;margin:0;}
.card a.readmore{display:inline-block;margin-top:10px;font-size:0.88rem;font-weight:700;color:var(--coral);}

.ad-slot{border:1px dashed #CFCEDD;border-radius:10px;padding:22px;text-align:center;color:#8A8AA0;font-size:0.82rem;margin:36px 0;background:#F3F2FA;}
.ad-slot span{display:block;font-family:'Poppins';font-size:0.7rem;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:6px;font-weight:700;}

section.section{padding:36px 0;}
section.section h2{font-size:1.6rem;margin-bottom:6px;}
section.section p.section-sub{color:var(--slate);margin-top:0;}

article.post{max-width:70ch;margin:0 auto;padding:48px 24px;}
article.post .eyebrow{font-family:'Poppins';color:var(--teal);font-size:0.8rem;text-transform:uppercase;font-weight:700;}
article.post h1{font-size:2.1rem;margin:8px 0 20px;}
article.post h2{font-size:1.3rem;margin-top:34px;}
article.post p{font-size:1.05rem;color:#31355C;}
.disclaimer{background:#F3F2FA;border-left:3px solid var(--coral);padding:14px 18px;font-size:0.9rem;color:var(--slate);border-radius:0 6px 6px 0;margin:24px 0;}

footer.site{border-top:1px solid var(--line);margin-top:60px;padding:36px 0;color:var(--slate);font-size:0.88rem;background:#fff;}
footer.site .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;}
footer.site a{color:var(--slate);margin-right:16px;text-decoration:none;}
footer.site a:hover{color:var(--coral);}

@media (max-width:820px){.grid{grid-template-columns:1fr;}.hero h1{font-size:2rem;}.roadmap{flex-direction:column;align-items:flex-start;}.roadmap-step:not(:last-child)::after{display:none;}}