/* KNWN Local careers: shared brand styles. Walmart "True Blue" #0053E2, light theme.
   Fonts: DM Serif Display (headlines) + DM Sans (everything else). */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
:root {
  --bg:          #FFFFFF;
  --panel:       #FFFFFF;
  --tint:        #F3F7FF;
  --line:        rgba(0,40,120,0.10);
  --line-strong: rgba(0,40,120,0.22);
  --heading:     #0B1533;
  --text:        rgba(11,21,51,0.88);
  --text-2:      rgba(11,21,51,0.74);
  --muted:       rgba(11,21,51,0.60);
  --faint:       rgba(11,21,51,0.42);
  --brand:       #0053E2;   /* fills: buttons, highlights, step circles */
  --brand-2:     #1F6BF0;   /* hover */
  --on-brand:    #FFFFFF;
  --accent-text: #0053E2;   /* blue used as text */
  --card-shadow: 0 1px 2px rgba(0,40,120,0.05), 0 10px 30px rgba(0,40,120,0.07);
  --serif:       'DM Serif Display', Georgia, serif;
  --sans:        'DM Sans', system-ui, sans-serif;
  --radius:      12px;
  color-scheme: light;
}
body { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--sans); font-weight: 800; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; padding: 17px 34px; border-radius: 8px; cursor: pointer; transition: transform .12s, background .15s, box-shadow .15s, border-color .15s, color .15s; }
.btn-primary { background: var(--brand); color: var(--on-brand); box-shadow: 0 8px 30px rgba(0,83,226,0.35); }
.btn-primary:hover { background: var(--brand-2); transform: translateY(-1px); box-shadow: 0 10px 36px rgba(0,83,226,0.5); }
.btn-outline { border: 1.5px solid var(--heading); color: var(--heading); }
.btn-outline:hover { background: var(--heading); color: #fff; }

/* Type accents */
.hl { background: var(--brand); color: var(--on-brand); padding: 0 0.14em; border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
em.acc { font-style: italic; color: var(--accent-text); }

/* Bulleted list */
.list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.list li { position: relative; padding-left: 20px; font-size: 15px; color: var(--text-2); line-height: 1.5; }
.list li::before { content: ''; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 2px; background: var(--brand); }

/* Numbered circle */
.step-num { width: 38px; height: 38px; border-radius: 50%; background: var(--brand); color: var(--on-brand); font-weight: 800; font-size: 16px; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0,83,226,0.3); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }