/* ViCall — dark style components
   Load AFTER tokens.css and after the two Google fonts.
   Class names are namespaced vc- so they can't collide with an existing app. */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ---------- base ---------- */
.vc-root {
  background: var(--vc-bg);
  color: var(--vc-ink);
  font-family: var(--vc-font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.vc-root *, .vc-root *::before, .vc-root *::after { box-sizing: border-box; }
.vc-root a { color: inherit; text-decoration: none; }
.vc-root a:hover { color: var(--vc-accent); }
.vc-root ::selection { background: var(--vc-accent); color: var(--vc-bg); }

/* ---------- shell ---------- */
.vc-wrap { max-width: var(--vc-max); margin: 0 auto; padding-inline: var(--vc-gutter); }

/* A full-bleed band. Modifier picks the ground; every band but the first
   carries a hairline on top — that rule IS the section separator. */
.vc-band { border-top: 1px solid var(--vc-hairline); }
.vc-band--alt   { background: var(--vc-bg-alt); }
.vc-band--alt-2 { background: var(--vc-bg-alt-2); }
.vc-band__inner { max-width: var(--vc-max); margin: 0 auto;
                  padding: var(--vc-section-y) var(--vc-gutter); }
/* tighter vertical rhythm: page heads, utility sections, closers */
.vc-band__inner--tight { padding-block: clamp(56px, 6.5vw, 96px); }
.vc-band__inner--flush-top { padding-top: clamp(44px, 5vw, 72px); }

/* ---------- header (floats over the hero) ---------- */
.vc-header { position: absolute; top: 0; left: 0; right: 0; z-index: 40; }
.vc-header__inner {
  max-width: var(--vc-max); margin: 0 auto; padding-inline: var(--vc-gutter);
  height: var(--vc-header-h); display: flex; align-items: center;
  justify-content: space-between; gap: 24px;
}
.vc-logotype { font-size: 17px; font-weight: 600; letter-spacing: 0.16em; }
.vc-nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px);
          font-family: var(--vc-font-mono); font-size: 11px;
          letter-spacing: 0.14em; text-transform: uppercase; }
.vc-nav a { color: var(--vc-ink-4); }
.vc-nav a:hover { color: var(--vc-ink); }
.vc-nav a.is-accent { color: var(--vc-accent); }

/* Inner pages: the header sits in the flow on the base ground instead of
   floating over the hero. Same inner geometry, hairline underneath. */
.vc-header--solid { position: static; background: var(--vc-bg);
                    border-bottom: 1px solid var(--vc-hairline); }
.vc-nav a.is-current { color: var(--vc-ink); }

/* ---------- hero ---------- */
.vc-hero { position: relative; min-height: min(94vh, 880px);
           display: flex; align-items: flex-end; overflow: hidden; }
.vc-hero__media { position: absolute; inset: 0; width: 100%; height: 100%;
                  border: 0; opacity: 0.62; }
/* dark at the top so the nav reads, clear in the middle so the art reads,
   dark at the bottom so the headline reads. Do not simplify to one flat scrim. */
.vc-hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(5,5,6,0.72) 0%, rgba(5,5,6,0.10) 42%, rgba(5,5,6,0.94) 100%);
}
.vc-hero__inner { position: relative; width: 100%; max-width: var(--vc-max);
                  margin: 0 auto;
                  padding: 0 var(--vc-gutter) clamp(52px, 6vw, 96px); }
.vc-hero__row { display: grid; grid-template-columns: 1fr auto;
                gap: clamp(24px, 4vw, 64px); align-items: end; }

/* ---------- section label: mono eyebrow + rule that fades out ---------- */
.vc-eyebrow-row { display: flex; align-items: center;
                  gap: clamp(18px, 2.4vw, 34px);
                  margin-bottom: clamp(40px, 5vw, 76px); }
.vc-eyebrow {
  font-family: var(--vc-font-mono); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--vc-accent); white-space: nowrap;
}
.vc-eyebrow--neutral { color: var(--vc-ink-6); }
.vc-rule { flex: 1 1 auto; height: 1px;
           background: linear-gradient(90deg, rgba(76,165,88,0.5), rgba(76,165,88,0)); }
.vc-rule--neutral { background: linear-gradient(90deg, rgba(142,142,138,0.4), rgba(142,142,138,0)); }

/* ---------- type scale (all fluid; the clamps are the design) ---------- */
.vc-h1 { margin: 0 0 28px; font-size: clamp(40px, 7.4vw, 112px); line-height: 0.92;
         letter-spacing: -0.05em; font-weight: 600; max-width: 16ch; text-wrap: balance; }
.vc-h2 { margin: 0 0 26px; font-size: clamp(32px, 5vw, 74px); line-height: 0.96;
         letter-spacing: -0.05em; font-weight: 600; max-width: 17ch; text-wrap: balance; }
.vc-h3 { font-size: clamp(27px, 3.4vw, 46px); line-height: 1.06;
         letter-spacing: -0.042em; font-weight: 600; max-width: 17ch; text-wrap: balance; }
.vc-h4 { font-size: clamp(19px, 1.9vw, 26px); line-height: 1.24;
         letter-spacing: -0.03em; font-weight: 500; max-width: 24ch; text-wrap: balance; }
.vc-h5 { font-size: clamp(22px, 2.6vw, 34px); line-height: 1.1;
         letter-spacing: -0.035em; font-weight: 600; max-width: 18ch; text-wrap: balance; }
.vc-lede { margin: 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.65;
           color: var(--vc-ink-2); max-width: 50ch; text-wrap: pretty; }
.vc-body { margin: 0; font-size: clamp(16.5px, 1.4vw, 19px); line-height: 1.62;
           color: var(--vc-ink-2); max-width: 40ch; text-wrap: pretty; }
.vc-small { margin: 0; font-size: 16px; line-height: 1.6;
            color: var(--vc-ink-3); max-width: 38ch; text-wrap: pretty; }
.vc-caption { font-family: var(--vc-font-mono); font-size: 10.5px;
              letter-spacing: 0.16em; text-transform: uppercase; color: var(--vc-accent-dim); }
/* one accented phrase inside a headline — never a whole heading */
.vc-key { color: var(--vc-accent); }

/* ---------- buttons ---------- */
/* Anchors are the common case for buttons, so these selectors are written to
   outrank the .vc-root a base rule — do not simplify them back to .vc-btn. */
.vc-root a.vc-btn, .vc-btn {
  display: inline-flex; align-items: center; height: 52px; padding: 0 30px;
  background: var(--vc-accent); color: var(--vc-bg);
  font-family: var(--vc-font-mono); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 500; white-space: nowrap;
  border: 0; cursor: pointer;
}
.vc-root a.vc-btn:hover, .vc-btn:hover { background: var(--vc-ink); color: var(--vc-bg); }
.vc-btn--lg { height: 58px; padding: 0 36px; font-size: 12.5px; }
.vc-root a.vc-btn--ghost, .vc-btn--ghost {
  height: 44px; padding: 0 26px; background: transparent; color: var(--vc-ink);
  border: 1px solid var(--vc-field-line); font-size: 11.5px; letter-spacing: 0.14em;
}
.vc-root a.vc-btn--ghost:hover, .vc-btn--ghost:hover {
  background: transparent; color: var(--vc-ink); border-color: var(--vc-ink);
}

/* ---------- panel grids: the hairline IS the gap ---------- */
.vc-grid { display: grid; gap: 1px; background: var(--vc-hairline); }
.vc-grid--2 { grid-template-columns: 1fr 1fr; }
/* asymmetric two-up (used by the log-in section) */
.vc-grid--2-wide { grid-template-columns: 1fr 1.15fr; }
.vc-grid--3 { grid-template-columns: repeat(3, 1fr); }
/* a grid with no divider: the gap becomes real space, not a hairline */
.vc-grid--bare { background: none; gap: clamp(28px, 4vw, 80px); }
.vc-panel { background: var(--vc-bg); display: flex; flex-direction: column;
            /* grid items default to min-width:auto, which lets fixed-width
               content (the waveform) force the track wider than the viewport */
            min-width: 0; }
.vc-panel--sunken { background: var(--vc-panel); }
/* Panels run flush to the page gutter: inner padding only faces the divider,
   so headings in the first column align with the section heading above. */
.vc-panel__body        { padding: clamp(24px,2.8vw,36px) clamp(24px,2.8vw,36px) clamp(28px,3.2vw,40px) 0; }
.vc-panel__body--right { padding: clamp(24px,2.8vw,36px) 0 clamp(28px,3.2vw,40px) clamp(24px,2.8vw,36px); }
.vc-panel__body--lg        { padding: clamp(32px,3.8vw,56px) clamp(30px,3.6vw,52px) clamp(34px,4vw,60px) 0; }
.vc-panel__body--lg-right  { padding: clamp(32px,3.8vw,56px) 0 clamp(34px,4vw,60px) clamp(30px,3.6vw,52px); }
.vc-panel__label { font-family: var(--vc-font-mono); font-size: 11px;
                   letter-spacing: 0.2em; text-transform: uppercase;
                   color: var(--vc-accent); margin-bottom: 16px; }
.vc-panel__label--lg { font-size: 11.5px; margin-bottom: clamp(22px, 2.4vw, 32px); }

/* media tile above a panel body (holds the voxel model iframe) */
.vc-tile { position: relative; aspect-ratio: 4 / 3;
           background: radial-gradient(ellipse at 50% 45%, #0b1610 0%, var(--vc-bg) 74%);
           border-bottom: 1px solid var(--vc-hairline); }
.vc-tile > iframe, .vc-tile > img, .vc-tile > video {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain;
}

/* ---------- plain list of platform names (no chips, no boxes) ---------- */
.vc-specs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px,1.4vw,20px) clamp(20px,3vw,48px);
  margin-top: clamp(32px,3.6vw,52px); padding-top: clamp(26px,3vw,38px);
  border-top: 1px solid var(--vc-hairline);
  font-family: var(--vc-font-mono); font-size: 12px; letter-spacing: 0.04em;
  color: var(--vc-accent-soft);
}

/* ---------- quoted lines (caller phrases) ---------- */
.vc-quotes > * {
  padding: clamp(11px,1.2vw,15px) 0; border-top: 1px solid var(--vc-hairline-warm);
  font-size: clamp(14.5px,1.25vw,17px); line-height: 1.4;
  letter-spacing: -0.015em; color: var(--vc-accent-soft);
}
.vc-quotes > *:last-child { border-bottom: 1px solid var(--vc-hairline-warm); }

/* ---------- pixel waveform (see wave.js to regenerate) ---------- */
.vc-wave { overflow: hidden; }
.vc-wave__inner { display: flex; align-items: center; gap: 2px; }
.vc-wave__col { flex: 0 0 7px; display: flex; flex-direction: column;
                justify-content: center; gap: 2px; }
.vc-wave__cell { height: 7px; background: var(--vc-accent); }

/* ---------- stacked hairline rows (sequences, facts, policy lines) ---------- */
.vc-rows { display: grid; gap: 1px; background: var(--vc-hairline);
           border-top: 1px solid var(--vc-hairline);
           border-bottom: 1px solid var(--vc-hairline); }
.vc-row { background: var(--vc-bg); display: grid;
          grid-template-columns: clamp(90px, 12vw, 170px) 1fr;
          gap: clamp(18px, 3vw, 48px);
          padding-block: clamp(22px, 2.6vw, 34px); }
.vc-row--onalt { background: var(--vc-bg-alt); }
.vc-row--onalt-2 { background: var(--vc-bg-alt-2); }
.vc-row__key { font-family: var(--vc-font-mono); font-size: 11px;
               letter-spacing: 0.2em; text-transform: uppercase;
               color: var(--vc-accent); }
.vc-row__key--neutral { color: var(--vc-ink-6); }
.vc-row__val { font-size: clamp(16.5px, 1.4vw, 19px); line-height: 1.5;
               letter-spacing: -0.015em; color: var(--vc-ink); max-width: 52ch;
               text-wrap: pretty; }
.vc-row__note { margin: 8px 0 0; font-size: 15.5px; line-height: 1.55;
                color: var(--vc-ink-3); max-width: 50ch; text-wrap: pretty; }

/* ---------- FAQ: hairline-separated native disclosures ---------- */
.vc-faq { border-top: 1px solid var(--vc-hairline); }
.vc-faq details { border-bottom: 1px solid var(--vc-hairline); }
.vc-faq summary {
  list-style: none; cursor: pointer; display: flex; gap: 18px;
  align-items: baseline; justify-content: space-between;
  padding: clamp(16px, 1.8vw, 22px) 0;
  font-size: clamp(15.5px, 1.25vw, 17.5px); line-height: 1.4;
  letter-spacing: -0.015em; color: var(--vc-ink);
}
.vc-faq summary::-webkit-details-marker { display: none; }
.vc-faq summary:hover { color: var(--vc-accent); }
.vc-faq summary::after {
  content: "+"; font-family: var(--vc-font-mono); font-size: 15px;
  color: var(--vc-accent); flex: 0 0 auto; line-height: 1;
}
.vc-faq details[open] summary::after { content: "\2212"; }
.vc-faq p { margin: 0 0 clamp(18px, 2vw, 24px); padding-right: 34px;
            font-size: 15.5px; line-height: 1.6; color: var(--vc-ink-3);
            max-width: 46ch; text-wrap: pretty; }

/* ---------- form fields: underline only ---------- */
.vc-field { display: block; font-family: var(--vc-font-mono); font-size: 10.5px;
            letter-spacing: 0.18em; text-transform: uppercase; color: var(--vc-ink-4); }
.vc-field input {
  display: block; width: 100%; margin-top: 10px; height: 42px; padding: 0;
  border: 0; border-bottom: 1px solid var(--vc-field-line); background: transparent;
  color: var(--vc-ink); font-family: var(--vc-font-sans); font-size: 17px;
}
.vc-field input:focus { outline: 0; border-bottom-color: var(--vc-accent); }
.vc-form { display: flex; flex-wrap: wrap; align-items: flex-end;
           gap: clamp(14px, 1.8vw, 24px); }
/* Stacked variant: the row form's wrap + 100% basis would resolve against
   height in a column, so both are neutralised here. */
.vc-form--stack { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
.vc-form--stack .vc-btn { align-self: flex-start; }
.vc-form--stack .vc-form__hint { flex: 0 0 auto; width: 100%; }
.vc-form__hint { flex: 1 1 100%; font-family: var(--vc-font-mono);
                 font-size: 10.5px; line-height: 1.7; color: var(--vc-ink-5); }
.vc-honeypot { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
               overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- footer ---------- */
.vc-footer { border-top: 1px solid var(--vc-hairline); }
.vc-footer__inner {
  max-width: var(--vc-max); margin: 0 auto;
  padding: 26px var(--vc-gutter) 42px; display: flex; flex-wrap: wrap; gap: 18px;
  justify-content: space-between; font-family: var(--vc-font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--vc-ink-5);
}
.vc-footer__nav { display: flex; flex-wrap: wrap; gap: 18px clamp(16px, 2.2vw, 30px); }

/* ---------- centred single-column view (log in) ---------- */
.vc-solo { min-height: calc(100vh - var(--vc-header-h)); display: grid;
           align-content: center; max-width: var(--vc-max); margin: 0 auto;
           padding: clamp(56px, 8vw, 120px) var(--vc-gutter); }
.vc-solo__col { width: 100%; max-width: 430px; }

/* ---------- responsive: every multi-column grid collapses at one breakpoint ---------- */
@media (max-width: 900px) {
  .vc-hero__row, .vc-grid--2, .vc-grid--2-wide, .vc-grid--3 {
    grid-template-columns: 1fr;
  }
  /* the platform list halves rather than collapsing to one tall column */
  .vc-specs { grid-template-columns: 1fr 1fr; }
  /* the floating header wraps too, not just the solid one */
  .vc-header__inner, .vc-header--solid .vc-header__inner {
    height: auto; flex-wrap: wrap; padding-block: 16px; gap: 10px 18px;
  }
  .vc-nav { flex-wrap: wrap; gap: 12px 16px; font-size: 10.5px; }
  .vc-row { grid-template-columns: 1fr; gap: 10px; }
  .vc-panel__body, .vc-panel__body--right,
  .vc-panel__body--lg, .vc-panel__body--lg-right {
    padding-inline: 0;
  }
}

/* ---------- phones ---------- */
@media (max-width: 620px) {
  /* the hero is absolute-headered and bottom-aligned: shorter reads better
     than 94vh, which pushes the headline below the fold on a small screen */
  .vc-hero { min-height: min(86vh, 680px); }
  .vc-band__inner { padding-block: clamp(64px, 15vw, 90px); }
  .vc-tile { aspect-ratio: 5 / 4; }
  /* 16px is the smallest size iOS will not zoom into on focus, and 46px
     clears the 44px touch target */
  .vc-field input { height: 46px; font-size: 16px; }
  .vc-solo { min-height: 0; }
  .vc-footer__inner { flex-direction: column; gap: 12px; }
  /* the waveform is a fixed pixel grid: narrow the cells so it still reads
     end to end instead of being cropped by .vc-wave's overflow */
  .vc-wave__col { flex: 0 0 5px; }
  .vc-wave__cell { height: 5px; }
  .vc-wave__inner { gap: 1.5px; }
  .vc-wave__col { gap: 1.5px; }
}