/* The home page v4 in dark mode (/home-v4-dark.html, 21.10): the same page and
   layout, laid over home-v4.css. The light page's whites become near-black
   surfaces, the green accent lifts to the brand's lime so it reads on dark. */

html[data-v4="dark"] {
  --bg: #08080a; --bg-2: #111114; --ink: #f4f4f5; --ink-2: #c4c4cc; --ink-3: #8e8e98; --ink-4: #5c5c66;
  --line: #1f1f24; --line-2: #2c2c33;
  --green: #b6d96a;
  --grad: linear-gradient(92deg, #e6f5c0 0%, #c4dc7c 35%, #7fd1a8 70%, #5ec7d6 100%);
  color-scheme: dark;
}
html[data-v4="dark"] body { background: var(--bg); color: var(--ink); }

/* bar */
html[data-v4="dark"] .nv { background: rgba(8, 8, 10, 0.72); }
html[data-v4="dark"] .b-dark { background: #fff; color: #0a0a0a; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 8px 24px -10px rgba(196, 220, 124, 0.5); }
html[data-v4="dark"] .b-dark:hover { background: #e4e4e7; }
html[data-v4="dark"] .b-ghost { background: rgba(255, 255, 255, 0.04); border-color: var(--line-2); color: var(--ink); }
html[data-v4="dark"] .b-ghost:hover { border-color: #4a4a54; }
html[data-v4="dark"] .tag { background: rgba(196, 220, 124, 0.14); color: #c4dc7c; }
html[data-v4="dark"] .tag.t-early { background: rgba(120, 160, 255, 0.15); color: #9db8ff; }
html[data-v4="dark"] .tag.t-soon { background: rgba(255, 255, 255, 0.06); color: var(--ink-3); }

/* hero: the grid and the glow on black */
html[data-v4="dark"] .hero-bg { opacity: .9; }
html[data-v4="dark"] .hero::after { content: ""; position: absolute; left: 50%; top: -260px; width: 1100px; height: 700px;
  transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(196, 220, 124, 0.16), rgba(94, 199, 214, 0.06) 60%, transparent); }
html[data-v4="dark"] .hero-in, html[data-v4="dark"] .hero .wrap { position: relative; z-index: 1; }
html[data-v4="dark"] .pill { background: rgba(255, 255, 255, 0.04); border-color: var(--line-2); }
html[data-v4="dark"] .pill-tag { background: #c4dc7c; color: #0a0a0a; }
html[data-v4="dark"] .frame { background: rgba(255, 255, 255, 0.03); border-color: var(--line-2);
  box-shadow: 0 40px 120px -40px rgba(196, 220, 124, 0.35), 0 20px 60px -30px rgba(0, 0, 0, 0.8); }
html[data-v4="dark"] .frame::before { background: radial-gradient(50% 60% at 50% 50%, rgba(196, 220, 124, 0.30), rgba(94, 199, 214, 0.10) 55%, transparent 75%); }
html[data-v4="dark"] .frame-bar i { background: #3a3a42; }

/* surfaces */
html[data-v4="dark"] .step, html[data-v4="dark"] .tile, html[data-v4="dark"] .plan, html[data-v4="dark"] .gen {
  background: var(--bg-2); border-color: var(--line); }
html[data-v4="dark"] .step-vis, html[data-v4="dark"] .t-vis, html[data-v4="dark"] .who article {
  background: #0c0c0f; border-color: var(--line); }
html[data-v4="dark"] .tile:hover, html[data-v4="dark"] .gen:hover { border-color: var(--line-2);
  box-shadow: 0 18px 40px -24px rgba(196, 220, 124, 0.25); }
html[data-v4="dark"] .v-ask .vq { background: #fff; color: #0a0a0a; }
html[data-v4="dark"] .v-ask .va, html[data-v4="dark"] .v-file .vf, html[data-v4="dark"] .tvl span, html[data-v4="dark"] .tv-drop span {
  background: #16161a; border-color: var(--line-2); color: var(--ink-2); }
html[data-v4="dark"] .v-file .vf b { color: var(--ink); }
html[data-v4="dark"] .v-check .ok::before, html[data-v4="dark"] .ticks li::before { background: rgba(196, 220, 124, 0.16); color: #c4dc7c; }
html[data-v4="dark"] .tvf { background: rgba(196, 220, 124, 0.12); color: #c4dc7c; }
html[data-v4="dark"] .tv-check circle { fill: #0c0c0f; }
html[data-v4="dark"] .tv-check .warn { background: rgba(229, 72, 77, 0.15); color: #ff8b8f; }
html[data-v4="dark"] .tv-drop { border-color: #34343c; }

/* problem */
html[data-v4="dark"] .problem .statement { color: #4a4a54; }
html[data-v4="dark"] .problem .statement span { color: var(--ink); }

/* sell */
html[data-v4="dark"] .sell-vis { background: linear-gradient(160deg, rgba(196, 220, 124, 0.14), rgba(94, 199, 214, 0.08)); border: 1px solid var(--line-2); }
html[data-v4="dark"] .sell-vis .frame-cap { color: var(--ink-3); }
html[data-v4="dark"] .toast { background: #fff; color: #0a0a0a; }
html[data-v4="dark"] .toast b { color: #4b7a12; }
html[data-v4="dark"] .toast em { color: #2f7a1f; }

/* the dark bands step apart from the dark page */
html[data-v4="dark"] .dev { background: #0e0e11; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
html[data-v4="dark"] .final { background: #0e0e11; border-top: 1px solid var(--line); }
html[data-v4="dark"] .b-light { background: #fff; color: #0a0a0a; }

/* changelog, pricing, faq, footer */
html[data-v4="dark"] .next li { border-color: var(--line-2); }
html[data-v4="dark"] .log li::before { background: var(--ink-3); box-shadow: 0 0 0 4px var(--bg); }
html[data-v4="dark"] .log li:first-child::before { background: #c4dc7c; box-shadow: 0 0 0 4px rgba(196, 220, 124, 0.18); }
html[data-v4="dark"] .plan.hi { border-color: rgba(196, 220, 124, 0.55); box-shadow: 0 30px 60px -36px rgba(196, 220, 124, 0.35); }
html[data-v4="dark"] .ribbon { background: #c4dc7c; color: #0a0a0a; }
html[data-v4="dark"] .plan .b-dark { box-shadow: none; }
html[data-v4="dark"] .ft { border-color: var(--line); }