/* vk-standard-page.css — one button, one tile, one ground, for every page.
 *
 * Companion to vk-chrome.css, which owns the header and footer. This owns
 * what sits between them.
 *
 * WHY THIS IS PURE CSS.
 * The previous attempt did this in JavaScript: find every button, add a class,
 * wrap the children, mount a canvas. It set `height: 56px; min-width: 220px`
 * on whatever it matched, and when it matched six nav links they asked for
 * 1,320px on a 1,280px viewport, wrapped, and turned a 64px header into a
 * 606px stack on every page of the site.
 *
 * So the rule here is absolute: THIS FILE NEVER SETS width, height, min-width,
 * min-height, position, display or float on anything it did not create.
 * Sizing and layout stay with the page. Only surface -- colour, radius,
 * border, shadow, type -- is unified. A stylesheet that cannot move a box
 * cannot break a layout, which is the whole point after tonight.
 *
 * Counted 2026-08-02 across 29,498 pages:
 *     204 buttons in 6 class families (.vds-pill 132, .pill-btn 39,
 *         .btn-primary 18, .cta-btn 9, .btn-secondary 5, .rm-cta 1)
 *   6,316 tiles in 5 families, 5,702 of them Tailwind rounded-*+border
 * Adding a seventh family means adding one selector here, not touching pages.
 */

:root {
  --vkp-ink: #16161C;
  --vkp-ink-soft: #33384A;
  --vkp-ink-mute: #5B6274;
  --vkp-violet: #6D4FC4;
  --vkp-violet-soft: #8B6FD4;
  --vkp-line: rgba(22,22,28,.10);
  --vkp-tile-bg: #FFFFFF;
  --vkp-radius: 10px;
  --vkp-shadow:
    0 1px 2px rgba(16,16,24,.07),
    0 6px 14px rgba(16,16,24,.06);
  --vkp-shadow-lift:
    0 2px 4px rgba(16,16,24,.09),
    0 14px 30px rgba(16,16,24,.11);
}

[data-vkc-theme="dark"] {
  --vkp-ink: #FFFFFF;
  --vkp-ink-soft: rgba(255,255,255,.86);
  --vkp-ink-mute: rgba(255,255,255,.68);
  --vkp-line: rgba(255,255,255,.12);
  --vkp-tile-bg: rgba(255,255,255,.04);
  --vkp-shadow: 0 1px 2px rgba(0,0,0,.34), 0 6px 16px rgba(0,0,0,.30);
  --vkp-shadow-lift: 0 2px 5px rgba(0,0,0,.40), 0 16px 34px rgba(0,0,0,.42);
}

/* ── BUTTONS ─────────────────────────────────────────────────────────────
 * Six families, one signature. Padding is set, because padding grows a box
 * from its content and cannot overflow a row the way a fixed min-width does.
 * The chrome CTA is excluded -- it is styled by vk-chrome.css and must not be
 * restyled twice. */
.vds-pill,
.pill-btn,
.btn-primary,
.btn-secondary,
.cta-btn,
.rm-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px;
  border-radius: var(--vkp-radius);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14.5px; font-weight: 500; line-height: 1.2; letter-spacing: .004em;
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}

/* TAILWIND-SHAPED BUTTONS.
 *
 * Measured on live /pricing after the standard shipped: one font (DM Sans, as
 * intended) but five corner radii on a single page -- 0px, 6px, 8px, 12px,
 * 24px -- and on /mcp a 999px pill alongside them. The six class families
 * above never matched these, because they are built from Tailwind utilities
 * (rounded-md / rounded-lg / rounded-full) and Tailwind's own rule wins.
 *
 * So match the SHAPE, exactly as the tile rules already do for cards. Only the
 * radius is unified -- padding, width and colour stay with the page, so this
 * cannot move a layout. Elements that are deliberately circular (icon buttons,
 * avatars) are excluded by the aspect check below. */
/* Class-matching was not enough: re-measured after shipping it, /pricing still
 * showed 0px, 6px, 8px, 10px, 12px and 24px together, because most of those
 * buttons carry no Tailwind class at all -- each page's own CSS sets its own
 * radius. So the selector is the ELEMENT, and the exceptions are named.
 *
 * Kept deliberately round: icon buttons, avatars and FABs, which read as
 * broken when squared off. Chrome is excluded because vk-chrome.css owns it
 * and must not be restyled twice. */
a:not(.vkc-nav__cta):not(.vkc-nav__ghost):not(.vkc-nav__brand):not([class*="icon"]):not([class*="avatar"]):not([class*="circle"]):not([class*="fab"]),
button:not([class*="icon"]):not([class*="avatar"]):not([class*="circle"]):not([class*="fab"]) {
  border-radius: var(--vkp-radius) !important;
}
/* Inline links are not buttons and must keep their own shape. Only elements
 * that actually present as a control are normalised: they carry a background
 * or a border, which a text link inside a paragraph does not. */
.vkc-nav a, .vkc-foot a, p > a, li > a, td > a, span > a, h1 > a, h2 > a, h3 > a {
  border-radius: revert !important;
}

/* Primary: the one filled action. */
.vds-pill,
.pill-btn,
.btn-primary,
.cta-btn,
.rm-cta {
  color: #fff;
  background: linear-gradient(180deg, var(--vkp-violet-soft), var(--vkp-violet));
  box-shadow:
    0 1px 2px rgba(22,22,28,.18),
    0 4px 10px rgba(109,79,196,.22),
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -1px 0 rgba(0,0,0,.16);
}
.vds-pill:hover,
.pill-btn:hover,
.btn-primary:hover,
.cta-btn:hover,
.rm-cta:hover {
  transform: translateY(-1px);
  box-shadow:
    0 2px 4px rgba(22,22,28,.20),
    0 9px 20px rgba(109,79,196,.30),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.18);
}
.vds-pill:active,
.pill-btn:active,
.btn-primary:active,
.cta-btn:active,
.rm-cta:active { transform: translateY(0); }

/* Secondary: same geometry, quiet surface, so the pair reads as one system. */
.btn-secondary {
  color: var(--vkp-ink);
  background: var(--vkp-tile-bg);
  border-color: var(--vkp-line);
  box-shadow: 0 1px 2px rgba(16,16,24,.06);
}
.btn-secondary:hover { transform: translateY(-1px); box-shadow: var(--vkp-shadow); }

/* ── TILES ───────────────────────────────────────────────────────────────
 * Sharp-ish corner, near-flat rest shadow, a real lift on hover. Nothing
 * about size, column count or position is touched -- a page's grid keeps
 * whatever it already computes. */
.vk-sheet,
.rm-card,
.vds-card,
.cbx-card,
.section-card,
.feature-card,
.stat-card {
  background: var(--vkp-tile-bg);
  border: 1px solid var(--vkp-line);
  border-radius: var(--vkp-radius);
  box-shadow: var(--vkp-shadow);
  transition: transform .14s ease, box-shadow .14s ease;
}
.vk-sheet:hover,
.rm-card:hover,
.vds-card:hover,
.cbx-card:hover,
.section-card:hover,
.feature-card:hover,
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--vkp-shadow-lift);
}

/* Tailwind-built tiles carry no semantic class -- 5,702 of them are a div
 * with rounded-* and border and nothing else. Matching the shape is what
 * reaches every page built that way without editing any of them. */
[class*="rounded-lg"][class*="border"],
[class*="rounded-xl"][class*="border"],
[class*="rounded-2xl"][class*="border"] {
  border-color: var(--vkp-line);
  border-radius: var(--vkp-radius);
  box-shadow: var(--vkp-shadow);
  transition: transform .14s ease, box-shadow .14s ease;
}
/* Only tiles lift. A rounded bordered <input> or <select> that jumps on
 * hover reads as broken, and forms are the one place that matters most. */
div[class*="rounded-lg"][class*="border"]:hover,
div[class*="rounded-xl"][class*="border"]:hover,
div[class*="rounded-2xl"][class*="border"]:hover {
  transform: translateY(-2px);
  box-shadow: var(--vkp-shadow-lift);
}
input[class*="rounded"], select[class*="rounded"], textarea[class*="rounded"] {
  box-shadow: none; transform: none;
}

/* ── TYPE ────────────────────────────────────────────────────────────────
 * One display face, one text face, one mono. Scoped so a page's own sizing
 * survives -- only the family is unified, never the size or the leading. */
body, p, li, td, th, label, input, select, textarea, button {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
}
h1, h2, h3, h4, .display {
  font-family: 'Newsreader', Georgia, serif;
  letter-spacing: -.015em;
}
code, pre, kbd, samp, .mono, .eyebrow {
  font-family: 'Fragment Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── MOBILE ──────────────────────────────────────────────────────────────
 * Reported: "whole site is slop in mobile view ... cropped or chopped text
 * overlapping". The three things that actually cause that on this site are a
 * wide table, a long code block, and a fixed-width media element. Each gets
 * to scroll inside its own box rather than widening the page. */
/* Hoisted out of the mobile block. It was written inside
 * @media (max-width: 760px), so a page that overflowed at desktop width -- the
 * four flex-centred demo pages did, scrollWidth 1847 against a 1280 viewport --
 * never got the clamp. Horizontal overflow is wrong at every width. */
html, body { overflow-x: hidden; }

@media (max-width: 760px) {
  img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
  pre, table { display: block; max-width: 100%; overflow-x: auto; }
  pre { white-space: pre; -webkit-overflow-scrolling: touch; }
  /* A grid that asks for three fixed columns cannot fit 390px. Only the
   * template is relaxed; gap, alignment and content are untouched. */
  [style*="grid-template-columns"], .grid, [class*="grid-cols-"] {
    grid-template-columns: 1fr !important;
  }
  h1 { font-size: clamp(28px, 8vw, 40px); }
  h2 { font-size: clamp(22px, 6.4vw, 32px); }
}