/* Shared styles for BlinkPose product sub-pages (track/optitrack/periphery/ble/lld)
   and the contact page.

   VISUAL IDENTITY — "instrument manual".
   The site is printed matter: warm paper, black ink, a serif throughout, small
   caps for labels, hairline rules, hanging figure numbers, dotted leaders,
   captioned plates. Screens are the only dark objects on the page — the
   dashboards sit on the paper like plates in a manual, which is also the honest
   hierarchy: the product is the dashboard, the page is documentation about it.

   The only colour anywhere comes from the product's own palette: each module's
   dashboard hue, darkened to print weight, is that module's ink (--pa), set by
   a body class: .p-track/.p-optitrack/.p-periphery/.p-ble/.p-lld. No decorative
   colour, no gradients, no glows, no accent invented for the marketing layer. */

:root {
  color-scheme: light;

  /* paper + ink */
  --paper:   #f1eee6;   /* page stock */
  --paper-2: #e8e4d8;   /* tinted band */
  --plate:   #fbfaf5;   /* plate mount, form fields */
  --ink:     #1b1a16;   /* text */
  --ink-2:   #55524a;   /* secondary text */
  --ink-3:   #8b8679;   /* captions, folios */
  --rule:    #c8c2b0;   /* hairline */

  /* module inks — dashboard hues at print weight */
  --ink-blue:  #1f5fa8;   /* Track      — dashboard #5aa9ff */
  --ink-teal:  #0f6f79;   /* OptiTrack  — dashboard #3fc9d6 */
  --ink-amber: #96610f;   /* Periphery  — dashboard #f0a04a */
  --ink-plum:  #67389c;   /* BLE        — dashboard #b98cf0 */
  --ink-olive: #56700f;   /* LLD        — dashboard #b6d95a */

  --good: #2f6f46;
  --bad:  #a32b1e;
  --warn: #8a6410;

  /* legacy token aliases — existing markup keeps working */
  --bg: var(--paper);
  --panel: var(--plate);
  --panel-border: var(--rule);
  --text: var(--ink);
  --text-dim: var(--ink-2);
  --muted: var(--ink-3);
  --accent: var(--pa);
  --on-accent: var(--plate);
  --series-blue: var(--ink-blue); --series-teal: var(--ink-teal);
  --series-orange: var(--ink-amber); --series-purple: var(--ink-plum); --series-lime: var(--ink-olive);

  --font-serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", serif;
  --font-mono: "Cascadia Code", Consolas, "SFMono-Regular", monospace;

  --maxw: 1060px;
  --pa: var(--ink);   /* module ink — overridden per page */
}
.p-track     { --pa: var(--ink-blue); }
.p-optitrack { --pa: var(--ink-teal); }
.p-periphery { --pa: var(--ink-amber); }
.p-ble       { --pa: var(--ink-plum); }
.p-lld       { --pa: var(--ink-olive); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink); overflow-x: hidden;
  font-family: var(--font-serif); font-size: 16.5px; line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--pa); color: var(--plate); }
a { color: var(--pa); text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; font-family: var(--font-serif); font-weight: 700; letter-spacing: -.012em; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 30px; }
/* Grid children default to min-width:auto, so one long unbreakable token widens
   the whole page on a narrow screen. Let every cell shrink, and let code wrap. */
.features > *, .strip > *, .contact-form > *, .contact-form .row2 > * { min-width: 0; }
code.inl { overflow-wrap: anywhere; }

/* running head: small caps, then a rule to the end of the measure */
.eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-variant: small-caps; font-size: 14px; letter-spacing: .1em;
  color: var(--ink-3); margin: 0 0 18px;
}
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

/* --------------------------------------------------------- masthead ------ */
nav { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 3px double var(--ink); }
.nav-inner { display: flex; align-items: center; gap: 18px; height: 62px; }
.logo {
  display: flex; align-items: baseline; gap: 9px; color: var(--ink);
  font-family: var(--font-serif); font-weight: 700; font-size: 19px; letter-spacing: -.01em;
  align-self: center;
}
.logo .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pa); align-self: center; }
/* The icons are redrawn at print weight (icons/*.svg) — same shapes, each
   module's hue darkened until it holds on paper — so they sit on the page with
   no ground of their own. The plates keep their dark ground; icons are marks. */
.logo .logo-ic { width: 24px; height: 24px; display: block; align-self: center; }
.logo .pfx { color: var(--ink-3); font-weight: 400; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 24px; align-self: center; }
.nav-right a.txt { font-variant: small-caps; font-size: 15px; letter-spacing: .06em; color: var(--ink-2); }
.nav-right a.txt:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 640px) { .nav-right a.txt { display: none; } }

/* --------------------------------------------------------- buttons ------- */
.btn {
  display: inline-flex; align-items: baseline; gap: 8px; border-radius: 0;
  font-family: var(--font-serif); font-variant: small-caps; font-size: 16px; letter-spacing: .06em;
  padding: 9px 20px; border: 1px solid var(--ink);
  transition: background .12s linear, color .12s linear, border-color .12s linear;
}
.btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-primary:hover { background: var(--pa); border-color: var(--pa); }
.btn-ghost { color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn .arrow { transition: transform .12s linear; }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------------------------------------------------------- title page --- */
.hero { position: relative; padding: 62px 0 54px; border-bottom: 1px solid var(--rule); }
.hero-ic { width: 54px; height: 54px; display: block; margin: 0 0 24px; }
.hero h1 {
  font-size: clamp(34px, 5.4vw, 58px); font-weight: 700; line-height: 1.06;
  letter-spacing: -.018em; max-width: 19ch;
}
/* print emphasis is italic and a ruled underline — not a coloured fill */
.hero h1 .accent {
  font-style: italic; color: var(--pa);
  border-bottom: 3px solid var(--pa); padding-bottom: 2px;
}
.hero p.lead { font-size: 18.5px; color: var(--ink-2); max-width: 58ch; margin: 26px 0 30px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
/* the spec line, set as a caption under the title block */
.hero-note {
  font-variant: small-caps; font-size: 14.5px; letter-spacing: .08em; color: var(--ink-3);
  margin-top: 30px; padding-top: 12px; border-top: 1px solid var(--rule);
}

/* plate: a screen, mounted and captioned like a figure in a manual */
.hero-visual { margin-top: 42px; }
.hero-visual .frame, .m-media .frame { background: var(--plate); }
.fig {
  margin: 12px 0 0; font-size: 14.5px; font-style: italic; color: var(--ink-3);
  max-width: 62ch;
}
.fig b { font-style: normal; font-weight: 700; font-variant: small-caps; letter-spacing: .06em; color: var(--ink-2); }

/* ----------------------------------------------------- browser frame ----- */
/* light chrome, so the window reads as printed on the paper and the dark
   dashboard inside stays the only screen on the page */
.frame { border: 1px solid var(--ink); border-radius: 0; overflow: hidden; background: var(--plate); box-shadow: none; }
.frame-bar { display: flex; align-items: center; gap: 12px; padding: 7px 11px; background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.fb-nav, .fb-win { display: flex; align-items: center; gap: 10px; flex: none; }
.fb-ic { width: 14px; height: 14px; stroke: var(--ink-3); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fb-ic.dim { opacity: .4; }
.fb-win .fb-ic { width: 12px; height: 12px; }
.fb-url {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  background: var(--plate); border: 1px solid var(--rule); border-radius: 0;
  padding: 4px 11px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3);
}
.fb-lock { width: 11px; height: 11px; stroke: var(--ink-3); fill: none; stroke-width: 2; flex: none; }
.fb-url-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frame img { width: 100%; background: #14161a; }

/* ---------------------------------------------------------- sections ----- */
section { padding: 58px 0; }
.section-head { margin-bottom: 34px; }
.section-head h2 { font-size: clamp(25px, 3.4vw, 34px); font-weight: 700; line-height: 1.12; max-width: 22ch; }
.section-head p { color: var(--ink-2); font-size: 17px; margin: 14px 0 0; max-width: 62ch; }
.tint { background: var(--paper-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }

/* ------------------------------------------------------- feature set ----- */
/* Newspaper columns divided by hairlines — no cards, no boxes, no fills. */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 34px; counter-reset: f; }
@media (max-width: 820px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .features { grid-template-columns: 1fr; } }
.feature { counter-increment: f; padding-left: 34px; position: relative; border-radius: 0; background: none; }
/* hanging figure number in the margin, old-style numerals from the serif */
.feature::before {
  content: counter(f) "."; position: absolute; left: 0; top: 0;
  font-size: 17px; color: var(--pa); font-weight: 700;
}
.feature .dot { display: none; }
.feature h3 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.feature p { color: var(--ink-2); font-size: 15px; margin: 6px 0 0; }

/* -------------------------------------------------------- stat strip ----- */
.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--ink); }
@media (max-width: 720px) { .strip { grid-template-columns: repeat(2, 1fr); } }
.stat { padding: 18px 20px 20px; border-right: 1px solid var(--rule); background: none; border-radius: 0; }
.stat:last-child { border-right: 0; }
.stat .k { font-family: var(--font-serif); font-size: 34px; font-weight: 700; letter-spacing: -.02em; color: var(--pa); line-height: 1.1; }
.stat .l { font-variant: small-caps; font-size: 14.5px; letter-spacing: .08em; color: var(--ink-3); margin-top: 2px; }

/* ---------------------------------------------------------- UI list ------ */
.ui-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 46px; }
@media (max-width: 720px) { .ui-list { columns: 1; } }
.ui-list li { break-inside: avoid; padding: 0 0 16px 20px; position: relative; color: var(--ink-2); font-size: 16px; }
.ui-list li::before { content: "—"; position: absolute; left: 0; top: 0; width: auto; height: auto; background: none; color: var(--pa); }
.ui-list li b { color: var(--ink); font-weight: 700; }

/* --------------------------------------------------------- CTA band ------ */
.cta { text-align: center; padding: 56px 0; border-top: 1px solid var(--rule); background: var(--paper-2); }
.cta h2 { font-size: clamp(25px, 3.4vw, 34px); font-weight: 700; }
.cta p { color: var(--ink-2); font-size: 17px; margin: 14px auto 26px; max-width: 52ch; }
.cta .hero-cta { justify-content: center; }

/* trademark symbol — superscript, never scaled up.
   House rule (smooth-soft.com/trademarks.html): our marks are unregistered and
   marked ™ until a registration is actually granted. The registered-trademark
   symbol is never used for them — and the deploy guard fails the build if it
   appears anywhere, so do not write it even inside a comment. */
.tm { font-size: .62em; vertical-align: super; line-height: 0; letter-spacing: 0; }

/* --------------------------------------------------------- colophon ------ */
footer { border-top: 3px double var(--ink); padding: 26px 0 40px; color: var(--ink-3); font-size: 15px; }
footer .wrap { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; align-items: baseline; }
footer a { color: var(--ink-2); }
footer a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* footer — one-line publisher credit. Names the business behind the product and
   points at the company's own legal pages; keeps ZET čl. 6 / DDG §5 satisfied
   without turning a product page into a legal page. */
footer .wrap.foot-legal { display: block; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule); }
.foot-id { margin: 0; font-size: 14px; line-height: 1.8; color: var(--ink-3); }
.foot-id a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }
.foot-id a:hover { color: var(--ink); }

code.inl { font-family: var(--font-mono); font-size: .84em; color: var(--ink); background: var(--paper-2); border: 0; border-radius: 0; padding: 1px 5px; }