/* ============================================================
   VRS — Landing v6 · hybrid shadcn skin
   Layers over theme.css + ui.css. Retokenises the page to a
   warm Stone shadcn palette (matches product vrs-tokens.css) (Geist / Geist Mono, small radii,
   flat shadows) while keeping VRS green as the single accent.
   Loaded AFTER theme.css + ui.css so it wins on equal specificity.
   ============================================================ */

/* ── tokens · light (default) ─────────────────────────────── */
:root, [data-theme="dark"] {
  /* Stone neutrals (warm) — same family as the product (vrs-tokens.css),
     ladder preserved: bg=stone-950, paper=stone-900, elevated=stone-800. */
  --bg:        #0c0a09;
  --bg-grad:   #0e0c0b;
  --surface:   #141110;
  --surface-2: #1c1917;
  --surface-3: #292524;
  --text:      #fafaf9;
  --text-2:    #a8a29e;
  --text-3:    #8a827d;
  --hairline:  #24211f;
  --line:      #292524;
  --glass:     rgba(20,17,16,0.72);
  --glass-brd: #292524;

  /* Canonical brand ramp = product design-system tokens (vrs-tokens.css):
     green #18B24B · green-dark #12893A · green-light #4DCC75. Accent text on dark =
     the brand green itself (console dark keeps --primary #18b24b), so headings match CTAs. */
  --accent-text: #18B24B;
  --green:   #18B24B;
  --green-l: #4DCC75;
  --green-d: #12893A;
  --green-wash: color-mix(in oklab, var(--green) 15%, var(--surface));

  --shadow-card: 0 1px 2px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.35);
  --shadow-pop:  0 10px 24px -12px rgba(0,0,0,0.7), 0 4px 10px rgba(0,0,0,0.4);
  --glow: transparent;
  --nav-bg: rgba(12,10,9,0.72);
  --grid-line: rgba(255,255,255,0.035);

  --pill-amber-bg:#2a2010; --pill-amber-tx:#fbbf24;
  --pill-blue-bg:#11203a;  --pill-blue-tx:#60a5fa;
  --warn-bg:#2a2010; --warn-tx:#fbbf24; --warn-brd:rgba(251,191,36,0.22);
  color-scheme: dark;
}

[data-theme="light"] {
  /* Stone light: bg=stone-50, insets=stone-100, paper accent=product --bg-paper. */
  --bg:        #fafaf9;
  --bg-grad:   #f5f5f4;
  --surface:   #ffffff;
  --surface-2: #f5f5f4;
  --surface-3: #eceae8;
  --text:      #0c0a09;
  --text-2:    #57534e;
  --text-3:    #78716c;
  --hairline:  #efedec;
  --line:      #e7e5e4;
  --glass:     rgba(255,255,255,0.78);
  --glass-brd: #e7e5e4;

  --accent-text: #12893A;
  --green:   #18B24B;
  --green-l: #4DCC75;
  --green-d: #12893A;
  --green-wash: color-mix(in oklab, var(--green) 10%, var(--surface));

  --shadow-card: 0 1px 2px rgba(12,10,9,0.06), 0 1px 3px rgba(12,10,9,0.04);
  --shadow-pop:  0 10px 24px -14px rgba(12,10,9,0.22), 0 3px 10px rgba(12,10,9,0.06);
  --glow: transparent;
  --nav-bg: rgba(250,250,249,0.8);
  --grid-line: rgba(12,10,9,0.03);

  --pill-amber-bg:#fef7e7; --pill-amber-tx:#b45309;
  --pill-blue-bg:#eff6ff;  --pill-blue-tx:#2563eb;
  --warn-bg:#fffbeb; --warn-tx:#92500a; --warn-brd:rgba(180,83,9,0.2);
  color-scheme: light;
}

:root {
  --font: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --disp: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --r-sm: 6px; --r-md: 9px; --r-lg: 12px; --r-xl: 16px;
}

/* ── base · kill the marketing glow backdrop ──────────────── */
body { font-feature-settings: "cv01","cv03","ss01","ss03"; }
body::before {
  background:
    linear-gradient(var(--bg), var(--bg-grad)) !important;
}

/* ── type ─────────────────────────────────────────────────── */
h1,h2,h3,h4 { letter-spacing: -0.028em; }
.display { letter-spacing: -0.04em; font-weight: 650; }
.h2 { font-weight: 650; }
.grad-text { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--accent-text); }
.eyebrow { letter-spacing: 0.1em; font-weight: 500; }
.eyebrow::before { box-shadow: none; border-radius: 2px; }

/* ── buttons → shadcn (no pills, flat) ────────────────────── */
.btn { border-radius: var(--r-md); font-weight: 500; font-size: 14px; padding: 0 15px; height: 40px; letter-spacing: -0.006em; }
.btn.sm { height: 34px; padding: 0 12px; font-size: 13px; }
.btn svg { width: 15px; height: 15px; }
.btn-primary { background: var(--green); color: #04220f; box-shadow: 0 1px 2px rgba(0,0,0,0.10); }
.btn-primary:hover { background: color-mix(in oklab, var(--green) 90%, #000); color: #04220f; transform: none; box-shadow: 0 1px 2px rgba(0,0,0,0.14); }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--line); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--line); transform: none; }
[data-theme="light"] .btn-ghost:hover { background: var(--surface-2); }
.link-arrow { color: var(--accent-text); }

/* ── nav ──────────────────────────────────────────────────── */
.nav-inner { height: 60px; }
.brand .mark { border-radius: 7px; box-shadow: 0 0 0 1px var(--line); }
.nav-links a.active::after { bottom: -20px; background: var(--green); height: 2px; }
.nav-cta { gap: 10px; }
.nav-cta .signin { font-size: 14px; font-weight: 500; color: var(--text-2); }
.nav-cta .signin:hover { color: var(--text); }
.theme-toggle { width: 52px; height: 28px; }
.theme-toggle .knob { width: 22px; height: 22px; box-shadow: none; }
[data-theme="light"] .theme-toggle .knob { transform: translateX(24px); }

/* ── section rhythm ───────────────────────────────────────── */
.pad { padding: 96px 0; }
.pad-sm { padding: 56px 0; }
.surface-band { background: var(--surface); }

/* ── product mockups → flatter, shadcn radii ──────────────── */
.bframe { border-radius: var(--r-lg); box-shadow: var(--shadow-pop); }
.bframe-bar { padding: 10px 14px; }
.uicard, .ai-card { border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.icard, .integ-card { border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.icard:hover, .integ-card:hover { transform: translateY(-2px); }
.kpi { border-radius: var(--r-md); }
.panel { border-radius: var(--r-md); }
.pipeline { border-radius: var(--r-lg); box-shadow: var(--shadow-card); }

/* KPI numerals → neutral fg (green reserved for deltas/accents) */
.kpi .v, .ad-title .n { color: var(--text); }
.kpi .v.warn, .ad-title .n.warn { color: var(--pill-amber-tx); }
.metric .v { color: var(--text); }
.ov-tile .v, .ov-row .v { color: var(--text) !important; }

/* ── product viewer tabs → shadcn chips ───────────────────── */
.tabbtn { border-radius: var(--r-md); font-weight: 500; font-size: 13.5px; padding: 8px 14px; }
.tabbtn.on { background: var(--green); border-color: var(--green); box-shadow: none; }
.tabviewer { margin-top: 40px; }

/* ── stories thumbs / misc glow cleanups ──────────────────── */
.cta::before { background: none; }
.cta { padding: 104px 0; }

/* ── card grids: shadcn hover accent line off ─────────────── */
.icard:hover { border-color: color-mix(in oklab, var(--green) 34%, var(--line)); }

/* focus ring — accessibility, shadcn style */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--green) 60%, transparent);
  outline-offset: 2px; border-radius: var(--r-sm);
}

/* ── mobile section rhythm ──────────────────────────────────
   The desktop rhythm (96/56/104px) doubles up between adjacent
   sections on phones and reads as dead space (Rune, 2026-08-23,
   mobile screenshots of / and /Integrations). Tighten site-wide. */
@media (max-width: 700px) {
  .pad { padding: 52px 0; }
  .pad-sm { padding: 36px 0; }
  .cta { padding: 60px 0; }
  .phero { padding: 40px 0 26px; }
  /* About.html sections use inline padding — override at mobile.
     LONGHAND top/bottom ONLY (request 35, Rune mobile QC 2026-08-24):
     the earlier shorthand `padding: 52px 0 …` zeroed the horizontal
     20px these .wrap sections get from theme.css, so the founder/team
     cards sat flush against the screen edge. */
  #founder { padding-top: 52px !important; padding-bottom: 16px !important; }
  #team { padding-top: 44px !important; padding-bottom: 52px !important; }
  #numbers { padding-top: 52px !important; padding-bottom: 20px !important; }
}

/* ══════════════════════════════════════════════════════════════
   Request 19 · "one console, many doors"
   .xdoor  — hero console doorway: abstract skeleton of the console
             (rails + ghost tiles, cannot drift from vrs-ui) that is
             one large link into explore.html.
   .moment — See-it-work moment cards deep-linking into explore.html
             with ?play=1 (explore.js pulses the primary action).
   Revert: remove this block + the hero/viewer sections in index.html.
   ══════════════════════════════════════════════════════════════ */
.xdoor { display: block; max-width: 980px; margin: 34px auto 0; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-card); overflow: hidden; text-decoration: none; color: inherit; position: relative; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.xdoor:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--green) 38%, var(--line)); box-shadow: 0 18px 44px -18px color-mix(in oklab, var(--green) 26%, transparent), var(--shadow-card); }
.xdoor-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.xdoor-bar .tl { display: inline-flex; gap: 5px; }
.xdoor-bar .tl i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.xdoor-bar .url { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; color: var(--text-3); border: 1px solid var(--line); border-radius: 7px; padding: 4px 12px; margin: 0 auto; }
.xdoor-bar .url svg { width: 11px; height: 11px; }
.xdoor-bar .lv { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.xdoor-bar .lv i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: xdoor-live 2s ease-in-out infinite; }
@keyframes xdoor-live { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.xdoor-body { display: grid; grid-template-columns: 172px 1fr; min-height: 264px; position: relative; }
/* real sidebar labels (static copy of explore's nav; keep in sync) */
.xdoor-side { display: flex; flex-direction: column; gap: 3px; padding: 14px 10px; border-right: 1px solid var(--line); background: var(--surface-2); }
.xdoor-side .xn { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 600; color: var(--text-2); padding: 6px 10px; border-radius: 8px; white-space: nowrap; }
.xdoor-side .xn svg { width: 13px; height: 13px; flex: none; opacity: .75; }
.xdoor-side .xn.on { background: var(--green-wash); color: var(--accent-text); }
.xdoor-side .xn.on svg { opacity: 1; }
.xdoor-side .xn.dim { opacity: .55; }
.xdoor-main { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 84px; }
/* KPI tiles — same values as explore's overview panel */
.xdoor-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.xdoor-kpis .xk { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 10px 12px; }
.xdoor-kpis .xk.warn { border-color: color-mix(in oklab, #E89A2C 45%, var(--line)); background: color-mix(in oklab, #E89A2C 7%, var(--surface)); }
.xdoor-kpis .xk-l { font-family: var(--mono); font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.xdoor-kpis .xk-v { font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.xdoor-kpis .xk-v em { font-style: normal; font-family: var(--mono); font-size: 10px; font-weight: 600; margin-left: 2px; }
.xdoor-kpis .xk-v em.up { color: var(--accent-text); }
.xdoor-kpis .xk-v em.wn { color: #B26B0F; }
/* live feed — same entries as explore's overview panel */
.xdoor-feed { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); overflow: hidden; }
.xdoor-feed .xf-h { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); padding: 9px 13px 7px; }
.xdoor-feed .lv-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: xdoor-live 2s ease-in-out infinite; }
.xdoor-feed .xf { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-2); padding: 6px 13px; border-top: 1px solid color-mix(in oklab, var(--line) 55%, transparent); }
.xdoor-feed .xf b { color: var(--text); font-weight: 600; }
.xdoor-feed .xf .tx { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xdoor-feed .xf .tm { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); flex: none; }
.xdoor-feed .d { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.xdoor-feed .d.g { background: var(--green); }
.xdoor-feed .d.a { background: #E89A2C; }
.xdoor-feed .d.b { background: #0078D4; }
/* veil: bottom-anchored so the console content above stays readable */
.xdoor-veil { position: absolute; inset: auto 0 0 0; height: 52%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 9px; padding-bottom: 18px; background: linear-gradient(180deg, transparent 0%, color-mix(in oklab, var(--bg) 72%, transparent) 38%, var(--bg) 88%); }
.xdoor-btn { pointer-events: none; }
.xdoor:hover .xdoor-btn { filter: brightness(1.06); }
.xdoor-sub { font-family: var(--mono); font-size: 11px; color: var(--text-2); letter-spacing: .02em; text-align: center; padding: 0 14px; }
@media (max-width: 640px) {
  .xdoor-body { grid-template-columns: 1fr; min-height: 236px; }
  .xdoor-side { display: none; }
  .xdoor-bar .lv { display: none; }
  .xdoor-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* ── hero motion + blur-attract (request 29, site/hero-live.js) ──
   .xdoor-attract is added by JS only (non-JS / reduced-motion
   visitors keep the crisp static doorway). Console content gets a
   subtle blur so the CTA pops; hover/focus lifts it so the demo is
   readable the moment the visitor engages. The veil button also
   gains a soft breathing glow. REVERT: delete this block +
   site/hero-live.js + its script tag in index.html. */
.xdoor-attract .xdoor-body > .xdoor-side,
.xdoor-attract .xdoor-body > .xdoor-main { filter: blur(1.6px) saturate(.96); transition: filter .45s ease; }
.xdoor-attract:hover .xdoor-body > .xdoor-side,
.xdoor-attract:hover .xdoor-body > .xdoor-main,
.xdoor-attract:focus-visible .xdoor-body > .xdoor-side,
.xdoor-attract:focus-visible .xdoor-body > .xdoor-main { filter: blur(0) saturate(1); }
.xdoor-attract .xdoor-btn { animation: xdoor-breathe 2.6s ease-in-out infinite; }
.xdoor-attract:hover .xdoor-btn { animation: none; }
@keyframes xdoor-breathe {
  0%, 100% { box-shadow: 0 12px 30px -8px var(--glow); transform: scale(1); }
  50% { box-shadow: 0 16px 44px -6px var(--glow); transform: scale(1.035); }
}
/* feed row slide-in when hero-live.js rotates an entry to the top */
.xdoor-feed .xf.xf-in { animation: xf-in .5s ease; }
@keyframes xf-in {
  0% { opacity: 0; transform: translateY(-7px); background: var(--green-wash); }
  60% { background: var(--green-wash); }
  100% { opacity: 1; transform: none; background: transparent; }
}
/* KPI tile pulse (values never change — just a soft highlight) */
.xdoor-kpis .xk.xk-pulse { animation: xk-pulse 1.1s ease; }
@keyframes xk-pulse {
  0% { border-color: color-mix(in oklab, var(--green) 55%, var(--line)); box-shadow: 0 0 0 3px var(--green-wash); }
  100% { border-color: var(--line); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .xdoor-attract .xdoor-body > .xdoor-side,
  .xdoor-attract .xdoor-body > .xdoor-main { filter: none; }
  .xdoor-attract .xdoor-btn, .xdoor-feed .xf.xf-in, .xdoor-kpis .xk.xk-pulse { animation: none; }
}

/* margin-top added 2026-08-24 (Rune, mobile QC): cards sat flush against the
   section lede — small breathing room between "See it work" head and grid */
.moments { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 980px; margin: 32px auto 0; }
.moment { display: flex; flex-direction: column; gap: 12px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); text-decoration: none; color: inherit; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.moment:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--green) 40%, var(--line)); box-shadow: var(--shadow-card); }
.moment .m-ic { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--green-wash); color: var(--accent-text); }
.moment .m-ic svg { width: 17px; height: 17px; }
.moment .m-tx { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.moment .m-t { font-size: 16.5px; font-weight: 700; letter-spacing: -0.015em; color: var(--text); }
.moment .m-d { font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.moment .m-go { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--accent-text); }
.moment .m-go svg { width: 13px; height: 13px; transition: transform .16s ease; }
.moment:hover .m-go svg { transform: translateX(3px); }
.moments-all { text-align: center; margin-top: 22px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
/* tour entry (request 21): green-washed twin of the full-console link */
.moments-all .xtour-link { color: var(--accent-text); background: var(--green-wash); border-color: color-mix(in oklab, var(--green) 30%, var(--line)); }
.moments-all .xtour-link:hover { border-color: var(--green); }
@media (max-width: 700px) { .moments { grid-template-columns: 1fr; } }