/* ═══════════════════════════════════════════════════════════════════
   VIRTUA — the brand, in ONE place.
   Loaded by every page on the site. Before this file existed the same
   colours and rules were written out three separate times (index.html's
   own CSS, styles.css, and a copy inside every blog post), so a fix in
   one never reached the other two and the site drifted apart.

   Change a colour or a font HERE and it changes everywhere.
   Values match 7_Company/VIRTUA_Brand.md — that doc is the source.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* ── colour: navy + steel + one alert red. No gold. No green. ── */
  --v-navy-dark:#0E1A2B;    /* primary dark background, authority     */
  --v-navy:#142E54;         /* headers, rules, the wordmark           */
  --v-ink:#1A2433;          /* body text                              */
  --v-steel:#3B6B9E;        /* THE accent — links, CTAs, the italic   */
  --v-steel-bright:#4E83BD; /* accent, hover / on dark                */
  --v-light-blue:#8BA5C7;   /* subtitles on navy, hairlines           */
  --v-pale:#D6E0EE;         /* soft fills, chips                      */
  --v-mist:#EEF2F6;         /* section + card backgrounds             */
  --v-muted:#6B7280;        /* lede, captions, meta                   */
  --v-border:#E2E8F0;       /* hairlines, table borders               */
  --v-paper:#FFFFFF;
  --v-red:#C1503F;          /* the ONLY non-navy hue, alerts only     */

  /* ── type: TWO families. Mono is product-UI only, never chrome. ── */
  --v-serif:"Fraunces","Hoefler Text","Iowan Old Style",Georgia,serif;
  --v-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --v-mono:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;
}

/* ── The signature: headings are the serif, on every page ──────────
   This used to be true only on the homepage; every other page was
   Inter 800, which is why the site never read as one thing. */
h1,h2,h3{font-family:var(--v-serif);font-weight:500;letter-spacing:-.015em}
h1 em,h2 em,h3 em{font-style:italic;color:var(--v-steel)}

/* ── Readable on a real device ─────────────────────────────────────
   Product-UI labels sit at 8.5–11px so the mockups read as software.
   Fine on a monitor, unreadable in the hand. Floor them on phone and
   iPad; desktop keeps the small look. !important is deliberate — the
   originals are two-class selectors, so specificity decides, not
   source order, and a floor has to win. */
@media(max-width:1024px){
  /* homepage product mockup */
  .hd-kpis .k,.hd-title span,.vital .k,.vital .d,.side .grp,.needs .nh,
  .view-head .s,.tbl th,.tsec td,.mini-kpi .k,.screen .sh .tag,
  .link .own,.pill,.live,.nrow .nm span,.eyebrow,.emblem .lab,
  .comp .cn,.flow-h,.mod .mi,.move .no,.demohint,.gcap,.login,
  /* service pages + blog */
  .cu-pill,.cu-chip,.btag,.lbl,.panel-tag,.col-tag,.plan-tag,.badge,
  .cat,.lm-eyebrow,.cu-side .v,.cu-fields .fr .v,.cu-check .lbl,
  .cu-fields .lbl,.cu-side .fold,.cu-side .li{
    font-size:12px !important;letter-spacing:.05em}
  .tbl td,.nrow .st,.mrow .l,.mrow .r,.nrow .nm{font-size:13px !important}

  /* thumb-sized taps */
  nav .mark{display:inline-flex;align-items:center;min-height:44px}
  .nav-links a,footer a,.backlink a{display:inline-block;padding:6px 0;min-height:32px}
}

/* ── Nothing scrolls sideways or clips on a phone ── */
@media(max-width:600px){
  .ops,.ops.ops-3,.shots{grid-template-columns:1fr !important}

  /* the demo's title bar clipped ~33px off its right edge (overflow
     hidden, so the text was lost rather than scrollable) */
  .app-bar{flex-wrap:wrap;gap:8px;padding:10px 12px}
  .app-bar .console-url{margin:0;max-width:100%;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
  /* grid items default to min-width:auto, so they refuse to shrink below
     their content and push the demo past its own box */
  .app-body,.app-body>*,.hd-body,.hd-body>*,
  .pane,.view,.vitals,.vitals>*,.needs,.nrow,.hd-kpis,.hd-kpis>*{min-width:0}
  /* !important because page CSS loads after this file and its own
     820px rule keeps these two-up, which is too narrow for the numbers */
  .vitals{grid-template-columns:1fr !important}
  .vital .v{font-size:22px}

  .mod p,.move p,.comp li,.pstat .l{font-size:15px}
}