/* The cogentive.co company page: the web app's colors and type, light and dark following the visitor's
   system setting. */

:root {
  --bg: #f3f3ef; --paper: #fafaf7; --ink: #101310; --muted: #616a63; --line: #d8dcd6;
  --gateway: #9d2ebd; --marketplace: #2257d6; --weave: #c0306b;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0c0f0d; --paper: #131714; --ink: #f5f7f3; --muted: #a3ada6; --line: #313932; --gateway: #d27bed; --marketplace: #7ea6ff; --weave: #f07aa8; }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.6 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
/* The Fabric mark, as a mask over the ink color so it follows light and dark (like the app's menu bar). */
.mark { display: inline-block; width: calc(32px * 1.649); height: 32px; background: currentColor; -webkit-mask: url('fabric-mark.svg') center / contain no-repeat; mask: url('fabric-mark.svg') center / contain no-repeat; }
.mark-large { width: calc(72px * 1.649); height: 72px; }

.site-header, .site-footer, main { width: min(1040px, calc(100% - 40px)); margin: 0 auto; }
.site-header { display: flex; align-items: center; padding: 22px 0; }
.wordmark { display: inline-flex; align-items: center; gap: 12px; font: 400 24px/1 Georgia, "Times New Roman", serif; letter-spacing: -.01em; }

.intro { display: grid; justify-items: center; gap: 20px; padding: clamp(56px, 12vh, 120px) 0 clamp(48px, 9vh, 96px); text-align: center; }
.intro h1 { margin: 0; font: 300 clamp(32px, 5vw, 52px)/1.1 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: -.03em; }
.intro p { max-width: 58ch; margin: 0; color: var(--muted); font-size: 18px; }

h2 { margin: 0 0 20px; color: var(--muted); font: 500 12px/1 ui-monospace, Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; }

.products { padding: 32px 0 56px; border-top: 1px solid var(--line); }
/* Cogent Fabric leads, full width, with its three parts in a row beneath it. */
.product-lead { display: grid; gap: 10px; margin-bottom: 14px; padding: 28px; border: 1px solid var(--line); border-top: 3px solid var(--ink); border-radius: 14px; background: color-mix(in srgb, var(--bg) 55%, var(--paper)); }
.product-lead h3 { margin: 0; font: 400 28px/1.15 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: -.03em; }
.product-lead p { max-width: 70ch; margin: 0; color: var(--muted); }
.products ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.products li { --c: var(--ink); display: grid; align-content: start; gap: 8px; padding: 22px 24px; border: 1px solid var(--line); border-top: 3px solid var(--c); border-radius: 14px; background: color-mix(in srgb, var(--bg) 55%, var(--paper)); }
.products h4 { margin: 0; font: 500 19px/1.2 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: -.02em; }
.products li p { margin: 0; color: var(--muted); font-size: 15px; }

.contact { padding: 32px 0 56px; border-top: 1px solid var(--line); }
.contact dl { display: grid; gap: 12px; margin: 0; }
.contact dl > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; }
.contact dt { color: var(--muted); font-size: 14px; }
.contact dd { margin: 0; }

.site-footer { padding: 24px 0 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.site-footer p { margin: 0; }

/* Privacy and Terms pages. */
.legal { max-width: 70ch; padding: 48px 0 72px; }
.legal h1 { margin: 0 0 8px; font: 300 40px/1.1 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: -.03em; }
.legal h2 { margin-top: 36px; }
.legal .table-wrap { overflow-x: auto; margin: 16px 0; }
.legal table { width: 100%; border-collapse: collapse; font-size: 14px; }
.legal th, .legal td { padding: 8px 10px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal blockquote { margin: 16px 0; padding: 12px 16px; border-radius: 8px; background: color-mix(in srgb, var(--ink) 5%, transparent); }

@media (max-width: 640px) {
  .products ul { grid-template-columns: minmax(0, 1fr); }
  .contact dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}