:host,
:host {
  --font-display: "Clash Grotesk", "Archivo", sans-serif;
  --font-body: "Archivo", sans-serif;

  --color-brand-blue: #1a6798;
  --color-brand-bg-blue: #2e63a9;
  --color-brand-black: #262220;
  --color-brand-green: #223e32;
  --color-accent-gold: #edc670;
  --color-accent-gold-grad: linear-gradient(97deg, #ffca55, #ffc033);
  --color-accent-warm-white: #f4f2e9;
  --color-neutral-white: #ffffff;
  --color-neutral-50: #fafaf8;
  --color-neutral-100: #f8f9fb;
  --color-text-muted: #4b6075;
  --color-text-on-gold: #44381d;

  --type-h1-size: 58px;
  --type-h1-line: 64px;
  --type-h2-size: 44px;
  --type-h2-line: 52px;
  --type-h3-size: 34px;
  --type-h3-line: 44px;
  --type-h4-size: 23px;
  --type-h4-line: 28px;
  --type-h5-size: 19px;
  --type-h5-line: 28px;
  --type-body-lg-size: 18px;
  --type-body-lg-line: 28px;
  --type-body-size: 16px;
  --type-body-line: 24px;
  --type-body-sm-size: 14px;
  --type-body-sm-line: 20px;
  --type-caption-size: 13px;
  --type-caption-line: 20px;
  --type-button-size: 16px;
  --type-button-line: 20px;

  --space-1: 4px;
  --space-15: 6px;
  --space-25: 10px;
  --space-3: 12px;
  --space-5: 20px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-20: 80px;
  --space-24: 96px;

  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 42px;

  --shadow-button-gold-press: 0 2px 0 0 #6d4e0a;
  --shadow-button-white-press: 0 2px 0 0 #ddd;
}

/* Base = inline: no chrome, just the index. */
.YgwZJ3H62n5yd6vj1iKg {
  width: 100%;
  font-family: var(--font-body);
  box-sizing: border-box;
}

/* Card variant: matches the other sidebar cards. */
.fKyL11WS_D15YVA7a3T4 {
  background: var(--color-neutral-white);
  border: 1px solid #dce0e0;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06);
}

.ArOLdKzG50R2CRAL0qyw {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 28px;
  letter-spacing: -0.01em;
  color: var(--color-brand-black);
  margin: 0 0 14px;
}

.WqkSil00kMApAgOs2ARP {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
}

.FL30pFr3z7wjAZVGobwQ {
  margin: 0;
}

/* ---------- top-level row ---------- */
.jCWsbgU5paggzdXeEdGd {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px;
  border-radius: 10px;
  text-decoration: none;
  transition: background-color 0.18s ease;
}

.VCiPk9IwMyGnqDWFVNuA {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--color-accent-warm-white);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  color: var(--color-brand-black);
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}

.z3bcUWk6y5toUzjAlbrN {
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
  color: var(--color-text-muted);
  padding-top: 4px;
  transition: color 0.18s ease;
}

.jCWsbgU5paggzdXeEdGd:hover {
  background: #faf8f1;
}

.jCWsbgU5paggzdXeEdGd:hover .z3bcUWk6y5toUzjAlbrN {
  color: var(--color-brand-black);
}

.jCWsbgU5paggzdXeEdGd:hover .VCiPk9IwMyGnqDWFVNuA {
  background: #efe9d6;
}

.jCWsbgU5paggzdXeEdGd:focus-visible {
  outline: 2px solid var(--color-brand-blue);
  outline-offset: 2px;
}

/* Active section: tinted row + emphasised label, like the reference. */
._vsyapmi6HtSe3kRYbGY {
  background: var(--color-accent-warm-white);
}

._vsyapmi6HtSe3kRYbGY .z3bcUWk6y5toUzjAlbrN {
  color: var(--color-brand-black);
  font-weight: 600;
}

._vsyapmi6HtSe3kRYbGY .VCiPk9IwMyGnqDWFVNuA {
  background: var(--color-accent-gold);
  color: var(--color-text-on-gold);
}

/* ---------- sub-items: revealed only for the active section ---------- */
.O8ER_sQNxRMnRTaRjjzU {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}

.NhjaoXZDhkAtFyEtogVV {
  grid-template-rows: 1fr;
}

.WaBTEMzr9Mf3Z9hV6gSH {
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 0;
}

.W1EmdNFdtkuPQr5Owvpr {
  display: block;
  margin-left: 50px;
  padding: 5px 8px;
  border-left: 2px solid #e6e2d4;
  font-size: 13px;
  line-height: 19px;
  color: var(--color-text-muted);
  text-decoration: none;
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
}

.W1EmdNFdtkuPQr5Owvpr:hover {
  color: var(--color-brand-black);
  border-left-color: var(--color-accent-gold);
}

.TxBxHkeZQ54rD8KW6sPT {
  color: var(--color-brand-black);
  font-weight: 500;
  border-left-color: var(--color-accent-gold);
}

.W1EmdNFdtkuPQr5Owvpr:focus-visible {
  outline: 2px solid var(--color-brand-blue);
  outline-offset: -2px;
  border-radius: 4px;
}

.ykzG67NmIk3TqlL62Kru {
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .O8ER_sQNxRMnRTaRjjzU {
    transition: none;
  }
}