/* Cognivio — signal path aesthetic. One family (Archivo, width axis), one accent (tally red). */

:root {
  --paper: #e9edf1;
  --surface: #f7f9fb;
  --ink: #0c1b2e;
  --steel: #56677a;
  --rule: #c9d2db;
  --tally: #e4002b;
  --lane: #0c1b2e;
  --lane-out: #56677a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0c1b2e;
    --surface: #13253d;
    --ink: #e9edf1;
    --steel: #9aabbe;
    --rule: #2a3d55;
    --tally: #ff2d4a;
    --lane: #e9edf1;
    --lane-out: #9aabbe;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Archivo, system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.55;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-color: var(--tally); }
:focus-visible { outline: 2px solid var(--tally); outline-offset: 3px; }

.wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 48rem) { .wrap { padding: 0 2.5rem; } }

/* Type scale, ratio 1.25 on 18px */
h1, h2, h3 { font-stretch: 125%; font-weight: 600; letter-spacing: -.01em; margin: 0; line-height: 1.05; }
h1 { font-size: clamp(2.4rem, 6.2vw, 4.3rem); max-width: 16ch; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.75rem); max-width: 22ch; }
h3 { font-size: 1.375rem; font-stretch: 112%; line-height: 1.2; }
p { margin: 0; max-width: 38rem; }
.sub { font-size: 1.22rem; color: var(--steel); line-height: 1.45; max-width: 34rem; }

/* Header */
.site-head { border-bottom: 1px solid var(--rule); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 4rem; }
.mark { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font-stretch: 125%; font-weight: 700; font-size: 1.15rem; }
.mark .tally { width: .62rem; height: .62rem; border-radius: 50%; background: var(--tally); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tally) 22%, transparent); }
.site-head nav { display: flex; gap: 1.5rem; }
.site-head nav a { text-decoration: none; color: var(--steel); font-size: .95rem; }
.site-head nav a[aria-current="page"], .site-head nav a:hover { color: var(--ink); }
@media (max-width: 30rem) { .site-head nav a.hide-sm { display: none; } }

/* Hero */
.hero { padding: 4.5rem 0 1rem; }
.hero .sub { margin-top: 1.5rem; }
.hero .actions { margin-top: 2rem; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.btn {
  display: inline-block; text-decoration: none; padding: .8rem 1.4rem;
  background: var(--ink); color: var(--paper); font-weight: 600; font-stretch: 105%;
  border: 1.5px solid var(--ink); border-radius: 2px;
}
.btn:hover { background: var(--tally); border-color: var(--tally); color: #fff; }
.btn.quiet { background: transparent; color: var(--ink); }
.btn.quiet:hover { background: transparent; color: var(--tally); border-color: var(--tally); }

/* Signal path diagram — the one loud element */
.path { margin: 3rem 0 0; overflow-x: auto; overflow-y: hidden; }
.path svg { display: block; width: 100%; min-width: 42rem; height: auto; overflow: visible; }
.path text { font-family: Archivo, system-ui, sans-serif; font-stretch: 80%; font-weight: 500; font-size: 15px; fill: var(--steel); letter-spacing: .01em; }
.path text.box { fill: var(--paper); font-stretch: 118%; font-weight: 700; font-size: 15px; }
.path text.on { fill: var(--tally); font-weight: 700; }
.path .lane { fill: none; stroke: var(--lane); stroke-width: 3; stroke-linecap: butt; marker-end: url(#ah); }
.path .lane.out { marker-end: url(#ah-out); }
.path .ah { fill: var(--lane); }
.path .ah-out { fill: var(--lane-out); }
.path .lane.out { stroke: var(--lane-out); }
.path .rail { fill: none; stroke: var(--rule); stroke-width: 1; }
.path .gw { fill: var(--ink); }
.path .probe { fill: var(--surface); stroke: var(--ink); stroke-width: 1.5; }
.path .tap { fill: var(--tally); }
/* packet trains: dash pattern = packet length + gap. Video dense, audio 1 ms, ANC sparse. */
.path .video { stroke-dasharray: 6 3; animation: flow 1.2s linear infinite; }
.path .audio { stroke-dasharray: 3 9; animation: flow 1.6s linear infinite; }
.path .anc   { stroke-dasharray: 2 34; animation: flow 2.4s linear infinite; }
.path .ts    { stroke-dasharray: 10 6; animation: flow 2.1s linear infinite; }
.path .back  { animation-direction: reverse; }
@keyframes flow { to { stroke-dashoffset: -72; } }
@media (prefers-reduced-motion: reduce) { .path [class*="video"], .path .audio, .path .anc, .path .ts { animation: none; } }

/* Sections and rows: rules carry structure, not cards */
section { padding: 4.5rem 0; }
section + section { border-top: 1px solid var(--rule); }
.row { display: grid; gap: 1.5rem 3rem; grid-template-columns: 1fr; }
@media (min-width: 52rem) { .row { grid-template-columns: minmax(14rem, 1fr) 2fr; } }
.row + .row { margin-top: 3rem; padding-top: 3rem; border-top: 1px solid var(--rule); }
.row h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); }
.row p { color: var(--steel); }
.row .body > p + p { margin-top: 1rem; }

/* Protocol lanes — a legend drawn the same way as the hero diagram */
.strip { display: grid; gap: .55rem; margin-top: 1rem; font-size: 1rem; }
.strip span { display: flex; align-items: center; gap: .9rem; }
.strip span::before { content: ""; width: 3.5rem; border-top: 3px dashed var(--lane); flex: none; }
.strip.out span::before { border-top-color: var(--lane-out); border-top-style: dashed; }

/* Spec table */
table.spec { border-collapse: collapse; width: 100%; max-width: 44rem; margin-top: 1.5rem; font-size: 1rem; }
table.spec th, table.spec td { text-align: left; padding: .7rem 0; border-top: 1px solid var(--rule); vertical-align: top; }
table.spec th { font-weight: 500; color: var(--steel); width: 12rem; padding-right: 1rem; }
table.spec tr:last-child th, table.spec tr:last-child td { border-bottom: 1px solid var(--rule); }

/* Product blocks on the home page */
.product { display: grid; gap: 1.5rem 3rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 52rem) { .product { grid-template-columns: 1fr 1fr; } }
.product h2 a { text-decoration: none; }
.product h2 a:hover { color: var(--tally); }
.product .sub { margin-top: 1rem; font-size: 1.1rem; }
.product .more { display: inline-block; margin-top: 1.5rem; font-weight: 600; }
.product figure { margin: 0; }
.product figure svg { width: 100%; height: auto; display: block; }

/* Readout panel for the probe — a monitor, not a card */
.readout { border: 1.5px solid var(--ink); background: var(--surface); padding: 1rem 1.25rem; font-size: .95rem; }
.readout table { border-collapse: collapse; width: 100%; }
.readout th, .readout td { text-align: left; padding: .4rem .5rem .4rem 0; border-bottom: 1px solid var(--rule); font-weight: 500; font-stretch: 90%; }
.readout th { color: var(--steel); font-weight: 500; font-size: .85rem; }
.readout tr:last-child td { border-bottom: 0; }
.readout .ok::before, .readout .bad::before { content: ""; display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .5rem; background: var(--ink); vertical-align: middle; }
.readout .bad::before { background: var(--tally); }
.readout .bad { color: var(--tally); }
.readout caption { text-align: left; caption-side: top; padding-bottom: .6rem; font-weight: 700; font-stretch: 112%; }

/* Contact */
.contact h2 { max-width: none; }
.contact .mail { display: inline-block; margin-top: 1.5rem; font-size: clamp(1.4rem, 3.4vw, 2.2rem); font-stretch: 112%; font-weight: 600; text-decoration-thickness: 2px; }

/* Footer */
.site-foot { border-top: 1px solid var(--rule); padding: 3rem 0; color: var(--steel); font-size: .95rem; }
.site-foot .cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); max-width: 48rem; }
.site-foot .cols div { display: grid; gap: .4rem; align-content: start; }
.site-foot .cols strong { color: var(--ink); font-stretch: 112%; margin-bottom: .3rem; }
.site-foot .cols a { text-decoration: none; }
.site-foot .cols a:hover { color: var(--ink); text-decoration: underline; }
.site-foot .base { display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }

/* Long-form text: about, docs, legal */
.prose { max-width: 40rem; }
.prose h2 { margin-top: 3rem; font-size: 1.6rem; }
.prose h3 { margin-top: 2rem; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol { margin-top: 1rem; color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li + li { margin-top: .4rem; }
.prose .meta { color: var(--steel); font-size: .95rem; }
.prose pre { margin-top: 1rem; padding: 1rem 1.25rem; background: var(--surface); border: 1px solid var(--rule); overflow-x: auto; font-size: .9rem; line-height: 1.5; }
.prose code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .92em; }
.prose p code, .prose li code, .prose td code { background: var(--surface); padding: .05em .35em; border: 1px solid var(--rule); }
.prose table { border-collapse: collapse; width: 100%; margin-top: 1rem; font-size: .95rem; }
.prose th, .prose td { text-align: left; padding: .5rem .75rem .5rem 0; border-top: 1px solid var(--rule); vertical-align: top; }
.prose th { color: var(--steel); font-weight: 500; }
.prose tr:last-child td { border-bottom: 1px solid var(--rule); }
.toc { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* Forms — plain fields, tally on focus */
form.ask { display: grid; gap: 1.25rem; max-width: 36rem; margin-top: 2rem; }
form.ask label { display: grid; gap: .4rem; font-size: .95rem; color: var(--steel); }
form.ask input, form.ask textarea, form.ask select {
  font: inherit; color: var(--ink); background: var(--surface);
  border: 1.5px solid var(--rule); border-radius: 2px; padding: .65rem .8rem; width: 100%;
}
form.ask input:focus, form.ask textarea:focus, form.ask select:focus { outline: none; border-color: var(--tally); }
form.ask textarea { min-height: 7rem; resize: vertical; }
form.ask .two { display: grid; gap: 1.25rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 36rem) { form.ask .two { grid-template-columns: 1fr; } }
form.ask .btn { justify-self: start; cursor: pointer; }
form.ask .note { font-size: .9rem; color: var(--steel); }

/* Pricing table */
.plans { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: 2rem; max-width: 56rem; }
.plan { border-top: 3px solid var(--ink); padding-top: 1rem; }
.plan h3 { margin-bottom: .5rem; }
.plan p { color: var(--steel); }
.plan ul { margin: 1rem 0 0; padding-left: 1.2rem; }
.plan li + li { margin-top: .35rem; }