/* Fizzlayer's shared visual language: quiet surfaces, precise type, a little Fizz. */
@import url('/fonts.css');

:root {
  --ink: #142b3c;
  --muted: #647786;
  --line: #dfe7ed;
  --paper: #ffffff;
  --canvas: #f6f9fb;
  --navy: #0b1722;
  --cyan: #a9eaf7;
  --accent: #087f99;
  --green: #218165;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }
button, a, input, select, textarea, summary { outline-offset: 4px; }
:focus-visible { outline: 3px solid #098fab; }
[hidden] { display: none !important; }
svg { vertical-align: middle; }
a { color: var(--accent); text-underline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 10px; left: 10px; padding: 12px 18px; background: var(--navy); color: white; border-radius: 6px; z-index: 100; transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.wordmark { display: inline-flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 700; font-size: 25px; letter-spacing: -1.2px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.wordmark img { width: 35px; height: 35px; image-rendering: pixelated; }
.wordmark .brand-dot { color: #349ab1; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-height: 45px; padding: 12px 20px; border: 1px solid transparent; border-radius: 7px; font-size: 16px; font-weight: 600; text-decoration: none; transition: background .18s, transform .18s; }
.button:hover { transform: translateY(-1px); }
.button-dark { background: var(--ink); color: #fff; box-shadow: 0 3px 5px #142b3c0d; }
.button-dark:hover { background: #25465b; }
.button-light { color: var(--ink); background: white; border-color: var(--line); }
.button-light:hover { background: #edf6f9; }
.button-cyan { color: var(--navy); background: var(--cyan); }
.button-cyan:hover { background: #d0f5fc; }
.eyebrow-label { display: flex; align-items: center; gap: 9px; margin: 0 0 20px; font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent); }
.status-dot { display: inline-block; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #44a88a; box-shadow: 0 0 0 4px #44a88a12; }
.ui-icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}