/* SalesFlow shared brand system — editorial direction, matching SalesFlow Landing.html */
:root {
  --bg: rgb(248 244 238);
  --bg2: rgb(242 236 228);
  --ink: rgb(20 20 19);
  --ink2: rgb(64 61 56);
  --muted: rgb(118 111 102);
  --signal: rgb(184 134 11);
  --signal2: rgb(150 108 8);
  --line: rgb(26 23 20 / 0.12);
  --line2: rgb(26 23 20 / 0.06);
  --ok: rgb(70 130 70);
  --warn: rgb(200 140 50);
  --err: rgb(180 60 50);
  --display-font: 'Geist','Inter Tight',sans-serif;
  --body-font: 'Inter Tight',sans-serif;
}

html, body {
  background: var(--bg); color: var(--ink); font-family: var(--body-font);
  -webkit-font-smoothing: antialiased; margin: 0;
  font-feature-settings: "ss01","cv11";
}
body { overflow-x: hidden; position: relative; }
body::before {
  content:''; position: fixed; inset:0; pointer-events:none; z-index:0;
  background-image: radial-gradient(rgba(20,20,19,0.035) 1px, transparent 1px);
  background-size: 3px 3px; mix-blend-mode: multiply; opacity: 0.6;
}
* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--signal); color: var(--bg); }

.container-xl { max-width: 1240px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 1; }
.container-md { max-width: 880px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 1; }
@media (max-width: 560px) { .container-xl, .container-md { padding: 0 20px; } }

.eyebrow { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.h1 { font-family: var(--display-font); font-size: clamp(48px, 7vw, 96px); letter-spacing: -0.04em; line-height: 0.96; font-weight: 600; margin: 0; }
.h2 { font-family: var(--display-font); font-size: clamp(34px, 4.5vw, 56px); letter-spacing: -0.035em; line-height: 1.02; font-weight: 600; margin: 0; }
.h3 { font-family: var(--display-font); font-size: 24px; letter-spacing: -0.025em; line-height: 1.2; font-weight: 600; margin: 0; }
.t-signal { color: var(--signal); }
.t-italic { font-style: normal; color: var(--signal); font-weight: 500; }
.lead { font-size: 19px; line-height: 1.5; color: var(--ink2); max-width: 620px; }

.btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; font-family: inherit; font-weight: 500; font-size: 14px; cursor: pointer; border: 1px solid transparent; transition: all 0.15s; white-space: nowrap; }
.btn-lg { padding: 15px 26px; font-size: 15px; }
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { background: rgb(36 32 28); }
.btn-signal { background: var(--signal); color: white; }
.btn-signal:hover { background: var(--signal2); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--bg2); }

.page-hero { padding: 64px 0 32px; position: relative; z-index: 1; }
.page-hero .eyebrow { margin-bottom: 18px; }
.page-hero h1 { font-family: var(--display-font); font-size: clamp(44px, 6vw, 80px); letter-spacing: -0.035em; line-height: 1.02; font-weight: 600; margin: 0 0 24px; max-width: 16ch; }
.page-hero h1 .acc {  color: var(--signal); font-weight: 500; }

/* top nav */
.top-nav { border-bottom: 1px solid var(--line); background: rgb(248 244 238 / 0.9); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 50; }
.top-nav .inner { max-width: 1240px; margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand-mark { font-family: var(--display-font); font-size: 20px; letter-spacing: -0.025em; font-weight: 700; color: var(--ink); display: inline-flex; align-items: baseline; }
.brand-mark .dot { display: inline-block; width: 6px; height: 6px; background: var(--signal); border-radius: 50%; margin-left: 3px; transform: translateY(-1px); }
.nav-links { display: flex; gap: 28px; }
.nav-links a { font-size: 14px; color: var(--ink2); }
.nav-links a.is-current { color: var(--ink); font-weight: 500; }
.nav-links a:hover { color: var(--signal); }
.nav-right { display: flex; gap: 10px; align-items: center; }
@media (max-width: 760px) { .nav-links { display: none; } }

/* footer */
.footer { background: var(--ink); color: var(--bg); padding: 72px 0 40px; position: relative; z-index: 1; margin-top: 96px; }
.footer .brand-mark { color: var(--bg); }
.footer-grid { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgb(255 255 255 / 0.08); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer h4 { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--signal); margin: 0 0 18px; font-weight: 500; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer ul a { color: rgb(210 200 185); font-size: 13.5px; }
.footer ul a:hover { color: var(--bg); }
.footer-bottom { padding-top: 28px; display: flex; justify-content: space-between; gap: 20px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.12em; color: rgb(160 150 140); text-transform: uppercase; flex-wrap: wrap; }

.acc { color: var(--signal); font-style: normal; font-weight: inherit; }