/* nvisin — shared styles (colour-coded verticals) */
:root {
  --bg:        #FFFDF8;
  --bg-2:      #F7F3EA;
  --surface:   #FFFFFF;
  --surface-2: #F5F1E8;
  --surface-3: #ECE6D9;
  --border:    rgba(23, 19, 15, 0.09);
  --border-2:  rgba(23, 19, 15, 0.16);
  --border-3:  rgba(23, 19, 15, 0.26);
  --text:      #17130F;
  --text-2:    #5B5249;
  --text-3:    #8F857A;

  /* brand / accounting blue */
  --accent:      #2F6BFF;
  --accent-ink:  #1F4FD1;
  --accent-dim:  rgba(47, 107, 255, 0.10);
  --accent-2:    rgba(47, 107, 255, 0.22);

  /* one colour per vertical: strong + tint */
  --v-accounting: #2F6BFF; --v-accounting-t: #C9D9FF;
  --v-ecommerce:  #F29D0C; --v-ecommerce-t:  #FFE3AE;
  --v-agencies:   #F0507A; --v-agencies-t:   #FFD3DE;
  --v-services:   #8A5CF6; --v-services-t:   #E2D6FF;
  --v-realestate: #13A872; --v-realestate-t: #C2ECD9;

  --green:     #13A872;  --green-dim: rgba(19, 168, 114, 0.13);
  --red:       #E0443C;  --red-dim:   rgba(224, 68, 60, 0.10);
  --amber:     #B86E00;  --amber-dim: rgba(242, 157, 12, 0.16);

  --r:    12px;
  --r-lg: 22px;
  --block: 'Funnel Display', system-ui, sans-serif;
  --sans:  'Funnel Sans', system-ui, sans-serif;
  --mono:  'Funnel Sans', system-ui, sans-serif;
  --shadow: 0 1px 2px rgba(23,19,15,.04), 0 10px 30px rgba(23,19,15,.07);
  --wrap: 1200px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 17px/1.55 var(--sans);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--v-ecommerce-t); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
@media (max-width: 640px) { .wrap { padding: 0 16px; } }

/* ---------- Type ---------- */
.eyebrow {
  font: 600 14px/1 var(--sans); color: var(--text-2);
  display: inline-flex; gap: 8px; align-items: center;
}
.eyebrow::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--eb, var(--accent)); }
h1, h2, h3 { margin: 0; }
.display { font: 700 clamp(44px, 7vw, 92px)/0.94 var(--block); letter-spacing: -0.035em; }
.h2 { font: 700 clamp(34px, 4.6vw, 58px)/0.98 var(--block); letter-spacing: -0.03em; }
.h3 { font: 600 21px/1.2 var(--block); letter-spacing: -0.01em; }
.lede { font-size: clamp(18px, 1.7vw, 21px); color: var(--text-2); max-width: 58ch; }
.muted { color: var(--text-2); }
.mono { font-family: var(--sans); font-variant-numeric: tabular-nums; }

/* the tilted word chip used in headlines */
.hl, .chip-word {
  display: inline-block; padding: 0 .2em .08em; margin: 0 .02em; border-radius: .22em;
  background: var(--accent); color: #fff; transform: rotate(-2deg);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 22px; border-radius: 999px;
  font: 600 16px var(--sans); text-decoration: none; cursor: pointer;
  border: 1.5px solid var(--border-2); background: var(--surface); transition: transform .15s ease, background .15s, border-color .15s;
  white-space: nowrap;
}
.btn:hover { border-color: var(--text); transform: translateY(-1px); }
.btn-primary { background: var(--text); color: #fff; border-color: var(--text); }
.btn-primary:hover { background: #2E2721; }
.btn-accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-accent:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { border-color: transparent; background: var(--surface-2); }
.btn-sm { height: 40px; padding: 0 16px; font-size: 15px; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* ---------- Logo: four squares, one per vertical ---------- */
.logo { font: 700 25px/1 var(--block); text-decoration: none; letter-spacing: -0.04em; display: flex; align-items: center; gap: 9px; }
.logo-mark {
  width: 22px; height: 22px; flex: none;
  background:
    linear-gradient(var(--v-accounting), var(--v-accounting)) 0 0 / 10px 10px no-repeat,
    linear-gradient(var(--v-ecommerce), var(--v-ecommerce)) 12px 0 / 10px 10px no-repeat,
    linear-gradient(var(--v-agencies), var(--v-agencies)) 0 12px / 10px 10px no-repeat,
    linear-gradient(var(--v-realestate), var(--v-realestate)) 12px 12px / 10px 10px no-repeat;
  border-radius: 3px;
}

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.5) blur(14px); -webkit-backdrop-filter: saturate(1.5) blur(14px);
}
.nav .wrap { display: flex; align-items: center; gap: 30px; height: 72px; }
.nav-links { display: flex; gap: 26px; margin-left: 10px; }
.nav-links a { text-decoration: none; color: var(--text-2); font-size: 16px; font-weight: 500; }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--text); }
.nav-cta { margin-left: auto; display: flex; gap: 6px; }
.nav-toggle { display: none; margin-left: auto; background: none; border: 0; padding: 8px; cursor: pointer; }
@media (max-width: 860px) {
  .nav-links, .nav-cta .btn-ghost { display: none; }
  .nav.open .nav-links {
    display: flex; flex-direction: column; position: absolute; top: 72px; left: 0; right: 0;
    background: var(--bg); padding: 16px; border-bottom: 1px solid var(--border); margin: 0; gap: 14px;
  }
  .nav-toggle { display: block; margin-left: 0; }
}

/* ---------- Sections ---------- */
section { padding: 100px 0; }
@media (max-width: 640px) { section { padding: 64px 0; } }
.section-head { display: grid; gap: 16px; margin-bottom: 44px; max-width: 780px; }
.rule { border-top: 0; }

/* ---------- Cards / grid ---------- */
.card { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-lg); padding: 26px; }
.grid { display: grid; gap: 14px; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 960px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px;
  border-radius: 999px; font: 600 13px/1 var(--sans);
  background: var(--surface-2); color: var(--text-2);
}
.pill-live { background: rgba(255,255,255,.7); color: var(--text); }
.pill-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.pill-soon { background: rgba(255,255,255,.55); color: var(--text-2); }
.pill-accent { background: var(--accent-dim); color: var(--accent-ink); }

/* ---------- Footer ---------- */
footer { padding: 56px 0 44px; color: var(--text-2); font-size: 15px; background: var(--bg-2); border-radius: 32px 32px 0 0; }
footer .wrap { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 32px; }
footer h4 { margin: 0 0 12px; font: 600 14px/1 var(--sans); color: var(--text); }
footer a { display: block; text-decoration: none; padding: 4px 0; }
footer a:hover { color: var(--text); }
@media (max-width: 720px) { footer .wrap { grid-template-columns: 1fr 1fr; } footer .wrap > :first-child { grid-column: 1 / -1; } }

/* ---------- Forms ---------- */
.field { display: grid; gap: 7px; }
.field label, .label { font-weight: 600; font-size: 15px; }
.field .hint { font-size: 14px; color: var(--text-2); }
.input, select.input, textarea.input {
  height: 48px; padding: 0 14px; border-radius: var(--r); border: 1.5px solid var(--border-2);
  background: var(--surface); width: 100%; transition: border-color .15s, box-shadow .15s;
}
textarea.input { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-dim); }
.input.invalid { border-color: var(--red); box-shadow: 0 0 0 4px var(--red-dim); }
.input-group { display: flex; align-items: stretch; }
.input-group .input { border-radius: var(--r) 0 0 var(--r); }
.input-group .addon {
  display: flex; align-items: center; padding: 0 14px; border: 1.5px solid var(--border-2); border-left: 0;
  border-radius: 0 var(--r) var(--r) 0; background: var(--surface-2); font: 500 15px var(--sans); color: var(--text-2); white-space: nowrap;
}

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } .hl, .chip-word { transform: none; } }

[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Legal / prose pages ---------- */
.prose { max-width: 760px; }
.prose h1 { font: 700 clamp(40px, 5vw, 60px)/1 var(--block); letter-spacing: -0.03em; margin-bottom: 10px; }
.prose h2 { font: 600 24px/1.2 var(--block); margin: 40px 0 10px; letter-spacing: -0.01em; }
.prose h3 { font: 600 18px/1.3 var(--sans); margin: 24px 0 6px; }
.prose p, .prose li { color: #3B342D; }
.prose ul { padding-left: 22px; }
.prose li { margin: 6px 0; }
.prose .meta { color: var(--text-2); font-size: 15px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 12px 0; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border-2); vertical-align: top; }
.prose th { font-weight: 600; background: var(--surface-2); }
.todo { background: #FFF1A8; padding: 0 4px; border-radius: 4px; font-weight: 600; }