/* ==========================================================================
   numrow marketing site — visual system (v2)
   Tokens inherit from the product DS. The page is built as stacked "sheets":
   each chapter sits on its own tint with a rounded top edge, like paper laid
   over paper. One navy chapter per page is the anchor moment.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Public+Sans:wght@400;500;600&display=swap');

:root {
  --brand-cyan: #22D3EE;
  --brand-navy: #122033;
  --blue-50: #ECFDFF; --blue-100: #CFF8FE; --blue-200: #A2EFFB; --blue-300: #63E3F5;
  --blue-500: #06A9C7; --blue-600: #0B7E99; --blue-700: #0E6076; --blue-800: #123F54;
  --gray-50: #F6F7F8; --gray-100: #EFF1F3; --gray-200: #E1E4E8; --gray-300: #C6CBD1;
  --gray-400: #9AA1AA; --gray-500: #6E7681; --gray-600: #565E68; --gray-700: #3F454D;
  --amber-500: #E8930C; --amber-100: #FCF0DB;
  --red-500: #D64545; --red-100: #FBE7E7;
  --green-500: #1E9E6A; --green-100: #E2F5EC;

  /* Sheet tints (marketing only) */
  --wash-cyan: #E6FAFD;
  --wash-sky: #E4EEFB;
  --wash-sand: #FBF1D6;
  --wash-mint: #DFF4EC;
  --ink: #122033;
  --ink-2: #1A2D45;
  --ink-line: rgba(255,255,255,.1);

  --page: #FAFAFA;
  --text: var(--brand-navy);
  --body: #4C5563;
  --muted: var(--gray-500);

  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-ui: 'Public Sans', system-ui, sans-serif;

  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-sheet: 48px; --r-pill: 999px;
  --shadow-card: 0 1px 2px rgba(18,32,51,.05), 0 8px 24px rgba(18,32,51,.07);
  --shadow-float: 0 2px 4px rgba(18,32,51,.05), 0 18px 48px rgba(18,32,51,.12);

  --container: 1180px;
  --nav-h: 72px;
  --ease: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--page); color: var(--body); font: 400 17px/1.6 var(--font-ui); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: var(--blue-600); text-decoration: none; }
a:hover { color: var(--brand-navy); }
:focus-visible { outline: 3px solid rgba(34,211,238,.6); outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }

/* ---------- Type ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text); margin: 0; letter-spacing: -.02em; line-height: 1.08; }
h1 { font-size: clamp(40px, 5vw, 62px); font-weight: 800; }
h2 { font-size: clamp(30px, 3.3vw, 42px); font-weight: 800; }
h3 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
h4 { font-size: 16px; font-weight: 700; letter-spacing: 0; line-height: 1.3; }
p { margin: 0; }
.lede { font-size: 19px; line-height: 1.55; max-width: 34em; }
.cy { color: var(--brand-cyan); }
.small { font-size: 14px; color: var(--muted); }
.center { text-align: center; }
.center .lede { margin-inline: auto; }
.measure { max-width: 36em; }

/* ---------- Layout ---------- */
.container { width: min(var(--container), 100% - 48px); margin-inline: auto; position: relative; z-index: 1; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.split.wide-right { grid-template-columns: 5fr 7fr; }
.split.wide-left { grid-template-columns: 7fr 5fr; }
.split > .copy { max-width: 30em; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
@media (max-width: 900px) {
  .split, .split.wide-right, .split.wide-left { grid-template-columns: 1fr; gap: 40px; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } body { font-size: 16px; } }

/* ---------- Sheets (chapters) ----------
   A .sec is one chapter. Tinted sheets get a rounded top edge and pull up
   over the previous chapter so the page reads as stacked paper. */
.sec { position: relative; padding: 112px 0; }
.sec.tight { padding: 72px 0; }
.sheet { border-radius: var(--r-sheet) var(--r-sheet) 0 0; margin-top: -40px; padding-top: 128px; }
.sheet.tight { padding-top: 96px; }
.sec.paper { background: var(--page); }
.sec.wash { background: var(--wash-cyan); }
.sec.sky  { background: var(--wash-sky); }
.sec.sand { background: var(--wash-sand); }
.sec.mint { background: var(--wash-mint); }
.sec.ink  { background: var(--ink); color: rgba(255,255,255,.78); overflow: hidden; }
.sec.ink h1, .sec.ink h2, .sec.ink h3, .sec.ink h4 { color: #fff; }
.sec.ink .lede { color: rgba(255,255,255,.78); }
.sec.ink .small { color: rgba(255,255,255,.55); }
.sec.ink a:not(.btn) { color: var(--brand-cyan); }
.mark-ghost { position: absolute; pointer-events: none; opacity: .06; }
.mark-ghost path, .mark-ghost rect { fill: #fff; }
.sec.ink .mark-ghost { right: -6%; top: -10%; width: 46%; max-width: 620px; }
@media (max-width: 900px) { .sec { padding: 80px 0; } .sheet { padding-top: 96px; border-radius: 32px 32px 0 0; } .mark-ghost { display: none; } }

/* Hero: fills the first screen so the next sheet peeks at the fold */
.hero { min-height: calc(100vh - var(--nav-h)); display: flex; align-items: center; padding: 48px 0 120px; overflow: hidden; }
@media (max-width: 900px) { .hero { min-height: 0; padding: 40px 0 96px; } }

/* Hero blobs — only behind hero product visuals */
.blobs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.blob { position: absolute; border-radius: 48% 52% 42% 58% / 55% 40% 60% 45%; filter: blur(3px); }
.blob.cyan { background: var(--blue-100); } .blob.mint { background: var(--wash-mint); } .blob.sky { background: var(--wash-sky); } .blob.sand { background: var(--wash-sand); }

/* Chapter label — numbered because each page is a sequence */
.chapter { display: inline-flex; align-items: center; gap: 10px; font: 600 14px var(--font-display); color: var(--blue-600); margin-bottom: 20px; }
.chapter::before { content: attr(data-n); width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; font-size: 12px; }
.sec.ink .chapter { color: var(--brand-cyan); }

/* ---------- Buttons & links ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: var(--r-pill); font: 600 15px var(--font-display); border: 1.5px solid transparent; cursor: pointer; white-space: nowrap; transition: background .18s var(--ease), color .18s, box-shadow .18s, border-color .18s; }
.btn.primary { background: var(--brand-cyan); color: var(--brand-navy); }
.btn.primary:hover { background: var(--blue-300); box-shadow: 0 6px 18px rgba(34,211,238,.35); }
.btn.secondary { background: #fff; color: var(--brand-navy); border-color: var(--gray-200); }
.btn.secondary:hover { border-color: var(--brand-navy); }
.btn.ink { background: var(--brand-navy); color: #fff; }
.btn.ink:hover { background: var(--blue-800); }
.btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.btn.ghost:hover { border-color: #fff; }
.btn.sm { padding: 9px 16px; font-size: 14px; }
.btn.block { width: 100%; justify-content: center; }
.btn svg, .link svg { width: 16px; height: 16px; flex: none; }
.link { font: 600 15px var(--font-display); color: var(--blue-600); display: inline-flex; gap: 6px; align-items: center; }
.link:hover { color: var(--brand-navy); }
.sec.ink .link { color: var(--brand-cyan); } .sec.ink .link:hover { color: #fff; }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(250,250,250,.86); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(18,32,51,.06); }
.nav .container { display: flex; align-items: center; gap: 28px; height: var(--nav-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 800 22px var(--font-display); color: var(--brand-navy); letter-spacing: -.03em; }
.brand svg { width: 28px; height: 28px; }
.brand.light { color: #fff; }
.nav-links { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links > li { position: relative; }
.nav-links a, .nav-links button { display: inline-flex; align-items: center; gap: 5px; padding: 9px 12px; border-radius: 8px; font: 500 15px var(--font-ui); color: var(--brand-navy); background: none; border: 0; cursor: pointer; }
.nav-links a:hover, .nav-links button:hover, .nav-links a[aria-current="page"], .nav-links button[aria-expanded="true"] { background: var(--wash-cyan); color: var(--blue-700); }
.nav-links svg { width: 12px; height: 12px; opacity: .6; }
.nav-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.nav-actions .signin { font: 500 15px var(--font-ui); color: var(--brand-navy); padding: 9px 12px; }
.nav-toggle { display: none; margin-left: auto; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--brand-navy); }
.nav-toggle svg { width: 22px; height: 22px; }

/* Product panel */
.panel { position: absolute; left: 0; top: calc(100% + 10px); width: 860px; background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-float); border: 1px solid var(--gray-100); padding: 20px; display: none; grid-template-columns: 2fr 1fr; gap: 20px; }
.panel[data-open="true"] { display: grid; }
.panel h5 { margin: 0 0 8px 12px; font: 600 12px var(--font-ui); color: var(--gray-500); }
.panel .items { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.panel .item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; color: var(--brand-navy); }
.panel .item:hover { background: var(--gray-50); }
.panel .item .icon-tile { width: 36px; height: 36px; border-radius: 10px; } .panel .item .icon-tile svg { width: 18px; height: 18px; }
.panel .item b { display: block; font: 600 14px var(--font-display); white-space: nowrap; }
.panel .item span { font-size: 13px; color: var(--gray-500); line-height: 1.4; }
.panel .aside { background: var(--wash-cyan); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.panel .aside a { display: block; padding: 8px 10px; border-radius: 10px; color: var(--brand-navy); font: 600 14px var(--font-display); }
.panel .aside a small { display: block; font: 400 13px var(--font-ui); color: var(--gray-600); }
.panel .aside a:hover { background: rgba(255,255,255,.7); }
.panel .foot { grid-column: 1 / -1; border-top: 1px solid var(--gray-100); padding-top: 14px; display: flex; gap: 20px; }
@media (max-width: 900px) {
  .nav-links, .nav-actions { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav.open .nav-links, .nav.open .nav-actions { display: flex; }
  .nav.open .container { flex-wrap: wrap; height: auto; padding-block: 12px 20px; }
  .nav.open .nav-links { flex-direction: column; width: 100%; order: 3; align-items: stretch; }
  .nav.open .nav-actions { width: 100%; order: 4; margin-left: 0; }
  .panel { position: static; width: auto; grid-template-columns: 1fr; box-shadow: none; border: 0; padding: 8px 0 0; }
}

/* ---------- Cards & tiles ---------- */
.card { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: 28px; }
.card.flat { box-shadow: none; border: 1.5px solid var(--gray-200); }
.card.tint-cyan { background: var(--wash-cyan); box-shadow: none; }
.card.tint-sky { background: var(--wash-sky); box-shadow: none; }
.card.tint-sand { background: var(--wash-sand); box-shadow: none; }
.card.tint-mint { background: var(--wash-mint); box-shadow: none; }
.card.featured { border: 2px solid var(--brand-cyan); box-shadow: var(--shadow-float); position: relative; }
.card > h3 + p, .card > h4 + p { margin-top: 8px; }
.sec.ink .card { background: var(--ink-2); box-shadow: none; border: 1px solid var(--ink-line); color: rgba(255,255,255,.75); }
.sec.ink .card h3, .sec.ink .card h4, .sec.ink .card b { color: #fff; }

.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; color: var(--brand-navy); font-size: 15px; }
.checks li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: var(--brand-cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23122033' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/11px no-repeat; }
.sec.ink .checks li { color: rgba(255,255,255,.85); }

.pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-pill); background: #fff; border: 1.5px solid var(--gray-200); font: 500 14px var(--font-ui); color: var(--brand-navy); }
.pill.on { background: var(--brand-navy); color: #fff; border-color: var(--brand-navy); }
.pill .ic { width: 22px; height: 22px; border-radius: 6px; background: var(--wash-cyan); display: grid; place-items: center; flex: none; }
.pill .ic svg { width: 13px; height: 13px; stroke: var(--blue-600); }
.pill > svg { width: 14px; height: 14px; }
.chip { display: inline-flex; padding: 8px 16px; border-radius: var(--r-pill); font: 600 14px var(--font-display); background: #fff; border: 1.5px solid var(--gray-200); color: var(--brand-navy); cursor: pointer; }
.chip[aria-pressed="true"], .chip.on { background: var(--brand-navy); color: #fff; border-color: var(--brand-navy); }

.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--r-pill); font: 600 11.5px var(--font-ui); white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.matched { background: var(--green-100); color: var(--green-500); }
.badge.ready { background: var(--blue-50); color: var(--blue-600); }
.badge.review { background: var(--amber-100); color: #B26A00; }
.badge.processed { background: var(--gray-100); color: var(--gray-600); }
.badge.blocked { background: var(--red-100); color: var(--red-500); }
.badge.native { background: var(--wash-cyan); color: var(--blue-700); }
.badge.plain::before { display: none; }

.icon-tile { width: 44px; height: 44px; border-radius: 12px; background: var(--wash-cyan); display: grid; place-items: center; flex: none; }
.icon-tile svg { width: 22px; height: 22px; stroke: var(--blue-600); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon-tile.sky { background: var(--wash-sky); } .icon-tile.sky svg { stroke: #2F6FBF; }
.icon-tile.sand { background: var(--wash-sand); } .icon-tile.sand svg { stroke: #B26A00; }
.icon-tile.mint { background: var(--wash-mint); } .icon-tile.mint svg { stroke: var(--green-500); }
.icon-tile.lg { width: 56px; height: 56px; border-radius: 16px; } .icon-tile.lg svg { width: 26px; height: 26px; }
.sec.ink .icon-tile { background: rgba(34,211,238,.12); } .sec.ink .icon-tile svg { stroke: var(--brand-cyan); }

/* Pain / outcome trio — no boxes, a rule and the copy carry it */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.trio > div { border-top: 2px solid var(--brand-navy); padding-top: 24px; }
.trio h3 { margin-top: 16px; }
.trio p { margin-top: 10px; font-size: 16px; }
.sec.ink .trio > div { border-color: rgba(255,255,255,.2); }
@media (max-width: 900px) { .trio { grid-template-columns: 1fr; gap: 28px; } }

/* Alternating feature blocks (sub-pages) */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; padding: 64px 0; border-top: 1px solid rgba(18,32,51,.08); }
.feature:first-of-type { border-top: 0; padding-top: 0; }
.feature .n { font: 800 44px/1 var(--font-display); color: var(--blue-300); letter-spacing: -.04em; margin-bottom: 12px; }
.feature.flip > .copy { order: 2; }
@media (max-width: 900px) { .feature, .feature.flip { grid-template-columns: 1fr; gap: 32px; } .feature.flip > .copy { order: 0; } }

/* Channels (integrations) */
.channel { display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start; padding: 28px; }
.channel h3 { margin-bottom: 8px; }
.channel .meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.channel .meta span { font: 500 12.5px var(--font-ui); padding: 4px 10px; border-radius: var(--r-pill); background: var(--gray-100); color: var(--gray-700); }
.sec.ink .channel .meta span { background: rgba(255,255,255,.08); color: rgba(255,255,255,.8); }
code.inline { font: 500 13px ui-monospace, Menlo, monospace; background: var(--gray-100); color: var(--brand-navy); padding: 2px 6px; border-radius: 6px; }
.sec.ink code.inline { background: rgba(255,255,255,.1); color: #fff; }
.code { background: #0C1626; color: #D8E1EC; border-radius: 16px; padding: 20px 22px; font: 400 13px/1.6 ui-monospace, Menlo, monospace; overflow: auto; white-space: pre; margin: 0; }
.code .k { color: var(--brand-cyan); } .code .s { color: #FFD479; } .code .c { color: #6E7A8A; }

/* FAQ */
.faq { border-top: 1px solid var(--gray-200); }
.faq details { border-bottom: 1px solid var(--gray-200); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 0; display: flex; justify-content: space-between; gap: 16px; font: 600 16px var(--font-display); color: var(--brand-navy); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 500; color: var(--blue-600); transition: transform .18s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 18px; font-size: 15px; max-width: 60ch; }
.sec.ink .faq, .sec.ink .faq details { border-color: var(--ink-line); }
.sec.ink .faq summary { color: #fff; } .sec.ink .faq summary::after { color: var(--brand-cyan); }

/* Forms */
.field { display: grid; gap: 6px; }
.field label { font: 600 13px var(--font-ui); color: var(--brand-navy); }
.field input, .field select, .field textarea { font: 400 15px var(--font-ui); padding: 12px 14px; border: 1.5px solid var(--gray-200); border-radius: 12px; background: #fff; color: var(--brand-navy); width: 100%; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand-cyan); outline: none; box-shadow: 0 0 0 4px rgba(34,211,238,.2); }
.search { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: var(--r-pill); background: #fff; border: 1.5px solid var(--gray-200); box-shadow: var(--shadow-card); }
.search svg { width: 18px; height: 18px; stroke: var(--gray-400); fill: none; stroke-width: 2; }
.search input { border: 0; outline: 0; flex: 1; font: 400 16px var(--font-ui); color: var(--brand-navy); background: transparent; }
.steps { display: flex; gap: 8px; }
.steps .step { display: inline-flex; gap: 8px; align-items: center; padding: 6px 12px; border-radius: var(--r-pill); font: 600 13px var(--font-ui); color: var(--gray-500); background: var(--gray-100); }
.steps .step.on { background: var(--brand-navy); color: #fff; }
.steps .step.done { background: var(--wash-mint); color: var(--green-500); }
.steps .step svg { width: 14px; height: 14px; }

/* ---------- Product mocks ---------- */
.mock { font-family: var(--font-ui); color: var(--brand-navy); font-size: 12.5px; }
.mock-app { background: #fff; border-radius: 18px; box-shadow: var(--shadow-float); overflow: hidden; }
.mock-app .bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--gray-100); font: 800 14px var(--font-display); }
.mock-app .bar svg { width: 18px; height: 18px; }
.mock-app .bar .dots { display: flex; gap: 5px; margin-left: auto; }
.mock-app .bar .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--gray-200); }
.mock-app .body { display: grid; grid-template-columns: 116px 1fr; }
.mock-app .side { padding: 14px 8px; border-right: 1px solid var(--gray-100); display: grid; gap: 4px; align-content: start; font-size: 12px; }
.mock-app .side span { padding: 7px 10px; border-radius: 8px; color: var(--gray-600); }
.mock-app .side span.on { background: var(--wash-cyan); color: var(--blue-700); font-weight: 600; }
.mock-app .main { padding: 14px 16px; overflow: hidden; }
.mock-app .main .ttl { display: flex; align-items: center; gap: 8px; font: 700 14px var(--font-display); margin-bottom: 10px; }
.mock-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.mock-tabs span { padding: 4px 10px; border-radius: var(--r-pill); font-size: 11.5px; background: var(--gray-100); color: var(--gray-600); white-space: nowrap; }
.mock-tabs span.on { background: var(--brand-navy); color: #fff; }
.mock-table { width: 100%; border-collapse: collapse; }
.mock-table th { text-align: left; font: 600 11px var(--font-ui); color: var(--gray-400); padding: 4px 6px; border-bottom: 1px solid var(--gray-100); white-space: nowrap; }
.mock-table td { padding: 8px 6px; border-bottom: 1px solid var(--gray-100); white-space: nowrap; }
.mock-table td.num { font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; }
.mock-table tr:last-child td { border-bottom: 0; }
.mock-card { background: #fff; border-radius: 14px; box-shadow: var(--shadow-float); padding: 12px 14px; display: flex; gap: 10px; align-items: center; }
.mock-card .icon-tile { width: 34px; height: 34px; border-radius: 9px; } .mock-card .icon-tile svg { width: 17px; height: 17px; }
.mock-card b { display: block; font: 700 13px var(--font-display); white-space: nowrap; }
.mock-card small { color: var(--gray-500); font-size: 11px; display: block; white-space: nowrap; }
.mock-panel { background: #fff; border-radius: 16px; box-shadow: var(--shadow-float); padding: 18px 20px; }
.mock-panel h4 { font-size: 15px; margin-bottom: 12px; }
.mock-kv { display: grid; grid-template-columns: 1fr auto; row-gap: 10px; column-gap: 20px; font-size: 13px; margin: 0; }
.mock-kv dt { color: var(--gray-500); white-space: nowrap; } .mock-kv dd { margin: 0; font-weight: 600; text-align: right; white-space: nowrap; }
.mock-list { display: grid; gap: 4px; }
.mock-list .r { display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center; padding: 8px 6px; border-radius: 10px; font-size: 12.5px; }
.mock-list .r b { display: block; font-size: 13px; white-space: nowrap; } .mock-list .r small { color: var(--gray-500); display: block; font-size: 11px; }
.mock-list .r .amt { font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; }
.dot { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; }
.dot svg { width: 12px; height: 12px; fill: none; stroke-width: 2.2; stroke-linecap: round; }
.dot.rd { background: var(--red-100); } .dot.rd svg { stroke: var(--red-500); }
.dot.cy { background: var(--wash-cyan); } .dot.cy svg { stroke: var(--blue-600); }
.dot.am { background: var(--amber-100); } .dot.am svg { stroke: #B26A00; }
.dot.gn { background: var(--green-100); } .dot.gn svg { stroke: var(--green-500); }
.sec.ink .mock-panel, .sec.ink .mock-card, .sec.ink .mock-app { box-shadow: 0 24px 60px rgba(0,0,0,.35); }

.donut { --a: 87; --b: 9; width: 96px; height: 96px; border-radius: 50%; flex: none; background: conic-gradient(var(--blue-500) 0 calc(var(--a) * 1%), var(--amber-500) 0 calc((var(--a) + var(--b)) * 1%), var(--red-500) 0); display: grid; place-items: center; }
.donut::after { content: attr(data-count); width: 66px; height: 66px; border-radius: 50%; background: #fff; display: grid; place-items: center; font: 800 20px var(--font-display); color: var(--brand-navy); }
.legend { display: grid; gap: 8px; font-size: 13px; }
.legend div { display: grid; grid-template-columns: 10px 1fr auto auto; gap: 10px; align-items: center; }
.legend i { width: 10px; height: 10px; border-radius: 50%; }
.legend .pct { color: var(--gray-500); } .legend .n { font-weight: 700; font-family: var(--font-display); }
.people { display: grid; gap: 6px; }
.people .p { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 8px; border-radius: 12px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 700 12px var(--font-display); color: #fff; }
.people b { display: block; font-size: 13px; } .people small { color: var(--gray-500); font-size: 11px; }
.tabs-mini { display: flex; gap: 20px; border-bottom: 1px solid var(--gray-100); margin-bottom: 10px; font-size: 13px; }
.tabs-mini span { padding: 8px 0; color: var(--gray-500); }
.tabs-mini span.on { color: var(--brand-navy); font-weight: 600; border-bottom: 2px solid var(--brand-cyan); }

/* Workflow track — six stages on one line, on ink */
.track { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.track::before { content: ""; position: absolute; left: 8%; right: 8%; top: 28px; height: 2px; background: linear-gradient(90deg, transparent, var(--brand-cyan) 15%, var(--brand-cyan) 85%, transparent); opacity: .5; }
.track .st { position: relative; text-align: center; }
.track .st .icon-tile { width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 18px; background: var(--ink); border: 2px solid var(--brand-cyan); }
.track .st .icon-tile svg { stroke: var(--brand-cyan); width: 24px; height: 24px; }
.track .st b { display: block; font: 700 17px var(--font-display); color: #fff; margin-bottom: 6px; }
.track .st span { font-size: 14px; color: rgba(255,255,255,.6); display: block; line-height: 1.4; }
@media (max-width: 900px) { .track { grid-template-columns: repeat(2, 1fr); gap: 28px; } .track::before { display: none; } }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.stats b { display: block; font: 800 48px/1 var(--font-display); color: var(--brand-navy); letter-spacing: -.03em; }
.stats span { display: block; margin-top: 8px; font-size: 15px; color: var(--muted); }
.sec.ink .stats b { color: #fff; } .sec.ink .stats span { color: rgba(255,255,255,.6); }

.compare { width: 100%; border-collapse: collapse; font-size: 15px; }
.compare th, .compare td { padding: 14px 12px; border-bottom: 1px solid var(--gray-200); text-align: center; }
.compare th:first-child, .compare td:first-child { text-align: left; color: var(--brand-navy); }
.compare th { font: 700 15px var(--font-display); color: var(--brand-navy); }
.compare td .ok { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--wash-cyan); }
.compare td .ok svg { width: 12px; height: 12px; stroke: var(--blue-600); fill: none; stroke-width: 3; }
.compare td .no { color: var(--gray-300); }
.cal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cal .d, .cal .t { padding: 10px; border-radius: 10px; border: 1.5px solid var(--gray-200); text-align: center; font: 600 13px var(--font-ui); color: var(--brand-navy); background: #fff; }
.cal .d { background: var(--gray-50); font-size: 12px; }
.cal .t.on { border-color: var(--brand-cyan); background: var(--wash-cyan); color: var(--blue-700); }

/* Help */
.topics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.topics a { display: flex; gap: 14px; align-items: center; padding: 18px 20px; background: #fff; border-radius: 16px; box-shadow: var(--shadow-card); color: var(--brand-navy); }
.topics a b { display: block; font: 700 15px var(--font-display); } .topics a span { font-size: 13px; color: var(--gray-500); }
.list-links a { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--gray-200); font: 600 16px var(--font-display); color: var(--brand-navy); }
.list-links a svg { width: 16px; height: 16px; }
@media (max-width: 900px) { .topics { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .topics { grid-template-columns: 1fr; } }

/* ---------- Closing chapter: CTA + footer on one ink sheet ---------- */
.closing { background: var(--ink); color: rgba(255,255,255,.7); border-radius: var(--r-sheet) var(--r-sheet) 0 0; margin-top: -40px; padding: 128px 0 40px; position: relative; overflow: hidden; }
.closing .mark-ghost { left: -8%; bottom: -30%; width: 48%; max-width: 680px; }
.closing .cta { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; padding-bottom: 96px; border-bottom: 1px solid var(--ink-line); }
.closing .cta h2 { color: #fff; font-size: clamp(32px, 3.6vw, 48px); }
.closing .cta p { font-size: 17px; color: rgba(255,255,255,.7); max-width: 32em; }
.closing .cta .row { justify-content: flex-end; }
.closing .cols { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px; padding-top: 56px; }
.closing h4 { color: #fff; font-size: 14px; margin-bottom: 14px; }
.closing ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.closing a:not(.btn) { color: rgba(255,255,255,.65); font-size: 14px; } .closing a:not(.btn):hover { color: #fff; }
.closing .legal { margin-top: 56px; display: flex; justify-content: space-between; gap: 16px; font-size: 13px; color: rgba(255,255,255,.45); flex-wrap: wrap; }
@media (max-width: 900px) { .closing { padding-top: 96px; border-radius: 32px 32px 0 0; } .closing .cta { grid-template-columns: 1fr; } .closing .cta .row { justify-content: flex-start; } .closing .cols { grid-template-columns: 1fr 1fr; } }

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

/* Spacing utilities — last so they win */
.mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; } .mt-12 { margin-top: 48px; } .mt-16 { margin-top: 64px; }
.mb-6 { margin-bottom: 24px; } .mb-8 { margin-bottom: 32px; } .mb-12 { margin-bottom: 48px; } .mb-16 { margin-bottom: 64px; }

/* Hero stage: absolutely positioned product cards on desktop, a single static mock on mobile */
@media (max-width: 900px) {
  .stage { min-height: 0 !important; }
  .stage > div { position: static !important; }
  .stage > div:has(.mock-card) { display: none; }
  .hero .blobs { display: none; }
}

/* ==========================================================================
   v3 additions — brand mark on a navy tile, two-tone wordmark, platform mock
   ========================================================================== */
.brand { gap: 10px; }
.brand .tile { width: 30px; height: 30px; flex: none; }
.brand .wm { display: inline-flex; letter-spacing: -.03em; }
.brand .wm .num { color: var(--brand-cyan); }
.brand .wm .row { color: var(--brand-navy); }
.brand.light .wm .row { color: #fff; }

/* Platform mock — mirrors app.numrow.com's Payable workspace at reduced scale */
.app { display: grid; grid-template-columns: 138px 1fr; background: #F3F5F7; border-radius: 16px; box-shadow: var(--shadow-float); overflow: hidden; font-family: var(--font-ui); color: var(--brand-navy); font-size: 11px; line-height: 1.35; }
.app .sb { background: var(--ink); color: rgba(255,255,255,.85); padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; }
.app .sb .logo { display: flex; gap: 8px; align-items: center; padding: 2px 6px 12px; }
.app .sb .logo svg { width: 24px; height: 24px; flex: none; }
.app .sb .logo b { font: 800 14px/1 var(--font-display); letter-spacing: -.03em; color: #fff; display: block; }
.app .sb .logo b i { font-style: normal; color: var(--brand-cyan); }
.app .sb .logo small { display: block; font-size: 7.5px; color: rgba(255,255,255,.55); margin-top: 2px; white-space: nowrap; }
.app .sb .lbl { font-size: 9px; color: rgba(255,255,255,.45); padding: 8px 8px 4px; }
.app .sb .it { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; color: rgba(255,255,255,.85); white-space: nowrap; overflow: hidden; }
.app .sb .it svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.75; flex: none; }
.app .sb .it.on { background: rgba(255,255,255,.08); color: var(--brand-cyan); }
.app .sb .it::after { content: "›"; margin-left: auto; color: rgba(255,255,255,.35); }
.app .sb .grow { flex: 1; }
.app .sb .user { display: flex; gap: 8px; align-items: center; padding: 8px; border-top: 1px solid rgba(255,255,255,.08); margin-top: 6px; }
.app .sb .user .avatar { width: 22px; height: 22px; font-size: 8px; background: rgba(255,255,255,.12); }
.app .sb .user b { display: block; font-size: 10px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 84px; } .app .sb .user small { font-size: 8px; color: rgba(255,255,255,.5); }
.app .mainc { display: grid; gap: 8px; padding: 8px; align-content: start; min-width: 0; }
.app .top { background: #fff; border-radius: 10px; padding: 8px 12px; display: flex; align-items: center; gap: 10px; }
.app .top .crumb { color: var(--gray-600); }
.app .top .ingest { margin-left: auto; background: var(--blue-600); color: #fff; font-weight: 600; padding: 5px 10px; border-radius: 999px; display: inline-flex; gap: 5px; align-items: center; }
.app .top .ingest svg { width: 11px; height: 11px; stroke: #fff; fill: none; stroke-width: 2; }
.app .kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.app .kpi { min-width: 0; }
.app .kpi { background: #fff; border-radius: 10px; padding: 9px 10px 8px; position: relative; }
.app .kpi span { font-weight: 600; font-size: 9.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 14px; }
.app .kpi b { display: block; font: 800 20px/1.1 var(--font-display); margin-top: 4px; }
.app .kpi small { display: block; color: var(--gray-500); font-size: 9px; margin-top: 2px; }
.app .kpi svg { position: absolute; right: 9px; top: 9px; width: 12px; height: 12px; fill: none; stroke-width: 1.75; }
.app .kpi.am b { color: var(--amber-500); } .app .kpi.am svg { stroke: var(--amber-500); }
.app .kpi.cy b { color: var(--blue-600); } .app .kpi.cy svg { stroke: var(--blue-600); }
.app .kpi.rd b { color: var(--red-500); } .app .kpi.rd svg { stroke: var(--red-500); }
.app .kpi.gn b { color: var(--green-500); } .app .kpi.gn svg { stroke: var(--green-500); }
.app .sheet2 { background: #fff; border-radius: 10px; padding: 8px 12px; overflow: hidden; }
.app .tabs { display: flex; gap: 4px; }
.app .tabs span { padding: 5px 9px; border-radius: 8px; color: var(--gray-600); }
.app .tabs span.on { background: var(--wash-cyan); color: var(--blue-600); font-weight: 600; }
.app .subtabs { display: flex; gap: 12px; padding: 6px 4px 2px; color: var(--gray-600); border-top: 1px solid var(--gray-100); margin-top: 6px; font-size: 10px; white-space: nowrap; overflow: hidden; }
.app .subtabs span.on { color: var(--brand-navy); font-weight: 600; }
.app .toolbar { display: flex; gap: 6px; align-items: center; }
.app .toolbar .tb { border: 1px solid var(--gray-200); border-radius: 999px; padding: 4px 9px; color: var(--gray-700); }
.app .toolbar .srch { margin-left: auto; border: 1px solid var(--gray-200); border-radius: 999px; padding: 4px 9px; color: var(--gray-400); min-width: 110px; }
.app table { width: 100%; border-collapse: collapse; }
.app th { text-align: left; font-size: 9.5px; font-weight: 600; color: var(--gray-500); padding: 6px 6px; border-bottom: 1px solid var(--gray-100); white-space: nowrap; }
.app td { padding: 7px 6px; border-bottom: 1px solid var(--gray-100); white-space: nowrap; }
.app td.num { font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; }
.app tr:last-child td { border-bottom: 0; }
.app .badge { font-size: 9.5px; padding: 2px 7px; }
.app .foot { color: var(--gray-500); font-size: 9.5px; padding: 6px 4px 0; }
.app.compact { grid-template-columns: 1fr; }
.app.compact .sb { display: none; }
@media (max-width: 600px) { .app { grid-template-columns: 1fr; } .app .sb { display: none; } .app .kpis { grid-template-columns: repeat(3, 1fr); } .app .kpi:nth-child(n+4) { display: none; } }

/* Tenant switcher overlay (accountant hero) */
.switcher { background: #fff; border-radius: 12px; box-shadow: var(--shadow-float); padding: 8px; width: 290px; font-family: var(--font-ui); font-size: 12px; color: var(--brand-navy); }
.switcher .hd { font-size: 10px; color: var(--gray-500); padding: 4px 8px 6px; }
.switcher .c { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; }
.switcher .c.on { background: var(--wash-cyan); }
.switcher .c b { font-weight: 600; flex: 1; white-space: nowrap; }
.switcher .c .avatar { width: 20px; height: 20px; font-size: 8px; }

/* ==========================================================================
   Legal documents (.prose)
   One column of running text, sized for reading rather than scanning. Used by
   the three legal pages and nowhere else — a marketing chapter is a sheet, a
   legal document is a document.
   ========================================================================== */
.prose { max-width: 42em; margin-inline: auto; }
.prose h2 { font-size: 26px; margin-top: 56px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 19px; margin-top: 32px; }
.prose p, .prose li { font-size: 16px; line-height: 1.7; color: var(--body); }
.prose p { margin-top: 14px; }
.prose ul, .prose ol { margin-top: 14px; padding-left: 22px; display: grid; gap: 8px; }
.prose a { color: var(--blue-600); text-decoration: underline; text-underline-offset: 3px; }
.prose table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--gray-200); vertical-align: top; }
.prose th { font: 600 13px var(--font-ui); color: var(--gray-600); }
/* A term the user still has to supply. Deliberately loud: a placeholder that
   blends in is a placeholder that ships. */
.todo { background: var(--wash-sand); border-bottom: 1px solid var(--amber-500); padding: 0 4px; font-weight: 600; color: #7A4E00; }
.doc-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--muted); }
/* The banner every legal page carries until it has been through review. */
.draft-note { border: 1.5px solid var(--amber-500); background: var(--wash-sand); border-radius: var(--r-md); padding: 16px 20px; font-size: 15px; color: #7A4E00; }

/* ==========================================================================
   Status chip
   The footer's "System status" link and the help page's status panel both ask
   the platform API whether it is serving traffic. Hidden until answered, so a
   blocked or slow request shows nothing rather than a wrong colour.
   ========================================================================== */
.status-chip { display: inline-flex; align-items: center; gap: 6px; font: 500 12px var(--font-ui); }
.status-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gray-400); flex: none; }
.status-chip[data-state="up"] .dot { background: var(--green-500); }
.status-chip[data-state="down"] .dot { background: var(--red-500); }
.status-chip[data-state="unknown"] .dot { background: var(--gray-400); }
.status-panel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.status-panel .status-chip { font-size: 14px; }
.status-panel .status-chip .dot { width: 10px; height: 10px; }