/* ════════════════════════════════════════════════════════════════════════
   site-pages.css — the pieces the marketing pages share.
   2026-09-27: the marketing pages were rebuilt in the landing's design
   language, the same one the /compare pages use (grep the pages for
   site-pages.css to see which). The tokens (--k-*) and the tactile .k-btn come from
   khio-ui.css, which every page that links this links first; this file adds
   the page furniture on top: the eyebrow, the display title and lead, the
   white card and its lit "ours" twin, the check list and the closing band.
   Each page keeps its own layout in its own <style>.

   Dark mode follows html[data-theme="dark"], as khio-ui.css and the site bar
   do; a page that is light only never sets it.
   ════════════════════════════════════════════════════════════════════════ */

:root {
    --sp-ours: rgba(10, 132, 255, .05);
    --sp-ours-line: rgba(10, 132, 255, .28);
    --sp-card-shadow: 0 0 0 1px var(--k-line), 0 16px 36px -30px rgba(15, 23, 42, .3);
    --sp-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
html[data-theme="dark"] {
    --sp-ours: rgba(64, 156, 255, .08);
    --sp-ours-line: rgba(64, 156, 255, .4);
    --sp-card-shadow: 0 0 0 1px var(--k-line), 0 16px 36px -30px rgba(0, 0, 0, .6);
}

body { margin: 0; background: var(--k-paper); color: var(--k-ink); font-family: var(--k-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ── Type ─────────────────────────────────────────────────────────────── */
.sp-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; color: var(--k-ink-3); }
.sp-title { margin: 14px 0 0; font-family: var(--k-display); font-weight: 500; font-size: clamp(42px, 7vw, 68px); line-height: 1; letter-spacing: -.028em; text-wrap: balance; }
.sp-h2 { margin: 0; font-family: var(--k-display); font-weight: 500; font-size: clamp(30px, 4vw, 40px); line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; }
.sp-lead { margin: 18px 0 0; max-width: 60ch; font-size: 18px; line-height: 1.55; color: var(--k-ink-2); text-wrap: pretty; }

/* ── Cards ────────────────────────────────────────────────────────────── */
.sp-card { position: relative; background: var(--k-surface); border-radius: 20px; padding: 24px; box-shadow: var(--sp-card-shadow); }
.sp-card.is-ours { background: linear-gradient(180deg, var(--sp-ours), transparent 60%), var(--k-surface); box-shadow: 0 0 0 1.5px var(--sp-ours-line), 0 18px 40px -28px rgba(10, 132, 255, .35); }
/* The small blue tag that marks the lit card ("Most popular"). */
.sp-tag { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: var(--k-blue); background: rgba(10, 132, 255, .1); }

/* A list with a neat check before each line: ink by default, blue inside the
   lit card. */
.sp-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; font-size: 15px; line-height: 1.5; color: var(--k-ink-2); }
.sp-checks li { position: relative; padding-left: 28px; }
.sp-checks li::before { content: ''; position: absolute; left: 0; top: .18em; width: 18px; height: 18px; background: var(--k-ink); opacity: .72; -webkit-mask: var(--sp-check) center / 15px no-repeat; mask: var(--sp-check) center / 15px no-repeat; }
.is-ours .sp-checks li::before { background: var(--k-blue); opacity: 1; }

/* An icon in a small paper tile, for feature grids. */
.sp-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--k-paper); box-shadow: inset 0 0 0 1px var(--k-line); color: var(--k-ink-2); }
.sp-icon svg { width: 21px; height: 21px; }

/* ── The closing band: a line in the display face and the buttons ─────── */
.sp-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; padding: 40px 24px; border-radius: 26px; background: var(--k-surface); box-shadow: 0 0 0 1px var(--k-line); text-align: center; }
.sp-band > p { flex-basis: 100%; margin: 0 0 6px; font-family: var(--k-display); font-size: clamp(26px, 3.4vw, 32px); font-weight: 500; line-height: 1.1; letter-spacing: -.015em; text-wrap: balance; }
.sp-band .k-btn { height: 46px; padding: 0 22px; border-radius: 14px; font-size: 16px; }

@media (prefers-reduced-motion: reduce) { .k-btn { transition: none; } }