/* Vistrux brand: Open Sauce Sans for headings, Inter for text (never Poppins).
   Deep Teal on Warm Off-White, thin technical lines, generous whitespace.
   Every colour, font and radius on the site comes from these tokens. */
@font-face { font-family: "Open Sauce Sans"; font-weight: 500; font-display: swap;
  src: url("/static/core/fonts/OpenSauceSans-Medium.ttf") format("truetype"); }
@font-face { font-family: "Open Sauce Sans"; font-weight: 600; font-display: swap;
  src: url("/static/core/fonts/OpenSauceSans-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Open Sauce Sans"; font-weight: 700; font-display: swap;
  src: url("/static/core/fonts/OpenSauceSans-Bold.ttf") format("truetype"); }

:root {
  --bg: #F7F5F0;
  --surface: #FFFFFF;
  --ink: #151A19;
  --muted: #66706E;
  --teal: #204141;
  --teal-2: #3C6463;
  --teal-deep: #16302F;
  --sage: #829795;
  --sand: #D8CBB8;
  --line: #E4E0D6;
  --line-2: #EFECE4;
  --on-teal: #D3DEDC;
  --on-teal-muted: #9FB3B0;
  --red: #A8453A;
  --red-bg: #F5E6E2;
  --amber: #9A6B1F;
  --amber-bg: #F6EEDC;
  --green-bg: #E3ECEA;

  --head: "Open Sauce Sans", "Inter", "Segoe UI", system-ui, sans-serif;
  --body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --radius: 6px;
  --radius-lg: 14px;
  --shadow: 0 1px 2px rgba(21, 26, 25, .04), 0 8px 24px rgba(21, 26, 25, .06);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --gutter: clamp(16px, 4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4 { font-family: var(--head); letter-spacing: -0.02em; line-height: 1.12; margin: 0; }
a { color: var(--teal); }
button, input, textarea, select { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--teal-2); outline-offset: 3px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Shared building blocks */
.kicker { font: 600 12px/1 var(--head); letter-spacing: .16em; text-transform: uppercase; color: var(--teal-2); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; cursor: pointer;
  background: var(--teal); color: #fff; font: 600 15px/1 var(--head); letter-spacing: .01em;
  padding: 15px 22px; border-radius: var(--radius); text-decoration: none;
  transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.btn:hover { background: var(--teal-deep); box-shadow: 0 6px 18px rgba(32, 65, 65, .25); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn-ghost { background: transparent; color: var(--teal); box-shadow: inset 0 0 0 1px var(--line); }
.btn-ghost:hover { background: var(--surface); box-shadow: inset 0 0 0 1px var(--sage); }
.btn-light { background: #fff; color: var(--teal); }
.btn-light:hover { background: var(--bg); }
.arrow::after { content: "→"; font-family: var(--body); transition: transform .2s var(--ease); }
.btn:hover .arrow::after, .btn.arrow:hover::after { transform: translateX(3px); }

/* The drafting grid: a faint 24px sheet used behind hero areas. */
.grid-paper { background-image:
    linear-gradient(var(--line-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size: 24px 24px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}