/* SylanVault - fonts, colours and the logo, shared by every page.
   Colours are SylanOps': navy, the bright blue and the teal of the logo. */
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2-variations'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-display: swap; font-weight: 300 700; src: url('/fonts/space-grotesk-latin-wght-normal.woff2') format('woff2-variations'); }

:root {
  --navy: #011A3D;
  --navy-2: #0D3468;
  --blue: #0057FC;
  --blue-2: #1C7BEA;
  --teal: #019E99;
  --teal-2: #007C78;
  --ink: #0B1220;
  --ink-2: #334155;
  --ink-3: #64748b;
  --line: #E2E8F0;
  --page: #f6f8fb;
  --card: #ffffff;
  --good: #059669;
  --warn: #d97706;
  --bad: #dc2626;
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Space Grotesk', 'Inter', sans-serif;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--page); -webkit-font-smoothing: antialiased; line-height: 1.5; }
a { color: var(--blue); }
button { font: inherit; color: inherit; }
img, svg { max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

/* ---------- the logo: the SylanOps mark and the SylanVault name ---------- */
.sv-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--navy); }
.sv-logo img { width: 34px; height: 34px; flex: none; }
.sv-logo .sv-word { display: flex; flex-direction: column; line-height: 1; }
.sv-logo b { font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.sv-logo b span { color: var(--teal); }
.sv-logo small { margin-top: 3px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); }
.sv-logo.light { color: #fff; }
.sv-logo.light b span { color: #5eead4; }
.sv-logo.light small { color: rgba(255, 255, 255, 0.65); }
.sv-logo.big img { width: 54px; height: 54px; }
.sv-logo.big b { font-size: 32px; }
.sv-logo.big small { font-size: 11px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 12px; border: 1.5px solid transparent;
  font-weight: 650; font-size: 14.5px; text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; white-space: nowrap; }
.btn svg { width: 18px; height: 18px; }
.btn-primary { color: #fff; background: linear-gradient(90deg, var(--blue) 0%, var(--blue-2) 45%, var(--teal) 100%); background-size: 180% 100%; box-shadow: 0 10px 22px -10px rgba(0, 87, 252, .55); }
.btn-primary:hover { background-position: 100% 0; transform: translateY(-1px); }
.btn-ghost { color: var(--navy); background: #fff; border-color: var(--line); }
.btn-ghost:hover { border-color: #b8c4d6; }
.btn-quiet { color: var(--ink-2); background: transparent; }
.btn-quiet:hover { background: #eef2f7; }
.btn-danger { color: #fff; background: var(--bad); }
.btn:disabled { opacity: .6; cursor: default; transform: none; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--teal); }