:root{
  /* ---- Color (modern toolkit) ---- */
  --ink:#141625; --ink-soft:#4A4F63; --ink-faint:#7E8399;
  --bg:#F5F6FA; --surface:#FFFFFF; --surface-alt:#F0F1F8; --line:#E4E6F0;
  --indigo:#4338CA; --indigo-deep:#332CA6; --indigo-soft:#E9E8FB;
  --emerald:#0E9F6E; --emerald-soft:#DCF3EA;
  /* ---- Type ---- */
  --font-display:'Space Grotesk',-apple-system,sans-serif;
  --font-body:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  /* ---- Space ---- */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4rem;
  /* ---- Radius / shadow (rounded modern) ---- */
  --r-sm:8px; --r:12px; --r-lg:18px; --pill:999px;
  --shadow:0 1px 3px rgba(20,22,37,.06), 0 14px 34px -18px rgba(67,56,202,.28);
  --maxw:980px;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior: smooth;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:17px; line-height:1.66; -webkit-font-smoothing:antialiased;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--s5);}

/* Masthead */
.masthead{background:var(--surface); border-bottom:1px solid var(--line);}
.masthead .wrap{display:flex; align-items:center; justify-content:space-between; padding:var(--s4) var(--s5); flex-wrap:wrap; gap:var(--s4);}
.brand{display:flex; align-items:center; gap:var(--s3); text-decoration:none;}
.brand:hover .wordmark { color:var(--indigo); }
.brand .glyph{width:34px; height:34px; border-radius:9px; background:var(--indigo); color:#fff; font-family:var(--font-display); font-weight:700; font-size:1.1rem; display:flex; align-items:center; justify-content:center;}
.wordmark{font-family:var(--font-display); font-weight:700; font-size:1.25rem; letter-spacing:-.01em; color:var(--ink); line-height:1; transition: .15s;}
.wordmark small{display:block; font-family:var(--font-body); font-weight:600; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-top:2px;}
.masthead nav{font-size:.82rem; font-weight:600; color:var(--ink-soft); display:flex; gap:var(--s4); flex-wrap:wrap;}
.masthead nav a{color:var(--ink-soft); text-decoration:none;}
.masthead nav a:hover{color:var(--indigo);}

/* Guide sections */
.guide-sec{padding:var(--s6) 0; border-bottom:1px solid var(--line);}
.guide-sec:last-child { border-bottom: none; }
.eyebrow{display:inline-block; font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; font-weight:700; color:var(--indigo); background:var(--indigo-soft); padding:.3rem .6rem; border-radius:var(--pill); margin:0 0 var(--s3);}
.guide-sec > .wrap > h2{font-family:var(--font-display); font-weight:700; font-size:2rem; margin:0 0 var(--s2); letter-spacing:-.02em;}
.guide-sec > .wrap > h3{font-family:var(--font-display); font-weight:600; font-size:1.5rem; margin:var(--s6) 0 var(--s2); letter-spacing:-.02em;}
.lead{color:var(--ink-soft); max-width:68ch; margin:0 0 var(--s6);}
.content-body p { margin-bottom: 1.2rem; }
.content-body a { color: var(--indigo); font-weight: 600; text-decoration: underline; }
.content-body a:hover { color: var(--indigo-deep); }
.content-body ul { margin-bottom: 1.5rem; padding-left: 1.5rem; }
.content-body li { margin-bottom: 0.5rem; }

/* Type specimens */
h1{font-family:var(--font-display); font-weight:700; font-size:clamp(2.4rem,5vw,3.2rem); line-height:1.06; letter-spacing:-.03em; margin:0 0 var(--s3);}
h2{font-family:var(--font-display); font-weight:700; font-size:2rem; line-height:1.12; letter-spacing:-.02em; margin:0 0 var(--s3);}
h3{font-family:var(--font-display); font-weight:600; font-size:1.2rem; margin:0 0 var(--s3);}
.small-spec{font-size:.85rem; color:var(--ink-faint); margin-bottom: var(--s4); display: block;}

/* Buttons */
.btns{display:flex; flex-wrap:wrap; gap:var(--s4); align-items:center;}
.btn{font-family:var(--font-body); font-weight:700; font-size:1rem; padding:.72rem 1.5rem; border-radius:var(--pill); text-decoration:none; display:inline-block; border:2px solid transparent; cursor:pointer; transition:.15s;}
.btn-primary{background:var(--indigo); color:#fff;}
.btn-primary:hover{background:var(--indigo-deep);}
.btn-secondary{background:transparent; color:var(--indigo); border-color:var(--indigo-soft);}
.btn-secondary:hover{border-color:var(--indigo);}
.link{color:var(--indigo); font-weight:700; text-decoration:none; border-bottom:2px solid var(--indigo-soft);}
.link:hover{border-bottom-color:var(--indigo);}

/* Pills / badges */
.badges{display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center; margin-bottom: var(--s3);}
.badge{font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:.36rem .7rem; border-radius:var(--pill); display: inline-block;}
.badge-choice{background:var(--indigo); color:#fff;}
.badge-value{background:var(--indigo-soft); color:var(--indigo-deep);}
.badge-verified{background:var(--emerald-soft); color:#0A6E4C;}
.medallion{width:42px; height:42px; border-radius:12px; background:var(--indigo); color:#fff; font-family:var(--font-display); font-weight:700; font-size:1.25rem; display:flex; align-items:center; justify-content:center;}
.medallion.rank{background:var(--surface); color:var(--ink-soft); border:1.5px solid var(--line);}

/* Checklist (toolkit signature component) */
.checklist{list-style:none; padding:0; margin:0;}
.checklist li{display:flex; gap:var(--s3); align-items:flex-start; padding:var(--s3) 0; border-bottom:1px dashed var(--line);}
.checklist li:last-child { border-bottom: none; }
.checklist li .tick{flex:none; width:24px; height:24px; border-radius:8px; background:var(--emerald-soft); color:var(--emerald); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.85rem; margin-top: 2px;}
.checklist li .tick::before{content:"✓";}
.checklist li b{color:var(--ink);}
.checklist li span{color:var(--ink-soft); display: block;}
.checklist li .details { font-size: 0.95rem; display: block; margin-top: var(--s1); }

/* Resource tiles */
.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:var(--s4); margin-top:var(--s5);}
.tile{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:var(--s5); transition:.15s; text-decoration: none; display: block; color: inherit;}
.tile:hover{border-color:var(--indigo); box-shadow:var(--shadow);}
.tile .tag{font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--indigo);}
.tile h4{font-family:var(--font-display); font-weight:600; font-size:1.05rem; margin:var(--s2) 0; color: var(--ink);}
.tile p{font-size:.9rem; color:var(--ink-soft); margin:0;}

/* Score meter */
.score{max-width:380px;}
.score .row{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:var(--s1);}
.score .label{font-size:.78rem; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em;}
.score .val{font-family:var(--font-display); font-weight:700; font-size:1.05rem; font-variant-numeric:tabular-nums; color: var(--ink);}
.meter{height:9px; background:var(--indigo-soft); border-radius:var(--pill); overflow:hidden;}
.meter > span{display:block; height:100%; background:var(--indigo); border-radius:var(--pill);}

/* Directory row */
.dir{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;}
.dir .row{display:flex; align-items:center; gap:var(--s4); padding:var(--s4); border-bottom:1px solid var(--line); flex-wrap:wrap;}
.dir .row:last-child{border-bottom:none;}
.dir .row.top{background:var(--indigo-soft);}
.dir .row .name{font-family:var(--font-display); font-weight:600; font-size:1.1rem; text-decoration: none; color: var(--ink);}
.dir .row .name:hover { text-decoration: underline; color: var(--indigo); }
.dir .row .desc{font-size:.85rem; color:var(--ink-soft); margin-top: 4px;}
.dir .row .grow{flex:1; min-width:200px;}
.dir .row .actions { margin-left: auto; display: flex; align-items: center; gap: var(--s3); }

/* Table */
table.compare-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin: var(--s5) 0; font-size: 0.9rem;}
table.compare-table th, table.compare-table td { padding: var(--s3) var(--s4); text-align: left; border-bottom: 1px solid var(--line); }
table.compare-table th { background: var(--surface-alt); font-weight: 700; color: var(--ink-soft); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em;}
table.compare-table tr:last-child td { border-bottom: none; }
table.compare-table tbody tr:hover { background: var(--bg); }

/* Callout */
.callout{background:var(--indigo); color:#fff; border-radius:var(--r-lg); padding:var(--s6); margin: var(--s5) 0;}
.callout .eyebrow{background:rgba(255,255,255,.15); color:#fff;}
.callout h3{font-family:var(--font-display); font-weight:700; font-size:1.5rem; margin:0 0 var(--s3); color:#fff;}
.callout ol{margin:0; padding-left:1.2em; color:#DAD8F7;}
.callout li{margin-bottom:var(--s2);}
.callout li b{color:#fff;}
.callout a{color:#fff; text-decoration: underline;}
.callout a:hover{color:#DAD8F7;}

/* FAQ */
.faq details{border-bottom:1px solid var(--line); padding:var(--s4) 0;}
.faq details:last-child { border-bottom: none; }
.faq summary{font-family:var(--font-display); font-weight:600; font-size:1.12rem; cursor:pointer; list-style:none;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; float:right; color:var(--indigo); font-weight:800;}
.faq details[open] summary::after{content:"–";}
.faq p{color:var(--ink-soft); margin:var(--s3) 0 0; max-width: 75ch;}

/* Glossary */
.gloss{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:var(--s5); margin-bottom: var(--s4);}
.gloss dt{font-family:var(--font-display); font-weight:600; color:var(--indigo-deep); margin-top:var(--s4); font-size: 1.1rem; border-top: 1px dashed var(--line); padding-top: var(--s4);}
.gloss dt:first-child{margin-top:0; border-top:none; padding-top:0;}
.gloss dd{margin:var(--s1) 0 0; color:var(--ink-soft); font-size:1rem; max-width: 70ch;}

/* disclosure / tokens / footer */
.disclosure{font-size:.85rem; color:var(--ink-faint); background:var(--surface-alt); border:1px solid var(--line); border-radius:var(--r); padding:var(--s4); max-width:66ch; margin: var(--s5) 0;}
.site-foot{background:var(--ink); color:#C5C6D6; padding:var(--s7) 0; margin-top:var(--s8);}
.site-foot .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--s4); align-items:center;}
.site-foot .wordmark{color:#fff;}
.site-foot small{color:#8688A0;}
.site-foot a{color: #C5C6D6; text-decoration: none;}
.site-foot a:hover{color: #fff;}