/* ==========================================================================
   LVL3 Precision
   Visual language: engineering instrumentation. Drafting white ground,
   cold graphite ink, international orange as a signal (never as decoration).

   Performance rules observed throughout:
   - No backdrop-filter, no box-shadow on repeated elements, no filter().
   - Animation is limited to transform and opacity (compositor-only).
   - One orchestrated entrance on load. Nothing animates on scroll.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Ground and ink */
  --paper:        #edf0f2;   /* cool drafting ground */
  --surface:      #ffffff;   /* raised plane */
  --ink:          #0c161b;   /* cold graphite, the primary voice */
  --ink-2:        #435359;   /* steel, secondary text */
  --ink-3:        #5c7077;   /* annotation grey, 4.5:1 on paper */
  --rule:         #d2dade;   /* hairline */
  --rule-strong:  #b6c3c8;

  /* Inverted field */
  --deep:         #0c161b;
  --deep-2:       #142229;
  --deep-rule:    #26363e;
  --deep-ink:     #e4ecef;
  --deep-ink-2:   #93a7af;

  /* Signal: international orange. Safety-critical hardware marking.
     Three steps, because one orange cannot be both vivid and legible:
     --signal      graphics only (rules, ticks, bars) — never small text
     --signal-btn  button ground, 4.85:1 with white text
     --signal-deep small orange text on a light ground, 4.77:1 on paper */
  --signal:       #e8450f;
  --signal-btn:   #d03c0b;
  --signal-btn-h: #b83307;
  --signal-deep:  #c23708;
  --signal-wash:  #fdeee9;

  /* Type */
  --sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Modular scale, perfect fourth off a 17px base */
  --t-micro: 0.75rem;    /* 12px  annotations */
  --t-small: 0.8125rem;  /* 13px  meta */
  --t-body:  1.0625rem;  /* 17px  reading */
  --t-lead:  1.25rem;    /* 20px  intros */
  --t-h3:    1.375rem;   /* 22px */
  --t-h2:    clamp(1.75rem, 3.2vw, 2.5rem);
  --t-h1:    clamp(2.375rem, 5.6vw, 4.5rem);

  /* Space */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;

  /* Measure */
  --measure: 64ch;
  --shell: 1180px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.021em;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); line-height: 1.03; letter-spacing: -0.032em; }
h2 { font-size: var(--t-h2); line-height: 1.12; letter-spacing: -0.026em; }
h3 { font-size: var(--t-h3); line-height: 1.28; }

p { margin: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--signal-deep); color: #fff; }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 1px;
}

.u-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -110%);
  z-index: 100;
  background: var(--ink); color: #fff;
  padding: var(--s-3) var(--s-5);
  font-size: var(--t-small); font-weight: 500;
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   3. Shell and shared pieces
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.measure { max-width: var(--measure); }

/* Annotation: mono is reserved for measured values and technical markers. */
.annot {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.annot--signal { color: var(--signal-deep); }

/* Page and section headings that follow an annotation line. */
.page-head h1, .page-head .annot + h1 { margin-top: var(--s-4); }

/* Section framing -------------------------------------------------------- */

/* One rhythm value for the whole page. Bands never stack their padding:
   consecutive light bands drop the top pad, and the deep band's own padding
   plus the preceding band's bottom pad supply the separation, so no margin is
   added on top of either. */
:root { --band: clamp(3rem, 7vw, 6.5rem); }

.band { padding-block: var(--band); }
.band + .band { padding-top: 0; }
.band--deep + .band { padding-top: var(--band); }

/* A section head reads like a drawing title block: marker, title, note. */
.head {
  display: grid;
  gap: var(--s-4);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  position: relative;
  margin-bottom: var(--s-7);
}
.head::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 56px; height: 2px;
  background: var(--signal);
}
.head__title { max-width: 20ch; }
.head__note { color: var(--ink-2); max-width: 58ch; }

/* Buttons ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.8125rem 1.375rem;
  font: inherit;
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.005em;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .16s linear, border-color .16s linear, color .16s linear;
}

.btn--signal { background: var(--signal-btn); color: #fff; }
.btn--signal:hover { background: var(--signal-btn-h); }

.btn--quiet {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.btn--quiet:hover { border-color: var(--ink); }

.btn[disabled] { opacity: .55; cursor: progress; }

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color .18s linear, background-color .18s linear;
}
.masthead.is-stuck {
  border-bottom-color: var(--rule);
  background: rgba(237, 240, 242, 0.94);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 4.5rem;
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
}
/* The orange tick beside the wordmark is the caution-marking motif in miniature. */
.wordmark::before {
  content: "";
  width: 3px; height: 1.05em;
  background: var(--signal);
  align-self: center;
}
.wordmark span { font-weight: 400; color: var(--ink-2); }

.nav { display: flex; align-items: center; gap: var(--s-6); }
.nav__list { display: flex; align-items: center; gap: var(--s-6); }

.nav__list a {
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  padding-block: var(--s-2);
  transition: color .16s linear;
}
.nav__list a:hover { color: var(--ink); }

.nav__place {
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--ink-3);
  letter-spacing: 0.04em;
}

.nav__toggle {
  display: none;
  width: 2.5rem; height: 2.5rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  position: absolute;
  left: 50%;
  width: 16px; height: 1.5px;
  background: var(--ink);
  transform: translateX(-50%);
}
.nav__toggle span { top: 50%; margin-top: -0.75px; }
.nav__toggle span::before { content: ""; top: -5px; left: 0; transform: none; }
.nav__toggle span::after  { content: ""; top:  5px; left: 0; transform: none; }

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */

/* No bottom padding: the following band supplies the separation on its own,
   otherwise the two stack into a dead gap. */
.hero { padding-block: clamp(2.5rem, 7vw, 5.5rem) 0; }

.hero__marker {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
  color: var(--ink-3);
}
.hero__marker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.hero__title { max-width: 17ch; }

.hero__lead {
  margin-top: var(--s-5);
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 54ch;
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

/* The readout: the one bold element on the page ------------------------- */

.readout {
  margin: clamp(3rem, 7vw, 4.5rem) 0 0;
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--ink);
}

.readout__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2) var(--s-5);
  margin-bottom: var(--s-6);
}
.readout__title { font-size: var(--t-small); font-weight: 600; letter-spacing: 0; }
.readout__rows { display: grid; gap: var(--s-4); }

.readout__row {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  align-items: center;
  gap: var(--s-4);
}

.readout__label {
  font-size: var(--t-small);
  color: var(--ink-2);
  font-weight: 500;
}

.readout__track {
  position: relative;
  height: 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
}

.readout__bar {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(var(--fill, 0));
}
.readout__bar--before { background: var(--rule-strong); }
.readout__bar--after  { background: var(--signal); }

.readout__value {
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  min-width: 3.75rem;
  text-align: right;
}
.readout__value abbr { color: var(--ink-3); text-decoration: none; font-size: var(--t-small); }
.readout__row--after .readout__value { color: var(--signal-deep); }

/* Scale: real tick marks, the drafting-rule motif carrying actual units. */
.readout__scale {
  grid-column: 2 / 3;
  display: flex;
  justify-content: space-between;
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px solid var(--rule);
}
.readout__scale span {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--ink-3);
  position: relative;
  padding-top: var(--s-2);
}
.readout__scale span::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 4px;
  background: var(--rule-strong);
}

/* Entrance: one orchestrated moment, transform only, runs once. */
@media (prefers-reduced-motion: no-preference) {
  .js .readout__bar { transform: scaleX(0); }
  .js .readout.is-live .readout__bar {
    transform: scaleX(var(--fill, 0));
    transition: transform 900ms cubic-bezier(.22, .68, .28, 1);
  }
  .js .readout.is-live .readout__bar--after { transition-delay: 160ms; }
}

/* --------------------------------------------------------------------------
   6. Capability sheet — a spec table, deliberately not a card grid
   -------------------------------------------------------------------------- */

.sheet { border-top: 1px solid var(--rule); }

.sheet__row {
  display: grid;
  grid-template-columns: 1.5rem minmax(11rem, 15rem) 1fr;
  gap: var(--s-4) var(--s-5);
  padding-block: var(--s-6);
  border-bottom: 1px solid var(--rule);
}

.sheet__index {
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--ink-3);
  padding-top: 0.45rem;
  font-variant-numeric: tabular-nums;
}

.sheet__name { padding-top: 0.1rem; }
.sheet__name h3 { letter-spacing: -0.018em; }
.sheet__tag {
  display: block;
  margin-top: var(--s-2);
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--signal-deep);
  letter-spacing: 0.03em;
}

.sheet__detail { color: var(--ink-2); max-width: 56ch; }
.sheet__detail p { margin-bottom: var(--s-3); }

.sheet__list { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.sheet__list li {
  font-size: var(--t-small);
  color: var(--ink-2);
  position: relative;
  padding-left: var(--s-3);
}
.sheet__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 4px; height: 1px;
  background: var(--rule-strong);
}

/* --------------------------------------------------------------------------
   7. Deep field — security section as an instrument panel
   -------------------------------------------------------------------------- */

.band--deep {
  background: var(--deep);
  color: var(--deep-ink);
}
.band--deep .head { border-top-color: var(--deep-rule); }
.band--deep .head__note { color: var(--deep-ink-2); }
.band--deep .annot { color: var(--deep-ink-2); }

.panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  background: var(--deep-rule);
  border: 1px solid var(--deep-rule);
}

.panel__cell {
  background: var(--deep);
  padding: var(--s-6) var(--s-5);
  display: grid;
  gap: var(--s-3);
  align-content: start;
}

/* Sans, not mono: these are words. Mono stays reserved for measured values. */
.panel__value {
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--deep-ink);
  letter-spacing: -0.028em;
}
.panel__value em { font-style: normal; color: var(--signal); }
.panel__label { font-size: var(--t-small); font-weight: 600; }
.panel__note { font-size: var(--t-small); color: var(--deep-ink-2); line-height: 1.55; }

/* --------------------------------------------------------------------------
   8. Sequence — the only place numbering is earned
   -------------------------------------------------------------------------- */

.sequence {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--s-6) var(--s-7);
  counter-reset: step;
}

.step {
  padding-top: var(--s-4);
  border-top: 2px solid var(--ink);
  display: grid;
  gap: var(--s-3);
  align-content: start;
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--signal-deep);
  letter-spacing: 0.06em;
}
.step p { color: var(--ink-2); font-size: var(--t-small); line-height: 1.6; }

/* --------------------------------------------------------------------------
   9. Discretion statement
   -------------------------------------------------------------------------- */

/* Deliberately not a card. Boxing this left a tall void under the short
   heading column; on the open ground the uneven columns read as whitespace. */
.statement {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--s-5) var(--s-7);
  align-items: start;
  padding-left: var(--s-6);
  border-left: 2px solid var(--signal);
}
.statement__head { display: grid; gap: var(--s-4); }
.statement__body { color: var(--ink-2); display: grid; gap: var(--s-4); }
.statement__body strong { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   10. Contact form — tightened to four fields
   -------------------------------------------------------------------------- */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, var(--s-9));
  align-items: start;
}

.contact__aside { display: grid; gap: var(--s-5); align-content: start; }
.contact__note { color: var(--ink-2); max-width: 38ch; }

.contact__facts { display: grid; gap: var(--s-4); padding-top: var(--s-5); border-top: 1px solid var(--rule); }
.contact__fact { display: grid; gap: var(--s-1); }
.contact__fact dt { font-family: var(--mono); font-size: var(--t-micro); color: var(--ink-3); letter-spacing: 0.04em; }
.contact__fact dd { margin: 0; font-size: var(--t-small); font-weight: 500; }
.contact__fact a { text-decoration-color: var(--rule-strong); }
.contact__fact a:hover { text-decoration-color: var(--signal); }

.form {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--ink);
  padding: clamp(1.5rem, 4vw, var(--s-7));
}

.form__fields { display: grid; gap: var(--s-5); }

.field { display: grid; gap: var(--s-2); }

.field > span:first-child {
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.field__hint { font-size: var(--t-micro); color: var(--ink-3); font-weight: 400; }

.field input[type="text"],
.field input[type="email"],
.field input[type="url"],
.field textarea {
  width: 100%;
  font: inherit;
  font-size: var(--t-body);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.75rem 0.875rem;
  transition: border-color .14s linear, background-color .14s linear;
}
.field textarea { resize: vertical; min-height: 7rem; line-height: 1.55; }

.field input::placeholder,
.field textarea::placeholder { color: var(--ink-3); }

.field input:hover, .field textarea:hover { border-color: var(--rule-strong); }

.field input:focus, .field textarea:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.field.is-invalid input,
.field.is-invalid textarea { border-color: var(--signal); }

.field__error {
  font-size: var(--t-micro);
  color: var(--signal-deep);
  font-weight: 500;
  min-height: 0;
}

/* Service chips: a compact multi-select that replaces four stacked rows. */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.chip { position: relative; }
.chip input {
  position: absolute; inset: 0;
  opacity: 0; width: 100%; height: 100%;
  margin: 0; cursor: pointer;
}
.chip span {
  display: block;
  padding: 0.5rem 0.8125rem;
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink-2);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
  transition: border-color .14s linear, color .14s linear, background-color .14s linear;
  user-select: none;
}
.chip input:hover + span { border-color: var(--rule-strong); }
.chip input:checked + span {
  color: var(--signal-deep);
  background: var(--signal-wash);
  border-color: var(--signal);
}
.chip input:focus-visible + span { outline: 2px solid var(--signal); outline-offset: 2px; }

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
}
.form__status { font-size: var(--t-small); color: var(--ink-2); }
.form__status[data-state="error"] { color: var(--signal-deep); font-weight: 500; }

.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Confirmation replaces the form in place. */
.form__done { display: grid; gap: var(--s-3); padding-block: var(--s-4); }
.form__done h3 { font-size: var(--t-h3); }
.form__done p { color: var(--ink-2); max-width: 46ch; }
.form__done .annot { color: var(--signal-deep); }

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */

.foot {
  border-top: 1px solid var(--rule);
  padding-block: var(--s-7) var(--s-6);
  margin-top: clamp(3.5rem, 9vw, var(--s-9));
}

.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: var(--s-6) var(--s-5);
  align-items: start;
}

.foot__blurb { margin-top: var(--s-3); color: var(--ink-2); font-size: var(--t-small); max-width: 34ch; }

.foot__col { display: grid; gap: var(--s-2); align-content: start; }
.foot__col h2 {
  font-size: var(--t-micro);
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  margin-bottom: var(--s-1);
}
.foot__col a, .foot__col span {
  font-size: var(--t-small);
  color: var(--ink-2);
  text-decoration: none;
  transition: color .16s linear;
}
.foot__col a:hover { color: var(--ink); }

.foot__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
}

/* --------------------------------------------------------------------------
   12. Interior page content
   -------------------------------------------------------------------------- */

.page-head { padding-block: clamp(3rem, 7vw, 5rem) var(--s-6); border-bottom: 1px solid var(--rule); }

.prose { max-width: var(--measure); padding-block: var(--s-7); display: grid; gap: var(--s-5); }
.prose > * { margin: 0; }
.prose h2 { margin-top: var(--s-5); }
.prose h3 { margin-top: var(--s-4); }
.prose ul { list-style: disc; padding-left: 1.25rem; display: grid; gap: var(--s-2); }
.prose ol { list-style: decimal; padding-left: 1.25rem; display: grid; gap: var(--s-2); }
/* Buttons inside prose keep their own colour — a bare `.prose a` rule outranks
   .btn--signal and turns the label the same orange as its background. */
.prose a:not(.btn) { color: var(--signal-deep); }
.prose blockquote {
  padding-left: var(--s-5);
  border-left: 2px solid var(--signal);
  color: var(--ink-2);
}
.prose code { font-family: var(--mono); font-size: 0.9em; background: var(--surface); padding: 0.1em 0.35em; border: 1px solid var(--rule); }

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

.sheet__link { text-decoration: none; }
.sheet__link:hover { text-decoration: underline; text-decoration-color: var(--signal); }

.pagination { padding-block: var(--s-6); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pagination a, .pagination .current {
  display: inline-block;
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--rule);
  text-decoration: none;
}
.pagination .current { border-color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   15. Video QuickStream product page
   Rendered by the vqs-sales-page mu-plugin. Reuses the capability sheet so the
   product reads as part of the same system.
   -------------------------------------------------------------------------- */

.vqs { padding-block: var(--s-6) var(--s-8); display: grid; gap: var(--s-8); }

.vqs__intro { display: grid; gap: var(--s-4); justify-items: start; }
.vqs__lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 48ch;
}

.vqs__buy {
  display: grid;
  gap: var(--s-3);
  justify-items: start;
  margin-top: var(--s-4);
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--ink);
  width: 100%;
}
.vqs__price {
  font-family: var(--mono);
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.vqs__price .woocommerce-Price-amount { color: inherit; }
.vqs__buy .btn { margin-top: var(--s-2); }
.vqs__terms { font-size: var(--t-small); color: var(--ink-3); }

.vqs__features { border-top: 1px solid var(--rule); }

.vqs__how {
  display: grid;
  gap: var(--s-4);
  padding-top: var(--s-5);
  border-top: 2px solid var(--ink);
}
.vqs__steps {
  counter-reset: vqs;
  display: grid;
  gap: var(--s-3);
  max-width: 60ch;
}
.vqs__steps li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: var(--s-3);
  color: var(--ink-2);
}
.vqs__steps li::before {
  counter-increment: vqs;
  content: counter(vqs, decimal-leading-zero);
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--signal-deep);
  padding-top: 0.35em;
}

.vqs__by { border-top: 1px solid var(--rule); padding-top: var(--s-4); }

@media (max-width: 860px) {
  .vqs__features .sheet__row { grid-template-columns: 1.5rem 1fr; }
}

/* --------------------------------------------------------------------------
   13. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .contact { grid-template-columns: 1fr; }
  .statement { grid-template-columns: 1fr; gap: var(--s-5); padding: var(--s-5); }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .sheet__row { grid-template-columns: 1.5rem 1fr; }
  .sheet__detail { grid-column: 2 / -1; }
}

@media (max-width: 720px) {
  .nav__place { display: none; }
  .nav__toggle { display: block; }

  .nav__list {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface);
    border-block: 1px solid var(--rule);
    padding: var(--s-2) var(--gutter) var(--s-4);
  }
  .nav__list[hidden] { display: none; }
  .nav__list li + li { border-top: 1px solid var(--rule); }
  .nav__list a { display: block; padding-block: var(--s-3); font-size: var(--t-body); }

  .readout { padding: var(--s-5) var(--s-4); }
  .readout__row { grid-template-columns: 3.5rem 1fr auto; gap: var(--s-3); }
  .readout__value { font-size: 0.9375rem; min-width: 3.25rem; }
  .readout__scale { display: none; }

  .foot__grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .hero__actions .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   14. Motion preference
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media print {
  .masthead, .nav, .form, .hero__actions { display: none; }
  body { background: #fff; color: #000; }
}