/* Everything here reads from tokens.css. No literal colours below this line. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  /* Page-global background: soft colour "blobs" scattered across the FULL page height instead
     of a single linear ramp, so the canvas feels dynamic rather than flat. A lighter hero-blue
     glow sits top-left behind the transparent header; VKN-blue accent glows and further
     hero-blue drifts are staggered left/right down the page; a deeper navy settles at the very
     bottom.

     Each blob's RADIUS is sized in vmax (viewport), not % of the page box, while its POSITION
     stays a % down the document. This is deliberate: sizing the radii as a % of the page box
     (with background-size:100% 100%) tied every blob's shape to the document's aspect ratio, so
     as the page grew taller the blobs stretched vertically — merging into a flat wash on desktop
     and collapsing into a hard vertical streak on tall/narrow mobile. vmax radii keep each blob a
     consistent round glow at any page height or screen width. Only the bottom navy-settle layer
     spans the full box (100% 100%). Kept low-opacity — ambient, not loud. */
  background-color: var(--vn-canvas);
  background-image: radial-gradient(
      53vmax 45vmax at 10% 3%,
      color-mix(in srgb, var(--vn-hero-from) 85%, transparent),
      transparent 70%
    ),
    radial-gradient(
      47vmax 42vmax at 92% 12%,
      color-mix(in srgb, var(--vn-accent) 24%, transparent),
      transparent 70%
    ),
    radial-gradient(
      53vmax 46vmax at 8% 31%,
      color-mix(in srgb, var(--vn-hero-from) 55%, transparent),
      transparent 70%
    ),
    radial-gradient(
      48vmax 43vmax at 96% 49%,
      color-mix(in srgb, var(--vn-accent) 20%, transparent),
      transparent 72%
    ),
    radial-gradient(
      54vmax 47vmax at 6% 68%,
      color-mix(in srgb, var(--vn-hero-from) 42%, transparent),
      transparent 72%
    ),
    radial-gradient(
      48vmax 43vmax at 94% 86%,
      color-mix(in srgb, var(--vn-accent) 18%, transparent),
      transparent 72%
    ),
    linear-gradient(180deg, transparent 62%, var(--vn-canvas-deep) 100%);
  background-repeat: no-repeat;
  background-size: auto, auto, auto, auto, auto, auto, 100% 100%;
  color: var(--vn-text);
  font-family: var(--vn-font-body);
  font-size: var(--vn-text-base);
  line-height: var(--vn-leading-normal);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--vn-space-4);
  font-family: var(--vn-font-heading);
  font-weight: 700;
  line-height: var(--vn-leading-tight);
  letter-spacing: -0.02em;
}

h1 {
  font-size: var(--vn-text-4xl);
}
h2 {
  font-size: var(--vn-text-3xl);
}
h3 {
  font-size: var(--vn-text-2xl);
}
h4 {
  font-size: var(--vn-text-xl);
}

p {
  margin: 0 0 var(--vn-space-4);
  color: var(--vn-text-muted);
}

/* Video lightbox (VideoLightbox island) entrance animations. */
@keyframes vn-lightbox-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes vn-lightbox-pop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

a {
  color: var(--vn-accent);
  text-decoration: none;
  transition: color var(--vn-fast) var(--vn-ease);
}

a:hover {
  color: var(--vn-accent-hover);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---------- Layout primitives ---------- */

.vn-section {
  padding-block: var(--vn-section-padding);
}

.vn-section--deep {
  background: var(--vn-canvas-deep);
}

.vn-section--light {
  background: var(--vn-canvas-light);
  color: var(--vn-text-on-light);
}

.vn-section--light p,
.vn-section--light h1,
.vn-section--light h2,
.vn-section--light h3 {
  color: var(--vn-text-on-light);
}

.vn-container {
  width: min(100% - (var(--vn-space-6) * 2), var(--vn-content-width));
  margin-inline: auto;
}

.vn-stack > * + * {
  margin-top: var(--vn-space-6);
}

.vn-grid {
  display: grid;
  gap: var(--vn-space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

/* ---------- Components ---------- */

.vn-eyebrow {
  display: inline-block;
  font-family: var(--vn-font-heading);
  font-size: var(--vn-text-sm);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* Light azure soft-accent — the pure accent read too dark/low-contrast on navy. */
  color: var(--vn-accent-soft);
  margin-bottom: var(--vn-space-4);
}

/* Preserve marketer-authored line breaks in multi-line heading/title fields (the fields that
   set allowNewLine). Paired with decodeHighlights() so headings support both breaks + gradient. */
.vn-multiline {
  white-space: pre-line;
}

/* Marketer-highlighted words: wrap words in *asterisks* in a plain-text field and they render
   in the frosted-blue gradient (the gradient is clipped to the glyphs). See utils/text.ts. */
.vn-grad-text {
  background: var(--vn-gradient-frost);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Section-module headings. base.css's bare h1..h4 rules are neutralised site-wide by
   Tailwind's Preflight (`h1..h6 { font-size: inherit; font-weight: inherit }`), so a coarse
   section module's own title collapses to body size. This class-scoped rule (specificity
   0,1,1) beats Preflight's element reset and restores the intended size + weight. Add it to
   the heading a section module renders (PageHero h1, ContentSection h2). */
.vn-section__title {
  font-weight: 700;
}
h1.vn-section__title {
  font-size: var(--vn-text-4xl);
}
h2.vn-section__title {
  font-size: var(--vn-text-3xl);
}

/* ---------- Rich-text prose (marketer RichText bodies) ---------- */
/* Applied to the wrapper around any <RichText/> body (PolicyPage, PageHero, ContentSection).
   The RichText output is arbitrary HTML, and Tailwind's Preflight strips heading sizing
   (h1..h6 → inherit) and list markers (ol/ul → list-style:none) globally — so without this,
   marketer content renders as an unformatted wall. Every rule is class-scoped (0,1,1+) so it
   wins over Preflight's bare-element resets. Readable measure + deliberate heading rhythm:
   large gap BEFORE a heading, tight gap AFTER, so heading + its text group visually. */
.vn-prose {
  max-width: 72ch;
}

/* IMPORTANT: <RichText/> wraps its HTML in a single anonymous <div>, so the paragraphs and
   headings are GRANDCHILDREN of .vn-prose — child-combinator rhythm (`> * + *`) never reaches
   them. Vertical rhythm is therefore set with element bottom-margins (which work at any nesting
   depth) and margin-collapse handles the gap between a paragraph and a following heading. */
.vn-prose p,
.vn-prose ul,
.vn-prose ol,
.vn-prose blockquote,
.vn-prose table,
.vn-prose hr {
  margin: 0 0 var(--vn-space-6);
}

.vn-prose p {
  line-height: 1.8;
  color: var(--vn-text-muted);
  text-wrap: pretty;
}

/* Lead-in: when the body opens with a paragraph, render it a touch larger and brighter. */
.vn-prose p:first-child {
  font-size: var(--vn-text-lg);
  line-height: 1.7;
  color: var(--vn-text);
}

/* Headings: big space above, tight space below, so a heading groups with the text it
   introduces. Margin-collapse means the space above wins over the previous block's margin. */
.vn-prose h2,
.vn-prose h3,
.vn-prose h4 {
  font-family: var(--vn-font-heading);
  font-weight: 700;
  color: var(--vn-text);
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.vn-prose h2 {
  font-size: var(--vn-text-2xl);
  margin: var(--vn-space-16) 0 var(--vn-space-4);
}
.vn-prose h3 {
  font-size: var(--vn-text-xl);
  margin: var(--vn-space-12) 0 var(--vn-space-3);
}
.vn-prose h4 {
  font-size: var(--vn-text-lg);
  margin: var(--vn-space-8) 0 var(--vn-space-3);
}

/* Lists — list-style restated because Preflight resets `ol, ul { list-style: none }`. */
.vn-prose ul,
.vn-prose ol {
  padding-left: var(--vn-space-8);
  color: var(--vn-text-muted);
  list-style-position: outside;
}
.vn-prose ul {
  list-style-type: disc;
}
.vn-prose ol {
  list-style-type: decimal;
}
.vn-prose ul ul {
  list-style-type: circle;
}
.vn-prose li {
  line-height: 1.7;
}
.vn-prose li + li {
  margin-top: var(--vn-space-3);
}
.vn-prose li::marker {
  color: var(--vn-accent-soft);
}
.vn-prose li > ul,
.vn-prose li > ol {
  margin-top: var(--vn-space-3);
  margin-bottom: 0;
}

.vn-prose a {
  color: var(--vn-accent-soft);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}
.vn-prose a:hover {
  color: var(--vn-text);
}

.vn-prose strong,
.vn-prose b {
  color: var(--vn-text);
  font-weight: 600;
}

/* Indented / quoted block (HubSpot's rich-text "indent" emits a <blockquote>). Preserve the
   author's indentation and mark it with a soft accent rule so it reads as a set-apart block. */
.vn-prose blockquote {
  padding-left: var(--vn-space-8);
  border-left: 2px solid var(--vn-accent-soft);
  color: var(--vn-text-muted);
}

.vn-prose hr {
  border: 0;
  border-top: 1px solid var(--vn-border);
  margin-block: var(--vn-space-8);
}

/* Tables — clean rows with hairline separators. */
.vn-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--vn-text-base);
}
.vn-prose th,
.vn-prose td {
  text-align: left;
  padding: var(--vn-space-3) var(--vn-space-4);
  border-bottom: 1px solid color-mix(in srgb, var(--vn-border) 85%, transparent);
  color: var(--vn-text-muted);
  vertical-align: top;
  line-height: 1.6;
}
.vn-prose th:first-child,
.vn-prose td:first-child {
  padding-left: 0;
}
.vn-prose th:last-child,
.vn-prose td:last-child {
  padding-right: 0;
}
.vn-prose th {
  font-family: var(--vn-font-heading);
  font-weight: 600;
  color: var(--vn-text);
}
.vn-prose tr:last-child td {
  border-bottom: none;
}

.vn-card {
  background: var(--vn-surface);
  border: 1px solid var(--vn-border);
  border-radius: var(--vn-radius);
  padding: var(--vn-space-8);
  box-shadow: var(--vn-shadow);
  transition: transform var(--vn-slow) var(--vn-ease);
}

.vn-card:hover {
  transform: translateY(-4px);
}

/* Every CTA is styled from the --vn-btn-* tokens (design-tokens partial) — the single place to
   change button design site-wide. No module should re-style a button; just use these classes. */
.vn-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vn-space-2);
  padding: var(--vn-btn-pad-y) var(--vn-btn-pad-x);
  border: 0;
  border-radius: var(--vn-btn-radius);
  background: var(--vn-btn-bg);
  color: var(--vn-btn-fg);
  font-family: var(--vn-font-heading);
  font-size: var(--vn-btn-font-size);
  font-weight: var(--vn-btn-font-weight);
  letter-spacing: var(--vn-btn-letter-spacing);
  cursor: pointer;
  box-shadow: var(--vn-btn-shadow);
  transition: background var(--vn-fast) var(--vn-ease),
    box-shadow var(--vn-fast) var(--vn-ease);
}

.vn-button:hover {
  background: var(--vn-btn-bg-hover);
  color: var(--vn-btn-fg);
  box-shadow: var(--vn-btn-shadow-hover);
}

.vn-button--ghost {
  background: var(--vn-btn-ghost-bg);
  border: 1px solid var(--vn-btn-ghost-border);
  color: var(--vn-btn-ghost-fg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.vn-button--ghost:hover {
  background: var(--vn-btn-ghost-bg-hover);
  border-color: var(--vn-btn-ghost-border-hover);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Row wrapper for one or more CTAs (e.g. a section's call-to-action). */
.vn-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vn-space-3);
  align-items: center;
}

/* ---------- Reveal on scroll ---------- */

.vn-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--vn-slow) var(--vn-ease),
    transform var(--vn-slow) var(--vn-ease);
}

.vn-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .vn-reveal {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Mobile scroll performance ---------- */
/* backdrop-filter: blur() re-samples and re-blurs the page behind every frosted surface (header,
   cards, info-bar, carousel, reviews, media-text) on EVERY scroll frame. On touch GPUs this stalls
   the compositor and shows as janky clipping / content that flashes in and out while scrolling.
   Every frosted surface here sits on a semi-opaque background colour, so dropping the blur on
   coarse-pointer (phone/tablet) devices stays perfectly legible — it just trades the frosted look
   for a smooth scroll. Desktop keeps the glass. */
@media (hover: none) and (pointer: coarse) {
  *,
  *::before,
  *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ---------- Expandable-card modal rich text ---------- */
/* The ExpandableCard island injects marketer rich text (RichTextField HTML) into the modal. It
   can't import CSS modules, so these are global classes it references by name. A flexible 1- or
   2-column body where each column is free rich text (headings, paragraphs, lists, tables). */

.vn-modal-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--vn-space-8), 4vw, var(--vn-space-16));
}

@media (max-width: 720px) {
  .vn-modal-cols {
    grid-template-columns: 1fr;
    gap: var(--vn-space-8);
  }
}

.vn-modal-col > :first-child {
  margin-top: 0;
}
.vn-modal-col > :last-child {
  margin-bottom: 0;
}

.vn-modal-col h2,
.vn-modal-col h3,
.vn-modal-col h4 {
  font-family: var(--vn-font-heading);
  font-weight: 700;
  color: var(--vn-text);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: var(--vn-space-6) 0 var(--vn-space-4);
  text-wrap: balance;
}

.vn-modal-col h2 {
  font-size: var(--vn-text-2xl);
}
.vn-modal-col h3 {
  font-size: var(--vn-text-xl);
}
.vn-modal-col h4 {
  font-size: var(--vn-text-lg);
}

.vn-modal-col p {
  color: color-mix(in srgb, var(--vn-text-muted) 88%, #ffffff);
  font-size: var(--vn-text-base);
  line-height: 1.7;
  margin: 0 0 var(--vn-space-4);
  max-width: none;
  text-wrap: pretty;
}

.vn-modal-col a {
  color: var(--vn-accent);
}

.vn-modal-col ul,
.vn-modal-col ol {
  margin: 0 0 var(--vn-space-4);
  padding-left: 1.2em;
  color: var(--vn-text-muted);
}

.vn-modal-col li {
  margin: 0 0 var(--vn-space-2);
  line-height: 1.6;
}

.vn-modal-col li::marker {
  color: var(--vn-accent-soft, #bfd5ff);
}

/* Tables — clean rows with hairline separators (matches the reference's right column). */
.vn-modal-col table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--vn-space-4);
  font-size: var(--vn-text-base);
}

.vn-modal-col th,
.vn-modal-col td {
  text-align: left;
  padding: var(--vn-space-3) var(--vn-space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--vn-border) 85%, transparent);
  color: var(--vn-text-muted);
  vertical-align: top;
  line-height: 1.5;
}

.vn-modal-col th:first-child,
.vn-modal-col td:first-child {
  padding-left: 0;
}
.vn-modal-col th:last-child,
.vn-modal-col td:last-child {
  padding-right: 0;
}

.vn-modal-col th {
  font-family: var(--vn-font-heading);
  font-weight: 600;
  color: var(--vn-text);
}

.vn-modal-col tr:last-child td {
  border-bottom: none;
}

.vn-modal-col hr {
  border: 0;
  border-top: 1px solid var(--vn-border);
  margin: var(--vn-space-5) 0;
}