/* vcdealflow.app landing site. Same tokens and type as the app. */
@font-face { font-family:"IBM Plex Sans"; font-weight:400; font-display:swap; src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-weight:500; font-display:swap; src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-weight:600; font-display:swap; src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-weight:400; font-display:swap; src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-weight:500; font-display:swap; src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); }

:root {
  --bg:#f6f6f4; --surface:#fff; --ink:#17191e; --text-2:#4a4f58; --muted:#6a6f78; --faint:#8a8f98;
  --line:#e3e4e0; --soft:#fafaf8; --input:#d6d7d2;
  --accent:oklch(0.48 0.15 262); --accent-hover:oklch(0.40 0.15 262); --accent-tint:oklch(0.95 0.03 262); --accent-nav:oklch(0.68 0.15 262);
  --good:oklch(0.42 0.10 155); --bad:oklch(0.50 0.17 28);
  --header:#17191e; --nav-idle:#b6bac2;
  --r-card:12px; --r-ctl:8px;
  --sh-frame:0 1px 2px rgba(20,22,28,.06), 0 18px 50px rgba(20,22,28,.14);
  --sans:"IBM Plex Sans", system-ui, sans-serif; --mono:"IBM Plex Mono", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
body { margin:0; font:400 16px/1.6 var(--sans); color:var(--ink); background:var(--bg); overflow-x:hidden; }
a { color:var(--accent); text-decoration:none; }
a:hover { color:var(--accent-hover); text-decoration:underline; }
h1, h2, h3 { font-weight:600; margin:0; line-height:1.2; text-wrap:balance; }
p { margin:0 0 12px; }
img { max-width:100%; height:auto; display:block; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.skip-link { position:absolute; left:8px; top:-48px; z-index:60; background:#fff; padding:6px 10px; border-radius:var(--r-ctl); }
.skip-link:focus { top:8px; }

section[id] { scroll-margin-top:56px; }
.wrap { max-width:1160px; margin:0 auto; padding:0 16px; }
@media (min-width:720px) { .wrap { padding:0 28px; } }
.narrow { max-width:620px; padding-top:72px; padding-bottom:72px; }

/* ── buttons ── */
.btn { display:inline-block; padding:11px 20px; border-radius:var(--r-ctl); background:var(--accent); color:#fff; font:500 15px/1.2 var(--sans); border:1px solid transparent; cursor:pointer; }
.btn:hover { background:var(--accent-hover); color:#fff; text-decoration:none; }
.btn-ghost { background:transparent; color:var(--ink); border-color:var(--input); }
.btn-ghost:hover { background:var(--surface); color:var(--ink); }
.btn-sm { padding:7px 14px; font-size:14px; }
.btn-wide { width:100%; }
.btn[disabled] { opacity:.6; cursor:progress; }

/* ── header ── */
.top { position:sticky; top:0; z-index:30; background:var(--header); color:#fff; }
.top-row { height:56px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.wordmark { font:600 16px var(--mono); letter-spacing:.04em; color:#fff; }
.wordmark:hover { color:#fff; text-decoration:none; }
.wordmark span { color:var(--accent-nav); font-weight:400; }
.wordmark.on-light { color:var(--ink); display:inline-block; margin-bottom:40px; }
.wordmark.small { font-size:14px; color:var(--ink); }
.top-nav { display:flex; align-items:center; gap:4px; }
.top-nav a:not(.btn) { padding:6px 10px; font-size:14px; font-weight:500; color:var(--nav-idle); border-radius:7px; }
.top-nav a:not(.btn):hover { color:#fff; text-decoration:none; }
@media (max-width:640px) { .top-nav a:not(.btn) { display:none; } }

/* ── hero ── */
.hero { padding:56px 0 64px; background:linear-gradient(180deg, var(--surface), var(--bg)); border-bottom:1px solid var(--line); }
.hero-grid { display:grid; gap:40px; align-items:center; }
@media (min-width:980px) { .hero { padding:88px 0 96px; } .hero-grid { grid-template-columns:5fr 7fr; gap:48px; } }
.eyebrow { font:500 13px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; }
.hero h1 { font-size:clamp(32px, 5vw, 48px); letter-spacing:-.015em; margin-bottom:20px; }
.hero h1 em { font-style:normal; color:var(--text-2); }
.lede { font-size:18px; color:var(--text-2); max-width:36em; }
.cta-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }

/* ── browser frame around screenshots ── */
.frame { margin:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; box-shadow:var(--sh-frame); }
.frame-bar { display:flex; align-items:center; gap:6px; height:30px; padding:0 12px; background:var(--soft); border-bottom:1px solid var(--line); }
.frame-bar i { width:10px; height:10px; border-radius:50%; background:var(--input); }
.frame-bar span { margin-left:12px; font:400 12px var(--mono); color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── sections ── */
.band { padding:72px 0; }
.band.dark { background:var(--header); color:#e8e9ec; }
.band.dark .section-title { color:#fff; }
.section-title { font-size:clamp(26px, 3.4vw, 34px); letter-spacing:-.01em; margin-bottom:10px; }
.section-lede { color:var(--muted); font-size:17px; margin-bottom:36px; max-width:40em; }

.features { display:grid; gap:16px; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); }
.feature { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:22px 22px 10px; }
.feature h3 { font-size:16.5px; margin-bottom:8px; }
.feature p { color:var(--text-2); font-size:15px; }

.tour { padding:72px 0; background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.tour-item { display:grid; gap:24px; align-items:center; margin-top:56px; }
@media (min-width:900px) {
  .tour-item { grid-template-columns:4fr 8fr; gap:48px; }
  .tour-item.flip { grid-template-columns:8fr 4fr; }
  .tour-item.flip .tour-copy { order:2; }
}
.step { font:500 13px var(--mono); color:var(--accent); letter-spacing:.04em; margin-bottom:8px; }
.tour-copy h3 { font-size:22px; margin-bottom:10px; }
.tour-copy p:not(.step) { color:var(--text-2); }

.principles { display:grid; gap:28px; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); margin-top:28px; }
.principles div { border-top:2px solid var(--accent-nav); padding-top:14px; }
.principles strong { display:block; font-size:17px; color:#fff; margin-bottom:6px; }
.principles span { color:var(--nav-idle); font-size:15px; }

/* ── contact form ── */
.contact { padding:80px 0; }
.contact-grid { display:grid; gap:36px; }
@media (min-width:900px) { .contact-grid { grid-template-columns:5fr 6fr; gap:64px; align-items:start; } }
.contact-copy p { color:var(--text-2); font-size:17px; }
.ticks { list-style:none; padding:0; margin:20px 0 0; }
.ticks li { position:relative; padding-left:26px; margin-bottom:10px; color:var(--text-2); }
.ticks li::before { content:""; position:absolute; left:2px; top:7px; width:11px; height:6px; border-left:2px solid var(--good); border-bottom:2px solid var(--good); transform:rotate(-45deg); }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:24px; }
@media (min-width:720px) { .card { padding:32px; } }
.field { margin-bottom:16px; min-width:0; }
.field-row { display:grid; gap:0 16px; }
@media (min-width:560px) { .field-row { grid-template-columns:1fr 1fr; } }
label { display:block; font-size:14px; font-weight:500; margin-bottom:6px; }
.opt { color:var(--faint); font-weight:400; }
input, select, textarea { width:100%; font:inherit; font-size:15px; color:var(--ink); background:var(--surface); border:1px solid var(--input); border-radius:var(--r-ctl); padding:9px 12px; }
textarea { resize:vertical; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--accent); outline-offset:-1px; border-color:transparent; }
[aria-invalid="true"] { border-color:var(--bad); }
.err { color:var(--bad); font-size:13.5px; margin:4px 0 0; min-height:0; }
.err:empty { display:none; }
.err-form { margin-bottom:12px; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.fine { color:var(--faint); font-size:13px; margin:12px 0 0; }
.sent { text-align:center; padding:24px 0; }
.sent h3 { font-size:20px; margin-bottom:8px; }

/* ── footer, plain pages ── */
.foot { border-top:1px solid var(--line); padding:28px 0; color:var(--muted); font-size:14px; }
.foot-row { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; }
body.plain h1 { font-size:32px; margin-bottom:14px; }
body.plain p { color:var(--text-2); font-size:17px; }
.errors { color:var(--bad); padding-left:20px; margin:0 0 24px; }