/* __VALOR_DS_v1__ — Valor AI design system.
   Structure follows the CapeFear.ai template; identity is its own:
   Figtree + Newsreader, warm stone ground, teal primary pulled from the Valor AI
   mark (#0c6b62 light / #2fae9b dark), burnt sienna as the warm accent.
   Deliberately shares NO palette or typeface with renewflo.co, which is
   Inter + Tailwind blue on cool slate.
   Both themes are first-class — nothing here assumes light. */

/* ─────────────────────────────  TOKENS  ───────────────────────────── */

:root,
[data-theme="light"] {
  --bg:            #f4f6f4;   /* warm stone, faint green cast */
  --card:          #ffffff;
  --surf:          #eaeeeb;
  --surf-2:        #dde3df;
  --border:        #d8e0db;
  --border-2:      #e7ebe8;

  --ink:           #10201c;   /* deep green-black, not blue-black */
  --ink-2:         #3d534c;
  --ink-3:         #54665f;

  --teal:          #0c6b62;   /* the Valor AI mark */
  --teal-hover:    #095650;
  --teal-soft:     #d7e8e5;
  --teal-ink:      #08514a;
  --emerald:       #0f8a7e;

  --clay:          #a2542b;   /* burnt sienna, the warm counterweight */
  --clay-soft:     #f3e3d8;

  --grad:          linear-gradient(118deg, #084f48 0%, #0c6b62 52%, #0f7a6f 100%);
  --glow:          radial-gradient(120% 120% at 15% 0%, rgba(15,138,126,.13) 0%, rgba(15,138,126,0) 62%);

  --good:          #4d7c0f;   /* olive: reads as "good" without colliding with the teal brand */
  --good-soft:     #eaf3dc;

  --on-brand:      #ffffff;
  --on-brand-soft: rgba(255,255,255,0.90);
  --on-brand-mute: rgba(255,255,255,0.88);
  --brand-chip-bd: rgba(255,255,255,0.30);

  --footer-bg:     #0e1c18;
  --footer-fg:     #e8f0ec;
  --footer-fg-2:   rgba(232,240,236,0.68);
  --footer-fg-3:   rgba(232,240,236,0.44);

  --shadow-card:   0 18px 44px -34px rgba(16,32,28,.34);
  --shadow-pop:    0 22px 56px -30px rgba(12,107,98,.34);
  --header-bg:     rgba(244,246,244,0.82);
  --logo-light:    block;
  --logo-dark:     none;

  /* Voice orb (__VALOR_ORB_SPHERE_v1__). The lattice is lit by a fixed
     overhead key light, so each ring's four borders carry a different alpha:
     -hi/-near is the lit or near edge, -lo/-far the shaded or far one. */
  --orb-glow-1:    rgba(15,138,126,.19);
  --orb-glow-2:    rgba(15,138,126,.07);
  --orb-mer-hi:    rgba(12,107,98,.60);
  --orb-mer-mid:   rgba(12,107,98,.44);
  --orb-mer-lo:    rgba(12,107,98,.24);
  --orb-lat-near:  rgba(15,138,126,.78);
  --orb-lat-side:  rgba(15,138,126,.48);
  --orb-lat-far:   rgba(15,138,126,.27);
  --orb-lat-hot:   rgba(15,138,126,.95);
  --orb-limb:      rgba(12,107,98,.22);
  --orb-limb-in:   rgba(15,138,126,.10);
  --orb-core-1:    rgba(15,138,126,.38);
  --orb-core-2:    rgba(15,138,126,.11);
  --orb-core-hot1: rgba(12,107,98,.42);
  --orb-core-hot2: rgba(15,138,126,.10);
  --orb-halo-line: rgba(15,138,126,.32);
  --orb-halo-glow: rgba(15,138,126,.17);
}

[data-theme="dark"] {
  --bg:            #0a1512;
  --card:          #12201c;
  --surf:          #0f1b18;
  --surf-2:        #1a2a25;
  --border:        #26382f;
  --border-2:      #1e2d27;

  --ink:           #e8f0ec;
  --ink-2:         #a8bcb4;
  --ink-3:         #84998f;

  --teal:          #2fae9b;
  --teal-hover:    #4cc4b2;
  --teal-soft:     #12332e;
  --teal-ink:      #9fe0d3;
  --emerald:       #5ec9b7;

  --clay:          #d98a5c;
  --clay-soft:     #2e1d13;

  --grad:          linear-gradient(118deg, #06322d 0%, #0b5b53 52%, #0f7a6f 100%);
  --glow:          radial-gradient(120% 120% at 15% 0%, rgba(47,174,155,.10) 0%, rgba(47,174,155,0) 62%);

  --good:          #84cc16;
  --good-soft:     #1c2910;

  --on-brand:      #ffffff;
  --on-brand-soft: rgba(255,255,255,0.90);
  --on-brand-mute: rgba(255,255,255,0.88);
  --brand-chip-bd: rgba(255,255,255,0.26);

  --footer-bg:     #06110e;
  --footer-fg:     #e8f0ec;
  --footer-fg-2:   rgba(232,240,236,0.64);
  --footer-fg-3:   rgba(232,240,236,0.42);

  --shadow-card:   0 18px 44px -34px rgba(0,0,0,.72);
  --shadow-pop:    0 22px 56px -30px rgba(0,0,0,.8);
  --header-bg:     rgba(10,21,18,0.82);
  --logo-light:    none;
  --logo-dark:     block;

  /* Voice orb — the lattice carries more alpha on dark, where a hairline at
     light-theme opacity would disappear into the ground. */
  --orb-glow-1:    rgba(47,174,155,.20);
  --orb-glow-2:    rgba(47,174,155,.09);
  --orb-mer-hi:    rgba(47,174,155,.60);
  --orb-mer-mid:   rgba(47,174,155,.42);
  --orb-mer-lo:    rgba(47,174,155,.19);
  --orb-lat-near:  rgba(94,201,183,.72);
  --orb-lat-side:  rgba(94,201,183,.44);
  --orb-lat-far:   rgba(94,201,183,.21);
  --orb-lat-hot:   rgba(175,236,225,.98);
  --orb-limb:      rgba(47,174,155,.18);
  --orb-limb-in:   rgba(47,174,155,.12);
  --orb-core-1:    rgba(94,201,183,.34);
  --orb-core-2:    rgba(94,201,183,.11);
  --orb-core-hot1: rgba(175,236,225,.46);
  --orb-core-hot2: rgba(94,201,183,.10);
  --orb-halo-line: rgba(94,201,183,.40);
  --orb-halo-glow: rgba(94,201,183,.22);
}

/* ─────────────────────────────  BASE  ───────────────────────────── */

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

html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); }
/* 2% paper grain over the whole canvas. Non-interactive, hidden from AT. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .014;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="dark"] body::before { opacity: .022; }
body {
  font-family: Figtree, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 4px; }

.v-mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; font-variant-numeric: tabular-nums; }

/* ─────────────────────────────  LAYOUT  ───────────────────────────── */

.v-section { background: transparent; position: relative; }
.v-section-surf { background: var(--surf); }
.v-section-glow { background-image: var(--glow); }
.v-section-brand { background: var(--grad); }
.v-inner { max-width: 1160px; margin: 0 auto; padding: 0 56px; }
.v-pad-xl { padding-top: 104px; padding-bottom: 104px; }
.v-pad-lg { padding-top: 84px; padding-bottom: 84px; }
.v-pad-md { padding-top: 60px; padding-bottom: 60px; }
@media (max-width: 720px) {
  .v-inner { padding: 0 22px; }
  .v-pad-xl { padding-top: 64px; padding-bottom: 64px; }
  .v-pad-lg { padding-top: 54px; padding-bottom: 54px; }
  .v-pad-md { padding-top: 42px; padding-bottom: 42px; }
}

.v-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.v-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.v-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.v-split  { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: 56px; align-items: center; }
@media (max-width: 980px) {
  .v-grid-3, .v-grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .v-split { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 620px) {
  .v-grid-2, .v-grid-3, .v-grid-4 { grid-template-columns: 1fr; }
}

/* ─────────────────────────────  TYPE  ───────────────────────────── */

.v-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal); margin: 0 0 16px;
}
.v-h1 {
  font-family: Newsreader, Georgia, 'Times New Roman', serif;
  font-size: clamp(40px, 5.6vw, 66px); font-weight: 500; letter-spacing: -0.018em;
  line-height: 1.06; margin: 0 0 22px; color: var(--ink); max-width: 17ch;
  text-wrap: balance;
}
.v-h1-wide { max-width: 20ch; }
.v-h2 {
  font-family: Newsreader, Georgia, 'Times New Roman', serif;
  font-size: clamp(29px, 3.5vw, 42px); font-weight: 500; letter-spacing: -0.012em;
  line-height: 1.14; margin: 0 0 16px; color: var(--ink); max-width: 23ch;
  text-wrap: balance;
}
.v-h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.012em; margin: 0 0 9px; color: var(--ink); }
.v-lede { font-size: clamp(18px, 1.6vw, 20px); line-height: 1.6; color: var(--ink-2); margin: 0 0 30px; max-width: 62ch; }
.v-prose { max-width: 68ch; }
.v-prose p { font-size: 17px; line-height: 1.72; color: var(--ink-2); margin: 0 0 16px; }
.v-prose strong { color: var(--ink); font-weight: 600; }
.v-lead-tight { max-width: 54ch; }

/* ─────────────────────────────  BUTTONS  ───────────────────────────── */

.v-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 15px; font-weight: 500; letter-spacing: -0.005em;
  padding: 13px 22px; border-radius: 10px; border: 1px solid transparent;
  cursor: pointer; transition: background .16s, color .16s, border-color .16s, transform .16s, box-shadow .16s;
  white-space: nowrap;
}
.v-btn:hover { text-decoration: none; transform: translateY(-1px); }
.v-btn-primary { background: var(--teal); color: #fff; box-shadow: var(--shadow-pop); }
.v-btn-primary:hover { background: var(--teal-hover); }
[data-theme="dark"] .v-btn-primary { color: #0b1220; font-weight: 600; }
.v-btn-secondary { background: transparent; color: var(--ink); border-color: var(--border); }
.v-btn-secondary:hover { border-color: var(--ink-3); background: var(--card); }
.v-btn-ghost { background: var(--card); color: var(--ink); border-color: var(--border); }
/* Always sits on the teal gradient band, so its colours are fixed, NOT themed.
   Using var(--teal-ink) made it 1.70:1 in dark mode (pale teal on white). */
.v-btn-onbrand, .v-btn-onbrand:hover { background: #fff; color: #06443e; }
.v-btn-onbrand:hover { background: rgba(255,255,255,.9); }
.v-btn-sm { font-size: 13.5px; padding: 9px 16px; border-radius: 9px; }
.v-btn-lg { font-size: 16px; padding: 15px 26px; }
.v-btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ─────────────────────────────  HEADER  ───────────────────────────── */

.v-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg); backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.v-header-inner {
  max-width: 1160px; margin: 0 auto; padding: 0 56px; height: 100px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
@media (max-width: 720px) { .v-header-inner { padding: 0 22px; height: 78px; } }
.v-brand { display: flex; align-items: center; flex: none; }
.v-brand:hover { text-decoration: none; }
.v-brand img { display: block; height: 68px; width: auto; }
.v-brand .v-logo-light { display: var(--logo-light); }
.v-brand .v-logo-dark  { display: var(--logo-dark); }
@media (max-width: 720px) { .v-brand img { height: 52px; } }

.v-nav { display: flex; align-items: center; gap: 22px; }
.v-nav > a { font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.v-nav > a:hover { color: var(--ink); text-decoration: none; }
@media (max-width: 900px) { .v-nav .v-nav-hide { display: none; } }
@media (max-width: 560px) {
  .v-nav { gap: 10px; }
  .v-nav .v-nav-cta { padding: 8px 12px; font-size: 13px; }
}
@media (max-width: 400px) {
  .v-nav { gap: 8px; }
  .v-nav .v-nav-cta { padding: 8px 10px; font-size: 12.5px; }
  .v-dd-trigger { font-size: 13px; }
}

.v-dd { position: relative; display: inline-flex; align-items: center; }
.v-dd-trigger {
  font-size: 14px; color: var(--ink-2); cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.v-dd:hover .v-dd-trigger, .v-dd:focus-within .v-dd-trigger { color: var(--ink); }
.v-dd-caret { font-size: 9px; color: var(--ink-2); transition: transform .16s; }
.v-dd:hover .v-dd-caret, .v-dd:focus-within .v-dd-caret { transform: rotate(180deg); }
.v-dd-menu {
  position: absolute; top: 100%; left: 50%; margin-top: 10px; min-width: 190px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-pop); padding: 6px;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility 0s .15s;
}
.v-dd-menu::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.v-dd:hover .v-dd-menu, .v-dd:focus-within .v-dd-menu, .v-dd.is-open .v-dd-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0); transition: opacity .15s ease, transform .15s ease, visibility 0s;
}
.v-dd.is-open .v-dd-caret { transform: rotate(180deg); }
/* On touch there is no hover, so only an explicit tap should open the menu. */
@media (hover: none) {
  .v-dd:hover .v-dd-menu { opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%) translateY(-6px); }
  .v-dd.is-open .v-dd-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
}
/* Right-most menu would otherwise overflow the viewport on small screens. */
@media (max-width: 560px) { .v-dd-menu { left: 0; transform: translateY(-6px); }
  .v-dd:hover .v-dd-menu, .v-dd:focus-within .v-dd-menu, .v-dd.is-open .v-dd-menu { transform: translateY(0); } }
.v-dd-menu a {
  font-size: 14px; color: var(--ink-2); padding: 9px 12px; border-radius: 8px; white-space: nowrap;
}
.v-dd-menu a:hover { background: var(--surf); color: var(--ink); text-decoration: none; }

.v-theme-toggle {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  display: grid; place-items: center; cursor: pointer;
  background: transparent; border: 1px solid var(--border); color: var(--ink-2);
  transition: background .16s, color .16s, border-color .16s;
}
.v-theme-toggle:hover { background: var(--surf); color: var(--ink); }
.v-theme-toggle svg { width: 16px; height: 16px; }
.v-theme-toggle .v-icon-sun  { display: var(--logo-dark); }
.v-theme-toggle .v-icon-moon { display: var(--logo-light); }

/* ─────────────────────────────  CARDS  ───────────────────────────── */

.v-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 26px 26px 28px;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.v-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); border-color: var(--ink-3); }
.v-card p { font-size: 15px; line-height: 1.68; color: var(--ink-2); margin: 0; }
.v-card p + p { margin-top: 10px; }
.v-card-flat:hover { transform: none; box-shadow: none; border-color: var(--border); }

.v-tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal); display: inline-flex; align-items: center; gap: 7px; margin-bottom: 13px;
}
.v-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--teal); flex: none; }

.v-num {
  width: 34px; height: 34px; border-radius: 10px; flex: none; margin-bottom: 15px;
  background: var(--teal-soft); color: var(--teal-ink);
  display: grid; place-items: center; font-size: 15px; font-weight: 600;
}

.v-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-2);
  background: var(--card); border: 1px solid var(--border);
  padding: 8px 14px; border-radius: 999px;
}
.v-chip:hover { border-color: var(--ink-3); color: var(--ink); text-decoration: none; }
.v-chip-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* Pill list — the "what it handles" checklists */
.v-list { list-style: none; margin: 0; padding: 0; }
.v-list li {
  position: relative; padding-left: 28px; margin-bottom: 12px;
  font-size: 15px; line-height: 1.6; color: var(--ink-2);
}
.v-list li::before {
  content: ""; position: absolute; left: 4px; top: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--teal); opacity: .85;
}
.v-list-check li::before {
  content: "✓"; background: none; color: var(--teal);
  font-size: 13px; font-weight: 700; left: 2px; top: 0; width: auto; height: auto;
}

/* ─────────────────────────────  STATS  ───────────────────────────── */

.v-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
@media (max-width: 720px) { .v-stats { grid-template-columns: 1fr; gap: 14px; } }
.v-stat { border-left: 2px solid var(--teal); padding: 4px 0 4px 18px; }
.v-stat b { display: block; font-size: 30px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); line-height: 1.1; }
.v-stat span { display: block; font-size: 14px; color: var(--ink-2); margin-top: 6px; }

/* ─────────────────────────────  COMPARE  ───────────────────────────── */

.v-compare { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; align-items: stretch; }
@media (max-width: 900px) { .v-compare { grid-template-columns: 1fr; } }
.v-compare-col { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 24px; }
.v-compare-col.is-us { border-color: var(--teal); box-shadow: var(--shadow-pop); position: relative; }
.v-compare-col.is-us::after {
  content: "Valor AI"; position: absolute; top: -11px; left: 24px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  background: var(--teal); color: #fff; padding: 4px 10px; border-radius: 999px;
}
.v-compare-col h3 { font-size: 16px; margin-bottom: 14px; }
.v-compare-col ul { list-style: none; margin: 0; padding: 0; }
.v-compare-col li { font-size: 14px; line-height: 1.55; color: var(--ink-2); padding: 9px 0; border-top: 1px solid var(--border-2); }
.v-compare-col li:first-child { border-top: 0; }

/* ─────────────────────────────  BRAND BAND  ───────────────────────────── */

.v-section-brand .v-eyebrow { color: var(--on-brand-mute); }
.v-section-brand .v-h2, .v-section-brand h2 { color: var(--on-brand); }
.v-section-brand p { color: var(--on-brand-soft); }
.v-band-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.v-band-chip {
  font-size: 13px; color: var(--on-brand-soft);
  border: 1px solid var(--brand-chip-bd); border-radius: 999px; padding: 7px 14px;
}

/* ─────────────────────────────  FAQ  ───────────────────────────── */

.v-faq { border-top: 1px solid var(--border); }
.v-faq details { border-bottom: 1px solid var(--border); }
.v-faq summary {
  list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative;
  font-size: 17px; font-weight: 500; color: var(--ink);
}
.v-faq summary::-webkit-details-marker { display: none; }
.v-faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 22px; font-weight: 400; color: var(--ink-3); line-height: 1;
}
.v-faq details[open] summary::after { content: "–"; }
.v-faq summary:hover { color: var(--teal); }
.v-faq-body { padding: 0 40px 22px 0; }
.v-faq-body p { font-size: 15.5px; line-height: 1.7; color: var(--ink-2); margin: 0 0 12px; }
.v-faq-body p:last-child { margin-bottom: 0; }

/* ─────────────────────────────  FOOTER  ───────────────────────────── */

.v-footer { background: var(--footer-bg); color: var(--footer-fg); margin-top: 0; }
.v-footer-inner { max-width: 1160px; margin: 0 auto; padding: 60px 56px 34px; }
@media (max-width: 720px) { .v-footer-inner { padding: 44px 22px 28px; } }
.v-footer-cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 34px; }
@media (max-width: 860px) { .v-footer-cols { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 520px) { .v-footer-cols { grid-template-columns: 1fr; } }
.v-footer h4 { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--footer-fg-3); margin: 0 0 14px; }
.v-footer a { display: block; font-size: 14.5px; color: var(--footer-fg-2); padding: 5px 0; }
.v-footer a:hover { color: var(--footer-fg); text-decoration: none; }
.v-footer-blurb { font-size: 14.5px; line-height: 1.7; color: var(--footer-fg-2); margin: 0; max-width: 40ch; }
.v-footer-bar {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.10);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--footer-fg-3);
}

/* ─────────────────────────────  MOTION  ───────────────────────────── */

.has-js .v-rise { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.v-rise.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .v-rise { opacity: 1; transform: none; transition: none; }
  .v-btn:hover, .v-card:hover { transform: none; }
}

/* ─────────────────────────  ROI CALCULATOR  ───────────────────────── */

.roi-wrap { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 22px; align-items: start; }
@media (max-width: 900px) { .roi-wrap { grid-template-columns: 1fr; } }

.roi-panel { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 24px; }
.roi-panel + .roi-panel { margin-top: 18px; }

.roi-kicker {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); display: block; margin: 0 0 6px;
}
.roi-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.roi-chip {
  font: 500 14px/1 Figtree, system-ui, sans-serif; color: var(--ink-2);
  background: var(--surf); border: 1px solid var(--border); border-radius: 999px;
  padding: 10px 15px; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.roi-chip:hover { border-color: var(--ink-3); color: var(--ink); }
.roi-chip[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: #fff; }
[data-theme="dark"] .roi-chip[aria-pressed="true"] { color: #0b1220; font-weight: 600; }
.roi-note { font-size: 14px; line-height: 1.55; color: var(--ink-3); margin: 8px 0 0; }

.roi-step { padding: 18px 0; border-top: 1px solid var(--border-2); }
.roi-step:first-of-type { border-top: 0; padding-top: 0; }
.roi-step-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.roi-step-label { font-size: 16px; font-weight: 500; line-height: 1.35; color: var(--ink); margin: 0; }
.roi-step-value { font-size: 25px; font-weight: 600; color: var(--teal); white-space: nowrap; letter-spacing: -0.02em; }
.roi-step-value small { font-size: 13px; font-weight: 500; color: var(--ink-3); margin-left: 2px; }

.roi-range { width: 100%; margin: 16px 0 4px; accent-color: var(--teal); height: 22px; }
.roi-scale { display: flex; justify-content: space-between; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: var(--ink-3); }

.roi-inputs { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
.roi-input { flex: 1 1 180px; }
.roi-input label { display: block; font-size: 14px; font-weight: 500; color: var(--ink-2); margin-bottom: 6px; }
.roi-box { display: flex; align-items: center; gap: 6px; background: var(--surf); border: 1px solid var(--border); border-radius: 10px; padding: 0 12px; }
.roi-box:focus-within { border-color: var(--teal); }
.roi-box span { font-size: 15px; color: var(--ink-3); }
.roi-box input { width: 100%; border: 0; background: transparent; padding: 12px 0; font: 600 17px/1 Figtree, system-ui, sans-serif; color: var(--ink); }
.roi-box input:focus { outline: none; }

.roi-derived { background: var(--surf); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; margin-top: 18px; }
.roi-derived-label { font-size: 14px; font-weight: 500; color: var(--ink-2); margin: 0 0 4px; }
.roi-derived-value { font-size: 31px; font-weight: 600; color: var(--ink); letter-spacing: -0.025em; }
.roi-derived-value small { font-size: 14px; font-weight: 500; color: var(--ink-3); }
.roi-formula { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; line-height: 1.6; color: var(--ink-3); margin: 10px 0 0; }

.roi-result { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 24px; position: sticky; top: 120px; }
@media (max-width: 900px) { .roi-result { position: static; } }
.roi-headline { font-size: clamp(38px, 5vw, 48px); font-weight: 600; letter-spacing: -0.03em; color: var(--teal); margin: 6px 0 0; line-height: 1; }
.roi-sub { font-size: 15px; line-height: 1.55; color: var(--ink-2); margin: 10px 0 0; }
.roi-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--surf-2); margin: 20px 0 10px; }
.roi-bar-keep { background: var(--grad); }
.roi-bar-spend { background: var(--border); }
.roi-bar-key { display: flex; justify-content: space-between; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; color: var(--ink-3); }

.roi-lines { list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--border-2); }
.roi-lines li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; font-size: 15px; color: var(--ink-2); }
.roi-lines li b { font-size: 17px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.roi-lines li.roi-line-strong { border-top: 1px solid var(--border-2); margin-top: 6px; padding-top: 15px; }
.roi-lines li.roi-line-strong b { color: var(--teal); font-size: 21px; }

/* A negative result must never read as a win. */
.roi-result.is-negative .roi-headline,
.roi-result.is-negative .roi-lines li.roi-line-strong b { color: var(--ink-2); }
.roi-result.is-negative .roi-bar-keep { background: var(--surf-2); }

.roi-flag { background: var(--clay-soft); border: 1px solid rgba(196,100,61,.24); color: var(--clay); border-radius: 12px; padding: 14px 16px; margin: 20px 0 0; font-size: 14px; line-height: 1.6; }
.roi-flag[hidden] { display: none; }
.roi-fine { font-size: 13px; line-height: 1.6; color: var(--ink-3); margin: 14px 0 0; }
.roi-noscript { background: var(--clay-soft); border: 1px solid rgba(196,100,61,.24); border-radius: 12px; padding: 16px 18px; color: var(--clay); margin: 0 0 20px; }

/* Mobile: mirror the number in a docked bar while the sliders are in view. */
.roi-sticky { display: none; }
@media (max-width: 900px) {
  .roi-sticky {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--card); border-top: 1px solid var(--border);
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 24px -18px rgba(0,0,0,.55);
    transform: translateY(110%); transition: transform .18s ease;
  }
  .roi-sticky.is-on { transform: translateY(0); }
}
.roi-sticky span { font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.roi-sticky b { font-size: 23px; font-weight: 600; color: var(--teal); white-space: nowrap; letter-spacing: -0.02em; }
.roi-sticky.is-negative b { color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .roi-sticky { transition: none; } }

/* ─────────────────────────  FIXES + HERO PANEL  ───────────────────────── */

/* .v-nav > a was beating .v-btn-primary on specificity and greying out the CTA. */
.v-nav > a.v-btn-primary { color: #fff; }
[data-theme="dark"] .v-nav > a.v-btn-primary { color: #0b1220; }
.v-nav > a.v-btn-primary:hover { color: #fff; }
[data-theme="dark"] .v-nav > a.v-btn-primary:hover { color: #0b1220; }

/* Hero: copy left, an illustrative queue panel right. */
.v-hero { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); gap: 56px; align-items: center; }
@media (max-width: 1020px) { .v-hero { grid-template-columns: 1fr; gap: 44px; } }

.v-queue {
  background: var(--card); border: 1px solid var(--border); border-radius: 18px;
  padding: 22px 22px 18px; box-shadow: var(--shadow-card);
}
.v-queue-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--border-2);
}
.v-queue-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0;
}
.v-queue-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-3); }
.v-queue-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); font-style: normal; }

.v-queue-row { display: flex; gap: 13px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--border-2); }
.v-queue-row:last-of-type { border-bottom: 0; }
.v-queue-who {
  flex: none; margin-top: 1px; width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center; font-size: 11px; font-weight: 600;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.v-queue-row.is-agent .v-queue-who { background: var(--teal-soft); color: var(--teal-ink); }
.v-queue-row.is-human .v-queue-who { background: var(--clay-soft); color: var(--clay); }
.v-queue-text { font-size: 14.5px; line-height: 1.5; color: var(--ink); margin: 0; }
.v-queue-meta { font-size: 12.5px; color: var(--ink-3); margin: 3px 0 0; }
.v-queue-foot { font-size: 12px; line-height: 1.5; color: var(--ink-3); margin: 14px 0 0; padding-top: 13px; border-top: 1px solid var(--border-2); }

/* ─────────────────────────  MOBILE HEADER  ───────────────────────── */

.v-brand .v-logo-mark { display: none; }

.v-burger {
  display: none; position: relative; width: 38px; height: 38px; border-radius: 9px; flex: none;
  background: transparent; border: 1px solid var(--border); cursor: pointer; padding: 0;
}
/* Absolutely positioned so the open state collapses to a true X. */
.v-burger span {
  position: absolute; left: 50%; width: 17px; height: 1.5px; margin-left: -8.5px;
  background: var(--ink); border-radius: 2px;
  transition: transform .2s ease, opacity .15s ease;
}
.v-burger span:nth-child(1) { top: 12.5px; }
.v-burger span:nth-child(2) { top: 18.25px; }
.v-burger span:nth-child(3) { top: 24px; }
.v-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.75px) rotate(45deg); }
.v-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.v-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.75px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .v-burger span { transition: none; } }

.v-mobile-menu {
  display: none; border-top: 1px solid var(--border);
  background: var(--card); max-height: calc(100vh - 78px); overflow-y: auto;
}
.v-mobile-inner { padding: 14px 22px 24px; }
.v-mobile-head {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); margin: 16px 0 4px;
}
.v-mobile-inner > a {
  display: block; font-size: 17px; color: var(--ink); padding: 11px 0;
  border-bottom: 1px solid var(--border-2);
}
.v-mobile-inner > a:hover { color: var(--teal); text-decoration: none; }
/* Selector must out-specify `.v-mobile-inner > a`, which sets --ink. */
.v-mobile-inner > a.v-mobile-cta { display: flex; justify-content: center; text-align: center;
  border-bottom: 0; margin-top: 20px; width: 100%; color: #fff; }
.v-mobile-inner > a.v-mobile-cta:hover { color: #fff; }
[data-theme="dark"] .v-mobile-inner > a.v-mobile-cta,
[data-theme="dark"] .v-mobile-inner > a.v-mobile-cta:hover { color: #0b1220; }

/* Below 760px the inline nav collapses into the menu. The primary CTA stays
   in the header at every width, because it is the only conversion path. */
@media (max-width: 760px) {
  .v-nav .v-dd, .v-nav .v-nav-hide { display: none; }
  .v-burger { display: block; }
  .v-mobile-menu { display: block; }
  .v-mobile-menu[hidden] { display: none; }
}
@media (max-width: 430px) {
  .v-brand .v-logo-full { display: none; }
  .v-brand .v-logo-mark { display: var(--logo-light); height: 46px; }
  .v-brand .v-logo-dark.v-logo-mark { display: var(--logo-dark); }
  .v-nav { gap: 8px; }
  .v-nav .v-nav-cta { padding: 8px 11px; font-size: 12.5px; }
}


/* ─────────────────────────  LIVE VOICE DEMO  ───────────────────────── */

.v-demo-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 18px;
  padding: 26px; box-shadow: var(--shadow-card);
}
.v-field { display: block; margin-bottom: 14px; }
.v-field-label { display: block; font-size: 14px; font-weight: 500; color: var(--ink-2); margin-bottom: 6px; }
.v-field-opt { color: var(--ink-3); font-weight: 400; }
.v-field input {
  width: 100%; background: var(--surf); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; font: 400 16px/1.3 Figtree, system-ui, sans-serif; color: var(--ink);
}
.v-field input::placeholder { color: var(--ink-3); }
.v-field input:focus { outline: none; border-color: var(--teal); background: var(--card); }
.v-demo-submit { width: 100%; margin-top: 6px; font-size: 16px; padding: 15px 22px; }
.v-demo-status { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 12px 0 0; min-height: 1.2em; }
.v-demo-status:empty { margin: 0; min-height: 0; }
.v-demo-note { font-size: 12.5px; line-height: 1.55; color: var(--ink-3); margin: 14px 0 0; }
.v-demo-booked { border-top: 1px solid var(--border-2); margin-top: 20px; padding-top: 20px; }
.v-demo-booked[hidden] { display: none; }


/* ─────────────────────────  WIDE NAV MENU  ───────────────────────── */

.v-dd-wide {
  display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 6px 22px; min-width: 460px; padding: 16px 18px 12px;
}
.v-dd-col { display: flex; flex-direction: column; }
.v-dd-head {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 6px; padding: 0 12px;
}
.v-dd-all {
  grid-column: 1 / -1; margin-top: 8px; padding-top: 12px;
  border-top: 1px solid var(--border-2);
  font-size: 13.5px; color: var(--teal); font-weight: 500;
}
.v-dd-all:hover { background: var(--surf); text-decoration: none; }
@media (max-width: 900px) { .v-dd-wide { min-width: 0; grid-template-columns: 1fr; } }


/* ─────────────────────────  PRODUCT SCREENSHOTS  ───────────────────────── */

/* A browser-chrome frame so a screenshot reads as "the product", not a stray image. */
.v-frame {
  border-radius: 14px; overflow: hidden; background: var(--card);
  border: 1px solid var(--border); box-shadow: var(--shadow-pop);
}
.v-frame-bar {
  display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px;
  background: var(--surf); border-bottom: 1px solid var(--border);
}
.v-frame-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--border-2); border: 1px solid var(--border); flex: none; }
.v-frame-bar span:nth-child(1) { background: #e5806b; border-color: #e5806b; }
.v-frame-bar span:nth-child(2) { background: #e6b95a; border-color: #e6b95a; }
.v-frame-bar span:nth-child(3) { background: #7bbf7b; border-color: #7bbf7b; }
.v-frame-bar em {
  margin-left: 10px; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; font-style: normal; letter-spacing: .08em; color: var(--ink-3);
}
/* THE FIX: force the aspect ratio so a missing height:auto can never stretch it. */
.v-frame-body { display: block; line-height: 0; }
.v-frame-body img { display: block; width: 100%; height: auto; aspect-ratio: 3000 / 1840; }

/* On phones a wide dashboard shrunk to full width is an illegible strip, so let
   it hold a readable width and scroll horizontally instead. */
@media (max-width: 760px) {
  .v-frame-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .v-frame-body img { width: auto; height: 300px; aspect-ratio: 3000 / 1840; max-width: none; }
  .v-frame.is-hero .v-frame-body img { height: 340px; }
}

.v-shot { margin: 30px 0 0; }
.v-shot figcaption { font-size: 13.5px; line-height: 1.6; color: var(--ink-3); margin: 12px 2px 0; max-width: 76ch; }
.v-shot + .v-shot { margin-top: 34px; }

/* Hero: headline centred, one big framed screenshot as the lead visual. */
/* Left-aligned, asymmetric hero. renewflo.co centres its eyebrow, headline,
   lede and buttons over a dark inset panel; centring ours read as the same
   template no matter what the palette did. The console then breaks the right
   margin so the composition is deliberately off-axis. */
.v-hero-lead { text-align: left; max-width: 46rem; margin: 0; }
.v-hero-lead .v-lede { margin-left: 0; margin-right: 0; }

/* eyebrow with a leading rule instead of a centred pill chip */
.v-eyebrow-rule { display: flex; align-items: center; gap: 14px; }
.v-eyebrow-rule::before {
  content: ""; width: 34px; height: 1px; background: var(--teal); opacity: .55; flex: none;
}

.v-hero-shot { margin: 58px 0 0; max-width: none; }
.v-hero-shot-cap { text-align: left; font-size: 14px; line-height: 1.6; color: var(--ink-3); margin: 16px 0 0; max-width: 58ch; }
@media (min-width: 1100px) {
  /* break the container's right edge; the console runs off toward the viewport */
  .v-hero-shot { margin-right: calc(50% - 50vw + 24px); }
}
@media (max-width: 760px) { .v-hero-shot { margin-top: 34px; } }


/* ─────────────────────────  MOBILE TOUCH TARGETS  ───────────────────────── */
@media (max-width: 760px) {
  .v-theme-toggle { width: 44px; height: 44px; }
  .v-burger { width: 44px; height: 44px; }
  .v-burger span:nth-child(1) { top: 15.5px; }
  .v-burger span:nth-child(2) { top: 21.25px; }
  .v-burger span:nth-child(3) { top: 27px; }
  .v-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.75px) rotate(45deg); }
  .v-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.75px) rotate(-45deg); }
  .v-nav-cta { min-height: 44px; }
  .roi-chip { min-height: 44px; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; }
}

/* ─────────────────────  VOICE DEMO WIDGET (animated)  ───────────────────── */

.v-demo-card { position: relative; overflow: hidden; }
/* soft ambient glow behind the card, brightens while calling */
.v-demo-card::before {
  content: ""; position: absolute; inset: -40% -20% auto -20%; height: 70%;
  background: radial-gradient(60% 100% at 50% 0%, rgba(12,107,98,.16), rgba(12,107,98,0) 70%);
  opacity: .7; pointer-events: none; transition: opacity .4s ease;
}
[data-theme="dark"] .v-demo-card::before { background: radial-gradient(60% 100% at 50% 0%, rgba(47,174,155,.20), rgba(47,174,155,0) 70%); }
.v-demo-card.is-calling::before { opacity: 1; }

/* ================================================================== *
 * THE ORB — a rotating CSS-3D wireframe sphere
 *
 * Size:   set --v-orb-size (default 128px). Every dimension is in `em`
 *         against that, so the component is not welded to 128px.
 *         --bw is the exception and stays in px on purpose: hairlines
 *         should not scale. Bump --bw only above ~240px.
 * Motion: transform + opacity only. Nothing else animates, ever.
 * Timing: everything is an integer multiple of B = 2400ms, so the
 *         object pulses as one thing instead of five.
 * ================================================================== */
.v-orb {
  position: relative;
  font-size: var(--v-orb-size, 128px);
  width: 1em;
  height: 1em;
  flex: none;
}

/* --- soft volumetric glow behind the lattice (constant in both states) --- */
.v-orb-glow {
  position: absolute;
  inset: -.055em;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 46%,
              var(--orb-glow-1) 0%, var(--orb-glow-2) 44%, transparent 70%);
  animation: v-orb-breathe 9600ms infinite;      /* 4B */
}

/* --- the mind at the centre.
       It sits BEFORE .v-orb-field in the DOM, so the whole lattice paints
       across it and the near arcs cut it. That is the difference between
       a source inside a cage and a smudge stuck on the glass. --------- */
.v-orb-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: .25em;
  height: .25em;
  margin: -.125em 0 0 -.125em;
  border-radius: 50%;
  background: radial-gradient(circle, var(--orb-core-1) 0%, var(--orb-core-2) 46%, transparent 72%);
}
/* the ping: dormant at 0 opacity, so it fades in on its own first
   keyframe rather than snapping on. Expands, dies, resets invisibly. */
.v-orb-core::after {
  content: "";
  position: absolute;
  inset: -.047em;
  border-radius: 50%;
  background: radial-gradient(circle, var(--orb-core-hot1) 0%, var(--orb-core-hot2) 42%, transparent 70%);
  opacity: 0;
}

/* --- the 3D stage.
       perspective lives here; preserve-3d lives on the child.
       No mask: at perspective 1100px nothing in the lattice projects
       past the silhouette, so the old radial-gradient mask was buying
       nothing but fog — and it cost an offscreen re-raster every frame.
       The limb ring below IS the edge. ------------------------------- */
.v-orb-field {
  position: absolute;
  inset: 0;
  perspective: 1100px;
}

/* !! DO NOT add any grouping property to .v-orb-tilt / .v-orb-spin /
   !! .v-orb-boost — opacity < 1, filter, mask, clip-path, overflow other
   !! than visible/clip, mix-blend-mode, isolation, contain: paint, or a
   !! will-change naming any of those. Each one silently forces
   !! transform-style: flat and collapses the sphere into a pulsing
   !! vertical line, with no error. Fade the outer .v-orb instead — that
   !! is safe. @supports cannot detect this case; see the fallback block
   !! at the bottom, which only covers engines lacking preserve-3d. */
.v-orb-tilt {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  /* 3/4 view, seen slightly from above. .94 seats the lattice rim on the
     limb ring, so the meridians converge INTO the silhouette. */
  transform: rotateZ(-13deg) rotateX(-14deg) scale(.94);
}

/* base rotation — always running, one constant speed */
.v-orb-spin {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: v-orb-spin-kf 38400ms linear infinite;   /* 16B — 9.4 deg/s */
}

/* boost rotation — composes with the base. Starts at rotateY(0deg), so
   switching it on adds angular velocity with zero positional jump. */
.v-orb-boost {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

/* --- meridians: circles rotated about the shared Y axis.
       Four at 45 degrees, not six at 30. Six-at-30 plus five parallels
       plus a bright equator is the Earth graticule — the object read as
       a globe, not a form. Four also stops the 1x-DPR stipple, where
       eleven rotating hairlines dithered into dotted lines. ---------- */
.v-mer, .v-lat {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 50%;
  border: 1px solid transparent;
}

/* per-side border colours = a fixed overhead key light. rotateY never
   changes which edge is "up", so the lighting stays put as it turns. */
.v-mer {
  border-top-color: var(--orb-mer-hi);
  border-left-color: var(--orb-mer-mid);
  border-right-color: var(--orb-mer-mid);
  border-bottom-color: var(--orb-mer-lo);
}
.v-mer-1 { transform: rotateY(0deg); }
.v-mer-2 { transform: rotateY(45deg); }
.v-mer-3 { transform: rotateY(90deg); }
.v-mer-4 { transform: rotateY(135deg); }

/* --- parallels: circles laid flat, lifted along Y, scaled by cos(lat).
       Three, at 0 and +/-30 degrees.
         y     = 64 * sin(30) = 32px = 25% of the 128px box
         scale = cos(30)      = .866
       After rotateX(90deg) the bottom border is the NEAR arc and the top
       border is the FAR arc -> free depth falloff. Border width is
       pre-divided by the scale so every line lands at ~1px on screen.

       --d blooms the wave from the EQUATOR OUTWARD (0 / 300 / 300), not
       pole-to-pole. A top-to-bottom sweep across a banded sphere reads
       as scanning — barcode, radar, preloader. Radiating from the centre
       reads as a source. It is also mirror-symmetric. ---------------- */
.v-lat {
  border-width: var(--bw);
  border-top-color: var(--orb-lat-far);
  border-left-color: var(--orb-lat-side);
  border-right-color: var(--orb-lat-side);
  border-bottom-color: var(--orb-lat-near);
}
.v-lat-1 { --bw: 1.155px; --d: 300ms; transform: translateY(-25%) rotateX(90deg) scale(.866); }
.v-lat-2 { --bw: 1.000px; --d:   0ms; transform: translateY(0)    rotateX(90deg) scale(1);    }
.v-lat-3 { --bw: 1.155px; --d: 300ms; transform: translateY(25%)  rotateX(90deg) scale(.866); }

/* The wave rides a bright copy of each parallel.
   inset: calc(var(--bw) * -1) is EXACTLY coincident, measured, not
   assumed: an absolutely-positioned ::before is laid out against its
   host's PADDING box, so -bw pushes its border box back out to 128px —
   identical centreline radius, delta 0.00px. (inset: 0 would put it 1px
   inboard and actually create the doubled-line artefact.)
   It starts AND ends at opacity 0, so swapping the animation between
   states can never produce a visible step. */
.v-lat::before {
  content: "";
  position: absolute;
  inset: calc(var(--bw) * -1);
  border-radius: 50%;
  border: var(--bw) solid var(--orb-lat-hot);
  opacity: 0;
  /* idle: no animation at all. Five ring-blinks above a form field is a
     status indicator, and users read blinking near an input as "did
     something fail?". The wave belongs to the call. */
}

/* --- crisp silhouette + inner atmosphere (static).
       This is the object's one hard edge. Everything else is soft. ---- */
.v-orb-limb {
  position: absolute;
  inset: .031em;              /* seats on the .94-scaled lattice rim */
  border-radius: 50%;
  border: 1px solid var(--orb-limb);
  box-shadow: inset 0 0 .16em var(--orb-limb-in);
}

/* --- rim halo: transitions rather than animates, so the idle -> calling
       handover is a ramp, never a pop. Asymmetric on/off. ------------- */
.v-orb-halo {
  position: absolute;
  inset: .023em;
  border-radius: 50%;
  box-shadow: 0 0 .125em .008em var(--orb-halo-glow), 0 0 .023em var(--orb-halo-line);
  opacity: 0;
  transition: opacity 1200ms cubic-bezier(.4, 0, 1, 1);   /* off: lazy */
}

/* ================================================================== *
 * CALLING — the same elements, intensified.
 *
 * The lead signal is AMPLITUDE, not RPM. The old boost took the object
 * from 10.6 deg/s to 52.9 deg/s in one frame — position was continuous
 * but velocity was not, and bright bands sweeping a sphere at 6.8s/rev
 * is precisely the 2010 "Connecting..." spinner. Voice is loudness, not
 * throughput. Rotation now steps 2.0x, under the just-noticeable
 * threshold at this size; the wave, the ping and the halo carry the state.
 * ================================================================== */
.v-demo-card.is-calling .v-orb-halo {
  opacity: 1;
  transition: opacity 600ms cubic-bezier(.16, 1, .3, 1);  /* on: snaps, settles */
}

.v-demo-card.is-calling .v-orb-boost {
  animation: v-orb-spin-kf 38400ms linear infinite;   /* combined 19200ms/rev = 8B */
}

.v-demo-card.is-calling .v-lat::before {
  animation: v-orb-wave-hot 4800ms infinite;     /* 2B */
  animation-delay: var(--d);
}

.v-demo-card.is-calling .v-orb-core::after {
  animation: v-orb-ping 2400ms infinite;       /* 1B */
}

/* ================================================================== *
 * KEYFRAMES — transform + opacity only.
 * Easing is declared INSIDE the keyframes. A single ease-in-out on a
 * five-stop opacity track applies the curve between every adjacent pair,
 * which puts a velocity hitch at every stop and makes the attack start
 * slow — the opposite of a struck string.
 * ================================================================== */
@keyframes v-orb-spin-kf {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

/* holds still for the first ~3.3s of every 9.6s cycle. Stillness is what
   makes the motion that follows read as deliberate. */
@keyframes v-orb-breathe {
  0%, 34% { opacity: .60; transform: scale(1);
            animation-timing-function: cubic-bezier(.4, 0, .3, 1); }
  58%     { opacity: .86; transform: scale(1.035);
            animation-timing-function: cubic-bezier(.5, 0, .6, 1); }
  100%    { opacity: .60; transform: scale(1); }
}

/* expands, dies at full extension, resets while invisible. A ping never
   contracts — radar, sonar, a stone in water. The old one shrank from
   1.22 to .72 while still visible at alpha .18: the orb inhaled. */
@keyframes v-orb-ping {
  0%   { opacity: 0;   transform: scale(.70);
         animation-timing-function: cubic-bezier(.05, .7, .1, 1); }
  26%  { opacity: .82; transform: scale(1.00);
         animation-timing-function: cubic-bezier(.33, 0, .68, .5); }
  70%  { opacity: 0;   transform: scale(1.30); }
  99%  { opacity: 0;   transform: scale(1.30); }
  100% { opacity: 0;   transform: scale(.70); }
}

/* fast attack, long decay, then genuinely dead for ~40% of the cycle */
@keyframes v-orb-wave-hot {
  0%   { opacity: 0;
         animation-timing-function: cubic-bezier(.05, .7, .1, 1); }
  16%  { opacity: .78;
         animation-timing-function: cubic-bezier(.3, 0, .7, .35); }
  58%  { opacity: .04;
         animation-timing-function: linear; }
  100% { opacity: 0; }
}

/* ================================================================== *
 * REDUCED MOTION — no rotation, no scale, no translation, nothing
 * expands. Opacity-only pulses survive so the object still reads live
 * and the calling state is still distinguishable.
 * (Last in the sheet: same specificity, later source order wins.)
 * ================================================================== */
@media (prefers-reduced-motion: reduce) {
  .v-orb-spin {
    animation: none;
    /* meridians land at 22.5 / 67.5 / 112.5 / 157.5 — evenly distributed,
       none edge-on, no knot of converging lines at a visible pole. */
    transform: rotateY(-22.5deg);
  }
  .v-demo-card.is-calling .v-orb-boost { animation: none; }

  .v-orb-glow {
    animation: v-orb-fade 9600ms ease-in-out infinite;
    transform: none;
  }

  /* opacity 0, NOT .14. Leaving the hot copies permanently lit gave the
     reduced-motion user a busier, materially different object than
     everyone else — a uniform saturated ring laid over a graded one on
     every parallel. The base lattice stands on its own. */
  .v-lat::before { animation: none; opacity: 0; }
  .v-demo-card.is-calling .v-lat::before {
    animation: v-orb-fade-line 4800ms ease-in-out infinite;
    animation-delay: var(--d);
  }

  .v-orb-core::after { transform: none; }
  .v-demo-card.is-calling .v-orb-core::after {
    animation: v-orb-fade-hot 4800ms ease-in-out infinite;
  }

  /* swings kept under ~2.5x luminance at <=12.5 cycles/min. The old
     .10 -> .70 over 2.4s was a 7x swing at 25 cycles/min, and the
     reduced-motion population overlaps heavily with photosensitivity. */
  @keyframes v-orb-fade      { 0%, 100% { opacity: .62; } 50% { opacity: .84; } }
  @keyframes v-orb-fade-hot   { 0%, 100% { opacity: .18; } 50% { opacity: .40; } }
  @keyframes v-orb-fade-line  { 0%, 100% { opacity: .12; } 50% { opacity: .30; } }
}

/* ================================================================== *
 * NO-3D FALLBACK
 * Covers engines that do not support preserve-3d at all. Without this
 * the parallels' rotateX(90deg) flattens to scaleY(0) and vanishes,
 * mer--3's rotateY(90deg) flattens to zero width, and `spin` degrades
 * from a rotation into a horizontal squash — the sphere becomes a
 * pulsing vertical sliver.
 *
 * It canNOT detect runtime flattening caused by a grouping property on
 * .v-orb-tilt / .v-orb-spin / .v-orb-boost; that hazard is guarded by the
 * comment above those rules.
 *
 * The static composition below reuses existing elements only — the limb
 * plus two pseudo-ellipses read as a wireframe orb, and glow / core /
 * halo / ping all still work, so idle vs calling stays legible.
 * ================================================================== */
@supports not ((transform-style: preserve-3d) or (-webkit-transform-style: preserve-3d)) {
  .v-orb-field { display: none; }

  .v-orb-limb::before,
  .v-orb-limb::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1px solid var(--orb-mer-mid);
  }
  .v-orb-limb::before { inset: 0 24%; }      /* a meridian */
  .v-orb-limb::after  { inset: 33% 0;        /* the equator */
                       border-color: var(--orb-lat-side); }
}

.v-orb-cap { text-align: center; margin-bottom: 18px; }
.v-orb-title { font-size: 17px; font-weight: 600; color: var(--ink); margin: 0 0 2px; }
.v-orb-sub { font-size: 13.5px; color: var(--ink-3); margin: 0; }

/* the live "calling" panel that replaces the form on submit */
.v-calling { text-align: center; padding: 4px 0 2px; }
.v-calling[hidden] { display: none; }
.v-calling-line { font-size: 17px; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.v-calling-num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 15px; color: var(--teal); margin: 0 0 10px; letter-spacing: .02em; }
.v-calling-hint { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); margin: 0; }
.v-dots i { animation: v-dot 1.4s infinite; opacity: 0; }
.v-dots i:nth-child(2) { animation-delay: .2s; }
.v-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes v-dot { 0%,60%,100% { opacity: 0; } 30% { opacity: 1; } }

/* submit button loading state */
.v-demo-submit { position: relative; }
.v-demo-submit.is-loading .v-demo-submit-label { visibility: hidden; }
.v-demo-submit.is-loading::after {
  content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  animation: v-spin .7s linear infinite;
}
[data-theme="dark"] .v-demo-submit.is-loading::after { border-color: rgba(8,32,28,.4); border-top-color: #08201c; }
@keyframes v-spin { to { transform: rotate(360deg); } }

.v-calling-retry {
  margin-top: 16px; background: transparent; border: 1px solid var(--border);
  color: var(--ink-2); font: 500 14px/1 Figtree, system-ui, sans-serif;
  padding: 11px 16px; border-radius: 10px; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.v-calling-retry:hover { border-color: var(--teal); color: var(--teal); }
.v-calling-retry[hidden] { display: none; }

/* Reduced motion for the rest of the widget. The orb ships its own
   prefers-reduced-motion block with its CSS above. */
@media (prefers-reduced-motion: reduce) {
  .v-dots i, .v-demo-submit::after { animation: none !important; }
}

/* Spam honeypot: off-screen, unfocusable, and deliberately NOT named like a real
   field so browser autofill leaves it empty. An autofilled honeypot silently
   swallowed every genuine submission. */
.v-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ─────────────────────  HOMEPAGE: CONSOLE DIRECTION  ─────────────────────
   __VALOR_CONSOLE_HOME_v1__. An engineered, product-grade homepage: a hairline
   ruled frame with crosshair ticks, an always-dark hero + closing band with a
   coordinate grid, a live "SYSTEMS NOMINAL" status readout, monospace-as-data,
   and // section markers. Ported from the /design/console mockup onto the Valor
   teal identity. The site header/footer/theme toggle are the shared ones.
   Always-dark panels use explicit --con-d-* values so they stay dark in the
   light theme too; light-context sections use the brand tokens and flip. */
:root {
  --con-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --con-r: 7px; --con-r-lg: 10px;
  --con-d-bg: #08130f; --con-d-panel: #0f1d18; --con-d-surf: #0c1713;
  --con-d-ink: #eaf2ee; --con-d-ink-2: #aec3ba; --con-d-ink-3: #85a096;
  --con-d-border: rgba(255,255,255,.09); --con-d-border-2: rgba(255,255,255,.17);
  --con-d-teal: #43c9b4;
  --con-ease: cubic-bezier(.2,.7,.2,1);
}

/* ruled frame — the signature vertical rails + crosshair ticks */
.v-con-frame { max-width: 1160px; margin: 0 auto; position: relative;
  border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
.v-con-sec { position: relative; padding: clamp(48px,6vw,76px) clamp(22px,5vw,56px); }
.v-con-sec + .v-con-sec { border-top: 1px solid var(--border); }
.v-con-sec::before, .v-con-sec::after { content: ""; position: absolute; top: -4px;
  width: 9px; height: 9px; pointer-events: none; opacity: .9;
  background:
    linear-gradient(var(--border),var(--border)) center/9px 1px no-repeat,
    linear-gradient(var(--border),var(--border)) center/1px 9px no-repeat; }
.v-con-sec::before { left: 0; } .v-con-sec::after { right: 0; }

.v-con-idx { font-family: var(--con-mono); font-size: 12px; color: var(--teal);
  font-weight: 500; font-variant-numeric: tabular-nums; }
.v-con-kicker { display: flex; align-items: baseline; gap: 14px; margin-bottom: 30px; flex-wrap: wrap; }
.v-con-kicker h2 { margin: 0; font-weight: 600; font-size: clamp(24px,3.2vw,34px);
  letter-spacing: -.025em; color: var(--ink); }
.v-con-kicker .sub { color: var(--ink-3); font-size: 15px; max-width: 52ch; }

/* ---- always-dark hero ---- */
.v-con-hero { position: relative; overflow: hidden; background: var(--con-d-bg); color: var(--con-d-ink); }
.v-con-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, var(--con-d-border) 1px, transparent 1px) 0 0 / clamp(64px,9vw,116px) 100%,
    radial-gradient(120% 90% at 82% -8%, rgba(15,138,126,.34), transparent 55%),
    radial-gradient(90% 70% at 100% 108%, rgba(12,107,98,.20), transparent 60%); }
.v-con-hero-in { position: relative; max-width: 1160px; margin: 0 auto; padding: 0 clamp(22px,5vw,56px);
  border-left: 1px solid var(--con-d-border); border-right: 1px solid var(--con-d-border); }

.v-con-status { display: flex; align-items: stretch; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--con-d-border);
  margin: 0 clamp(-22px,-5vw,-56px); padding: 0 clamp(22px,5vw,56px); }
.v-con-status::-webkit-scrollbar { display: none; }
.v-con-cell { display: flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 11px 18px; color: var(--con-d-ink-3); font-family: var(--con-mono);
  font-size: 11.5px; letter-spacing: .04em; border-right: 1px solid var(--con-d-border); }
.v-con-cell:first-child { padding-left: 0; }
.v-con-cell b { color: var(--con-d-ink); font-weight: 500; }
.v-con-livedot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; flex: none;
  box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: v-con-pulse 2.4s var(--con-ease) infinite; }
@keyframes v-con-pulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); } 70% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }

.v-con-hero-grid { display: grid; grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr);
  gap: clamp(24px,4vw,56px); align-items: center; padding: clamp(44px,6vw,80px) 0 clamp(40px,5vw,64px); }
.v-con-copy { max-width: 600px; }
.v-con-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px;
  padding: 6px 12px 6px 8px; border: 1px solid var(--con-d-border-2); border-radius: 100px;
  background: rgba(255,255,255,.03); color: var(--con-d-ink-2); font-size: 12.5px; font-weight: 500; }
.v-con-eyebrow .tag { font-family: var(--con-mono); font-size: 10.5px; color: var(--con-d-teal);
  border: 1px solid var(--con-d-border-2); border-radius: 4px; padding: 1px 6px; letter-spacing: .04em; }
.v-con-h1 { margin: 0 0 20px; font-weight: 600; letter-spacing: -.03em; line-height: 1.02;
  font-size: clamp(38px,6.1vw,68px); color: var(--con-d-ink); text-wrap: balance; }
.v-con-h1 .b2 { color: var(--con-d-ink-2); }
.v-con-lede { margin: 0 0 30px; font-size: clamp(15.5px,1.5vw,18px); line-height: 1.62;
  color: var(--con-d-ink-2); max-width: 560px; }
.v-con-metarow { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 26px;
  color: var(--con-d-ink-3); font-family: var(--con-mono); font-size: 11.5px; letter-spacing: .03em; }
.v-con-metarow span { display: inline-flex; align-items: center; gap: 7px; }
.v-con-metarow span::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--con-d-teal); opacity: .85; }

/* hero CTA buttons on the dark panel */
.v-con-hero .v-btn-primary { background: var(--con-d-teal); color: #06231e; border-color: var(--con-d-teal); }
.v-con-hero .v-btn-primary:hover { background: #5ed6c2; }
.v-con-ghost { display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--con-d-ink); border: 1px solid var(--con-d-border-2);
  border-radius: var(--con-r); padding: 13px 20px; font: 600 15px/1 Figtree, system-ui, sans-serif;
  transition: background .16s var(--con-ease), border-color .16s var(--con-ease); }
.v-con-ghost:hover { background: rgba(255,255,255,.06); border-color: var(--con-d-ink-3); text-decoration: none; }

/* product window (screenshot), bleeds off the right rail on desktop */
.v-con-shot { position: relative; }
.v-con-window { border: 1px solid var(--con-d-border-2); border-radius: var(--con-r-lg); overflow: hidden;
  background: var(--con-d-panel); box-shadow: 0 24px 60px -28px rgba(0,0,0,.75); margin: 0; }
.v-con-winbar { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 14px;
  border-bottom: 1px solid var(--con-d-border); background: rgba(255,255,255,.02); }
.v-con-winbar img { height: 15px; width: 15px; border-radius: 4px; }
.v-con-winbar .u { font-family: var(--con-mono); font-size: 11px; color: var(--con-d-ink-3);
  letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-con-winbar .live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: var(--con-mono); font-size: 10px; color: var(--con-d-ink-2); letter-spacing: .05em; }
.v-con-window > img { width: 100%; height: auto; aspect-ratio: 3000/1840; display: block; }
.v-con-cap { margin-top: 16px; display: flex; gap: 12px; align-items: flex-start;
  color: var(--con-d-ink-2); font-size: 13.5px; max-width: 520px; }
.v-con-cap .v-con-idx { color: var(--con-d-teal); padding-top: 1px; }

/* triple feature row */
.v-con-triple { display: grid; grid-template-columns: repeat(3,1fr); }
.v-con-triple .t { padding: clamp(26px,3vw,40px); border-left: 1px solid var(--border); }
.v-con-triple .t:first-child { border-left: 0; }
.v-con-triple .t .v-con-idx { display: block; margin-bottom: 18px; }
.v-con-triple .t h3 { margin: 0 0 8px; font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.v-con-triple .t p { margin: 0; color: var(--ink-3); font-size: 14.5px; line-height: 1.55; }

/* the gap grid (software / staffing / us) */
.v-con-gap { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--border);
  border-radius: var(--con-r-lg); overflow: hidden; }
.v-con-gapcell { padding: clamp(24px,2.6vw,34px); border-left: 1px solid var(--border); background: var(--card); }
.v-con-gapcell:first-child { border-left: 0; }
.v-con-gaplbl { display: inline-block; margin-bottom: 16px; padding: 3px 8px; border-radius: 4px;
  font-family: var(--con-mono); font-size: 10.5px; letter-spacing: .08em; color: var(--ink-3);
  border: 1px solid var(--border); background: var(--surf); }
.v-con-gapcell h4 { margin: 0 0 7px; font-size: 18px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.v-con-gapcell p { margin: 0; color: var(--ink-3); font-size: 14px; line-height: 1.5; }
.v-con-gapcell.us { background: #0c6b62; }
.v-con-gapcell.us .v-con-gaplbl { color: #f4fdfa; border-color: rgba(255,255,255,.34); background: rgba(0,0,0,.22); }
.v-con-gapcell.us h4, .v-con-gapcell.us p { color: #ecfbf7; }
.v-con-gapline { margin-top: 22px; color: var(--ink-2); font-size: 15px; max-width: 720px; line-height: 1.6; }
.v-con-gapline b { color: var(--ink); font-weight: 600; }

/* who we serve cards */
.v-con-serve-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.v-con-serve { border: 1px solid var(--border); border-radius: var(--con-r-lg); background: var(--card);
  padding: 24px; position: relative; transition: border-color .18s var(--con-ease), transform .18s var(--con-ease); display: block; }
.v-con-serve:hover { border-color: var(--ink-3); transform: translateY(-2px); text-decoration: none; }
.v-con-serve::after { content: ""; position: absolute; left: -1px; top: 20px; bottom: 20px; width: 2px;
  background: var(--teal); border-radius: 2px; transform: scaleY(0); transform-origin: top; transition: transform .22s var(--con-ease); }
.v-con-serve:hover::after { transform: scaleY(1); }
.v-con-serve .lbl { font-family: var(--con-mono); font-size: 10.5px; letter-spacing: .09em; color: var(--teal); }
.v-con-serve h3 { margin: 12px 0 8px; font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.v-con-serve p { margin: 0; color: var(--ink-3); font-size: 14px; line-height: 1.55; }
.v-con-serve .go { display: inline-block; margin-top: 14px; color: var(--teal); font-weight: 500; font-size: 14px; }
.v-con-chipnote { margin: 26px 0 10px; font-family: var(--con-mono); font-size: 11px; letter-spacing: .06em; color: var(--ink-3); }
.v-con-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.v-con-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border);
  border-radius: 100px; padding: 7px 13px; font-size: 13px; color: var(--ink-2); background: var(--card);
  transition: border-color .16s var(--con-ease), color .16s var(--con-ease); }
.v-con-chip:hover { border-color: var(--ink-3); color: var(--ink); text-decoration: none; }
.v-con-chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--clay); flex: none; }

/* the two capabilities */
.v-con-cap2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.v-con-cap2 .cell { border: 1px solid var(--border); border-radius: var(--con-r-lg); background: var(--card); padding: clamp(22px,2.4vw,30px); }
.v-con-cap2 .lbl { font-family: var(--con-mono); font-size: 10.5px; letter-spacing: .09em; color: var(--teal); }
.v-con-cap2 h3 { margin: 12px 0 10px; font-size: 21px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.v-con-cap2 p { margin: 0 0 16px; color: var(--ink-2); font-size: 15px; line-height: 1.62; }

/* how it works steps */
.v-con-steps { display: grid; grid-template-columns: repeat(4,1fr); }
.v-con-step { padding: 0 26px 0 0; position: relative; }
.v-con-step + .v-con-step { padding-left: 26px; border-left: 1px solid var(--border); }
.v-con-step .n { font-family: var(--con-mono); font-size: 13px; color: var(--teal); font-weight: 500; }
.v-con-step .dot { display: flex; align-items: center; gap: 10px; margin: 16px 0; }
.v-con-step .dot::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--teal); background: var(--bg); flex: none; }
.v-con-step .dot::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.v-con-step h3 { margin: 0 0 8px; font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.v-con-step p { margin: 0; color: var(--ink-3); font-size: 13.5px; line-height: 1.5; }

/* FAQ, console-styled: a bordered box around the shared <details> list */
.v-con-faq .v-faq { border-top: 0; }
.v-con-faq { border: 1px solid var(--border); border-radius: var(--con-r-lg); overflow: hidden; padding: 0 clamp(18px,2.4vw,26px); }

/* closing CTA — always dark */
.v-con-cta { position: relative; overflow: hidden; background: var(--con-d-bg); color: var(--con-d-ink); }
.v-con-cta::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, var(--con-d-border) 1px, transparent 1px) 0 0 / clamp(64px,9vw,116px) 100%,
    radial-gradient(80% 120% at 88% 120%, rgba(15,138,126,.42), transparent 60%); }
.v-con-cta-in { position: relative; max-width: 1160px; margin: 0 auto;
  padding: clamp(52px,7vw,88px) clamp(22px,5vw,56px);
  border-left: 1px solid var(--con-d-border); border-right: 1px solid var(--con-d-border);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.v-con-cta-in .v-con-idx { color: var(--con-d-teal); }
.v-con-cta h2 { margin: 12px 0 0; font-weight: 600; font-size: clamp(28px,4.4vw,48px);
  letter-spacing: -.03em; line-height: 1.05; color: var(--con-d-ink); max-width: 640px; text-wrap: balance; }
.v-con-cta .v-btn-primary { background: var(--con-d-teal); color: #06231e; border-color: var(--con-d-teal); }
.v-con-cta .v-btn-primary:hover { background: #5ed6c2; }

/* responsive */
@media (min-width: 981px) { .v-con-shot { margin-right: clamp(-56px,-5vw,-20px); } .v-con-window { margin-right: -8%; } }
@media (max-width: 980px) {
  .v-con-hero-grid { grid-template-columns: 1fr; padding-bottom: 8px; }
  .v-con-shot { margin: 8px 0; }
  .v-con-steps { grid-template-columns: 1fr 1fr; }
  .v-con-cap2 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .v-con-triple { grid-template-columns: 1fr; }
  .v-con-triple .t { border-left: 0; border-top: 1px solid var(--border); }
  .v-con-triple .t:first-child { border-top: 0; }
  .v-con-gap { grid-template-columns: 1fr; }
  .v-con-gapcell { border-left: 0; border-top: 1px solid var(--border); }
  .v-con-gapcell:first-child { border-top: 0; }
  .v-con-serve-grid { grid-template-columns: 1fr; }
  .v-con-steps { grid-template-columns: 1fr; }
  .v-con-step, .v-con-step + .v-con-step { padding: 0 0 22px; border-left: 0; }
  .v-con-step + .v-con-step { border-top: 1px solid var(--border); padding-top: 22px; }
}

/* ═══════════════  CONSOLE THEME, SITE-WIDE  ═══════════════
   __VALOR_CONSOLE_SITE_v1__. Rolls the console homepage's look onto the shared
   primitives so every inner page follows it: bold-sans headings, // mono
   eyebrows, a dark console hero band, ruled rails + crosshair ticks, and a dark
   closing band. Appended last, so these win over the base primitives by source
   order. The homepage uses its own .v-con-* classes and is unaffected. */

/* headings → the console bold sans (were Newsreader serif) */
.v-h1 { font-family: Figtree, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-weight: 600; letter-spacing: -.03em; line-height: 1.03; }
.v-h2 { font-family: Figtree, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-weight: 600; letter-spacing: -.024em; line-height: 1.12; }

/* eyebrow → // section marker (the ruled variant keeps its own leading rule) */
.v-eyebrow:not(.v-eyebrow-rule)::before { content: "// "; opacity: .75; }

/* ruled rails + crosshair ticks on section content — the frame signature */
.v-section > .v-inner { position: relative;
  border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
.v-section > .v-inner::before, .v-section > .v-inner::after { content: ""; position: absolute;
  top: -1px; width: 9px; height: 9px; pointer-events: none; opacity: .8; z-index: 1;
  background: linear-gradient(var(--border),var(--border)) center/9px 1px no-repeat,
    linear-gradient(var(--border),var(--border)) center/1px 9px no-repeat; }
.v-section > .v-inner::before { left: -4.5px; }
.v-section > .v-inner::after { right: -4.5px; }

/* dark console hero band — the first section on every inner page */
.v-section-glow { position: relative; overflow: hidden; background: var(--con-d-bg); background-image: none; }
.v-section-glow::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, var(--con-d-border) 1px, transparent 1px) 0 0 / clamp(64px,9vw,116px) 100%,
    radial-gradient(120% 90% at 82% -8%, rgba(15,138,126,.32), transparent 55%),
    radial-gradient(90% 70% at 100% 108%, rgba(12,107,98,.18), transparent 60%); }
.v-section-glow > .v-inner { position: relative; border-color: var(--con-d-border); }
.v-section-glow > .v-inner::before, .v-section-glow > .v-inner::after {
  background: linear-gradient(var(--con-d-border-2),var(--con-d-border-2)) center/9px 1px no-repeat,
    linear-gradient(var(--con-d-border-2),var(--con-d-border-2)) center/1px 9px no-repeat; }
.v-section-glow .v-h1, .v-section-glow h1 { color: var(--con-d-ink); }
.v-section-glow .v-lede, .v-section-glow > .v-inner > .v-hero-lead > p { color: var(--con-d-ink-2); }
.v-section-glow .v-eyebrow { color: var(--con-d-teal); }
.v-section-glow .v-eyebrow-rule::before { background: var(--con-d-teal); opacity: .6; }
.v-section-glow .v-btn-secondary { color: var(--con-d-ink); border-color: var(--con-d-border-2); background: transparent; }
.v-section-glow .v-btn-secondary:hover { border-color: var(--con-d-ink-3); background: rgba(255,255,255,.06); }
.v-section-glow .v-btn-primary { background: var(--con-d-teal); color: #06231e; border-color: var(--con-d-teal); }
.v-section-glow .v-btn-primary:hover { background: #5ed6c2; }
/* hero copy lists sit on the dark band too (the self-contained .v-demo-card
   keeps its own colours). */
.v-section-glow .v-list li { color: var(--con-d-ink-2); }
.v-section-glow .v-list li::before { background: var(--con-d-teal); }
.v-section-glow .v-list-check li::before { background: none; color: var(--con-d-teal); }

/* dark closing band (was the teal gradient) — matches the homepage .v-con-cta */
.v-section-brand { position: relative; overflow: hidden; background: var(--con-d-bg); }
.v-section-brand::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, var(--con-d-border) 1px, transparent 1px) 0 0 / clamp(64px,9vw,116px) 100%,
    radial-gradient(80% 120% at 88% 120%, rgba(15,138,126,.4), transparent 60%); }
.v-section-brand > .v-inner { position: relative; border-color: var(--con-d-border); }
.v-section-brand > .v-inner::before, .v-section-brand > .v-inner::after {
  background: linear-gradient(var(--con-d-border-2),var(--con-d-border-2)) center/9px 1px no-repeat,
    linear-gradient(var(--con-d-border-2),var(--con-d-border-2)) center/1px 9px no-repeat; }
.v-section-brand .v-eyebrow { color: var(--con-d-teal); }
.v-section-brand .v-h2, .v-section-brand h2 { color: var(--con-d-ink); }
.v-section-brand p { color: var(--con-d-ink-2); }
.v-section-brand .v-btn-onbrand { background: var(--con-d-teal); color: #06231e; border-color: var(--con-d-teal); }
.v-section-brand .v-btn-onbrand:hover { background: #5ed6c2; }
.v-section-brand .v-band-chip { color: var(--con-d-ink-2); border-color: var(--con-d-border-2); background: rgba(255,255,255,.03); }

/* mobile: rails hug the screen edge, keep them subtle */
@media (max-width: 720px) {
  .v-section > .v-inner::before, .v-section > .v-inner::after { display: none; }
}