/* ═══════════════════════════════════════════════════════════════
   VEKLO — Marketing site
   Namespaced vk- so it can never cascade into styles.v2.css,
   which /nexus and /calendar still consume.
   ═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                 U+FEFF, U+FFFD;
}

/* Metric-matched to Arial so the swap does not reflow the h1. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107.12%;
  ascent-override: 90%;
  descent-override: 22.43%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light;

  --vk-paper: #F7F6F3;
  --vk-card: #FFFFFF;
  --vk-ink: #14120F;
  --vk-soft: #57534C;
  --vk-faint: #8A857C;
  --vk-rule: #E4E1DA;
  --vk-rule-2: #CFCAC0;

  /* One accent. Brand orange, used maybe four times per page.
     Never as body text: #F59E0B on --vk-paper is 1.9:1. */
  --vk-accent: #F59E0B;
  --vk-accent-ink: #14120F;   /* text ON an accent fill */
  --vk-accent-deep: #B4552A;  /* accent-adjacent TEXT, 5.6:1 on paper */

  /* Product identity only, never decoration. */
  --vk-navy: #1A365D;
  --vk-green: #2D6A4F;

  --vk-step--1: clamp(0.812rem, 0.79rem + 0.09vw, 0.86rem);
  --vk-step-0:  clamp(1rem, 0.97rem + 0.13vw, 1.031rem);
  --vk-step-1:  clamp(1.125rem, 1.08rem + 0.19vw, 1.188rem);
  --vk-step-2:  clamp(1.383rem, 1.3rem + 0.35vw, 1.5rem);
  --vk-step-3:  clamp(1.66rem, 1.52rem + 0.6vw, 2rem);
  --vk-step-4:  clamp(1.99rem, 1.75rem + 1.02vw, 2.5rem);
  --vk-step-5:  clamp(2.39rem, 1.98rem + 1.74vw, 3.25rem);
  --vk-step-6:  clamp(2.62rem, 1.9rem + 3.05vw, 4.5rem);

  --vk-1: .25rem;  --vk-2: .5rem;   --vk-3: .75rem;  --vk-4: 1rem;
  --vk-5: 1.5rem;  --vk-6: 2rem;    --vk-7: 3rem;    --vk-8: 4rem;
  --vk-9: 6rem;    --vk-10: 8rem;
  --vk-section-y: clamp(3rem, 2rem + 5vw, 6.5rem);

  --vk-radius: 12px;
  --vk-radius-pill: 999px;

  --vk-shadow-rest: 0 1px 2px rgb(20 18 15 / .05);
  --vk-shadow-lift: 0 8px 22px -8px rgb(20 18 15 / .16),
                    0 2px 6px -2px rgb(20 18 15 / .08);
  --vk-ring: 0 0 0 2px var(--vk-paper), 0 0 0 4px var(--vk-ink);

  --vk-ease: cubic-bezier(.2, 0, 0, 1);
  --vk-dur-fast: 150ms;
  --vk-dur: 220ms;

  --vk-max-page: 1200px;
  --vk-max-prose: 46ch;
  --vk-gutter: clamp(1.25rem, .8rem + 2.4vw, 3rem);
  --vk-header-h: 64px;

  --vk-font: "Inter", "Inter Fallback", system-ui, sans-serif;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  min-height: 100svh;
  background: var(--vk-paper);
  color: var(--vk-soft);
  font-family: var(--vk-font);
  font-size: var(--vk-step-0);
  line-height: 1.62;
  font-optical-sizing: auto;
  /* A faked weight would both look wrong and shift layout if the file fails. */
  font-synthesis: none;
  font-feature-settings: "cv05" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, svg, video { display: block; max-width: 100%; }
input, button, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; color: var(--vk-ink); letter-spacing: -.03em; line-height: 1.1; }
a { color: var(--vk-ink); text-underline-offset: .18em; }

/* .vk-partners ships display:grid, which would beat the UA hidden rule. */
[hidden] { display: none !important; }

::selection { background: var(--vk-accent); color: var(--vk-accent-ink); }

:where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--vk-ring);
  border-radius: var(--vk-radius);
}

/* ── Layout ─────────────────────────────────────────────────── */
.vk-container {
  width: 100%;
  max-width: var(--vk-max-page);
  margin-inline: auto;
  padding-inline: var(--vk-gutter);
}

.vk-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.vk-skip {
  position: absolute; left: var(--vk-4); top: -100%; z-index: 200;
  padding: var(--vk-3) var(--vk-5);
  background: var(--vk-ink); color: var(--vk-paper);
  border-radius: var(--vk-radius); font-weight: 600; text-decoration: none;
}
.vk-skip:focus { top: var(--vk-4); }

.vk-section { padding-block: var(--vk-section-y); }
.vk-band { background: var(--vk-card); border-block: 1px solid var(--vk-rule); }

/* ── Type ───────────────────────────────────────────────────── */
h1, .vk-h1 { font-size: var(--vk-step-6); font-weight: 800; letter-spacing: -.038em; line-height: 1.04; }
h2, .vk-h2 { font-size: var(--vk-step-4); font-weight: 700; }
h3, .vk-h3 { font-size: var(--vk-step-2); font-weight: 700; letter-spacing: -.025em; }
h4, .vk-h4 { font-size: var(--vk-step-1); font-weight: 600; letter-spacing: -.018em; }

.vk-lead { font-size: var(--vk-step-1); color: var(--vk-soft); max-width: 56ch; }
.vk-prose { max-width: var(--vk-max-prose); }
.vk-prose > * + * { margin-top: var(--vk-3); }
.vk-meta { font-size: var(--vk-step--1); color: var(--vk-faint); }
.vk-meta b, .vk-strong { color: var(--vk-ink); font-weight: 600; }
.vk-eyebrow {
  font-size: var(--vk-step--1); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--vk-faint);
}
.vk-num { font-variant-numeric: tabular-nums slashed-zero; }

/* ── Buttons ────────────────────────────────────────────────── */
.vk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--vk-2);
  min-height: 44px; padding: var(--vk-3) var(--vk-5);
  border: 1px solid var(--vk-ink); border-radius: var(--vk-radius-pill);
  background: var(--vk-ink); color: var(--vk-paper);
  font-size: var(--vk-step-0); font-weight: 500; line-height: 1; text-decoration: none;
  transition: transform var(--vk-dur-fast) var(--vk-ease),
              box-shadow var(--vk-dur-fast) var(--vk-ease),
              background-color var(--vk-dur-fast) var(--vk-ease),
              border-color var(--vk-dur-fast) var(--vk-ease);
}
.vk-btn:hover, .vk-btn:focus-visible {
  background: #2B2620; transform: translateY(-2px); box-shadow: var(--vk-shadow-lift);
}
.vk-btn:active { transform: translateY(0); }

.vk-btn--ghost { background: transparent; color: var(--vk-ink); border-color: var(--vk-rule-2); }
.vk-btn--ghost:hover, .vk-btn--ghost:focus-visible { background: var(--vk-card); border-color: var(--vk-ink); }

.vk-cta-row { display: flex; flex-wrap: wrap; gap: var(--vk-3); align-items: center; }

/* ── Header ─────────────────────────────────────────────────── */
.vk-header {
  position: sticky; top: 0; z-index: 100; height: var(--vk-header-h);
  background: var(--vk-paper); border-bottom: 1px solid transparent;
  transition: border-color var(--vk-dur) var(--vk-ease);
}
.vk-header.is-scrolled { border-bottom-color: var(--vk-rule); }
.vk-header__inner { height: 100%; display: flex; align-items: center; gap: var(--vk-6); }

.vk-brand {
  display: inline-flex; align-items: center; gap: var(--vk-2); margin-right: auto;
  color: var(--vk-ink); text-decoration: none;
  font-weight: 800; font-size: var(--vk-step-1); letter-spacing: -.03em;
}
.vk-brand svg { width: 24px; height: 24px; flex: none; }

.vk-nav { display: none; gap: var(--vk-6); }
@media (min-width: 880px) { .vk-nav { display: flex; } }
.vk-nav__link {
  color: var(--vk-soft); text-decoration: none; font-size: var(--vk-step-0);
  padding-block: var(--vk-2); border-bottom: 2px solid transparent;
  transition: color var(--vk-dur-fast) var(--vk-ease), border-color var(--vk-dur-fast) var(--vk-ease);
}
.vk-nav__link:hover { color: var(--vk-ink); border-bottom-color: var(--vk-accent); }
.vk-nav__link[aria-current="page"] { color: var(--vk-ink); border-bottom-color: var(--vk-accent); }

.vk-header__cta { display: none; }
@media (min-width: 880px) { .vk-header__cta { display: inline-flex; } }

.vk-menu-btn {
  display: inline-grid; place-items: center; width: 48px; height: 48px;
  margin-inline-start: auto; border-radius: var(--vk-radius); color: var(--vk-ink);
}
@media (min-width: 880px) { .vk-menu-btn { display: none; } }
.vk-menu-btn__bars, .vk-menu-btn__bars::before, .vk-menu-btn__bars::after {
  display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px;
}
.vk-menu-btn__bars { position: relative; }
.vk-menu-btn__bars::before, .vk-menu-btn__bars::after { content: ""; position: absolute; }
.vk-menu-btn__bars::before { top: -6px; }
.vk-menu-btn__bars::after { top: 6px; }

.vk-noscript-nav {
  display: flex; flex-wrap: wrap; gap: var(--vk-4);
  padding: var(--vk-3) 0; border-bottom: 1px solid var(--vk-rule);
}

/* ── Drawer ─────────────────────────────────────────────────── */
.vk-drawer {
  width: min(22rem, 88vw); max-width: none; height: 100%; max-height: none;
  margin: 0 0 0 auto; padding: var(--vk-5);
  border: none; border-left: 1px solid var(--vk-rule);
  background: var(--vk-card); color: var(--vk-soft);
}
.vk-drawer::backdrop { background: rgb(20 18 15 / .42); }
.vk-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--vk-6); }
.vk-drawer__close {
  width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: var(--vk-radius); color: var(--vk-ink); font-size: 1.5rem; line-height: 1;
}
.vk-drawer__nav { display: grid; gap: var(--vk-1); margin-bottom: var(--vk-6); }
.vk-drawer__nav a {
  display: block; padding: var(--vk-3); min-height: 48px;
  border-radius: var(--vk-radius); color: var(--vk-ink); text-decoration: none;
  font-size: var(--vk-step-1); font-weight: 600;
}
.vk-drawer__nav a:hover { background: var(--vk-paper); }
.vk-drawer__nav a[aria-current="page"] { color: var(--vk-accent-deep); }

/* ── Hero ───────────────────────────────────────────────────── */
.vk-hero { text-align: center; padding-block: clamp(3rem, 2rem + 5vw, 7rem) clamp(2rem, 1.5rem + 3vw, 3.75rem); }
.vk-hero h1 { margin-inline: auto; max-width: 17ch; }
.vk-hero__lead { margin: var(--vk-5) auto 0; max-width: 56ch; font-size: var(--vk-step-1); }
.vk-hero .vk-cta-row { justify-content: center; margin-top: var(--vk-6); }
.vk-hero__note { margin-top: var(--vk-5); }

/* ── Evidence strip. Every figure carries its source. ───────── */
.vk-evidence {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--vk-rule); background: var(--vk-card);
}
@media (min-width: 880px) { .vk-evidence { grid-template-columns: repeat(4, 1fr); } }
.vk-evidence > li { padding: var(--vk-5); border-right: 1px solid var(--vk-rule); border-bottom: 1px solid var(--vk-rule); }
@media (min-width: 880px) {
  .vk-evidence > li { border-bottom: 0; }
  .vk-evidence > li:last-child { border-right: 0; }
}
.vk-evidence b {
  display: block; font-size: var(--vk-step-4); font-weight: 800;
  letter-spacing: -.035em; line-height: 1; color: var(--vk-ink);
  font-variant-numeric: tabular-nums;
}
.vk-evidence span { display: block; margin-top: var(--vk-2); font-size: var(--vk-step--1); }
.vk-evidence cite { display: block; margin-top: var(--vk-1); font-style: normal; font-size: .72rem; color: var(--vk-faint); }

/* ── Problem block ──────────────────────────────────────────── */
.vk-problem {
  display: grid; gap: clamp(1.75rem, 1rem + 4vw, 5rem);
  align-items: center; padding-block: var(--vk-section-y);
}
@media (min-width: 880px) {
  .vk-problem { grid-template-columns: 1fr 1fr; }
  .vk-problem--flip .vk-problem__art { order: -1; }
}
.vk-problem h2 { max-width: 17ch; margin-bottom: var(--vk-4); }
.vk-problem__body > p { max-width: var(--vk-max-prose); }
.vk-problem__body > p + p { margin-top: var(--vk-3); }
.vk-problem__body .vk-btn { margin-top: var(--vk-5); }
.vk-problem__art { display: grid; place-items: center; }
.vk-problem__art svg { width: 100%; height: auto; max-width: 440px; }

/* ── Product cards ──────────────────────────────────────────── */
.vk-products { display: grid; border: 1px solid var(--vk-rule); background: var(--vk-card); }
@media (min-width: 880px) { .vk-products { grid-template-columns: repeat(3, 1fr); } }
.vk-product {
  display: flex; flex-direction: column; gap: var(--vk-3);
  padding: var(--vk-6) var(--vk-5);
  border-bottom: 1px solid var(--vk-rule);
}
@media (min-width: 880px) {
  .vk-product { border-bottom: 0; border-right: 1px solid var(--vk-rule); }
  .vk-product:last-child { border-right: 0; }
}
.vk-product__dot { width: 10px; height: 10px; border-radius: var(--vk-radius-pill); }
.vk-product__status { font-size: var(--vk-step--1); font-weight: 600; }
.vk-product__status--paper { color: var(--vk-accent-deep); }
.vk-product__status--hold { color: var(--vk-navy); }
.vk-product__status--live { color: var(--vk-green); }
/* The limitation is half the component, not a footnote. */
.vk-product__not { margin-top: auto; padding-top: var(--vk-4); border-top: 1px dashed var(--vk-rule-2); }
.vk-product__not b {
  display: block; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--vk-accent-deep); margin-bottom: var(--vk-2);
}

/* ── Partner strip. Ships held; see [hidden] above. ─────────── */
.vk-partners { display: grid; gap: var(--vk-5); }
.vk-partners__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vk-7); }
.vk-partners__list img { height: 28px; width: auto; filter: grayscale(1); opacity: .7; }
.vk-partners__list img:hover { opacity: 1; }

/* ── Footer ─────────────────────────────────────────────────── */
.vk-footer { border-top: 1px solid var(--vk-rule); margin-top: var(--vk-8); padding-block: var(--vk-7) var(--vk-8); }
.vk-footer__cols { display: grid; gap: var(--vk-6); margin-bottom: var(--vk-7); }
@media (min-width: 760px) { .vk-footer__cols { grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); } }
.vk-footer h2 {
  font-size: var(--vk-step--1); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--vk-faint); margin-bottom: var(--vk-3);
}
.vk-footer ul { display: grid; gap: var(--vk-2); }
.vk-footer a { color: var(--vk-soft); text-decoration: none; }
.vk-footer a:hover { color: var(--vk-ink); text-decoration: underline; }
.vk-footer__note {
  max-width: 68ch; font-size: var(--vk-step--1); color: var(--vk-faint);
  padding-top: var(--vk-5); border-top: 1px solid var(--vk-rule);
}
.vk-footer__note > * + * { margin-top: var(--vk-2); }

/* ── Reveal. Hidden only once JS confirms it will reveal. ───── */
.js .vk-reveal {
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--vk-dur) var(--vk-ease), transform var(--vk-dur) var(--vk-ease);
}
.js .vk-reveal.is-in { opacity: 1; transform: none; }

[id] { scroll-margin-top: calc(var(--vk-header-h) + 1rem); }

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Zeroing the duration still leaves a 2px jump, so null the transform.
     The shadow stays: hover still needs an affordance. */
  .vk-btn:hover, .vk-btn:focus-visible { transform: none; }
  .js .vk-reveal { opacity: 1; transform: none; }
}