/* GoetheCoach brand layer for the static content pages (blog, level pages,
   guides). Loaded after each page's inline <style>, so it only restyles a few
   shared components with the logo's network-graph motif. Source of truth for
   colours: docs/brand/rollout-plan.md. */
:root { --brand-gold: #DC9335; }

/* Tips lists → node lists: a gold node per item, edges linking the nodes. */
.tips-list li { position: relative; border-bottom: none; }
.tips-list li::before {
  content: "" !important; /* beats per-page RTL arrow overrides */
  width: 9px; height: 9px; margin-top: .55em; border-radius: 50%;
  background: var(--brand-gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-gold) 18%, transparent);
}
.tips-list li:not(:last-child)::after {
  content: ""; position: absolute; inset-inline-start: 3.75px; width: 1.5px;
  top: calc(12px + .55em + 9px); bottom: calc(-12px - .55em);
  background: color-mix(in srgb, var(--brand-gold) 40%, transparent);
}

/* Section dividers → an edge with a node in the middle. */
hr.section-divider { position: relative; overflow: visible; }
hr.section-divider::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px;
  border-radius: 50%; background: var(--brand-gold); transform: translate(-50%, -50%);
  box-shadow: 0 0 0 6px var(--bg, #09101B);
}

/* Final CTA block: the AI-tutor mark above the headline. */
.cta-block::before {
  content: ""; display: block; width: 40px; height: 40px; margin: 0 auto 14px;
  background: currentColor;
  -webkit-mask: url(/brand/icons/gc-ai-tutor.svg) center / contain no-repeat;
  mask: url(/brand/icons/gc-ai-tutor.svg) center / contain no-repeat;
}