:root{
  /* ground → panel → row → recessed/hover. Warm off-white, never pure grey. */
  --bg:#F6F4F0; --bg-1:#FFFFFF; --bg-2:#FBFAF7; --bg-3:#EFEBE4;
  --line:#E4DFD6; --line-2:#D0C9BD;
  --divider:rgba(28,25,20,.12);

  /* text: ink → ink-4, all clearing WCAG AA on --bg and --bg-1 */
  --ink:#17181B; --ink-2:#494D55; --ink-3:#6B7079; --ink-4:#767A83;

  /* Time Champ brand — layered-diamond mark, cyan → blue → purple.
     #013AF4 is the dominant colour and measures 7.2:1 on white, so unlike the
     gradient's end stops it is safe for small text. --brand-cyan is ~1.9:1 and
     is a gradient stop only, never text, never a fill behind text. */
  --brand:#013AF4; --brand-deep:#0129B4; --brand-dark:#011E80;
  --brand-soft:#6C8CFA; --brand-pale:#D9E1FE;
  --brand-tint:rgba(1,58,244,.09); --brand-tint-2:rgba(1,58,244,.17);
  --brand-cyan:#04C7FD; --brand-purple:#9608DE;
  --brand-gradient:linear-gradient(135deg,#04C7FD 0%,#013AF4 52%,#9608DE 100%);
  --brand-gradient-soft:linear-gradient(135deg,rgba(4,199,253,.14) 0%,rgba(1,58,244,.14) 52%,rgba(150,8,222,.14) 100%);

  /* semantic direction — stays semantic, never brand-tinted */
  --pos:#14663F; --neg:#C6293F; --warn:#B85618;
  --neg-ink:#A81E33;
  --neg-line:rgba(198,41,63,.30); --neg-tint:rgba(198,41,63,.07);

  /* leakage categories: a categorical ramp held clear of the brand blue */
  --c-capacity:#0F766E; --c-process:#6A4FD0; --c-system:#B85618;
  --c-quality:#A83A63;  --c-ai:#2F7D4F;      --c-outcome:#C6293F;

  /* elevation: soft and warm, never a grey drop-shadow */
  --shadow-1:0 1px 2px rgba(45,38,28,.045), 0 6px 18px rgba(45,38,28,.055);
  --shadow-2:0 2px 8px rgba(45,38,28,.07), 0 24px 56px rgba(45,38,28,.16);
  --shadow-drawer:-22px 0 60px rgba(45,38,28,.16);
  --topbar-bg:rgba(246,244,240,.84);
  --focus:#013AF4;

  --r:10px; --r-s:6px;
  --sans:"Inter","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --mono:"SF Mono","JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --maxw:1240px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(900px 520px at 12% -8%, rgba(1,58,244,.055), transparent 62%),
             radial-gradient(720px 430px at 92% 2%, rgba(150,8,222,.035), transparent 64%);}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.num{font-family:var(--serif);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.eyebrow{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.rule{height:1px;background:var(--line);border:0;margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;padding:3px 7px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-2)}
.badge.verified{color:#14663F;border-color:rgba(20,102,63,.32);background:rgba(20,102,63,.09)}
.badge.high{color:#2A4E8F;border-color:rgba(42,78,143,.30);background:rgba(42,78,143,.08)}
.badge.potential{color:#8A3E0F;border-color:rgba(184,86,24,.32);background:rgba(184,86,24,.10)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* the gradient is used sparingly: a primary action, an active accent, one hero
   series. Never as a card background. */
.brand-grad{background-image:var(--brand-gradient)}
.btn-primary{display:inline-flex;align-items:center;gap:7px;border-radius:var(--r-s);
  padding:8px 16px;font-size:12.5px;font-weight:600;color:#fff;
  background-image:var(--brand-gradient);box-shadow:var(--shadow-1)}
.btn-primary:hover{filter:saturate(1.08) brightness(1.04)}
.btn-primary:focus-visible{outline:2px solid var(--brand-dark);outline-offset:2px}