/* Kgotla — minimal element defaults so raw HTML picks up the brand voice. */
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{margin:0;font-family:var(--font-body);font-weight:var(--weight-regular);font-size:var(--text-p3);line-height:var(--leading-body);color:var(--text-body);background:var(--surface-page)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-regular);color:var(--text-heading);margin:0;text-wrap:pretty}
h1{font-size:var(--text-h1);line-height:var(--leading-h1);letter-spacing:var(--tracking-h1)}
h2{font-size:var(--text-h2);line-height:var(--leading-h2);letter-spacing:var(--tracking-h2)}
h3{font-size:var(--text-h3);line-height:var(--leading-h3)}
h4{font-size:var(--text-h4);line-height:var(--leading-h4)}
p{margin:0;text-wrap:pretty}
a{color:var(--text-link);text-decoration:none;transition:opacity var(--duration-base) var(--ease-standard)}
a:hover{opacity:var(--opacity-hover);text-decoration:underline}
strong{font-weight:var(--weight-bold)}
code,kbd,pre{font-family:var(--font-mono);font-size:11px}
hr{border:0;border-top:1px solid var(--border-subtle);margin:0}
::selection{background:var(--kgotla-light-blue);color:var(--ink)}
/* Eyebrow / kicker — the file's most recognisable text treatment */
.kg-eyebrow{font-family:var(--font-body);font-weight:var(--weight-bold);font-size:var(--text-eyebrow-size);line-height:100%;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-eyebrow)}