/*
  Velocity Studios: site stylesheet
  Design language: Heartline "Graphite" (D-075). Dark first, one accent,
  a 4 px spacing grid, hairlines instead of shadows, no gradients or glows.

  Contents
    1. Fonts
    2. Tokens
    3. Base
    4. Layout
    5. Header and navigation
    6. Type and content
    7. Components (buttons, tags, cards, facts, tables, figures)
    8. Footer
    9. Utilities, motion
*/

/* 1. Fonts ----------------------------------------------------------------
   IBM Plex, (c) IBM Corp., SIL Open Font License 1.1.
   Licence texts: /assets/fonts/OFL-IBM-Plex-Sans.txt and OFL-IBM-Plex-Mono.txt.
   Only the weights the site uses are included. Plex Sans Condensed (used for
   caps labels in the app) is not included; labels fall back to Plex Sans. */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/IBMPlexSans-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/IBMPlexSans-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");
}

/* 2. Tokens --------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* Surfaces (Graphite) */
  --surface-0: #0B0E11; /* frame: page background */
  --surface-1: #12171C; /* panels */
  --surface-2: #192028; /* fields, insets */
  --surface-3: #222B35; /* hover, selected, hairlines */

  /* Text */
  --text-1: #E8EDF1; /* primary */
  --text-2: #B3BEC8; /* secondary */
  --text-3: #8C9AA7; /* lowest contrast allowed */

  /* The one accent */
  --accent: #5EA0FF;
  --on-accent: #0B0E11;

  --line: var(--surface-3);

  /* Type */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-cond: "IBM Plex Sans Condensed", var(--font-sans);
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono",
    "Segoe UI Mono", Consolas, "Liberation Mono", monospace;

  /* Spacing: a 4 px grid */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  --s-8: 32px;
  --s-12: 48px;
  --s-16: 64px;
  --s-24: 96px;

  /* Shape */
  --radius-field: 2px;
  --radius: 4px;

  --container: 1120px;
  --gutter: 16px;
}

@media (min-width: 720px) {
  :root { --gutter: 32px; }
}

/* 3. Base ----------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--surface-0);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: 1.0625rem; /* 17px */
  line-height: 1.75rem; /* 28px */
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  font-synthesis: none;
  overflow-wrap: break-word;
}

img,
svg { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--text-1); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-field);
}
main:focus { outline: none; }

::selection { background: var(--surface-3); color: var(--text-1); }

code,
kbd,
samp,
.mono {
  font-family: var(--font-mono);
  font-size: 0.9375em;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

/* 4. Layout --------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--s-16);
  border-top: 1px solid var(--line);
}
@media (min-width: 720px) {
  .section { padding-block: var(--s-24); }
}
.section-tight { padding-block: var(--s-12); }

.section-head {
  display: grid;
  gap: var(--s-3);
  max-width: 44rem;
  margin-bottom: var(--s-12);
}

.grid-2,
.grid-3 {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
}

.split {
  display: grid;
  gap: var(--s-8);
  align-items: center;
}
@media (min-width: 880px) {
  .split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-12); }
}

/* 5. Header and navigation ------------------------------------------------ */
.skip-link {
  position: absolute;
  left: var(--s-4);
  top: var(--s-2);
  z-index: 10;
  padding: var(--s-2) var(--s-4);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--surface-0);
}

.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--s-8);
  row-gap: 0;
  min-height: 64px;
}

/* Brand lockup. To swap in final artwork, replace the <img> (and the text, if
   the artwork includes the name) inside .brand on every page. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  color: var(--text-1);
  text-decoration: none;
}
.brand:hover { color: var(--text-1); }
.brand-symbol { width: 40px; height: auto; }
.brand-name {
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6);
  list-style: none;
  padding: 0;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-2);
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-top: 2px;
}
.site-nav a:hover { color: var(--text-1); }
.site-nav a[aria-current="page"] {
  color: var(--text-1);
  border-bottom-color: var(--accent);
}

/* On narrow screens the navigation sits on its own row under the brand. */
@media (max-width: 479px) {
  .bar { padding-block: var(--s-2); }
  .site-nav { width: 100%; border-top: 1px solid var(--line); }
}

/* 6. Type and content ----------------------------------------------------- */
.eyebrow {
  font-family: var(--font-cond);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

h1,
.h1 {
  font-size: 2rem;
  line-height: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
@media (min-width: 720px) {
  h1, .h1 { font-size: 3rem; line-height: 3.5rem; }
}

h2,
.h2 {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}
@media (min-width: 720px) {
  h2, .h2 { font-size: 2rem; line-height: 2.5rem; }
}

h3,
.h3 {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
}

.lead {
  font-size: 1.1875rem;
  line-height: 2rem;
  color: var(--text-2);
  max-width: 40rem;
}
@media (min-width: 720px) {
  .lead { font-size: 1.25rem; }
}

.muted { color: var(--text-2); }
.small { font-size: 0.875rem; line-height: 1.25rem; color: var(--text-2); }

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

/* Hero */
.hero { padding-block: var(--s-16) var(--s-16); }
@media (min-width: 720px) {
  .hero { padding-block: var(--s-24); }
}
.hero-inner { display: grid; gap: var(--s-6); max-width: 48rem; }
.hero .actions { margin-top: var(--s-2); }

/* Long-form text (legal pages) */
.prose { max-width: 42rem; }
.prose > * + * { margin-top: var(--s-4); }
.prose h2 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  margin-top: var(--s-12);
}
.prose h2:first-child { margin-top: 0; }
.prose ul,
.prose ol { padding-left: var(--s-6); }
.prose li + li { margin-top: var(--s-2); }
.prose p,
.prose li { color: var(--text-2); }
.prose strong { color: var(--text-1); font-weight: 600; }

.page-head { padding-block: var(--s-16) var(--s-12); }
.page-head .hero-inner { gap: var(--s-4); }

/* Placeholders the owner must fill in before going live. Deliberately visible. */
.placeholder {
  font-family: var(--font-mono);
  font-size: 0.9375em;
  color: var(--text-1);
  border: 1px dashed var(--text-3);
  border-radius: var(--radius-field);
  padding: 0 var(--s-1);
}

/* 7. Components ----------------------------------------------------------- */
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--s-2) var(--s-6);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5rem;
  text-decoration: none;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--text-1); color: var(--on-accent); }
.btn-secondary { border-color: var(--text-3); color: var(--text-1); }
.btn-secondary:hover { background: var(--surface-3); color: var(--text-1); }

/* Tags: every state has a glyph and a word, never colour alone. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0 var(--s-2);
  min-height: 24px;
  border: 1px solid var(--text-3);
  border-radius: var(--radius-field);
  font-family: var(--font-cond);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-1);
  white-space: nowrap;
}
.tag::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
}
/* Built and tested: a filled square */
.tag-built::before { background: var(--text-1); }
/* Planned, provisional, in development: neutral, dashed, hollow */
.tag-planned,
.tag-provisional,
.tag-status { border-style: dashed; color: var(--text-2); }
.tag-planned::before,
.tag-provisional::before,
.tag-status::before { border: 1px dashed var(--text-2); }

.card {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-6);
}
.card > * + * { margin-top: var(--s-3); }
.card p { color: var(--text-2); }
.card h3 { font-size: 1.0625rem; }

/* Product card on the home page */
.product {
  display: grid;
  gap: var(--s-8);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-6);
}
@media (min-width: 880px) {
  .product {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    padding: var(--s-12);
    gap: var(--s-12);
    align-items: center;
  }
}
.product-mark {
  background: var(--surface-0);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-8) var(--s-6);
}
.product-mark img { margin-inline: auto; width: 100%; max-width: 360px; }
.product-body > * + * { margin-top: var(--s-4); }
.product-body .meta { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }

/* Facts: hero numbers in mono */
.facts {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-1);
}
@media (min-width: 720px) {
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.fact { padding: var(--s-6); display: grid; gap: var(--s-2); align-content: start; }
.fact + .fact { border-top: 1px solid var(--line); }
@media (min-width: 720px) {
  .fact + .fact { border-top: 0; border-left: 1px solid var(--line); }
}
.fact dt { order: 2; color: var(--text-2); font-size: 0.9375rem; line-height: 1.5rem; }
.fact dd {
  order: 1;
  font-family: var(--font-mono);
  font-size: 1.75rem;
  line-height: 2rem;
  color: var(--text-1);
}
.fact dd .unit { font-size: 1rem; color: var(--text-3); margin-left: var(--s-1); }

/* Status panel */
.status {
  display: grid;
  gap: var(--s-4);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface-1);
  padding: var(--s-6);
}
.status dl { display: grid; gap: var(--s-3); }
.status dl > div { display: grid; gap: var(--s-1); }
@media (min-width: 720px) {
  .status dl > div { grid-template-columns: 12rem minmax(0, 1fr); gap: var(--s-4); }
}
.status dt { color: var(--text-3); font-size: 0.9375rem; }
.status dd { color: var(--text-1); }

/* Notice (disclaimers) */
.notice {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-1);
  padding: var(--s-6);
}
.notice > * + * { margin-top: var(--s-2); }
.table-wrap + .notice { margin-top: var(--s-6); }
.notice p { color: var(--text-2); }

/* Lists of features with a heading and a sentence */
.feature-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.feature-list > li {
  display: grid;
  gap: var(--s-1);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) {
  .feature-list > li { grid-template-columns: 16rem minmax(0, 1fr); gap: var(--s-6); }
}
.feature-list h3,
.feature-list h4 { font-size: 1rem; line-height: 1.75rem; font-weight: 600; }
.feature-list p { color: var(--text-2); }

.group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.group + .group { margin-top: var(--s-12); }

/* Figures */
.figure {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.figure img { width: 100%; }
.figure figcaption {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-6);
  border-top: 1px solid var(--line);
  color: var(--text-2);
  font-size: 0.9375rem;
  line-height: 1.5rem;
}

/* Tables */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-1);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.5rem;
}
caption {
  text-align: left;
  padding: var(--s-4) var(--s-6);
  color: var(--text-2);
  caption-side: top;
  border-bottom: 1px solid var(--line);
}
th,
td {
  text-align: left;
  vertical-align: top;
  padding: var(--s-3) var(--s-6);
  border-bottom: 1px solid var(--line);
}
tbody tr:last-child th,
tbody tr:last-child td { border-bottom: 0; }
thead th {
  font-family: var(--font-cond);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  background: var(--surface-0);
}
tbody th { font-weight: 500; color: var(--text-2); width: 10rem; }
td { color: var(--text-1); }
td.value { font-family: var(--font-mono); font-size: 0.875rem; }
td.empty { color: var(--text-2); text-align: center; padding-block: var(--s-8); }

/* Key-value list (company details) */
.kv { display: grid; gap: 0; border-top: 1px solid var(--line); }
.kv > div {
  display: grid;
  gap: var(--s-1);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) {
  .kv > div { grid-template-columns: 14rem minmax(0, 1fr); gap: var(--s-6); }
}
.kv dt { color: var(--text-3); }
.kv dd { color: var(--text-1); }

/* Contact block */
.contact-email {
  font-family: var(--font-mono);
  font-size: 1.125rem;
  line-height: 1.75rem;
  overflow-wrap: anywhere;
}

/* 8. Footer --------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface-1);
  color: var(--text-2);
  font-size: 0.9375rem;
  line-height: 1.5rem;
}
.footer-grid {
  display: grid;
  gap: var(--s-8);
  padding-block: var(--s-12) var(--s-8);
}
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
.footer-company > * + * { margin-top: var(--s-2); }
.footer-name { color: var(--text-1); font-weight: 600; }
.site-footer ul { list-style: none; padding: 0; display: grid; gap: var(--s-1); }
.site-footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--text-2);
}
.site-footer nav a:hover { color: var(--text-1); }
.footer-base {
  padding-block: var(--s-4) var(--s-6);
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--text-3);
}
.footer-base a { color: var(--text-2); }

/* 9. Utilities, motion ---------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  a,
  .btn,
  .skip-link { transition: color 120ms ease, background-color 120ms ease, transform 120ms ease; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  body { background: #fff; color: #000; }
  .site-header nav,
  .skip-link { display: none; }
  a { color: #000; }
}