/* ============================================================================
   VCTerminal marketing design system
   ----------------------------------------------------------------------------
   Shared by every static marketing page (/product, /pricing, /advisory, /learn).
   The React app mirrors these tokens in Tailwind so the two halves of the site
   read as one product.

   Direction: editorial authority. A serif display face carries the argument, a
   precise sans carries the detail, and money always renders in the product's
   own certainty palette so the marketing site previews the software.
   ========================================================================== */

:root {
  /* Type */
  --display: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Ground. Near-black is biased blue so it sits under the brand hue. */
  --ink:        #0A0D12;
  --ink-soft:   #121821;
  --ink-line:   #1E2733;

  /* Paper */
  --paper:      #FBFCFD;
  --surface:    #FFFFFF;
  --sunk:       #F4F6F9;
  --line:       #E4E9EE;
  --line-hard:  #CFD7DF;

  /* Text */
  --strong:     #0A0D12;
  --body:       #48535F;
  --mute:       #77838F;
  --on-ink:     #F2F5F8;
  --on-ink-mute:#8D9BAA;

  /* Brand */
  --blue:       #2563EB;
  --blue-deep:  #1D4ED8;
  --blue-wash:  #EFF5FF;

  /* Certainty palette - identical to the money bands inside the product, so a
     chart on the marketing site and a chart in the app speak the same language. */
  --band-soft:      #60A5FA;
  --band-termsheet: #2563EB;
  --band-committed: #16A34A;
  --band-togo:      #E9EDF3;
  --alert:          #D2453C;

  --radius:     14px;
  --radius-sm:  9px;
  --shadow:     0 1px 2px rgba(10,13,18,.04), 0 8px 24px -12px rgba(10,13,18,.10);
  --shadow-lg:  0 2px 4px rgba(10,13,18,.04), 0 24px 64px -24px rgba(10,13,18,.22);
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { color: var(--strong); margin: 0; line-height: 1.1; text-wrap: balance; }

/* Display face carries headlines only. Serif at large sizes reads as authority;
   at small sizes it reads as decoration, so it is never used below 24px. */
.display {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.032em;
}
.d1 { font-size: clamp(42px, 6.4vw, 78px); line-height: 1.02; }
.d2 { font-size: clamp(32px, 4.2vw, 52px); line-height: 1.06; }
.d3 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.14; }

h3, .h4 { font-family: var(--sans); font-weight: 600; letter-spacing: -0.011em; font-size: 18px; }

.lede { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--body); max-width: 60ch; }
.small { font-size: 14.5px; }

/* Uppercase micro-label. Mono because these are almost always data captions. */
.label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mute);
}
.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* ---- layout ------------------------------------------------------------- */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.narrow { max-width: 760px; margin: 0 auto; padding: 0 28px; }
section { padding: clamp(56px, 8vw, 104px) 0; }
.stack { display: flex; flex-direction: column; }
.gap-s  { gap: 10px; }  .gap-m { gap: 18px; }
.gap-l  { gap: 32px; }  .gap-xl { gap: 56px; }
.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

/* ---- header ------------------------------------------------------------- */
header.site {
  background: rgba(251,252,253,.86);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 60;
}
header.site .inner {
  max-width: 1200px; margin: 0 auto; padding: 15px 28px;
  display: flex; align-items: center; gap: 18px;
}
.brand { font-weight: 700; font-size: 17.5px; color: var(--strong); letter-spacing: -0.03em; }
.brand span { color: var(--blue); }
header.site nav { margin-left: auto; display: flex; gap: 26px; align-items: center; }
header.site nav a { font-size: 14.5px; font-weight: 500; color: var(--body); }
header.site nav a:hover { color: var(--strong); text-decoration: none; }
@media (max-width: 760px) { header.site nav a.hide-sm { display: none; } }

/* ---- buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 14.5px; font-weight: 600;
  padding: 11px 20px; border-radius: 10px; border: 1px solid transparent;
  cursor: pointer; transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--blue); color: #fff !important; }
.btn-primary:hover { background: var(--blue-deep); }
.btn-ghost { background: var(--surface); color: var(--strong) !important; border-color: var(--line-hard); }
.btn-ghost:hover { border-color: var(--strong); }
.btn-on-ink { background: rgba(255,255,255,.09); color: var(--on-ink) !important; border-color: rgba(255,255,255,.18); }
.btn-on-ink:hover { background: rgba(255,255,255,.15); }
.btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ---- surfaces ----------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px 26px; box-shadow: var(--shadow);
}
.card-link { display: block; color: inherit; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.card-link:hover { text-decoration: none; border-color: var(--line-hard); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.card h3 { margin-bottom: 7px; }
.card p { margin: 0; font-size: 15px; color: var(--body); line-height: 1.55; }
.more { display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--blue); }

.ink-panel {
  background: linear-gradient(180deg, #FFFFFF 0%, #F2F6FC 100%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  color: var(--body);
  border-radius: 20px;
  padding: clamp(30px,4vw,54px);
}
.ink-panel h2, .ink-panel h3 { color: var(--strong); }
.ink-panel p { color: var(--body); }
.ink-panel .label { color: var(--blue); }

/* ---- money bar: the product's own chart language, on the marketing site --- */
.bar { display: flex; height: 13px; border-radius: 99px; overflow: hidden; background: var(--band-togo); gap: 2px; }
.bar i { display: block; height: 100%; }
.bar i:first-child { border-radius: 99px 0 0 99px; }
.bar i:last-of-type { border-radius: 0 99px 99px 0; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--mute); }
.legend b { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* ---- stat ---------------------------------------------------------------- */
.stat .v { font-family: var(--display); font-weight: 600; font-size: clamp(30px,3.4vw,42px); line-height: 1; color: var(--strong); letter-spacing: -0.03em; }
.ink-panel .stat .v { color: var(--strong); }
.stat .k { margin-top: 8px; font-size: 13.5px; color: var(--mute); }
.ink-panel .stat .k { color: var(--mute); }

/* ---- footer -------------------------------------------------------------- */
footer.site { border-top: 1px solid var(--line); padding: 40px 0 56px; margin-top: 40px; }
footer.site .row { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; }
footer.site a { font-size: 14px; color: var(--body); }
footer.site .fine { margin-top: 20px; font-size: 12.5px; color: var(--mute); line-height: 1.6; max-width: 78ch; }

.crumb { font-size: 13.5px; color: var(--mute); padding-top: 26px; }
.crumb a { color: var(--mute); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}