/* Shared by every page: tokens, base, focus, the nav, buttons and the legal
   footer. Each page links this before its own <helmet><style>, so a page
   can override any rule here; page-specific CSS stays in the page. */
/* Accent: the LYNQ app's own blues (lynq.elxa.io) -- --accent-deep is its
   #0048FF, for light backgrounds; --accent is its dark theme's #3B82F6, for
   navy, where #0048FF is too dim (3:1). */
:root { --ink: #0B0B0C; --ink-2: #2B2C30; --muted: #5A5E66; --line: #E2E4E8; --mist: #F4F5F7; --paper: #FFFFFF; --night: #0A1220; --night-muted: #9AA3B2; --night-line: rgba(255,255,255,0.14); --accent: #3B82F6; --accent-deep: #0048FF; --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }
* { box-sizing: border-box; }
html { scroll-padding-top: 80px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: inherit; }
/* Focus: the deep accent on light backgrounds, the bright one on navy -- an
   outline in currentColor vanished around filled buttons. */
:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; }
.top :focus-visible, [data-nav="dark"] :focus-visible { outline-color: var(--accent); }
.skip { position: absolute; left: -9999px; top: 12px; z-index: 20; background: #fff; color: var(--night); padding: 8px 14px; border-radius: 6px; }
.skip:focus { left: 12px; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
/* Read by screen readers, never shown. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.label { margin: 0 0 20px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -0.025em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.top { position: fixed; top: 0; left: 0; right: 0; z-index: 10; background: rgba(10,18,32,0.72); -webkit-backdrop-filter: saturate(170%) blur(16px); backdrop-filter: saturate(170%) blur(16px); transition: background 250ms ease, backdrop-filter 250ms ease, -webkit-backdrop-filter 250ms ease; }
.top.is-top { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Over the light sections the glass turns light, as on elxa.io, and the logo
   and links turn dark. The script sets .is-light from the data-nav="dark"
   sections, so without it the nav simply stays dark. */
.top.is-light { background: rgba(255,255,255,0.72); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 64px; }
.brand { display: block; line-height: 0; }
.brand img { height: 16px; width: auto; transition: filter 250ms ease; }
.top.is-light .brand img { filter: brightness(0); }
.nav { display: flex; align-items: center; gap: 28px; font-size: 15px; }
.nav a { color: rgba(255,255,255,0.72); text-decoration: none; transition: color 250ms ease; }
.nav a:hover { color: #fff; }
.top.is-light .nav a { color: var(--ink-2); }
.top.is-light .nav a:hover { color: var(--ink); }

.btn { display: inline-flex; align-items: center; padding: 12px 20px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 15px; font-weight: 500; line-height: 1.2; text-decoration: none; transition: background 150ms, color 150ms; }
.btn:hover { background: #2E2F33; }
button.btn { border: 0; font-family: inherit; cursor: pointer; }
.btn-light, .nav .btn-light { background: #fff; color: var(--night); }
.btn-light:hover, .nav .btn-light:hover { background: #E6E9EE; color: var(--night); }
.top.is-light .nav .btn-light { background: var(--ink); color: #fff; }
.top.is-light .nav .btn-light:hover { background: #2E2F33; color: #fff; }
.btn-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45); }
.btn-ghost:hover { background: rgba(255,255,255,0.08); }
.btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn-line:hover { background: var(--ink); color: #fff; }

.legal { display: grid; grid-template-columns: auto 1fr; gap: 24px 64px; padding: 32px 0 48px; border-top: 1px solid var(--night-line); font-size: 14px; line-height: 1.6; color: var(--night-muted); }
.legal img { display: block; height: 14px; width: auto; margin-top: 4px; }
.legal p + p { margin-top: 8px; }
.legal a { color: var(--night-muted); }
/* class="tbc" marks a placeholder still to confirm; the release build refuses it. */
.tbc { border-bottom: 1px dashed var(--night-muted); text-decoration: none; }

@media (max-width: 960px) {
  .legal { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .top .wrap { gap: 16px; }
  .brand img { height: 14px; }
  .nav { gap: 16px; }
  .nav .btn { padding: 10px 14px; }
}
@media (max-width: 359px) {
  .nav a:not(.btn) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }
/* Print: the nav scrolls away with the first page, and the navy blocks keep
   their colour instead of printing white text on white. */
@media print {
  .top { position: absolute; }
  body, [data-nav="dark"] { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}