/* Know Your Tax — Shared Design System */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #f0f1f4; --surface: #ffffff; --surface2: #e8eaef; --border: #ccd0d9;
  --accent: #7a6b0a; --accent2: #c4500a; --red: #c22530; --green: #177a45;
  --muted: #5f6673; --text: #1f2937; --text-dim: #4b5563;
  --mono: 'Space Mono', monospace; --sans: 'DM Sans', sans-serif;
  --g1: #c4500a; --g2: #2858a8;
}

body { background: var(--bg); color: var(--text); font-family: var(--sans); min-height: 100vh; padding: 2rem 1rem 4rem; }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--accent); color: #fff; font-family: var(--mono); font-size: 0.85rem; padding: 0.6rem 1.2rem; z-index: 100; text-decoration: none; font-weight: 700; }
.skip-link:focus { left: 1rem; top: 1rem; }

.grid-bg { position: fixed; inset: 0; z-index: 0; background-image: linear-gradient(rgba(122,107,10,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(122,107,10,0.04) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; }

.wrap { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }

header { margin-bottom: 2.5rem; }
.badge { display: inline-block; font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.15em; color: var(--accent); border: 1px solid var(--accent); padding: 3px 10px; margin-bottom: 1rem; text-transform: uppercase; }
h1 { font-family: var(--mono); font-size: clamp(1.5rem, 4vw, 2.4rem); font-weight: 700; line-height: 1.1; color: var(--text); }
h1 span { color: var(--accent); }
.subtitle { margin-top: 0.6rem; color: var(--text-dim); font-size: 0.92rem; font-weight: 300; line-height: 1.6; }

/* Navigation */
.site-nav { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
.site-nav-brand { font-family: var(--mono); font-size: 0.85rem; font-weight: 700; color: var(--text); text-decoration: none; letter-spacing: -0.02em; }
.site-nav-brand span { color: var(--accent); }
.site-nav-links { display: flex; gap: 1.5rem; }
.site-nav-link { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-decoration: none; padding-bottom: 2px; transition: color 0.15s; }
.site-nav-link:hover { color: var(--text); }
.site-nav-link.active { color: var(--text); border-bottom: 2px solid var(--accent); }

/* Shared note/disclaimer style */
.note { margin-top: 1.5rem; border-left: 2px solid var(--accent2); background: rgba(196,80,10,0.06); padding: 0.9rem 1.1rem; font-size: 0.78rem; color: var(--text-dim); line-height: 1.75; }
.note strong { color: var(--text); }

/* Footer */
.site-footer { margin-top: 2.5rem; padding: 1.2rem 0; border-top: 1px solid var(--border); text-align: center; }
.site-footer .footer-links { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 0.6rem; }
.site-footer .footer-links a { font-family: var(--mono); font-size: 0.7rem; color: var(--muted); text-decoration: none; letter-spacing: 0.06em; text-transform: uppercase; }
.site-footer .footer-links a:hover { color: var(--text); }
.site-footer p { font-size: 0.68rem; color: var(--muted); }