/* Vendidit — site stylesheet.
   The design carries its layout in inline styles; this file holds the base,
   the responsive overrides the design expressed as data-attribute rules, and
   the chrome (nav, footer, form, dot field) that used to be React components. */

:root {
  --navy: #0C121A;
  --blue: #007CD9;
  --blue-hover: #0067B5;
  --blue-dark-bg: #449DF0;
  --ink: #1B2029;
  --muted: #5B6470;
  --line: #DDE1E8;
  --line-soft: #ECEFF4;
  --bg: #F7F8FB;
}

/* No global box-sizing reset. The design's layout is built on the browser
   default (content-box): its containers pair max-width:1200px with their own
   padding and expect the padding to sit outside that width. A global
   border-box reset silently narrows every one of them by 96px, so border-box
   is applied only to the components authored here that need it. */
.post, .card, .site-nav__mobile, .vd-form__card,
.vd-form input, .vd-form select, .vd-form textarea { box-sizing: border-box; }

/* The design sets display inline on almost every element, and an inline style
   outranks the UA's [hidden] rule — so hiding a panel needs !important. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

html { scroll-behavior: smooth; }
h1, h2, h3, p { margin: 0; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-hover); }
img { max-width: 100%; }

/* Every interactive control gets a visible keyboard focus ring. The design
   only styled :focus on form fields, which left links and buttons bare. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #fff; color: var(--navy); padding: 12px 18px;
  border: 1px solid var(--line); font-weight: 500;
}
.skip-link:focus { left: 12px; top: 12px; }

@keyframes vpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(68,157,240,.55); } 70% { box-shadow: 0 0 0 10px rgba(68,157,240,0); } }
@keyframes vpulseAmber { 0%,100% { box-shadow: 0 0 0 0 rgba(195,132,0,.5); } 70% { box-shadow: 0 0 0 10px rgba(195,132,0,0); } }
@keyframes vpulseGreen { 0%,100% { box-shadow: 0 0 0 0 rgba(13,160,83,.5); } 70% { box-shadow: 0 0 0 10px rgba(13,160,83,0); } }

/* ---------------------------------------------------------------- layout */
[data-cols] > * { min-width: 0; }

@media (max-width: 1040px) {
  [data-cols="5"], [data-cols="4"], [data-cols="3"] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-wide] { grid-template-columns: 1fr !important; }
  [data-wide] > * { border-right: 0 !important; }
  [data-wide] > [style*="sticky"] { position: static !important; }
  [data-flow-arrow] { display: none !important; }
  [data-timeline] { flex-direction: column !important; align-items: stretch !important; gap: 36px !important; }
  [data-timeline] > div { padding-right: 0 !important; }
  [data-timeline-line] { display: none !important; }
  [data-hero-canvas] { opacity: .35; }
}

@media (max-width: 800px) {
  [data-cols] { grid-template-columns: 1fr !important; }
  [data-cols] > * { border-right: 0 !important; }
  [data-wide] > div[style*="168px 1fr"] { grid-template-columns: 1fr !important; }
}

/* Industry pages: the five-column capability ledger collapses in two steps. */
[data-ledger] { display: grid; grid-template-columns: 44px 1fr 1.35fr 1.1fr auto; gap: 22px; }

@media (max-width: 1040px) {
  [data-ledger] { grid-template-columns: 44px 1fr 1fr !important; row-gap: 10px !important; }
  [data-ledger] > :nth-child(4) { grid-column: 2 / 3; }
  [data-ledger] > :nth-child(5) { grid-column: 3 / 4; justify-self: end; }
  [data-ledger-head] > :nth-child(4), [data-ledger-head] > :nth-child(5) { display: none; }
}

@media (max-width: 640px) {
  [data-ledger] { grid-template-columns: 44px 1fr !important; }
  [data-ledger] > :nth-child(n+3) { grid-column: 2 / -1; }
  [data-ledger] > :nth-child(5) { justify-self: start; }
  [data-ledger-head] > :nth-child(3) { display: none; }
}

/* ------------------------------------------------------------------- nav */
.site-nav { position: sticky; top: 0; z-index: 50; font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; }
.site-nav__bar { background: rgba(247,248,251,.92); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--line-soft); padding: 0 clamp(20px, 4vw, 48px); }
.site-nav__inner { max-width: 1200px; margin: 0 auto; height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-nav__logo { display: inline-flex; align-items: center; flex: none; }
.site-nav__logo img { display: block; height: 27px; width: auto; }
.site-nav__list { display: flex; align-items: center; gap: 2px; position: relative; white-space: nowrap; list-style: none; margin: 0; padding: 0; }
.site-nav__item { position: relative; }
.site-nav__link { display: inline-flex; align-items: center; padding: 10px 12px; border-radius: 6px; font-weight: 500; font-size: 15px; line-height: 1; color: var(--navy); }
.site-nav__link:hover { background: #fff; color: var(--navy); }
.site-nav__item--active > .site-nav__link { box-shadow: inset 0 -2px 0 var(--blue); border-radius: 0; }
.site-nav__chev { margin-left: 6px; opacity: .7; }

.site-nav__panel {
  position: absolute; top: calc(100% + 10px); left: 0; min-width: 280px;
  background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(12,18,26,.10);
  padding: 22px; display: flex; gap: 28px;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  opacity: 0; visibility: hidden; transition: opacity .16s ease, visibility .16s;
}
/* Hover opens it for pointers; focus-within opens it for keyboards, so the
   menu works with no JavaScript at all. */
.site-nav__item:hover > .site-nav__panel,
.site-nav__item:focus-within > .site-nav__panel { opacity: 1; visibility: visible; }

.site-nav__col { min-width: 160px; }
.site-nav__coltitle { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.site-nav__panel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.site-nav__panel a { display: block; color: var(--navy); padding: 7px 0; font-size: 15px; font-weight: 500; white-space: nowrap; }
.site-nav__panel a:hover { color: var(--blue); }
.site-nav__sub { display: block; color: var(--muted); font-weight: 400; font-size: 13px; margin-top: 1px; }

.site-nav__cta { display: inline-flex; align-items: center; padding: 12px 18px; border-radius: 6px; font-weight: 500; font-size: 15px; line-height: 1; background: var(--blue); color: #fff; flex: none; }
.site-nav__cta:hover { background: var(--blue-hover); color: #fff; }

.site-nav__burger { display: none; flex-direction: column; justify-content: center; gap: 4px; align-items: center; background: none; border: 1px solid var(--line); border-radius: 6px; width: 42px; height: 42px; cursor: pointer; flex: none; }
.site-nav__burger span { display: block; width: 18px; height: 2px; background: var(--navy); }

.site-nav__mobile { display: none; position: fixed; top: 68px; left: 0; right: 0; bottom: 0; height: calc(100vh - 68px); background: var(--bg); overflow: auto; z-index: 49; padding: 12px clamp(20px, 4vw, 48px) 40px; }
.site-nav__mobile[data-open] { display: block; }
.site-nav__mgroup { border-bottom: 1px solid var(--line); padding: 14px 0; }
.site-nav__mgroup > a { display: block; font-weight: 600; font-size: 18px; color: var(--navy); }
.site-nav__mlinks { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; padding-left: 12px; }
.site-nav__mlinks a { display: block; padding: 7px 0; color: var(--navy); font-size: 15px; }
.site-nav__mcta { display: inline-flex; align-items: center; margin-top: 24px; padding: 14px 20px; border-radius: 6px; font-weight: 500; font-size: 15px; line-height: 1; background: var(--blue); color: #fff; }

/* The design switched to the burger at 1040px, sized for the placeholder mark
   it shipped with. The real lockup is ~23px wider, which pushed the Contact
   button past the viewport edge below ~1100px. Only the nav's own breakpoint
   moves; the content grid keeps the design's 1040px. */
@media (max-width: 1100px) {
  .site-nav__list, .site-nav__cta { display: none !important; }
  .site-nav__burger { display: inline-flex !important; }
}

/* ---------------------------------------------------------------- footer */
.site-footer { background: #fff; border-top: 1px solid var(--line); padding: 64px 0 32px; font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; color: var(--ink); }
.site-footer__inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.site-footer__cols { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.site-footer__logo { display: block; height: 30px; width: auto; }
.site-footer__blurb { color: var(--muted); font-size: 14px; max-width: 34ch; margin: 16px 0 0; line-height: 1.6; }
.site-footer__contact { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; font-size: 14px; }
.site-footer__title { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.site-footer__cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
.site-footer__cols ul a { color: var(--navy); }
.site-footer__cols ul a:hover { color: var(--blue); }
.site-footer__nest { padding-left: 12px; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--muted); align-items: center; }
.site-footer__legal a { color: var(--muted); }
.site-footer__legal a:hover { color: var(--blue); }
.site-footer__copy { margin-left: auto; }

@media (max-width: 1040px) { .site-footer__cols { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 800px)  { .site-footer__cols { grid-template-columns: 1fr; } .site-footer__copy { margin-left: 0; } }

/* ------------------------------------------------------------------ form */
/* The card is the design's; everything inside it is rendered by HubSpot, so
   these rules only shape the container and give HubSpot's own markup the
   site's type and colours where it renders inline rather than in a frame. */
.vd-form__card { font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; color: var(--ink); background: #fff; border: 1px solid var(--line); padding: 36px; clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); box-shadow: 0 24px 60px rgba(12,18,26,.06); }
.vd-form__title { font-size: 28px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; color: var(--navy); margin: 0; }
.vd-form__intro { color: var(--muted); margin: 10px 0 0; font-size: 16px; }
.vd-form__note { margin-top: 24px; padding: 18px 20px; background: var(--bg); border-left: 4px solid var(--blue); font-size: 15px; color: var(--navy); }

/* HubSpot renders the form in a cross-origin iframe and sets its own height,
   so nothing inside it can be styled from here — the form's own typography,
   field and button styling is set in the HubSpot form editor. These rules only
   position the frame inside the design's card. */
.hs-form-frame { margin-top: 26px; min-height: 320px; }
.hs-form-frame iframe { width: 100%; border: 0; display: block; }

/* ------------------------------------------------------------- dot field */
.dot-field canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}

/* ------------------------------------------------------- articles / posts */
.post { max-width: 760px; margin: 0 auto; padding: 88px clamp(20px, 4vw, 48px) 72px; }
.post__crumbs { display: flex; gap: 8px; flex-wrap: wrap; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 18px; }
.post__crumbs a { color: var(--muted); }
.post__crumbs a:hover { color: var(--blue); }
.post__title { font-size: clamp(32px, 4.4vw, 52px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.06; color: var(--navy); margin: 0; text-wrap: pretty; }
.post__meta { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0 0; font-size: 14px; color: var(--muted); }
.post-hero { margin: 36px 0 8px; border: 1px solid var(--line); background: #fff; }
.post-hero img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 2; object-fit: cover; }
.post__back { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 15px; }

.prose { margin-top: 36px; font-size: 17px; line-height: 1.7; color: var(--ink); }
.prose > * + * { margin-top: 22px; }
.prose h2, .prose h3, .prose h4 { color: var(--navy); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin-top: 44px; }
.prose h2 { font-size: 30px; }
.prose h3 { font-size: 24px; }
.prose h4 { font-size: 19px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li + li { margin-top: 8px; }
.prose img { display: block; height: auto; margin: 32px 0; border: 1px solid var(--line); }
.prose blockquote { margin: 32px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--blue); color: var(--navy); font-size: 19px; }
.prose blockquote p { margin: 0; }
.prose a { text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--navy); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }

/* ------------------------------------------------------------ index cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.card { display: flex; flex-direction: column; gap: 8px; background: #fff; padding: 28px; color: var(--navy); }
.card:hover { background: var(--bg); color: var(--navy); }
.card__kicker { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.card__title { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.card__desc { font-size: 15px; color: var(--muted); line-height: 1.55; }
.card__more { margin-top: auto; padding-top: 12px; font-size: 14px; color: var(--blue); font-weight: 500; }

/* Knowledge-base articles lead with the subtitle from the old help centre. */
.post__lead { margin: 18px 0 0; font-size: 20px; line-height: 1.55; color: var(--muted); max-width: 54ch; text-wrap: pretty; }
.post--kb .prose { margin-top: 30px; }
.post--kb .prose img { border: 1px solid var(--line); border-radius: 4px; }

/* Shown only when the HubSpot embed fails to load — see assets/js/site.js. */
.vd-form__fallback { margin-top: 26px; padding: 22px; background: var(--bg); border-left: 4px solid var(--blue); font-size: 15px; line-height: 1.6; color: var(--navy); }
.vd-form__fallback p { margin: 0; }
.vd-form__fallback p + p { margin-top: 10px; }