/* VNShortener public marketing experience */

html {
  /* Bootstrap 3 sets the root to 10px. The VN design scale is authored for
     the browser-standard 16px root, so keep the public site independent. */
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

.vn-marketing {
  --vn-marketing-container: 1280px;
  /* Compatibility aliases for legacy marketing components that pre-date the
     shared design-token names. Keeping them scoped avoids changing dashboards. */
  --vn-bg: var(--vn-canvas);
  --vn-border: var(--vn-rule);
  --vn-border-strong: var(--vn-rule-strong);
  --vn-brand-strong: var(--vn-brand-hover);
  --vn-radius-md: var(--vn-radius-card);
  --vn-radius-lg: var(--vn-radius-frame);
  --vn-signal-strong: var(--vn-signal-hover);
  --vn-space-5: 1.25rem;
  --vn-space-7: 1.75rem;
  --vn-text-secondary: var(--vn-text);
  --vn-text-tertiary: var(--vn-muted);
  overflow-x: hidden;
  background: var(--vn-paper);
}

.vn-marketing .vn-container {
  width: min(calc(100% - 2rem), var(--vn-marketing-container));
}

.vn-marketing a {
  text-decoration: none;
}

.vn-marketing h1,
.vn-marketing h2,
.vn-marketing h3,
.vn-marketing h4,
.vn-marketing h5,
.vn-marketing h6 {
  text-transform: none;
}

.vn-site-header {
  position: fixed;
  z-index: 800;
  inset-block-start: 0;
  inset-inline: 0;
  min-height: 4.75rem;
  display: block;
  margin: 0;
  padding: 0;
  border-block-end: 1px solid transparent;
  background: rgb(255 255 255 / 92%) none;
  backdrop-filter: blur(18px);
  color: var(--vn-ink);
  text-align: start;
  transition: border-color var(--vn-duration) var(--vn-ease),
    box-shadow var(--vn-duration) var(--vn-ease);
}

.vn-site-header.is-scrolled,
.vn-marketing--inner .vn-site-header {
  border-color: var(--vn-rule);
  box-shadow: 0 8px 24px rgb(23 32 51 / 6%);
}

.vn-site-header__inner {
  min-height: 4.75rem;
  display: flex;
  align-items: center;
  gap: var(--vn-space-4);
}

.vn-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  flex: 0 0 auto;
  color: var(--vn-ink) !important;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.vn-wordmark img {
  display: block;
}

.vn-wordmark > span > span {
  color: var(--vn-brand);
  font-weight: 600;
}

.vn-site-header__menu {
  min-width: 2.75rem;
  min-height: 2.75rem;
  display: inline-grid;
  place-items: center;
  margin-inline-start: auto;
  border: 1px solid var(--vn-rule);
  border-radius: var(--vn-radius-control);
  background: var(--vn-paper);
  color: var(--vn-ink);
  cursor: pointer;
}

.vn-site-nav {
  position: fixed;
  inset-block-start: 4.75rem;
  inset-inline: 0;
  max-height: calc(100dvh - 4.75rem);
  display: none;
  overflow-y: auto;
  border-block-end: 1px solid var(--vn-rule);
  background: var(--vn-paper);
  padding: var(--vn-space-3) var(--vn-space-4) var(--vn-space-6);
  box-shadow: var(--vn-shadow-md);
}

.vn-site-nav.is-open {
  display: grid;
}

.vn-site-nav a {
  min-height: 3rem;
  display: flex;
  align-items: center;
  border-radius: var(--vn-radius-control);
  color: var(--vn-text);
  padding-inline: var(--vn-space-3);
  font-size: var(--vn-text-sm);
  font-weight: 700;
}

.vn-site-nav a:hover {
  background: var(--vn-surface-muted);
  color: var(--vn-brand);
}

.vn-site-header__actions {
  display: none;
  align-items: center;
  gap: var(--vn-space-2);
}

.vn-site-header__actions .vn-button:not(.vn-button--quiet) {
  color: #fff !important;
}

.has-marketing-menu {
  overflow: hidden;
}

.vn-home {
  padding-block-start: 4.75rem;
}

.vn-home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-block-end: 1px solid var(--vn-rule);
  background:
    linear-gradient(180deg, rgb(238 242 255 / 72%), transparent 42%),
    var(--vn-paper);
  padding-block: var(--vn-space-16) var(--vn-space-12);
}

.vn-home-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 32rem;
  height: 32rem;
  inset-block-start: -22rem;
  inset-inline-end: -14rem;
  border: 1px solid rgb(49 87 213 / 12%);
  border-radius: 50%;
  box-shadow: 0 0 0 5rem rgb(49 87 213 / 3%),
    0 0 0 10rem rgb(14 147 132 / 2%);
}

.vn-home-hero__grid {
  display: grid;
  gap: var(--vn-space-12);
  align-items: center;
}

.vn-overline {
  display: flex;
  align-items: center;
  gap: var(--vn-space-2);
  margin-block-end: var(--vn-space-3);
  color: var(--vn-brand);
  font-size: var(--vn-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vn-home-hero .vn-overline span {
  width: 1.75rem;
  height: 2px;
  background: linear-gradient(90deg, var(--vn-brand), var(--vn-signal));
}

.vn-home-hero h1 {
  max-width: none;
  margin-block-end: var(--vn-space-6);
  font-size: clamp(2.65rem, 8.7vw, 4.45rem);
  line-height: 1.04;
  letter-spacing: -0.06em;
}

.vn-home-hero h1 span {
  display: block;
  width: fit-content;
}

.vn-home-hero h1 span:nth-child(2) {
  color: var(--vn-brand);
}

.vn-home-hero__lead {
  max-width: 42rem;
  margin-block-end: var(--vn-space-6);
  color: var(--vn-muted);
  font-size: clamp(1rem, 2.2vw, 1.1875rem);
  line-height: 1.7;
}

.vn-home-hero__shortener {
  max-width: 45rem;
}

.vn-home-shortener {
  margin: 0;
}

.vn-home-shortener__field {
  display: grid;
  gap: var(--vn-space-2);
}

.vn-home-shortener__field > label {
  color: var(--vn-ink);
  font-size: var(--vn-text-sm);
  font-weight: 700;
}

.vn-home-shortener__control {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--vn-space-2);
  border: 1px solid var(--vn-rule-strong);
  border-radius: var(--vn-radius-card);
  background: var(--vn-paper);
  padding: 0.375rem;
  box-shadow: var(--vn-shadow-sm);
  transition: border-color var(--vn-duration-fast) var(--vn-ease),
    box-shadow var(--vn-duration-fast) var(--vn-ease);
}

.vn-home-shortener__control:focus-within {
  border-color: var(--vn-brand);
  box-shadow: 0 0 0 3px var(--vn-focus), var(--vn-shadow-sm);
}

.vn-home-shortener__icon {
  display: grid;
  place-items: center;
  margin-inline-start: var(--vn-space-2);
  color: var(--vn-brand);
}

.vn-home-shortener__input {
  min-width: 0;
  min-height: 3rem;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--vn-ink);
  padding: 0.625rem 0;
}

.vn-home-shortener__input::placeholder {
  color: var(--vn-muted);
}

.vn-home-shortener__control .vn-button {
  grid-column: 1 / -1;
  width: 100%;
}

.vn-home-shortener-shell.shorten #shorten .vn-button {
  border: 1px solid transparent;
  background: var(--vn-brand);
  color: #fff;
  padding: 0.625rem 1rem;
}

.vn-home-shortener-shell.shorten #shorten .vn-button:hover {
  background: var(--vn-brand-hover);
}

.vn-home-shortener__field > p {
  margin: 0;
  color: var(--vn-muted);
  font-size: var(--vn-text-xs);
}

.vn-home-shortener__captcha[hidden] {
  display: none;
}

.vn-home-shortener__result {
  display: none;
  margin-block-start: var(--vn-space-3);
}

.vn-home-shortener__result .form-group {
  margin: 0;
}

.vn-home-shortener__result .input-group {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto auto;
  border: 1px solid var(--vn-signal);
  border-radius: var(--vn-radius-card);
  overflow: hidden;
  background: var(--vn-signal-soft);
}

.vn-home-shortener__result .form-control {
  min-width: 0;
  height: var(--vn-control-large);
  border: 0;
  box-shadow: none;
  background: transparent;
  color: var(--vn-ink);
  font-family: var(--vn-font-mono);
  font-size: var(--vn-text-sm);
}

.vn-home-shortener__result .input-group-addon {
  width: auto;
  display: grid;
  place-items: center;
  border: 0;
  border-inline-start: 1px solid color-mix(in srgb, var(--vn-signal) 30%, transparent);
  background: transparent;
  color: var(--vn-signal);
  cursor: pointer;
  padding-inline: var(--vn-space-4);
}

.vn-home-shortener__result .input-group-addon:hover {
  background: rgb(14 147 132 / 10%);
}

.vn-home-hero__assurance {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vn-space-2) var(--vn-space-4);
  margin-block-start: var(--vn-space-4);
}

.vn-home-hero__assurance span {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--vn-muted);
  font-size: var(--vn-text-xs);
  font-weight: 600;
}

.vn-home-hero__assurance .vn-icon {
  color: var(--vn-signal);
}

.vn-product-stage {
  min-width: 0;
  border: 1px solid var(--vn-rule);
  border-radius: var(--vn-radius-frame);
  background: var(--vn-paper);
  box-shadow: var(--vn-shadow-md);
  overflow: hidden;
}

.vn-product-stage__bar {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  gap: var(--vn-space-3);
  border-block-end: 1px solid var(--vn-rule);
  color: var(--vn-muted);
  padding-inline: var(--vn-space-4);
  font-size: var(--vn-text-xs);
}

.vn-product-stage__bar > :last-child {
  margin-inline-start: auto;
}

.vn-product-stage__dots {
  display: flex;
  gap: 0.3rem;
}

.vn-product-stage__dots i {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--vn-rule-strong);
}

.vn-product-stage__dots i:first-child { background: #df667a; }
.vn-product-stage__dots i:nth-child(2) { background: #e8a950; }
.vn-product-stage__dots i:last-child { background: var(--vn-signal); }

.vn-product-stage__body {
  padding: var(--vn-space-4);
}

.vn-product-stage__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--vn-space-3);
  margin-block-end: var(--vn-space-6);
}

.vn-product-stage__heading span,
.vn-product-stage__heading strong {
  display: block;
}

.vn-product-stage__heading span {
  color: var(--vn-muted);
  font-size: var(--vn-text-xs);
}

.vn-product-stage__heading strong {
  color: var(--vn-ink);
  font-size: var(--vn-text-sm);
}

.vn-measured-path {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--vn-space-2);
}

.vn-measured-path > i {
  width: 2px;
  height: var(--vn-space-3);
  margin-inline-start: 1.15rem;
  background: linear-gradient(var(--vn-brand), var(--vn-signal));
}

.vn-measured-path__step {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--vn-space-2);
  border: 1px solid var(--vn-rule);
  border-radius: var(--vn-radius-control);
  padding: var(--vn-space-2);
}

.vn-measured-path__step > span {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--vn-radius-sm);
  background: var(--vn-surface-muted);
  color: var(--vn-muted);
}

.vn-measured-path__step.is-complete > span {
  background: var(--vn-signal-soft);
  color: var(--vn-signal);
}

.vn-measured-path__step.is-active {
  border-color: color-mix(in srgb, var(--vn-brand) 40%, var(--vn-rule));
  background: var(--vn-brand-soft);
}

.vn-measured-path__step.is-active > span {
  background: var(--vn-brand);
  color: #fff;
}

.vn-measured-path__step small,
.vn-measured-path__step b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vn-measured-path__step small {
  color: var(--vn-muted);
  font-size: 0.65rem;
}

.vn-measured-path__step b {
  color: var(--vn-ink);
  font-size: var(--vn-text-xs);
}

.vn-product-stage__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--vn-space-2);
  margin-block-start: var(--vn-space-6);
}

.vn-product-stage__metrics > div {
  min-width: 0;
  border: 1px solid var(--vn-rule);
  border-radius: var(--vn-radius-control);
  padding: var(--vn-space-2);
}

.vn-product-stage__metrics span,
.vn-product-stage__metrics strong,
.vn-product-stage__metrics small {
  display: block;
}

.vn-product-stage__metrics span,
.vn-product-stage__metrics small {
  overflow: hidden;
  color: var(--vn-muted);
  font-size: 0.625rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vn-product-stage__metrics strong {
  color: var(--vn-ink);
  font-size: var(--vn-text-lg);
  font-variant-numeric: tabular-nums;
}

.vn-product-stage__chart {
  height: 5rem;
  display: flex;
  align-items: flex-end;
  gap: var(--vn-space-2);
  margin-block-start: var(--vn-space-4);
  border-block-end: 1px solid var(--vn-rule);
  padding-inline: var(--vn-space-2);
}

.vn-product-stage__chart span {
  width: 100%;
  border-radius: 0.25rem 0.25rem 0 0;
  background: linear-gradient(var(--vn-signal), var(--vn-brand));
  opacity: 0.8;
}

.vn-product-stage__chart span:nth-child(1) { height: 30%; }
.vn-product-stage__chart span:nth-child(2) { height: 47%; }
.vn-product-stage__chart span:nth-child(3) { height: 39%; }
.vn-product-stage__chart span:nth-child(4) { height: 68%; }
.vn-product-stage__chart span:nth-child(5) { height: 52%; }
.vn-product-stage__chart span:nth-child(6) { height: 81%; }
.vn-product-stage__chart span:nth-child(7) { height: 71%; }
.vn-product-stage__chart span:nth-child(8) { height: 94%; }

.vn-trust-strip {
  /* Reset the legacy front.css `section` padding that otherwise adds
     300px of empty space around this compact capability band. */
  padding-block: 0;
  border-block-end: 1px solid var(--vn-rule);
  background: var(--vn-paper);
}

.vn-trust-strip .vn-container {
  min-height: 5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  align-items: center;
  gap: var(--vn-space-3) var(--vn-space-5);
  padding-block: var(--vn-space-4);
}

.vn-trust-strip span {
  display: inline-flex;
  align-items: center;
  gap: var(--vn-space-2);
  min-width: 0;
  color: var(--vn-muted);
  font-size: var(--vn-text-xs);
  font-weight: 700;
}

.vn-trust-strip .vn-icon {
  color: var(--vn-brand);
}

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

.vn-section-heading {
  max-width: 47rem;
  margin: 0 auto var(--vn-space-10);
  text-align: center;
}

.vn-section-heading .vn-overline {
  justify-content: center;
}

.vn-section-heading h2,
.vn-section-copy h2 {
  margin-block-end: var(--vn-space-4);
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.14;
  letter-spacing: -0.045em;
}

.vn-section-heading > p:last-child,
.vn-section-copy > p:not(.vn-overline):not(.vn-sample-note) {
  color: var(--vn-muted);
  font-size: var(--vn-text-lg);
}

.vn-section-heading--left {
  margin-inline: 0;
  text-align: start;
}

.vn-section-heading--left .vn-overline {
  justify-content: flex-start;
}

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

.vn-problem__grid {
  display: grid;
  gap: var(--vn-space-10);
  align-items: center;
}

.vn-problem .vn-section-copy {
  max-width: 35rem;
}

.vn-problem__compare {
  display: grid;
  gap: var(--vn-space-4);
}

.vn-problem__compare article {
  border: 1px solid var(--vn-rule);
  border-radius: var(--vn-radius-frame);
  background: var(--vn-paper);
  padding: var(--vn-space-6);
}

.vn-problem__compare article.is-solution {
  border-color: color-mix(in srgb, var(--vn-signal) 35%, var(--vn-rule));
  background: var(--vn-signal-soft);
}

.vn-problem__compare article > span {
  color: var(--vn-muted);
  font-size: var(--vn-text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.vn-problem__compare ul,
.vn-check-list,
.vn-price-card ul {
  display: grid;
  gap: var(--vn-space-3);
  margin: var(--vn-space-4) 0 0;
  padding: 0;
  list-style: none;
}

.vn-problem__compare li,
.vn-check-list li,
.vn-price-card li {
  position: relative;
  padding-inline-start: 1.5rem;
  color: var(--vn-text);
}

.vn-problem__compare li::before,
.vn-check-list li::before,
.vn-price-card li::before {
  content: "";
  position: absolute;
  width: 0.45rem;
  height: 0.45rem;
  inset-block-start: 0.55rem;
  inset-inline-start: 0;
  border-radius: 50%;
  background: var(--vn-rule-strong);
}

.vn-problem__compare .is-solution li::before,
.vn-check-list li::before,
.vn-price-card li::before {
  background: var(--vn-signal);
}

.vn-product {
  background: var(--vn-paper);
}

.vn-showcase {
  display: grid;
  align-items: center;
  gap: var(--vn-space-8);
  border-block-start: 1px solid var(--vn-rule);
  padding-block: var(--vn-space-10);
}

.vn-showcase__copy h3 {
  margin-block: var(--vn-space-3);
  max-width: 24ch;
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  line-height: 1.18;
}

.vn-showcase__copy > p {
  color: var(--vn-muted);
  font-size: var(--vn-text-lg);
}

.vn-link-preview,
.vn-qr-preview {
  border: 1px solid var(--vn-rule);
  border-radius: var(--vn-radius-frame);
  background: var(--vn-canvas);
  padding: var(--vn-space-4);
  box-shadow: var(--vn-shadow-sm);
}

.vn-link-preview__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--vn-space-4);
  color: var(--vn-ink);
  font-size: var(--vn-text-sm);
  font-weight: 700;
}

.vn-link-preview__search {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--vn-rule);
  border-radius: var(--vn-radius-control);
  background: var(--vn-paper);
  color: var(--vn-muted);
}

.vn-link-preview__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--vn-space-3);
  align-items: center;
  border: 1px solid var(--vn-rule);
  border-radius: var(--vn-radius-card);
  background: var(--vn-paper);
  padding: var(--vn-space-3);
}

.vn-link-preview__row + .vn-link-preview__row {
  margin-block-start: var(--vn-space-3);
}

.vn-link-preview__mark {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: var(--vn-radius-control);
  background: var(--vn-brand-soft);
  color: var(--vn-brand);
}

.vn-link-preview__row b,
.vn-link-preview__row code,
.vn-link-preview__row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vn-link-preview__row b {
  color: var(--vn-ink);
  font-size: var(--vn-text-sm);
}

.vn-link-preview__row code {
  background: transparent;
  color: var(--vn-brand);
  font-family: var(--vn-font-mono);
  font-size: var(--vn-text-xs);
}

.vn-link-preview__row small {
  color: var(--vn-muted);
}

.vn-link-preview__row .vn-status {
  grid-column: 2;
}

.vn-qr-preview {
  display: grid;
  align-items: center;
  gap: var(--vn-space-6);
}

.vn-qr-preview__code {
  position: relative;
  aspect-ratio: 1;
  width: min(100%, 17rem);
  display: grid;
  place-items: center;
  justify-self: center;
  border: 1rem solid var(--vn-paper);
  border-radius: var(--vn-radius-card);
  background:
    linear-gradient(90deg, var(--vn-ink) 12%, transparent 12% 24%, var(--vn-ink) 24% 38%, transparent 38% 48%, var(--vn-ink) 48% 58%, transparent 58% 72%, var(--vn-ink) 72% 84%, transparent 84%),
    linear-gradient(var(--vn-ink) 12%, transparent 12% 25%, var(--vn-ink) 25% 38%, transparent 38% 51%, var(--vn-ink) 51% 64%, transparent 64% 76%, var(--vn-ink) 76% 88%, transparent 88%);
  box-shadow: var(--vn-shadow-sm);
}

.vn-qr-preview__code i {
  position: absolute;
  width: 27%;
  aspect-ratio: 1;
  border: 0.6rem solid var(--vn-ink);
  background: var(--vn-paper);
}

.vn-qr-preview__code i:first-child { inset-block-start: 4%; inset-inline-start: 4%; }
.vn-qr-preview__code i:nth-child(2) { inset-block-start: 4%; inset-inline-end: 4%; }
.vn-qr-preview__code i:nth-child(3) { inset-block-end: 4%; inset-inline-start: 4%; }

.vn-qr-preview__code span {
  width: 22%;
  aspect-ratio: 1;
  border-radius: var(--vn-radius-sm);
  background: var(--vn-brand);
  box-shadow: 0 0 0 0.35rem var(--vn-paper);
}

.vn-qr-preview__controls > span,
.vn-qr-preview__controls > b {
  display: block;
}

.vn-qr-preview__controls > span {
  color: var(--vn-muted);
  font-size: var(--vn-text-xs);
}

.vn-qr-preview__controls > b {
  margin-block: var(--vn-space-1) var(--vn-space-4);
  color: var(--vn-ink);
}

.vn-qr-preview__controls > div {
  display: flex;
  gap: var(--vn-space-2);
  margin-block-end: var(--vn-space-6);
}

.vn-qr-preview__controls > div span {
  width: 2rem;
  height: 2rem;
  border: 3px solid var(--vn-paper);
  border-radius: 50%;
  background: var(--vn-brand);
  box-shadow: 0 0 0 1px var(--vn-rule);
}

.vn-qr-preview__controls > div span:nth-child(2) { background: var(--vn-signal); }
.vn-qr-preview__controls > div span:nth-child(3) { background: var(--vn-ink); }

.vn-preview-action {
  pointer-events: none;
  user-select: none;
}

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

.vn-workflows__grid {
  display: grid;
  gap: var(--vn-space-4);
}

.vn-workflow-card {
  border: 1px solid var(--vn-rule);
  border-radius: var(--vn-radius-frame);
  background: var(--vn-paper);
  padding: var(--vn-space-6);
}

.vn-workflow-card > span {
  color: var(--vn-brand);
  font-size: var(--vn-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vn-workflow-card h3 {
  margin-block: var(--vn-space-3) var(--vn-space-6);
  font-size: clamp(1.5rem, 4vw, 2.25rem);
}

.vn-workflow-card ol {
  display: grid;
  gap: var(--vn-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vn-workflow-card li {
  display: flex;
  align-items: center;
  gap: var(--vn-space-3);
  border-block-start: 1px solid var(--vn-rule);
  padding-block-start: var(--vn-space-3);
}

.vn-workflow-card li b {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--vn-brand-soft);
  color: var(--vn-brand);
  font-size: var(--vn-text-xs);
}

.vn-workflow-card--dark {
  border-color: var(--vn-ink);
  background: var(--vn-ink);
  color: #dce4f0;
}

.vn-workflow-card--dark > span {
  color: #76dfd2;
}

.vn-workflow-card--dark h3 {
  color: #fff;
}

.vn-use-cases {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vn-space-2);
  margin-block-end: var(--vn-space-6);
}

.vn-use-cases span {
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: var(--vn-radius-pill);
  background: rgb(255 255 255 / 6%);
  padding: 0.5rem 0.75rem;
  font-size: var(--vn-text-sm);
}

.vn-workflow-card--dark p {
  color: #aeb9c9;
}

.vn-analytics__grid,
.vn-domains__grid {
  display: grid;
  align-items: center;
  gap: var(--vn-space-10);
}

.vn-sample-note {
  border-inline-start: 3px solid var(--vn-signal);
  color: var(--vn-muted);
  padding-inline-start: var(--vn-space-3);
  font-size: var(--vn-text-sm);
}

.vn-analytics-panel {
  border: 1px solid var(--vn-rule);
  border-radius: var(--vn-radius-frame);
  background: var(--vn-paper);
  padding: var(--vn-space-4);
  box-shadow: var(--vn-shadow-sm);
}

.vn-analytics-panel__header,
.vn-analytics-panel__breakdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vn-space-3);
}

.vn-analytics-panel__header span,
.vn-analytics-panel__header b {
  display: block;
}

.vn-analytics-panel__header span {
  color: var(--vn-muted);
  font-size: var(--vn-text-xs);
}

.vn-analytics-panel__header b {
  color: var(--vn-ink);
}

.vn-analytics-panel__summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--vn-space-2);
  margin-block: var(--vn-space-6);
}

.vn-analytics-panel__summary > div {
  min-width: 0;
  border: 1px solid var(--vn-rule);
  border-radius: var(--vn-radius-control);
  padding: var(--vn-space-2);
}

.vn-analytics-panel__summary span,
.vn-analytics-panel__summary strong {
  display: block;
}

.vn-analytics-panel__summary span {
  overflow: hidden;
  color: var(--vn-muted);
  font-size: 0.625rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vn-analytics-panel__summary strong {
  color: var(--vn-ink);
  font-size: var(--vn-text-lg);
}

.vn-analytics-panel__line {
  width: 100%;
  height: auto;
  overflow: visible;
}

.vn-analytics-panel__line .grid {
  fill: none;
  stroke: var(--vn-rule);
  stroke-width: 1;
}

.vn-analytics-panel__line .area {
  fill: rgb(49 87 213 / 10%);
}

.vn-analytics-panel__line .line {
  fill: none;
  stroke: var(--vn-brand);
  stroke-width: 4;
  stroke-linecap: round;
}

.vn-analytics-panel__breakdown {
  flex-wrap: wrap;
  border-block-start: 1px solid var(--vn-rule);
  padding-block-start: var(--vn-space-4);
  color: var(--vn-muted);
  font-size: var(--vn-text-xs);
}

.vn-analytics-panel__breakdown span {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.vn-analytics-panel__breakdown i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--vn-brand);
}

.vn-analytics-panel__breakdown span:nth-child(2) i {
  background: var(--vn-rule-strong);
}

.vn-analytics-panel__breakdown a {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-inline-start: auto;
  font-weight: 700;
}

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

.vn-domain-example {
  border-radius: var(--vn-radius-frame);
  background: var(--vn-ink);
  color: #fff;
  padding: var(--vn-space-6);
  box-shadow: var(--vn-shadow-md);
}

.vn-domain-example > span {
  display: block;
  color: #aeb9c9;
  font-size: var(--vn-text-xs);
}

.vn-domain-example > strong {
  display: block;
  overflow-wrap: anywhere;
  margin-block: var(--vn-space-2) var(--vn-space-8);
  font-size: clamp(1.25rem, 4vw, 2rem);
}

.vn-domain-steps {
  display: grid;
  gap: var(--vn-space-2);
}

.vn-domain-steps span {
  display: flex;
  align-items: center;
  gap: var(--vn-space-2);
  border-block-start: 1px solid rgb(255 255 255 / 12%);
  padding-block-start: var(--vn-space-2);
  color: #c9d2df;
  font-size: var(--vn-text-sm);
}

.vn-domain-steps span::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #76dfd2;
}

.vn-security__grid,
.vn-pricing__grid {
  display: grid;
  gap: var(--vn-space-4);
}

.vn-security__grid article {
  border-block-start: 1px solid var(--vn-rule);
  padding-block-start: var(--vn-space-6);
}

.vn-security__grid .vn-icon {
  color: var(--vn-brand);
}

.vn-security__grid h3 {
  margin-block: var(--vn-space-4) var(--vn-space-2);
  font-size: var(--vn-text-lg);
}

.vn-security__grid p {
  color: var(--vn-muted);
}

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

.vn-price-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--vn-rule);
  border-radius: var(--vn-radius-card);
  background: var(--vn-paper);
  padding: var(--vn-space-6);
}

.vn-price-card.is-featured {
  border: 2px solid var(--vn-brand);
  box-shadow: var(--vn-shadow-sm);
}

.vn-price-card > span {
  color: var(--vn-brand);
  font-size: var(--vn-text-sm);
  font-weight: 700;
}

.vn-price-card > strong {
  min-height: 3.5rem;
  display: flex;
  align-items: center;
  margin-block: var(--vn-space-3);
  color: var(--vn-ink);
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.15;
}

.vn-price-card > strong small {
  color: var(--vn-muted);
  font-size: var(--vn-text-xs);
  font-weight: 500;
}

.vn-price-card > p {
  min-height: 3rem;
  color: var(--vn-muted);
}

.vn-price-card ul {
  flex: 1;
  margin-block-end: var(--vn-space-6);
}

.vn-faq__grid {
  display: grid;
  gap: var(--vn-space-10);
  align-items: start;
}

.vn-faq .vn-section-copy {
  position: sticky;
  inset-block-start: 7rem;
}

.vn-faq .vn-section-copy a {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 700;
}

.vn-faq__items {
  border-block-start: 1px solid var(--vn-rule);
}

.vn-faq details {
  border-block-end: 1px solid var(--vn-rule);
}

.vn-faq summary {
  position: relative;
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  color: var(--vn-ink);
  padding: var(--vn-space-4) 2.5rem var(--vn-space-4) 0;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.vn-faq summary::-webkit-details-marker {
  display: none;
}

.vn-faq summary::before,
.vn-faq summary::after {
  content: "";
  position: absolute;
  inset-inline-end: 0.5rem;
  width: 1rem;
  height: 2px;
  background: var(--vn-brand);
  transition: rotate var(--vn-duration-fast) var(--vn-ease);
}

.vn-faq summary::after {
  rotate: 90deg;
}

.vn-faq details[open] summary::after {
  rotate: 0deg;
}

.vn-faq details p {
  max-width: 44rem;
  color: var(--vn-muted);
  padding-block-end: var(--vn-space-4);
}

.vn-home-final {
  padding-block: 0 var(--vn-space-16);
}

.vn-home-final__panel {
  display: grid;
  gap: var(--vn-space-6);
  border-radius: var(--vn-radius-frame);
  background: var(--vn-brand-soft);
  padding: var(--vn-space-6);
}

.vn-home-final__panel h2 {
  max-width: 20ch;
  margin: 0;
  font-size: clamp(1.75rem, 5vw, 3rem);
}

.vn-site-footer {
  background: var(--vn-ink);
  color: #c5cfdd;
  padding-block: var(--vn-space-12) var(--vn-space-6);
}

.vn-site-footer__main {
  display: grid;
  gap: var(--vn-space-8);
}

.vn-wordmark--footer {
  color: #fff !important;
}

.vn-wordmark--footer > span > span {
  color: #76dfd2;
}

.vn-site-footer__brand p {
  max-width: 28rem;
  margin-block-start: var(--vn-space-4);
  color: #9eabbd;
  font-size: var(--vn-text-sm);
}

.vn-site-footer__group {
  display: grid;
  align-content: start;
  gap: var(--vn-space-2);
}

.vn-site-footer__group h2 {
  margin: 0 0 var(--vn-space-2);
  color: #fff;
  font-size: var(--vn-text-sm);
  letter-spacing: 0;
}

.vn-site-footer__group a {
  color: #aeb9c9;
  font-size: var(--vn-text-sm);
}

.vn-site-footer__group a:hover {
  color: #fff;
}

.vn-site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--vn-space-2);
  margin-block-start: var(--vn-space-10);
  border-block-start: 1px solid rgb(255 255 255 / 12%);
  padding-block-start: var(--vn-space-4);
  color: #8f9caf;
  font-size: var(--vn-text-xs);
}

/* Existing managed content pages remain readable during staged migration. */
.vn-marketing--inner {
  padding-block-start: 4.75rem;
  background: var(--vn-canvas);
}

.vn-marketing--inner > header:not(.vn-site-header) {
  min-height: 16rem;
  display: grid;
  align-items: end;
  background: var(--vn-paper);
  padding-block: var(--vn-space-12) var(--vn-space-8);
}

.vn-marketing--inner > header:not(.vn-site-header) .intro-text {
  padding: 0;
}

.vn-marketing--inner > header:not(.vn-site-header) .intro-lead-in {
  color: var(--vn-ink);
  font-family: var(--vn-font-sans);
  font-size: var(--vn-text-3xl);
  font-weight: 700;
  line-height: 1.2;
}

.vn-marketing--inner > section {
  padding-block: var(--vn-space-10);
}

.vn-marketing--inner > section > .container {
  border: 1px solid var(--vn-rule);
  border-radius: var(--vn-radius-card);
  background: var(--vn-paper);
  padding: var(--vn-space-6);
}

@media (min-width: 36rem) {
  .vn-home-shortener__control {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .vn-home-shortener__control .vn-button {
    grid-column: auto;
    width: auto;
  }

  .vn-measured-path {
    grid-template-columns: repeat(7, auto);
    align-items: center;
  }

  .vn-measured-path > i {
    width: 1.5rem;
    height: 2px;
    margin: 0;
  }

  .vn-measured-path__step {
    width: 4.8rem;
    display: grid;
    justify-items: center;
    text-align: center;
  }

  .vn-measured-path__step > div {
    min-width: 0;
    width: 100%;
  }

  .vn-link-preview__row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .vn-link-preview__row .vn-status {
    grid-column: auto;
  }

  .vn-qr-preview {
    grid-template-columns: 1fr 0.9fr;
  }

  .vn-site-footer__main {
    grid-template-columns: repeat(2, 1fr);
  }

  .vn-site-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (min-width: 48rem) {
  .vn-marketing .vn-container {
    width: min(calc(100% - 3rem), var(--vn-marketing-container));
  }

  .vn-home-hero {
    padding-block: var(--vn-space-20) var(--vn-space-16);
  }

  .vn-product-stage__body,
  .vn-link-preview,
  .vn-qr-preview,
  .vn-analytics-panel {
    padding: var(--vn-space-6);
  }

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

  .vn-problem__compare {
    grid-template-columns: repeat(2, 1fr);
  }

  .vn-workflows__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .vn-security__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .vn-pricing__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .vn-domain-steps {
    grid-template-columns: repeat(3, 1fr);
  }

  .vn-site-footer__main {
    grid-template-columns: 1.5fr repeat(3, 1fr);
  }

  .vn-site-footer__brand {
    grid-column: span 4;
  }

  .vn-site-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

@media (max-width: 35.99rem) {
  .vn-trust-strip .vn-container {
    grid-template-columns: 1fr;
    gap: var(--vn-space-3);
    padding-block: var(--vn-space-5);
  }
}

.vn-final-pricing__grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.vn-help-page {
  min-height: calc(100vh - 8rem);
  padding-block: clamp(7rem, 12vw, 10rem) clamp(4rem, 9vw, 7rem);
  background: var(--vn-canvas);
}
.vn-help-page > header h1,
.vn-help-article h1 { max-width: 16ch; margin: 0 0 var(--vn-space-4); color: var(--vn-ink); font-size: clamp(2.5rem, 7vw, 4.75rem); letter-spacing: -0.06em; }
.vn-help-page > header > p { max-width: 62ch; color: var(--vn-muted); font-size: 1.1rem; line-height: 1.65; }
.vn-help-search { display: flex; max-width: 44rem; gap: var(--vn-space-3); align-items: end; margin-block: var(--vn-space-8) var(--vn-space-12); }
.vn-help-search .input { flex: 1; }
.vn-help-search label { display: block; margin-bottom: var(--vn-space-2); color: var(--vn-ink); font-weight: 700; }
.vn-help-search input { width: 100%; min-height: 3.25rem; padding: 0.8rem 1rem; border: 1px solid var(--vn-rule-strong); border-radius: var(--vn-radius-sm); color: var(--vn-ink); background: var(--vn-paper); }
.vn-help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: var(--vn-space-4); }
.vn-help-grid article { display: flex; min-height: 17rem; padding: var(--vn-space-6); border: 1px solid var(--vn-rule); border-radius: var(--vn-radius-lg); flex-direction: column; background: var(--vn-paper); }
.vn-help-grid article span { color: var(--vn-brand); font-size: var(--vn-text-xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.vn-help-grid article h2 { margin: var(--vn-space-5) 0 var(--vn-space-3); color: var(--vn-ink); font-size: 1.25rem; }
.vn-help-grid article p { color: var(--vn-muted); line-height: 1.6; }
.vn-help-grid article a { margin-top: auto; color: var(--vn-brand); font-weight: 800; }
.vn-help-article { max-width: 55rem; }
.vn-help-article nav { margin-bottom: var(--vn-space-12); color: var(--vn-muted); }
.vn-help-article__summary { color: var(--vn-text); font-size: 1.2rem; line-height: 1.65; }
.vn-help-article__body { margin-block: var(--vn-space-10); padding: clamp(1.5rem, 5vw, 3rem); border: 1px solid var(--vn-rule); border-radius: var(--vn-radius-lg); color: var(--vn-text); background: var(--vn-paper); font-size: 1.05rem; line-height: 1.85; }
.vn-help-article aside { padding-block: var(--vn-space-6); border-block-start: 1px solid var(--vn-rule); }
@media (max-width: 35.99rem) { .vn-help-search { align-items: stretch; flex-direction: column; } }

.vn-tools-page {
  min-height: calc(100vh - 8rem);
  padding-block: clamp(7rem, 12vw, 10rem) clamp(4rem, 9vw, 7rem);
  background: var(--vn-canvas);
}

.vn-tools-hero {
  display: grid;
  gap: var(--vn-space-4);
  margin-bottom: var(--vn-space-12);
}

.vn-tools-hero h1,
.vn-tool-workspace > header h1 {
  max-width: 15ch;
  margin: 0;
  color: var(--vn-ink);
  font-size: clamp(2.5rem, 7vw, 4.75rem);
  letter-spacing: -0.06em;
}

.vn-tools-hero > p:last-child,
.vn-tool-workspace > header > p:last-child {
  max-width: 62ch;
  color: var(--vn-muted);
  font-size: 1.1rem;
  line-height: 1.65;
}

.vn-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--vn-space-4);
}

.vn-tool-card,
.vn-tool-panel,
.vn-tool-result,
.vn-tool-guidance {
  padding: clamp(1.25rem, 4vw, 2rem);
  border: 1px solid var(--vn-rule);
  border-radius: var(--vn-radius-lg);
  background: var(--vn-paper);
  box-shadow: var(--vn-shadow-sm);
}

.vn-tool-card { display: flex; min-height: 19rem; flex-direction: column; }
.vn-tool-card > span { color: var(--vn-signal); font-size: var(--vn-text-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.vn-tool-card h2 { margin: var(--vn-space-6) 0 var(--vn-space-3); color: var(--vn-ink); font-size: 1.35rem; }
.vn-tool-card p { color: var(--vn-muted); line-height: 1.6; }
.vn-tool-card .vn-button { margin-top: auto; align-self: flex-start; }

.vn-tool-workspace { display: grid; gap: var(--vn-space-6); }
.vn-tool-workspace > header { margin-bottom: var(--vn-space-6); }
.vn-tool-panel form { display: grid; gap: var(--vn-space-5); }
.vn-tool-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vn-space-4); }
.vn-tool-panel .input label,
.vn-tool-result label { display: block; margin-bottom: var(--vn-space-2); color: var(--vn-ink); font-weight: 700; }
.vn-tool-panel input:not([type="checkbox"]),
.vn-tool-panel select,
.vn-tool-panel textarea,
.vn-tool-result input {
  width: 100%;
  min-height: 3rem;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--vn-rule-strong);
  border-radius: var(--vn-radius-sm);
  color: var(--vn-ink);
  background: var(--vn-canvas);
}
.vn-tool-panel textarea { min-height: 8rem; resize: vertical; }
.vn-tool-panel input:focus-visible,
.vn-tool-panel select:focus-visible,
.vn-tool-panel textarea:focus-visible,
.vn-tool-result input:focus-visible { outline: 3px solid var(--vn-focus); outline-offset: 2px; }
.vn-tool-result { display: grid; gap: var(--vn-space-4); }
.vn-tool-result img { width: min(100%, 26rem); height: auto; border-radius: var(--vn-radius-sm); }
.vn-tool-result dl { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--vn-rule); border-radius: var(--vn-radius-sm); }
.vn-tool-result dl div { display: grid; grid-template-columns: minmax(8rem, 0.4fr) 1fr; gap: var(--vn-space-4); padding: var(--vn-space-3) var(--vn-space-4); background: var(--vn-canvas); }
.vn-tool-result dt { color: var(--vn-muted); font-weight: 700; }
.vn-tool-result dd { margin: 0; color: var(--vn-ink); overflow-wrap: anywhere; }
.vn-tool-result--error { border-color: var(--vn-danger); color: var(--vn-danger); background: var(--vn-danger-soft); }
.vn-tool-notice { padding: var(--vn-space-4); border-inline-start: 3px solid var(--vn-warning); color: var(--vn-ink); background: var(--vn-warning-soft); }

@media (max-width: 35.99rem) {
  .vn-tool-fields,
  .vn-tool-result dl div { grid-template-columns: 1fr; }
}

/* Public trust-and-safety intake */
.vn-report-page {
  min-height: calc(100vh - 12rem);
  padding: clamp(3rem, 8vw, 7rem) 1rem;
  background:
    radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--vn-brand) 9%, transparent), transparent 25rem),
    var(--vn-canvas);
}

.vn-report-card {
  width: min(100%, 45rem);
  margin-inline: auto;
  padding: clamp(1.5rem, 5vw, 3rem);
  border: 1px solid var(--vn-rule);
  border-radius: var(--vn-radius-lg);
  background: var(--vn-paper);
  box-shadow: var(--vn-shadow-lg);
}

.vn-report-card h1 {
  max-width: 15ch;
  margin: 0 0 var(--vn-space-4);
  color: var(--vn-ink);
  font-size: clamp(2rem, 6vw, 3.5rem);
  letter-spacing: -0.055em;
}

.vn-report-card > p:not(.vn-overline) {
  max-width: 60ch;
  margin: 0 0 var(--vn-space-7);
  color: var(--vn-muted);
  line-height: 1.65;
}

.vn-report-card form {
  display: grid;
  gap: var(--vn-space-5);
}

.vn-report-card .input label {
  display: block;
  margin-bottom: var(--vn-space-2);
  color: var(--vn-ink);
  font-weight: 700;
}

.vn-report-card input:not([type="checkbox"]),
.vn-report-card select,
.vn-report-card textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--vn-rule-strong);
  border-radius: var(--vn-radius-sm);
  color: var(--vn-ink);
  background: var(--vn-canvas);
}

.vn-report-card textarea { min-height: 10rem; resize: vertical; }
.vn-report-card input:focus-visible,
.vn-report-card select:focus-visible,
.vn-report-card textarea:focus-visible {
  border-color: var(--vn-brand);
  outline: 3px solid color-mix(in srgb, var(--vn-brand) 22%, transparent);
  outline-offset: 2px;
}

.vn-report-resource {
  display: grid;
  gap: var(--vn-space-1);
  padding: var(--vn-space-4);
  border-inline-start: 3px solid var(--vn-brand);
  background: var(--vn-surface-muted);
}

.vn-report-resource span { color: var(--vn-muted); overflow-wrap: anywhere; }
.vn-honeypot { position: absolute; inset-inline-start: -10000px; }

.vn-final-pricing__grid article.is-featured {
  border-color: #76dfd2;
  box-shadow: 0 0 0 1px #76dfd2, 0 18px 46px rgb(0 0 0 / 18%);
}

.vn-final-pricing__grid article > strong small {
  max-width: 12rem;
  display: inline-block;
  margin-inline-start: 0.35rem;
  line-height: 1.35;
}

.vn-migration-story {
  background: linear-gradient(180deg, #f7f9fd, #fff);
}

.vn-migration-story__panel {
  display: grid;
  gap: clamp(1.5rem, 5vw, 5rem);
  padding: clamp(1.5rem, 5vw, 3.5rem);
  border: 1px solid var(--vn-rule);
  border-radius: var(--vn-radius-frame);
  background: var(--vn-paper);
  box-shadow: var(--vn-shadow-sm);
}

.vn-migration-story h2 {
  margin: 0;
  color: var(--vn-ink);
  font-size: clamp(2rem, 4vw, 3.25rem);
  letter-spacing: -0.045em;
}

.vn-migration-story__panel > div:last-child {
  align-self: center;
}

.vn-migration-story__panel > div:last-child p {
  margin: 0;
  color: var(--vn-muted);
  line-height: 1.75;
}

.vn-migration-story__panel a {
  display: inline-flex;
  align-items: center;
  gap: var(--vn-space-2);
  margin-block-start: var(--vn-space-5);
  color: var(--vn-brand);
  font-weight: 800;
}

.vn-faq__items details {
  scroll-margin-top: 7rem;
}

@media (min-width: 64rem) {
  .vn-migration-story__panel {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

@media (min-width: 64rem) {
  .vn-marketing .vn-container {
    width: min(
      calc(100% - clamp(4rem, 12vw, 12rem)),
      var(--vn-marketing-container)
    );
  }

  .vn-site-header__menu {
    display: none !important;
  }

  .vn-site-nav {
    position: static;
    max-height: none;
    display: flex;
    align-items: center;
    gap: var(--vn-space-1);
    margin-inline: auto;
    overflow: visible;
    border: 0;
    background: transparent;
    padding: 0;
    box-shadow: none;
  }

  .vn-site-nav a {
    min-height: 2.75rem;
    padding-inline: 0.65rem;
  }

  .vn-site-header__actions {
    display: flex;
  }

  .vn-home-hero__grid {
    grid-template-columns: minmax(31rem, 0.9fr) minmax(32rem, 1.1fr);
    gap: clamp(3rem, 5vw, 5rem);
  }

  .vn-home-hero h1 {
    font-size: clamp(3.55rem, 4.55vw, 4.45rem);
  }

  .vn-home-hero h1 span {
    white-space: nowrap;
  }

  .vn-product-stage {
    rotate: 1deg;
  }

  .vn-problem__grid {
    grid-template-columns: minmax(21rem, 0.82fr) minmax(0, 1.18fr);
    gap: clamp(3rem, 6vw, 6rem);
  }

  .vn-showcase {
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--vn-space-16);
    padding-block: var(--vn-space-16);
  }

  .vn-showcase--reverse .vn-showcase__copy {
    grid-column: 2;
    grid-row: 1;
  }

  .vn-showcase--reverse .vn-qr-preview {
    grid-column: 1;
    grid-row: 1;
  }

  .vn-analytics__grid,
  .vn-domains__grid {
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--vn-space-16);
  }

  .vn-domains__grid {
    grid-template-columns: 1.1fr 0.9fr;
  }

  .vn-security__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .vn-pricing__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .vn-faq__grid {
    grid-template-columns: 0.72fr 1.28fr;
    gap: var(--vn-space-20);
  }

  .vn-home-final__panel {
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: var(--vn-space-10);
  }

  .vn-site-footer__main {
    grid-template-columns: 1.7fr repeat(4, 1fr);
  }

  .vn-site-footer__brand {
    grid-column: auto;
  }
}

@media (min-width: 90rem) {
  .vn-home-hero {
    padding-block: 6rem 5rem;
  }

  .vn-home-hero__grid {
    grid-template-columns: minmax(33rem, 0.92fr) minmax(36rem, 1.08fr);
  }
}

@media (max-width: 63.99rem) {
  .vn-site-header__menu {
    display: inline-grid !important;
    visibility: visible;
  }

  .vn-site-header__inner {
    position: relative;
  }

  .vn-site-header__actions {
    margin-inline-start: 0;
  }

  .vn-faq .vn-section-copy {
    position: static;
  }

  .vn-home-hero h1 span {
    width: auto;
  }
}

@media (max-width: 35.99rem) {
  .vn-product-stage__heading .vn-button {
    display: none;
  }

  .vn-product-stage__metrics strong {
    font-size: var(--vn-text-sm);
  }

  .vn-analytics-panel__breakdown a {
    width: 100%;
    margin-inline-start: 0;
  }

  .vn-home-final__panel .vn-cluster,
  .vn-home-final__panel .vn-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Final public homepage and journal
   -------------------------------------------------------------- */
.vn-home--final {
  overflow: clip;
  background: var(--vn-bg);
}

.vn-home--final .vn-container,
.vn-blog .vn-container {
  width: min(100% - clamp(2.5rem, 8vw, 8rem), 84rem);
  max-width: none;
  margin-inline: auto;
}

.vn-site-nav__list,
.vn-site-footer__menu {
  display: flex;
  align-items: center;
  gap: var(--vn-space-2);
  padding: 0;
  margin: 0;
  list-style: none;
}

.vn-site-nav__item,
.vn-site-footer__menu-item {
  margin: 0;
}

.vn-site-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: 0.85rem;
  color: var(--vn-text-secondary);
  font-size: var(--vn-text-sm);
  font-weight: 700;
  border-radius: var(--vn-radius-sm);
}

.vn-site-nav__link:hover,
.vn-site-nav__link:focus-visible {
  color: var(--vn-brand);
  background: var(--vn-brand-soft);
}

.vn-site-nav__link[href$="/auth/signup"],
.vn-site-nav__link[href$="/member/dashboard"] {
  margin-inline-start: var(--vn-space-2);
  padding-inline: 1.1rem;
  color: #fff;
  background: var(--vn-brand);
  box-shadow: var(--vn-shadow-sm);
}

.vn-site-nav__link[href$="/auth/signup"]:hover,
.vn-site-nav__link[href$="/auth/signup"]:focus-visible,
.vn-site-nav__link[href$="/member/dashboard"]:hover,
.vn-site-nav__link[href$="/member/dashboard"]:focus-visible {
  color: #fff;
  background: var(--vn-brand-strong);
}

.vn-overline {
  display: flex;
  align-items: center;
  gap: var(--vn-space-3);
  margin: 0 0 var(--vn-space-5);
  color: var(--vn-brand);
  font-size: var(--vn-text-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.vn-overline > span {
  width: 1.75rem;
  height: 2px;
  background: linear-gradient(90deg, var(--vn-brand), var(--vn-signal));
}

.vn-final-hero {
  position: relative;
  padding-block: clamp(4.5rem, 8vw, 7.75rem);
  background:
    radial-gradient(circle at 90% 0%, rgba(49, 87, 213, 0.12), transparent 30rem),
    linear-gradient(180deg, #f6f8ff 0%, var(--vn-bg) 68%);
}

.vn-final-hero::after {
  position: absolute;
  top: -9rem;
  right: -8rem;
  width: 31rem;
  aspect-ratio: 1;
  border: 1px solid rgba(49, 87, 213, 0.1);
  border-radius: 50%;
  box-shadow: 0 0 0 4rem rgba(49, 87, 213, 0.025), 0 0 0 8rem rgba(49, 87, 213, 0.018);
  content: "";
  pointer-events: none;
}

.vn-final-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(31rem, 1.12fr);
  gap: clamp(3rem, 7vw, 7.5rem);
  align-items: center;
}

.vn-final-hero__copy {
  min-width: 0;
}

.vn-final-hero h1 {
  max-width: 10ch;
  margin: 0;
  color: var(--vn-text);
  font-size: clamp(3.75rem, 6.1vw, 6.35rem);
  font-weight: 800;
  letter-spacing: -0.068em;
  line-height: 0.94;
}

.vn-final-hero h1 em {
  color: var(--vn-brand);
  font-style: normal;
}

.vn-final-hero__lead {
  max-width: 38rem;
  margin: var(--vn-space-8) 0 var(--vn-space-8);
  color: var(--vn-text-secondary);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.7;
}

.vn-final-hero__shortener {
  max-width: 42rem;
}

.vn-final-hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vn-space-5);
  padding: 0;
  margin: var(--vn-space-6) 0 0;
  color: var(--vn-text-secondary);
  font-size: var(--vn-text-xs);
  font-weight: 700;
  list-style: none;
}

.vn-final-hero__proof li {
  display: inline-flex;
  align-items: center;
  gap: var(--vn-space-2);
}

.vn-final-hero__proof svg {
  color: var(--vn-signal-strong);
}

.vn-route-board {
  position: relative;
  min-width: 0;
  overflow: hidden;
  color: #f8fbff;
  background: #0d1a31;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.5rem;
  box-shadow: 0 2rem 5rem rgba(17, 31, 58, 0.22);
}

.vn-route-board::before {
  position: absolute;
  right: -7rem;
  bottom: -9rem;
  width: 23rem;
  aspect-ratio: 1;
  border: 4rem solid rgba(75, 114, 242, 0.09);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.vn-route-board__top {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--vn-space-4);
  align-items: center;
  padding: 0.9rem 1.1rem;
  color: #9faec5;
  font-size: var(--vn-text-xs);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.vn-route-board__top div {
  display: flex;
  gap: 0.32rem;
}

.vn-route-board__top i {
  width: 0.48rem;
  aspect-ratio: 1;
  background: #f37066;
  border-radius: 50%;
}

.vn-route-board__top i:nth-child(2) { background: #f5bd4f; }
.vn-route-board__top i:nth-child(3) { background: #59c7a6; }

.vn-route-board__top strong {
  padding: 0.35rem 0.65rem;
  color: #9bf1d8;
  font-size: 0.69rem;
  background: rgba(47, 181, 145, 0.13);
  border-radius: 999px;
}

.vn-route-board__body {
  position: relative;
  z-index: 1;
  padding: clamp(1.4rem, 3vw, 2.25rem);
}

.vn-route-board__body > header {
  display: flex;
  justify-content: space-between;
  gap: var(--vn-space-4);
  align-items: flex-start;
}

.vn-route-board__body header span,
.vn-route-board__body header > span {
  color: #91a1bb;
  font-size: var(--vn-text-xs);
}

.vn-route-board__body header > span {
  padding: 0.4rem 0.65rem;
  color: #bcd1ff;
  background: rgba(75, 114, 242, 0.13);
  border: 1px solid rgba(116, 149, 255, 0.18);
  border-radius: 999px;
}

.vn-route-board__body h2 {
  margin: 0.2rem 0 0;
  color: #fff;
  font-size: 1.2rem;
}

.vn-route-line {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--vn-space-3);
  padding: 0;
  margin: var(--vn-space-8) 0;
  list-style: none;
}

.vn-route-line::before {
  position: absolute;
  top: 1.65rem;
  left: 9%;
  right: 9%;
  height: 2px;
  background: linear-gradient(90deg, var(--vn-signal), var(--vn-brand) 45%, rgba(255,255,255,.16));
  content: "";
}

.vn-route-line li {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: 1rem 0.7rem;
  background: #13233d;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--vn-radius-md);
}

.vn-route-line li > span {
  display: grid;
  width: 2.35rem;
  aspect-ratio: 1;
  place-items: center;
  margin-bottom: 1rem;
  color: #b6c3d8;
  background: #1b2d49;
  border-radius: 0.7rem;
}

.vn-route-line .is-done > span {
  color: #72e1c2;
  background: rgba(47, 181, 145, 0.14);
}

.vn-route-line .is-current {
  background: #172d59;
  border-color: #5278f0;
}

.vn-route-line .is-current > span {
  color: #fff;
  background: var(--vn-brand);
}

.vn-route-line small,
.vn-route-line b {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vn-route-line small {
  margin-bottom: 0.25rem;
  color: #8292ad;
  font-size: 0.65rem;
}

.vn-route-line b {
  color: #f8fbff;
  font-size: 0.76rem;
}

.vn-route-board__note {
  display: flex;
  gap: var(--vn-space-4);
  align-items: center;
  padding: var(--vn-space-4);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--vn-radius-md);
}

.vn-route-board__note > svg { flex: 0 0 auto; color: #72e1c2; }
.vn-route-board__note strong,
.vn-route-board__note span { display: block; }
.vn-route-board__note strong { margin-bottom: 0.2rem; font-size: var(--vn-text-sm); }
.vn-route-board__note span { color: #95a5bd; font-size: var(--vn-text-xs); line-height: 1.5; }

.vn-final-strip {
  color: #66748b;
  background: #fff;
  border-block: 1px solid var(--vn-border);
}

.vn-final-strip .vn-container {
  display: flex;
  justify-content: center;
  gap: clamp(1.25rem, 4vw, 4rem);
  align-items: center;
  min-height: 5.25rem;
  font-size: var(--vn-text-xs);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.vn-final-strip i {
  width: 0.3rem;
  aspect-ratio: 1;
  background: var(--vn-signal);
  border-radius: 50%;
}

.vn-final-section {
  padding-block: clamp(4.5rem, 8vw, 7.5rem);
}

.vn-final-section__heading {
  max-width: 47rem;
  margin: 0 auto clamp(2.5rem, 5vw, 4.5rem);
  text-align: center;
}

.vn-final-section__heading--left {
  margin-inline: 0;
  text-align: left;
}

.vn-final-section__heading .vn-overline {
  justify-content: center;
}

.vn-final-section__heading--left .vn-overline,
.vn-final-section__heading--row .vn-overline {
  justify-content: flex-start;
}

.vn-final-section__heading h2,
.vn-final-cta h2,
.vn-blog h1 {
  margin: 0;
  color: var(--vn-text);
  font-size: clamp(2.25rem, 4vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 1.02;
}

.vn-final-section__heading > p:not(.vn-overline),
.vn-final-section__heading > div > p:not(.vn-overline) {
  max-width: 42rem;
  margin: var(--vn-space-5) auto 0;
  color: var(--vn-text-secondary);
  font-size: 1.05rem;
  line-height: 1.7;
}

.vn-final-section__heading--left > p:not(.vn-overline) {
  margin-inline: 0;
}

.vn-final-process__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--vn-space-5);
  padding: 0;
  list-style: none;
}

.vn-final-process__grid::before {
  position: absolute;
  top: 3rem;
  left: 15%;
  right: 15%;
  height: 1px;
  background: var(--vn-border);
  content: "";
}

.vn-final-process__grid li {
  position: relative;
  padding: 5.6rem clamp(1.5rem, 3vw, 2.5rem) 2.5rem;
  background: #fff;
  border: 1px solid var(--vn-border);
  border-radius: var(--vn-radius-lg);
  box-shadow: var(--vn-shadow-xs);
}

.vn-final-process__grid li > b {
  position: absolute;
  top: 1rem;
  left: 1.25rem;
  color: #a4afc0;
  font-family: var(--vn-font-mono);
  font-size: var(--vn-text-xs);
}

.vn-final-process__grid li > span {
  position: absolute;
  z-index: 1;
  top: 1.7rem;
  left: 50%;
  display: grid;
  width: 3rem;
  aspect-ratio: 1;
  color: var(--vn-brand);
  background: var(--vn-brand-soft);
  border: 6px solid #fff;
  border-radius: 50%;
  place-items: center;
  transform: translateX(-50%);
}

.vn-final-process__grid h3,
.vn-final-feature h3,
.vn-final-audience h3,
.vn-final-journal h3 {
  margin: 0 0 var(--vn-space-3);
  color: var(--vn-text);
  font-size: 1.25rem;
  letter-spacing: -0.025em;
}

.vn-final-process__grid p,
.vn-final-feature p,
.vn-final-audience p,
.vn-final-journal p {
  margin: 0;
  color: var(--vn-text-secondary);
  line-height: 1.7;
}

.vn-final-product {
  background: #f4f7fc;
  border-block: 1px solid var(--vn-border);
}

.vn-final-product__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--vn-space-5);
}

.vn-final-feature {
  min-width: 0;
  padding: clamp(1.75rem, 4vw, 3rem);
  background: #fff;
  border: 1px solid var(--vn-border);
  border-radius: var(--vn-radius-lg);
  box-shadow: var(--vn-shadow-xs);
}

.vn-final-feature--wide,
.vn-final-feature--domain {
  grid-column: 1 / -1;
}

.vn-final-feature--wide {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(22rem, 1.2fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}

.vn-final-feature > span:not(:has(svg)),
.vn-final-feature > div > span,
.vn-final-audience article > span {
  display: block;
  margin-bottom: var(--vn-space-4);
  color: var(--vn-brand);
  font-size: var(--vn-text-xs);
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.vn-final-feature > span:has(svg) {
  display: grid;
  width: 3.25rem;
  aspect-ratio: 1;
  place-items: center;
  margin-bottom: var(--vn-space-7);
  color: var(--vn-brand);
  background: var(--vn-brand-soft);
  border-radius: var(--vn-radius-md);
}

.vn-final-feature h3 {
  font-size: clamp(1.55rem, 2.5vw, 2.4rem);
}

.vn-final-feature a,
.vn-final-journal a,
.vn-final-faq a {
  display: inline-flex;
  gap: var(--vn-space-2);
  align-items: center;
  margin-top: var(--vn-space-6);
  color: var(--vn-brand);
  font-weight: 800;
}

.vn-final-link-list {
  overflow: hidden;
  background: #f7f9fd;
  border: 1px solid var(--vn-border);
  border-radius: var(--vn-radius-md);
}

.vn-final-link-list p {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--vn-space-4);
  align-items: center;
  padding: var(--vn-space-4);
}

.vn-final-link-list p + p { border-top: 1px solid var(--vn-border); }
.vn-final-link-list i { width: 0.55rem; aspect-ratio: 1; background: var(--vn-brand); border-radius: 50%; }
.vn-final-link-list b,
.vn-final-link-list small { display: block; }
.vn-final-link-list b { color: var(--vn-text); font-size: var(--vn-text-sm); }
.vn-final-link-list small { margin-top: 0.2rem; color: var(--vn-text-tertiary); font-family: var(--vn-font-mono); font-size: var(--vn-text-xs); }
.vn-final-link-list em { padding: 0.3rem 0.55rem; color: #087f64; font-size: 0.68rem; font-style: normal; font-weight: 800; background: #e1f8f1; border-radius: 999px; }
.vn-final-link-list p:last-child em { color: #7b5e18; background: #fff4d8; }

.vn-final-feature--signal {
  background: #e7f8f4;
  border-color: #b4e8dc;
}

.vn-final-feature--signal > span:has(svg) { color: #087f64; background: #cbf1e7; }

.vn-final-feature--ink {
  color: #fff;
  background: #11203a;
  border-color: #11203a;
}

.vn-final-feature--ink h3 { color: #fff; }
.vn-final-feature--ink p { color: #aebbd0; }
.vn-final-feature--ink > span:has(svg) { color: #a9bdff; background: rgba(75, 114, 242, 0.17); }

.vn-final-feature--domain {
  display: flex;
  justify-content: space-between;
  gap: var(--vn-space-8);
  align-items: flex-end;
}

.vn-final-feature--domain ol {
  display: flex;
  gap: var(--vn-space-2);
  padding: 0;
  margin: 0;
  list-style: none;
}

.vn-final-feature--domain li {
  padding: 0.6rem 0.75rem;
  color: var(--vn-text-tertiary);
  font-size: var(--vn-text-xs);
  font-weight: 700;
  background: #f2f5fa;
  border-radius: var(--vn-radius-sm);
}

.vn-final-feature--domain li.is-complete { color: #087f64; background: #e1f8f1; }

.vn-final-audience__grid {
  display: grid;
  grid-template-columns: minmax(16rem, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: start;
}

.vn-final-audience__cards {
  display: grid;
  gap: var(--vn-space-4);
}

.vn-final-audience article {
  padding: var(--vn-space-6);
  border-top: 1px solid var(--vn-border-strong);
}

.vn-final-audience article:first-child { border-top: 3px solid var(--vn-brand); }

.vn-final-pricing {
  background: #0d1a31;
}

.vn-final-pricing .vn-overline { color: #91acf9; }
.vn-final-pricing .vn-final-section__heading h2 { color: #fff; }
.vn-final-pricing .vn-final-section__heading > p:not(.vn-overline) { color: #aebbd0; }

.vn-final-pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--vn-space-5);
  align-items: stretch;
}

.vn-final-pricing__grid article {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: #fff;
  border: 1px solid transparent;
  border-radius: var(--vn-radius-lg);
}

.vn-final-pricing__grid article.is-featured {
  border-color: #6e90ff;
  box-shadow: 0 0 0 4px rgba(75, 114, 242, 0.18);
}

.vn-final-pricing__grid header {
  display: flex;
  justify-content: space-between;
  gap: var(--vn-space-3);
  align-items: center;
  color: var(--vn-text);
  font-weight: 800;
}

.vn-final-pricing__grid header em {
  padding: 0.35rem 0.55rem;
  color: var(--vn-brand);
  font-size: 0.66rem;
  font-style: normal;
  background: var(--vn-brand-soft);
  border-radius: 999px;
}

.vn-final-pricing__grid article > strong {
  margin: var(--vn-space-7) 0 var(--vn-space-4);
  color: var(--vn-text);
  font-size: clamp(2rem, 3vw, 3rem);
  letter-spacing: -0.05em;
}

.vn-final-pricing__grid article > strong small {
  color: var(--vn-text-tertiary);
  font-size: var(--vn-text-sm);
  letter-spacing: 0;
}

.vn-final-pricing__grid article > p { min-height: 4.8rem; color: var(--vn-text-secondary); line-height: 1.6; }
.vn-final-pricing__grid ul { display: grid; gap: var(--vn-space-3); padding: var(--vn-space-6) 0; margin: 0; list-style: none; }
.vn-final-pricing__grid li { color: var(--vn-text-secondary); font-size: var(--vn-text-sm); }
.vn-final-pricing__grid li::before { margin-right: 0.55rem; color: var(--vn-signal-strong); content: "✓"; font-weight: 900; }
.vn-final-pricing__grid .vn-button { margin-top: auto; }

.vn-final-section__heading--row {
  display: flex;
  max-width: none;
  justify-content: space-between;
  gap: var(--vn-space-8);
  align-items: end;
  text-align: left;
}

.vn-final-section__heading--row > a { margin: 0 0 0.4rem; white-space: nowrap; }

.vn-final-journal__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--vn-space-5);
}

.vn-final-journal article {
  display: flex;
  min-width: 0;
  min-height: 17rem;
  flex-direction: column;
  padding: var(--vn-space-7);
  background: #fff;
  border: 1px solid var(--vn-border);
  border-radius: var(--vn-radius-lg);
}

.vn-final-journal article > span {
  margin-bottom: var(--vn-space-7);
  color: var(--vn-text-tertiary);
  font-family: var(--vn-font-mono);
  font-size: var(--vn-text-xs);
}

.vn-final-journal h3 { font-size: 1.4rem; }
.vn-final-journal h3 a { margin: 0; color: inherit; }
.vn-final-journal article > a { margin-top: auto; }

.vn-final-faq {
  background: #f4f7fc;
  border-top: 1px solid var(--vn-border);
}

.vn-final-faq__grid {
  display: grid;
  grid-template-columns: minmax(16rem, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(3rem, 8vw, 8rem);
}

.vn-faq__items details {
  padding: var(--vn-space-6) 0;
  border-top: 1px solid var(--vn-border-strong);
}

.vn-faq__items details:last-child { border-bottom: 1px solid var(--vn-border-strong); }
.vn-faq__items summary { display: flex; justify-content: space-between; gap: var(--vn-space-4); align-items: center; color: var(--vn-text); font-size: 1.05rem; font-weight: 800; cursor: pointer; list-style: none; }
.vn-faq__items summary::-webkit-details-marker { display: none; }
.vn-faq__items summary::after { color: var(--vn-brand); content: "+"; font-size: 1.5rem; font-weight: 500; }
.vn-faq__items details[open] summary::after { content: "−"; }
.vn-faq__items p { max-width: 42rem; margin: var(--vn-space-4) 0 0; color: var(--vn-text-secondary); line-height: 1.7; }

.vn-final-cta {
  padding-block: clamp(4rem, 7vw, 6.5rem);
  color: #fff;
  background: linear-gradient(120deg, #173477, #3157d5 70%, #267f86);
}

.vn-final-cta .vn-container {
  display: flex;
  justify-content: space-between;
  gap: var(--vn-space-10);
  align-items: center;
}

.vn-final-cta .vn-overline { color: #b7c8ff; }
.vn-final-cta h2 { max-width: 16ch; color: #fff; }
.vn-final-cta p:not(.vn-overline) { max-width: 37rem; margin: var(--vn-space-5) 0 0; color: #d7e0f5; }
.vn-final-cta .vn-button { color: var(--vn-brand); background: #fff; border-color: #fff; }
.vn-final-cta .vn-button--secondary { color: #fff; background: transparent; border-color: rgba(255,255,255,.45); }

.vn-site-footer__menu {
  display: grid;
  gap: 0;
}

.vn-site-footer__menu-link {
  display: inline-block;
  padding-block: 0.35rem;
  color: inherit;
}

/* Blog pages remain powered by the existing admin-managed Posts model. */
.vn-blog {
  min-height: 60vh;
  padding-block: clamp(4rem, 7vw, 7rem);
  background: #f5f7fb;
}

.vn-blog__masthead {
  max-width: 47rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.vn-blog .vn-blog__masthead,
.vn-blog .vn-blog-article > header {
  min-height: 0;
  padding: 0;
  color: inherit;
  text-align: left;
  background: none !important;
}

.vn-blog__masthead p:not(.vn-overline) {
  max-width: 38rem;
  margin: var(--vn-space-5) 0 0;
  color: var(--vn-text-secondary);
  font-size: 1.08rem;
  line-height: 1.7;
}

.vn-blog__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--vn-space-5);
}

.vn-blog-card {
  display: flex;
  min-width: 0;
  min-height: 20rem;
  flex-direction: column;
  padding: var(--vn-space-7);
  background: #fff;
  border: 1px solid var(--vn-border);
  border-radius: var(--vn-radius-lg);
  box-shadow: var(--vn-shadow-xs);
}

.vn-blog-card time,
.vn-blog-article__meta {
  color: var(--vn-text-tertiary);
  font-family: var(--vn-font-mono);
  font-size: var(--vn-text-xs);
}

.vn-blog-card h2 {
  margin: var(--vn-space-7) 0 var(--vn-space-4);
  color: var(--vn-text);
  font-size: 1.5rem;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.vn-blog-card h2 a { color: inherit; }
.vn-blog-card p { margin: 0; color: var(--vn-text-secondary); line-height: 1.7; }
.vn-blog-card > a { display: inline-flex; gap: var(--vn-space-2); align-items: center; margin-top: auto; padding-top: var(--vn-space-6); color: var(--vn-brand); font-weight: 800; }

.vn-blog__empty {
  grid-column: 1 / -1;
  max-width: 44rem;
  min-height: 17rem;
  display: grid;
  align-content: center;
  justify-items: center;
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 3.5rem);
  color: var(--vn-text-secondary);
  text-align: center;
  background: #fff;
  border: 1px solid var(--vn-border);
  border-radius: var(--vn-radius-lg);
  box-shadow: var(--vn-shadow-xs);
}

.vn-blog__empty svg {
  width: 3rem;
  height: 3rem;
  padding: 0.75rem;
  color: var(--vn-brand);
  background: var(--vn-brand-soft);
  border-radius: 1rem;
}
.vn-blog__empty h2 { margin: var(--vn-space-4) 0 var(--vn-space-2); color: var(--vn-text); font-size: 1.35rem; }
.vn-blog__empty p { max-width: 34rem; margin: 0; }
.vn-blog__empty > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--vn-space-3);
  margin-top: var(--vn-space-6);
}

/* Explicit content shell for CMS, trust and contact routes. Stored content is
   bounded by .vn-prose and cannot own global header/footer geometry. */
.vn-content-page {
  min-height: 60vh;
  background: var(--vn-canvas);
}

.vn-content-hero {
  border-bottom: 1px solid var(--vn-rule);
  background:
    radial-gradient(circle at 88% 10%, rgb(49 87 213 / 10%), transparent 26rem),
    var(--vn-paper);
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
}

.vn-content-hero .vn-container {
  display: grid;
  gap: var(--vn-space-4);
}

.vn-content-hero h1 {
  max-width: 16ch;
  margin: 0;
  color: var(--vn-ink);
  font-size: clamp(2.35rem, 5vw, 4.7rem);
  line-height: 1.02;
  letter-spacing: -0.055em;
}

.vn-content-hero > .vn-container > p:last-child:not(.vn-overline) {
  max-width: 62ch;
  margin: 0;
  color: var(--vn-muted);
  font-size: 1.08rem;
  line-height: 1.75;
}

.vn-prose-shell,
.vn-contact-shell {
  margin-block: clamp(2rem, 5vw, 4.5rem);
  padding: clamp(1.5rem, 4vw, 4rem);
  border: 1px solid var(--vn-rule);
  border-radius: var(--vn-radius-frame);
  background: var(--vn-paper);
  box-shadow: var(--vn-shadow-sm);
}

.vn-catalogue {
  min-height: 60vh;
  background: var(--vn-canvas);
}

.vn-catalogue .vn-content-hero .vn-container {
  display: block;
}

.vn-catalogue .vn-content-hero h1 {
  max-width: 17ch;
}

.vn-catalogue .vn-content-hero > .vn-container > p:not(.vn-overline) {
  max-width: 45rem;
  margin: var(--vn-space-5) 0 0;
  color: var(--vn-text-secondary);
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.7;
}

.vn-catalogue .vn-content-hero .vn-cluster {
  margin-top: var(--vn-space-7);
}

.vn-catalogue__body {
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
}

.vn-catalogue__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--vn-space-5);
}

.vn-catalogue__grid article {
  min-width: 0;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--vn-paper);
  border: 1px solid var(--vn-border);
  border-radius: var(--vn-radius-lg);
  box-shadow: var(--vn-shadow-xs);
}

.vn-catalogue__grid article > svg {
  box-sizing: content-box;
  padding: 0.75rem;
  color: var(--vn-brand);
  background: var(--vn-brand-soft);
  border-radius: var(--vn-radius-sm);
}

.vn-catalogue__grid h2 {
  margin: var(--vn-space-6) 0 var(--vn-space-3);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
}

.vn-catalogue__grid p,
.vn-pricing-page__note {
  margin: 0;
  color: var(--vn-text-secondary);
  line-height: 1.7;
}

.vn-status-page {
  min-height: 100vh;
  color: var(--vn-text);
  background:
    radial-gradient(circle at 82% 8%, rgb(49 87 213 / 12%), transparent 30rem),
    var(--vn-canvas);
}

.vn-status-page__header {
  display: flex;
  min-height: 4.75rem;
  align-items: center;
  padding-inline: max(1.25rem, calc((100vw - 84rem) / 2));
  background: var(--vn-paper);
  border-bottom: 1px solid var(--vn-border);
}

.vn-status-page__main {
  display: grid;
  min-height: calc(100vh - 4.75rem);
  padding: clamp(2rem, 7vw, 6rem) 1.25rem;
  place-items: center;
}

.vn-status-card {
  width: min(100%, 42rem);
  padding: clamp(2rem, 6vw, 4rem);
  background: var(--vn-paper);
  border: 1px solid var(--vn-border);
  border-radius: var(--vn-radius-xl);
  box-shadow: var(--vn-shadow-lg);
}

.vn-status-card h1 {
  max-width: 15ch;
  margin: var(--vn-space-5) 0;
  font-size: clamp(2.2rem, 7vw, 4rem);
  letter-spacing: -0.055em;
  line-height: 1;
}

.vn-status-card > p:not(.vn-overline) {
  max-width: 34rem;
  margin: 0;
  color: var(--vn-text-secondary);
  line-height: 1.75;
}

.vn-status-card .vn-cluster { margin-top: var(--vn-space-7); }

.vn-pricing-page__note {
  max-width: 48rem;
  margin: var(--vn-space-8) auto 0;
  text-align: center;
}

.vn-prose {
  width: min(100%, 49rem);
  color: var(--vn-text);
  font-size: 1.04rem;
  line-height: 1.85;
  overflow-wrap: anywhere;
}

.vn-prose :is(h2, h3, h4) {
  margin: 1.9em 0 0.65em;
  color: var(--vn-ink);
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.vn-prose > :first-child { margin-top: 0; }
.vn-prose img { max-width: 100%; height: auto; }
.vn-prose iframe { max-width: 100%; }
.vn-prose :is(table, pre) { max-width: 100%; overflow-x: auto; }
.vn-prose a { color: var(--vn-brand); text-decoration: underline; text-underline-offset: 0.18em; }

.vn-contact-shell {
  max-width: 58rem;
}

.vn-contact-shell form {
  display: grid;
  gap: var(--vn-space-4);
}

.vn-contact-shell :is(input, select, textarea) {
  width: 100%;
  min-height: 3rem;
  border: 1px solid var(--vn-rule-strong);
  border-radius: var(--vn-radius-control);
  padding: 0.75rem 0.9rem;
  color: var(--vn-ink);
  background: var(--vn-paper);
}

.vn-contact-shell textarea { min-height: 10rem; resize: vertical; }

.vn-blog__pagination {
  display: flex;
  justify-content: center;
  gap: var(--vn-space-2);
  padding: var(--vn-space-10) 0 0;
  margin: 0;
  list-style: none;
}

.vn-blog__pagination li { list-style: none; }
.vn-blog__pagination a { display: grid; min-width: 2.75rem; min-height: 2.75rem; padding: 0.6rem; color: var(--vn-text-secondary); background: #fff; border: 1px solid var(--vn-border); border-radius: var(--vn-radius-sm); place-items: center; }
.vn-blog__pagination .active a,
.vn-blog__pagination a:hover { color: #fff; background: var(--vn-brand); border-color: var(--vn-brand); }

.vn-blog-article {
  width: min(100% - clamp(2.5rem, 8vw, 8rem), 52rem);
  margin-inline: auto;
}

.vn-blog-article__back { display: inline-flex; gap: var(--vn-space-2); align-items: center; margin-bottom: var(--vn-space-8); color: var(--vn-brand); font-weight: 800; }
.vn-blog-article__back .vn-icon--back { transform: rotate(180deg); }
.vn-blog-article h1 { max-width: 15ch; margin-top: var(--vn-space-5); }
.vn-blog-article__meta { display: block; margin-top: var(--vn-space-5); }
.vn-blog-article__body { margin-top: var(--vn-space-10); padding: clamp(1.5rem, 5vw, 4rem); color: var(--vn-text-secondary); background: #fff; border: 1px solid var(--vn-border); border-radius: var(--vn-radius-lg); font-size: 1.04rem; line-height: 1.85; }
.vn-blog-article__body :is(h2,h3,h4) { margin: 2em 0 0.65em; color: var(--vn-text); letter-spacing: -0.025em; }
.vn-blog-article__body img { max-width: 100%; height: auto; border-radius: var(--vn-radius-md); }
.vn-blog-article__body a { color: var(--vn-brand); text-decoration: underline; text-underline-offset: 0.18em; }
.vn-blog-article__share { display: flex; flex-wrap: wrap; gap: var(--vn-space-3); align-items: center; margin-top: var(--vn-space-7); }
.vn-blog-article__share > span { color: var(--vn-text-tertiary); font-size: var(--vn-text-sm); font-weight: 700; }
.vn-blog-article__share a { padding: 0.55rem 0.8rem; color: var(--vn-text-secondary); font-size: var(--vn-text-sm); font-weight: 700; background: #fff; border: 1px solid var(--vn-border); border-radius: var(--vn-radius-sm); }

@media (max-width: 74.99rem) {
  .vn-final-hero__grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(27rem, 1.05fr);
    gap: 3rem;
  }

  .vn-route-board__body { padding: 1.4rem; }
  .vn-route-line { gap: 0.55rem; }
  .vn-route-line li { padding-inline: 0.55rem; }
}

@media (max-width: 63.99rem) {
  .vn-site-nav__list {
    display: grid;
    align-items: stretch;
  }

  .vn-site-nav__link {
    width: 100%;
  }

  .vn-site-nav__link[href$="/auth/signup"],
  .vn-site-nav__link[href$="/member/dashboard"] {
    justify-content: center;
    margin: var(--vn-space-2) 0 0;
  }

  .vn-final-hero__grid,
  .vn-final-audience__grid,
  .vn-final-faq__grid {
    grid-template-columns: 1fr;
  }

  .vn-final-hero h1 { max-width: 11ch; }
  .vn-final-hero__copy { max-width: 43rem; }
  .vn-route-board { max-width: 48rem; }
  .vn-final-process__grid,
  .vn-final-pricing__grid,
  .vn-final-journal__grid,
  .vn-blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vn-final-process__grid li:last-child,
  .vn-final-pricing__grid article:last-child { grid-column: 1 / -1; }
  .vn-final-feature--wide { grid-template-columns: 1fr; }
  .vn-final-audience__grid,
  .vn-final-faq__grid { gap: 1rem; }
  .vn-final-section__heading--left { max-width: 42rem; }
}

@media (max-width: 47.99rem) {
  .vn-home--final .vn-container,
  .vn-blog .vn-container {
    width: min(100% - 2.5rem, 84rem);
  }

  .vn-final-hero { padding-block: 4rem; }
  .vn-final-hero h1 { font-size: clamp(3rem, 13vw, 4.7rem); }
  .vn-final-strip .vn-container { flex-wrap: wrap; gap: 0.75rem 1.1rem; padding-block: 1.25rem; }
  .vn-final-strip i { display: none; }
  .vn-final-process__grid,
  .vn-final-product__grid,
  .vn-final-pricing__grid,
  .vn-final-journal__grid,
  .vn-blog__grid { grid-template-columns: 1fr; }
  .vn-final-process__grid::before { display: none; }
  .vn-final-process__grid li:last-child,
  .vn-final-pricing__grid article:last-child { grid-column: auto; }
  .vn-final-feature--wide,
  .vn-final-feature--domain { grid-column: auto; }
  .vn-final-feature--domain { align-items: flex-start; flex-direction: column; }
  .vn-final-feature--domain ol { width: 100%; flex-wrap: wrap; }
  .vn-final-section__heading--row,
  .vn-final-cta .vn-container { align-items: flex-start; flex-direction: column; }
  .vn-final-section__heading--row > a { margin: 0; }
  .vn-final-cta .vn-cluster,
  .vn-final-cta .vn-button { width: 100%; }
  .vn-final-cta .vn-button { justify-content: center; }
  .vn-catalogue__grid { grid-template-columns: 1fr; }
}

@media (max-width: 35.99rem) {
  .vn-final-hero h1 { font-size: clamp(2.75rem, 14vw, 3.65rem); }
  .vn-final-hero__lead { font-size: 1rem; }
  .vn-final-hero__proof { display: grid; gap: var(--vn-space-3); }
  .vn-route-board__body > header { align-items: flex-start; flex-direction: column; }
  .vn-route-line { grid-template-columns: 1fr 1fr; }
  .vn-route-line::before { display: none; }
  .vn-route-line li { display: flex; gap: var(--vn-space-3); align-items: center; }
  .vn-route-line li > span { flex: 0 0 auto; margin: 0; }
  .vn-final-section__heading h2,
  .vn-final-cta h2,
  .vn-blog h1 { font-size: 2.35rem; }
  .vn-final-feature--wide { padding-inline: 1.25rem; }
  .vn-final-link-list p { grid-template-columns: auto 1fr; }
  .vn-final-link-list em { grid-column: 2; justify-self: start; }
  .vn-blog-card { min-height: 17rem; padding: var(--vn-space-6); }
}

/* Admin-managed public shell
   -------------------------------------------------------------- */
.vn-site-header__scrim {
  position: fixed;
  z-index: -1;
  inset: 4.75rem 0 0;
  display: none;
  width: 100%;
  border: 0;
  background: rgb(10 18 35 / 44%);
}

.vn-announcement {
  position: relative;
  z-index: 790;
  margin-block-start: 4.75rem;
  border-block-end: 1px solid rgb(255 255 255 / 18%);
  background: #111c32;
  color: #fff;
  text-align: center;
}

.vn-announcement .vn-container {
  padding-block: var(--vn-space-3);
  font-size: var(--vn-text-sm);
  font-weight: 700;
}

.vn-marketing--announcement .vn-home {
  padding-block-start: 0;
}

.has-marketing-menu .vn-site-header__scrim {
  display: block;
}

.vn-site-nav__list {
  width: 100%;
  align-items: stretch;
  flex-direction: column;
}

.vn-site-nav__item {
  position: relative;
}

.vn-site-nav__link {
  width: 100%;
  justify-content: space-between;
  gap: var(--vn-space-2);
  border: 0;
  background: transparent;
  text-align: start;
}

button.vn-site-nav__link {
  color: var(--vn-muted) !important;
  cursor: pointer;
}

button.vn-site-nav__link:hover,
button.vn-site-nav__link:focus-visible {
  color: var(--vn-brand) !important;
}

.vn-site-nav__item--group > .vn-site-nav__link [aria-hidden="true"] {
  transition: transform var(--vn-duration) var(--vn-ease);
}

.vn-site-nav__item--group.is-open > .vn-site-nav__link [aria-hidden="true"] {
  transform: rotate(180deg);
}

.vn-site-nav__submenu {
  display: none;
  gap: 0.25rem;
  padding: 0.35rem 0 0.5rem 1rem;
  margin: 0;
  list-style: none;
}

.vn-site-nav__item--group.is-open > .vn-site-nav__submenu {
  display: grid;
}

.vn-site-nav__submenu .vn-site-nav__link {
  min-height: 2.75rem;
  color: var(--vn-muted);
  font-weight: 600;
}

.vn-site-nav__link small {
  margin-inline-start: auto;
  color: var(--vn-warning);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.vn-site-nav__item.is-coming-soon > span {
  cursor: default;
}

.vn-external-mark {
  margin-inline-start: auto;
  font-size: 0.85em;
}

.vn-site-footer__status {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  gap: var(--vn-space-2);
  margin-block-start: var(--vn-space-4);
  color: #cbd5e3;
  font-size: var(--vn-text-xs);
  font-weight: 700;
}

.vn-site-footer__status span {
  width: 0.55rem;
  height: 0.55rem;
  background: #66dec7;
  border: 2px solid rgb(102 222 199 / 28%);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgb(102 222 199 / 10%);
}

.vn-site-footer__menu {
  display: contents;
}

.vn-site-footer__submenu {
  display: grid;
  gap: var(--vn-space-2);
  padding: 0;
  margin: 0;
  list-style: none;
}

.vn-site-footer__menu-link {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  gap: var(--vn-space-2);
  color: #aeb9c9;
  font-size: var(--vn-text-sm);
}

.vn-site-footer__menu-link:hover,
.vn-site-footer__menu-link:focus-visible {
  color: #fff;
}

@media (min-width: 64rem) {
  .vn-site-nav__list {
    width: auto;
    align-items: center;
    flex-direction: row;
  }

  .vn-site-nav__link {
    width: auto;
    justify-content: center;
  }

  .vn-site-nav__item--group > .vn-site-nav__link {
    padding-inline: 0.7rem;
  }

  .vn-site-nav__submenu {
    position: absolute;
    z-index: 820;
    inset-block-start: calc(100% + 0.65rem);
    inset-inline-start: 0;
    width: 18rem;
    gap: 0.15rem;
    padding: var(--vn-space-3);
    border: 1px solid var(--vn-rule);
    border-radius: var(--vn-radius-card);
    background: var(--vn-paper);
    box-shadow: 0 18px 44px rgb(23 32 51 / 14%);
  }

  .vn-site-nav__submenu::before {
    position: absolute;
    inset: -0.75rem 0 auto;
    height: 0.75rem;
    content: "";
  }

  .vn-site-nav__submenu .vn-site-nav__link {
    width: 100%;
    justify-content: flex-start;
    padding-inline: var(--vn-space-3);
  }

  .vn-site-nav__item--group:hover > .vn-site-nav__submenu,
  .vn-site-nav__item--group:focus-within > .vn-site-nav__submenu {
    display: grid;
  }

  .vn-site-header__scrim {
    display: none !important;
  }
}

@media (max-width: 63.99rem) {
  .vn-site-nav__list {
    display: grid;
    gap: 0.25rem;
  }

  .vn-site-nav__link[href$="/auth/signup"],
  .vn-site-nav__link[href$="/member/dashboard"] {
    justify-content: center;
    margin: var(--vn-space-2) 0 0;
  }
}

@media (max-width: 29.99rem) {
  .vn-site-header__inner {
    min-height: 4.25rem;
  }

  .vn-wordmark {
    font-size: 1.05rem;
  }

  .vn-wordmark img {
    width: 2.1rem;
    height: 2.1rem;
  }

  .vn-site-nav {
    inset-block-start: 4.25rem;
    max-height: calc(100dvh - 4.25rem);
  }
}

/* Launch homepage foundation
   -------------------------------------------------------------- */
.vn-launch-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(4.5rem, 9vw, 8rem) clamp(4rem, 7vw, 6.5rem);
  background:
    radial-gradient(circle at 82% 12%, rgb(49 87 213 / 9%), transparent 28rem),
    linear-gradient(180deg, #f8faff 0%, #fff 72%);
}

.vn-launch-hero::before {
  position: absolute;
  z-index: -1;
  width: 34rem;
  height: 34rem;
  inset: -23rem -18rem auto auto;
  border: 1px solid rgb(49 87 213 / 12%);
  border-radius: 50%;
  box-shadow: 0 0 0 5rem rgb(49 87 213 / 3%), 0 0 0 10rem rgb(14 147 132 / 2%);
  content: "";
}

.vn-launch-hero__grid {
  display: grid;
  align-items: center;
  gap: clamp(3rem, 7vw, 7rem);
}

.vn-launch-hero__copy {
  max-width: 43rem;
}

.vn-launch-hero h1 {
  max-width: 12ch;
  margin: 0;
  color: var(--vn-ink);
  font-size: clamp(3rem, 5.4vw, 5rem);
  font-weight: 750;
  letter-spacing: -0.07em;
  line-height: 0.96;
}

.vn-launch-hero h1 em {
  display: block;
  color: var(--vn-brand);
  font-style: normal;
}

.vn-launch-hero__lead {
  max-width: 39rem;
  margin: var(--vn-space-6) 0 0;
  color: var(--vn-muted);
  font-size: clamp(1.05rem, 1.4vw, 1.22rem);
  line-height: 1.72;
}

.vn-launch-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vn-space-3);
  margin-block-start: var(--vn-space-7);
}

.vn-launch-hero__actions .vn-button:not(.vn-button--secondary) {
  color: #fff !important;
}

.vn-launch-hero__note {
  margin: var(--vn-space-4) 0 0;
  color: var(--vn-muted);
  font-size: var(--vn-text-xs);
}

.vn-launch-console {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--vn-rule);
  border-radius: 1.4rem;
  background: var(--vn-paper);
  box-shadow: 0 32px 80px rgb(23 32 51 / 13%);
}

.vn-launch-console__bar {
  min-height: 3.4rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--vn-space-3);
  padding-inline: var(--vn-space-5);
  border-block-end: 1px solid var(--vn-rule);
  color: var(--vn-muted);
  font-size: var(--vn-text-xs);
}

.vn-launch-console__bar > span {
  display: flex;
  gap: 0.3rem;
}

.vn-launch-console__bar i {
  width: 0.48rem;
  height: 0.48rem;
  background: #e27373;
  border-radius: 50%;
}

.vn-launch-console__bar i:nth-child(2) { background: #e4b24d; }
.vn-launch-console__bar i:nth-child(3) { background: var(--vn-signal); }
.vn-launch-console__bar strong { color: var(--vn-text); }

.vn-launch-console__body {
  padding: clamp(1.25rem, 4vw, 2.25rem);
}

.vn-launch-console__path {
  display: flex;
  align-items: center;
  gap: var(--vn-space-2);
  margin-block-end: var(--vn-space-5);
  color: var(--vn-muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.vn-launch-console__path i {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, var(--vn-brand), var(--vn-signal));
}

.vn-launch-console__shortener {
  min-width: 0;
}

.vn-launch-console__disabled {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--vn-space-4);
  padding: var(--vn-space-5);
  border: 1px solid var(--vn-rule);
  border-radius: var(--vn-radius-card);
  background: var(--vn-surface-muted);
}

.vn-launch-console__disabled p { margin: 0.25rem 0 0; color: var(--vn-muted); }
.vn-launch-console__disabled .vn-button { grid-column: 1 / -1; justify-self: start; }

.vn-launch-console__example {
  display: grid;
  gap: 0.35rem;
  margin-block-start: var(--vn-space-5);
  padding: var(--vn-space-4);
  border-radius: var(--vn-radius-control);
  background: #111c32;
}

.vn-launch-console__example span,
.vn-launch-console__example small {
  color: #9eabc0;
  font-size: var(--vn-text-xs);
}

.vn-launch-console__example code {
  overflow-wrap: anywhere;
  color: #fff;
  font-size: clamp(0.85rem, 2vw, 1rem);
}

.vn-trust-rail {
  border-block: 1px solid var(--vn-rule);
  background: #fff;
}

.vn-trust-rail .vn-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--vn-space-3) var(--vn-space-5);
  padding-block: var(--vn-space-5);
}

.vn-trust-rail span {
  display: flex;
  align-items: center;
  gap: var(--vn-space-2);
  color: var(--vn-muted);
  font-size: var(--vn-text-xs);
  font-weight: 700;
}

.vn-trust-rail svg {
  flex: 0 0 auto;
  color: var(--vn-brand);
}

.vn-contrast-story {
  background: #f6f8fc;
}

.vn-contrast-story__grid {
  display: grid;
  gap: clamp(2rem, 6vw, 6rem);
}

.vn-contrast-story__compare {
  display: grid;
  gap: var(--vn-space-4);
}

.vn-contrast-story__compare article {
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--vn-rule);
  border-radius: var(--vn-radius-frame);
  background: var(--vn-paper);
}

.vn-contrast-story__compare article:last-child {
  border-color: rgb(14 147 132 / 32%);
  background: #effaf7;
}

.vn-contrast-story__compare article > span {
  color: var(--vn-muted);
  font-size: var(--vn-text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vn-contrast-story__compare ul {
  display: grid;
  gap: var(--vn-space-4);
  padding: 0;
  margin: var(--vn-space-5) 0 0;
  list-style: none;
}

.vn-contrast-story__compare li {
  position: relative;
  padding-inline-start: 1.5rem;
  color: var(--vn-text);
}

.vn-contrast-story__compare li::before {
  position: absolute;
  inset: 0.1rem auto auto 0;
  color: var(--vn-danger);
  content: "–";
  font-weight: 800;
}

.vn-contrast-story__compare article:last-child li::before {
  color: var(--vn-signal);
  content: "✓";
}

.vn-experience {
  background: var(--vn-paper);
}

.vn-experience__shell {
  overflow: hidden;
  margin-block-start: clamp(2rem, 5vw, 4rem);
  border: 1px solid var(--vn-rule);
  border-radius: 1.5rem;
  background: #111c32;
  box-shadow: 0 24px 64px rgb(23 32 51 / 10%);
}

.vn-experience__tabs {
  display: flex;
  overflow-x: auto;
  padding: var(--vn-space-3);
  border-block-end: 1px solid rgb(255 255 255 / 10%);
  scrollbar-width: thin;
}

.vn-experience__tabs button {
  min-width: max-content;
  min-height: 2.75rem;
  padding-inline: var(--vn-space-4);
  border: 0;
  border-radius: var(--vn-radius-control);
  background: transparent;
  color: #9eabc0;
  font-weight: 700;
  cursor: pointer;
}

.vn-experience__tabs button[aria-selected="true"] {
  background: #fff;
  color: var(--vn-ink);
}

.vn-experience__panel {
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  min-height: 28rem;
  padding: clamp(1.5rem, 5vw, 4rem);
}

.vn-experience__panel[hidden] {
  display: none;
}

.vn-experience__copy {
  align-self: center;
}

.vn-experience__copy > span {
  color: #7ee0d2;
  font-size: var(--vn-text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vn-experience__copy h3 {
  max-width: 17ch;
  margin: var(--vn-space-4) 0;
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.4rem);
  letter-spacing: -0.045em;
}

.vn-experience__copy p {
  max-width: 38rem;
  color: #b3bfd1;
  line-height: 1.72;
}

.vn-experience__copy a {
  display: inline-flex;
  align-items: center;
  gap: var(--vn-space-2);
  margin-block-start: var(--vn-space-5);
  color: #fff;
  font-weight: 800;
}

.vn-experience__preview {
  min-width: 0;
  align-self: center;
  border: 1px solid rgb(255 255 255 / 13%);
  border-radius: 1.2rem;
  background: rgb(255 255 255 / 6%);
  padding: clamp(1rem, 3vw, 1.75rem);
}

.vn-experience__preview--links p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vn-space-3);
  padding-block: var(--vn-space-4);
  margin: 0;
  border-block-end: 1px solid rgb(255 255 255 / 10%);
}

.vn-experience__preview--links p:last-child { border: 0; }
.vn-experience__preview--links b,
.vn-experience__preview--links code { display: block; }
.vn-experience__preview--links b { color: #fff; }
.vn-experience__preview--links code { margin-block-start: 0.25rem; color: #aebbd0; overflow-wrap: anywhere; }
.vn-experience__preview--links em { padding: 0.35rem 0.6rem; color: #6ee1c9; font-size: 0.68rem; font-style: normal; font-weight: 800; background: rgb(14 147 132 / 14%); border-radius: 999px; }
.vn-experience__preview--links em.is-paused { color: #f1c878; background: rgb(182 92 19 / 16%); }

.vn-experience__preview--qr {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) 1fr;
  align-items: center;
  gap: var(--vn-space-5);
}

.vn-mini-qr {
  width: 100%;
  aspect-ratio: 1;
  border: 0.8rem solid #fff;
  border-radius: 0.8rem;
  background:
    linear-gradient(90deg, #111c32 25%, transparent 25% 50%, #111c32 50% 75%, transparent 75%),
    linear-gradient(#111c32 25%, transparent 25% 50%, #111c32 50% 75%, transparent 75%);
  background-color: #fff;
  background-size: 1.4rem 1.4rem;
}

.vn-experience__preview--qr strong,
.vn-experience__preview--qr code,
.vn-experience__preview--qr small { display: block; }
.vn-experience__preview--qr strong { color: #fff; }
.vn-experience__preview--qr code { margin-block: 0.5rem; color: #b7c8ff; overflow-wrap: anywhere; }
.vn-experience__preview--qr small { color: #9eabc0; }

.vn-experience__preview--chart {
  position: relative;
  min-height: 18rem;
  display: flex;
  align-items: end;
  gap: clamp(0.6rem, 2vw, 1.1rem);
  padding-block-start: 4rem;
}

.vn-experience__preview--chart i {
  height: 38%;
  flex: 1;
  border-radius: 0.45rem 0.45rem 0 0;
  background: linear-gradient(180deg, #62d6c6, #4b72f2);
}

.vn-experience__preview--chart i:nth-child(2) { height: 62%; }
.vn-experience__preview--chart i:nth-child(3) { height: 54%; }
.vn-experience__preview--chart i:nth-child(4) { height: 88%; }
.vn-experience__preview--chart i:nth-child(5) { height: 72%; }
.vn-experience__preview--chart small { position: absolute; align-self: flex-start; color: #9eabc0; }

.vn-experience__preview--campaign > span { color: #7ee0d2; font-size: var(--vn-text-xs); font-weight: 800; text-transform: uppercase; }
.vn-experience__preview--campaign h4 { margin: var(--vn-space-3) 0 var(--vn-space-6); color: #fff; font-size: 1.45rem; }
.vn-experience__preview--campaign p { display: flex; align-items: baseline; gap: var(--vn-space-3); margin: var(--vn-space-3) 0 0; color: #aebbd0; }
.vn-experience__preview--campaign b { color: #fff; font-size: 1.8rem; }

@media (min-width: 64rem) {
  .vn-launch-hero__grid {
    grid-template-columns: minmax(0, 0.96fr) minmax(31rem, 1.04fr);
  }

  .vn-trust-rail .vn-container {
    grid-template-columns: repeat(5, auto);
    justify-content: space-between;
  }

  .vn-contrast-story__grid {
    grid-template-columns: minmax(18rem, 0.72fr) minmax(0, 1.28fr);
    align-items: start;
  }

  .vn-contrast-story__compare {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vn-experience__panel {
    grid-template-columns: minmax(19rem, 0.82fr) minmax(0, 1.18fr);
  }
}

@media (max-width: 47.99rem) {
  .vn-launch-hero h1 {
    font-size: clamp(2.75rem, 12.5vw, 4rem);
  }

  .vn-launch-console__bar {
    grid-template-columns: auto 1fr;
  }

  .vn-launch-console__bar small {
    display: none;
  }

  .vn-experience__panel {
    min-height: auto;
  }
}

@media (max-width: 29.99rem) {
  .vn-launch-hero__actions,
  .vn-launch-hero__actions .vn-button {
    width: 100%;
  }

  .vn-launch-hero__actions .vn-button {
    justify-content: center;
  }

  .vn-launch-console__path {
    display: none;
  }

  .vn-launch-console__example {
    margin-block-start: var(--vn-space-4);
  }

  .vn-experience__preview--qr {
    grid-template-columns: 1fr;
  }

  .vn-mini-qr {
    max-width: 10rem;
  }
}

/* Product and audience experiences
   -------------------------------------------------------------- */
.vn-product-split {
  display: grid;
  align-items: center;
  gap: clamp(2.5rem, 7vw, 7rem);
}

.vn-capability-list {
  display: grid;
  gap: var(--vn-space-3);
  padding: 0;
  margin: var(--vn-space-6) 0 0;
  list-style: none;
}

.vn-capability-list li {
  position: relative;
  padding-inline-start: 1.6rem;
  color: var(--vn-text);
}

.vn-capability-list li::before {
  position: absolute;
  inset: 0.05rem auto auto 0;
  color: var(--vn-signal);
  content: "✓";
  font-weight: 900;
}

.vn-link-builder,
.vn-qr-builder {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--vn-rule);
  border-radius: 1.4rem;
  background: var(--vn-paper);
  box-shadow: 0 24px 64px rgb(23 32 51 / 9%);
}

.vn-link-builder {
  padding: clamp(1.25rem, 4vw, 2rem);
}

.vn-link-builder header,
.vn-link-builder footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vn-space-3);
}

.vn-link-builder header {
  margin-block-end: var(--vn-space-5);
  color: var(--vn-ink);
  font-weight: 800;
}

.vn-link-builder header em,
.vn-demo-label {
  padding: 0.35rem 0.65rem;
  color: var(--vn-brand);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 800;
  background: var(--vn-brand-soft);
  border-radius: 999px;
  text-transform: uppercase;
}

.vn-link-builder label {
  display: grid;
  gap: var(--vn-space-2);
  color: var(--vn-muted);
  font-size: var(--vn-text-xs);
}

.vn-link-builder label strong,
.vn-link-builder__alias {
  min-height: 3.25rem;
  display: flex;
  align-items: center;
  padding-inline: var(--vn-space-4);
  border: 1px solid var(--vn-rule);
  border-radius: var(--vn-radius-control);
  color: var(--vn-text);
  font-size: var(--vn-text-sm);
  overflow-wrap: anywhere;
}

.vn-link-builder__alias {
  margin-block-start: var(--vn-space-4);
  background: var(--vn-surface-muted);
}

.vn-link-builder__alias span { color: var(--vn-muted); }
.vn-link-builder__alias strong { color: var(--vn-brand); }

.vn-link-builder__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--vn-space-3);
  margin-block: var(--vn-space-4);
}

.vn-link-builder__options p {
  display: grid;
  gap: 0.3rem;
  padding: var(--vn-space-4);
  margin: 0;
  border: 1px solid var(--vn-rule);
  border-radius: var(--vn-radius-control);
}

.vn-link-builder__options span { color: var(--vn-muted); font-size: var(--vn-text-xs); }
.vn-link-builder__options strong { color: var(--vn-text); font-size: var(--vn-text-sm); }

.vn-link-builder footer {
  padding-block-start: var(--vn-space-4);
  border-block-start: 1px solid var(--vn-rule);
}

.vn-link-builder footer > span {
  display: flex;
  align-items: center;
  gap: var(--vn-space-2);
  color: var(--vn-signal);
  font-size: var(--vn-text-xs);
  font-weight: 800;
}

.vn-link-builder footer button,
.vn-qr-builder button {
  min-height: 2.75rem;
  padding-inline: var(--vn-space-3);
  border: 1px solid var(--vn-rule);
  border-radius: var(--vn-radius-control);
  background: var(--vn-surface-muted);
  color: var(--vn-muted);
}

.vn-qr-story,
.vn-audience-story {
  background: #f6f8fc;
}

.vn-qr-builder {
  display: grid;
}

.vn-qr-builder__preview {
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 5vw, 3rem);
  background: #111c32;
}

.vn-qr-builder__preview .vn-mini-qr { max-width: 12rem; }
.vn-qr-builder__preview strong { margin-block-start: var(--vn-space-4); color: #fff; }
.vn-qr-builder__preview small { margin-block-start: 0.3rem; color: #9eabc0; }

.vn-qr-builder__controls {
  display: grid;
  gap: var(--vn-space-4);
  padding: clamp(1.25rem, 4vw, 2rem);
}

.vn-qr-builder__controls p {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--vn-space-2);
  margin: 0;
}

.vn-qr-builder__controls p > span {
  width: 100%;
  color: var(--vn-muted);
  font-size: var(--vn-text-xs);
  font-weight: 700;
}

.vn-qr-builder__controls code {
  color: var(--vn-brand);
  overflow-wrap: anywhere;
}

.vn-qr-builder__controls i {
  width: 2.5rem;
  height: 2.5rem;
  border: 0.35rem solid #fff;
  border-radius: 0.45rem;
  background: var(--vn-brand);
  box-shadow: 0 0 0 1px var(--vn-rule);
}

.vn-qr-builder__controls i:nth-of-type(2) { background: var(--vn-signal); }
.vn-qr-builder__controls i:nth-of-type(3) { background: #111c32; }

.vn-availability-note {
  display: grid;
  gap: 0.2rem;
  margin-block-start: var(--vn-space-4);
  padding-inline-start: var(--vn-space-4);
  border-inline-start: 3px solid var(--vn-signal);
}

.vn-availability-note strong { color: var(--vn-signal); font-size: var(--vn-text-xs); text-transform: uppercase; }
.vn-availability-note span { color: var(--vn-text); }
.vn-availability-note.is-planned { border-color: var(--vn-warning); }
.vn-availability-note.is-planned strong { color: var(--vn-warning); }

.vn-analytics-story {
  background: #111c32;
}

.vn-analytics-story .vn-overline { color: #7ee0d2; }
.vn-analytics-story .vn-final-section__heading h2 { color: #fff; }
.vn-analytics-story .vn-final-section__heading p:not(.vn-overline) { color: #aebbd0; }

.vn-demo-label {
  align-self: flex-end;
  color: #d8e1ff;
  background: rgb(75 114 242 / 18%);
}

.vn-analytics-demo {
  display: grid;
  gap: var(--vn-space-4);
  margin-block-start: clamp(2rem, 5vw, 4rem);
}

.vn-analytics-demo__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--vn-space-3);
}

.vn-analytics-demo__metrics article,
.vn-analytics-demo__chart {
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: var(--vn-radius-card);
  background: rgb(255 255 255 / 5%);
}

.vn-analytics-demo__metrics article {
  display: grid;
  gap: var(--vn-space-2);
  padding: var(--vn-space-5);
}

.vn-analytics-demo__metrics span,
.vn-analytics-demo__metrics small { color: #9eabc0; font-size: var(--vn-text-xs); }
.vn-analytics-demo__metrics span { font-weight: 800; text-transform: uppercase; }
.vn-analytics-demo__metrics strong { color: #fff; font-size: clamp(1.7rem, 4vw, 2.5rem); }

.vn-analytics-demo__chart {
  overflow: hidden;
  padding: clamp(1.25rem, 4vw, 2rem);
}

.vn-analytics-demo__chart > div {
  height: 15rem;
  display: flex;
  align-items: end;
  gap: clamp(0.4rem, 2vw, 1rem);
  border-block-end: 1px solid rgb(255 255 255 / 16%);
  background: repeating-linear-gradient(to bottom, transparent 0 4.8rem, rgb(255 255 255 / 8%) 4.8rem 4.86rem);
}

.vn-analytics-demo__chart i {
  height: 38%;
  flex: 1;
  border-radius: 0.45rem 0.45rem 0 0;
  background: linear-gradient(180deg, #62d6c6, #4b72f2);
}

.vn-analytics-demo__chart i:nth-child(2) { height: 56%; }
.vn-analytics-demo__chart i:nth-child(3) { height: 49%; }
.vn-analytics-demo__chart i:nth-child(4) { height: 78%; }
.vn-analytics-demo__chart i:nth-child(5) { height: 67%; }
.vn-analytics-demo__chart i:nth-child(6) { height: 94%; }
.vn-analytics-demo__chart i:nth-child(7) { height: 86%; }

.vn-analytics-demo__chart footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--vn-space-3);
  padding-block-start: var(--vn-space-5);
}

.vn-analytics-demo__chart footer span { color: #9eabc0; font-size: var(--vn-text-xs); }
.vn-analytics-demo__chart footer b { display: block; margin-block-start: 0.25rem; color: #fff; font-size: var(--vn-text-sm); }

.vn-workflow-story {
  background: var(--vn-paper);
}

.vn-workflow-path {
  position: relative;
  display: grid;
  gap: var(--vn-space-4);
  max-width: 68rem;
  padding: 0;
  margin: clamp(2rem, 5vw, 4rem) auto 0;
  list-style: none;
}

.vn-workflow-path li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--vn-space-4);
  padding: var(--vn-space-5);
  border: 1px solid var(--vn-rule);
  border-radius: var(--vn-radius-card);
  background: var(--vn-paper);
}

.vn-workflow-path li > span {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--vn-brand-soft);
  color: var(--vn-brand);
  font-weight: 900;
}

.vn-workflow-path strong { color: var(--vn-ink); }
.vn-workflow-path p { margin: 0.35rem 0 0; color: var(--vn-muted); }
.vn-workflow-story__limit { max-width: 50rem; margin: var(--vn-space-5) auto 0; color: var(--vn-muted); font-size: var(--vn-text-sm); text-align: center; }

.vn-audience-story__grid {
  display: grid;
  gap: var(--vn-space-5);
}

.vn-audience-story article {
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--vn-rule);
  border-radius: var(--vn-radius-frame);
  background: var(--vn-paper);
}

.vn-audience-story h2 {
  margin: 0;
  color: var(--vn-ink);
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.04em;
}

.vn-audience-story article > p:not(.vn-overline) { margin: var(--vn-space-5) 0 0; color: var(--vn-muted); line-height: 1.7; }

.vn-channel-row,
.vn-business-routes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vn-space-2);
  margin-block-start: var(--vn-space-6);
}

.vn-channel-row span,
.vn-business-routes code {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--vn-rule);
  border-radius: var(--vn-radius-control);
  background: var(--vn-surface-muted);
  color: var(--vn-text);
  font-size: var(--vn-text-xs);
  font-weight: 700;
}

.vn-domain-story {
  background: linear-gradient(135deg, #eef2ff, #effaf7);
}

.vn-domain-story h2 {
  font-size: clamp(1.65rem, 4vw, 3rem);
  overflow-wrap: anywhere;
}

.vn-domain-steps {
  display: grid;
  gap: var(--vn-space-3);
  padding: 0;
  margin: 0;
  list-style: none;
}

.vn-domain-steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--vn-space-4);
  padding: var(--vn-space-4);
  border: 1px solid var(--vn-rule);
  border-radius: var(--vn-radius-control);
  background: rgb(255 255 255 / 76%);
}

.vn-domain-steps li > span {
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--vn-surface-muted);
  color: var(--vn-muted);
  font-weight: 900;
}

.vn-domain-steps strong,
.vn-domain-steps small { display: block; }
.vn-domain-steps strong { color: var(--vn-text); }
.vn-domain-steps small { margin-block-start: 0.2rem; color: var(--vn-warning); }
.vn-domain-steps li.is-available > span { color: #fff; background: var(--vn-signal); }
.vn-domain-steps li.is-available small { color: var(--vn-signal); }

.vn-security-story {
  background: var(--vn-paper);
}

.vn-security-story__grid {
  display: grid;
  gap: clamp(2.5rem, 7vw, 7rem);
}

.vn-security-story ul {
  display: grid;
  gap: var(--vn-space-3);
  padding: 0;
  margin: 0;
  list-style: none;
}

.vn-security-story li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--vn-space-4);
  padding: var(--vn-space-4);
  border-block-end: 1px solid var(--vn-rule);
}

.vn-security-story li svg { color: var(--vn-brand); }
.vn-security-story li strong { display: block; margin-block-end: 0.25rem; color: var(--vn-ink); }
.vn-security-story li span { color: var(--vn-muted); line-height: 1.55; }

@media (min-width: 48rem) {
  .vn-qr-builder {
    grid-template-columns: 0.9fr 1.1fr;
  }

  .vn-workflow-path {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vn-audience-story__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .vn-product-split {
    grid-template-columns: minmax(0, 0.84fr) minmax(31rem, 1.16fr);
  }

  .vn-product-split--reverse > :first-child {
    grid-column: 1;
    grid-row: 1;
  }

  .vn-product-split--reverse > :last-child {
    grid-column: 2;
    grid-row: 1;
  }

  .vn-analytics-demo {
    grid-template-columns: 0.7fr 1.3fr;
  }

  .vn-security-story__grid {
    grid-template-columns: minmax(20rem, 0.8fr) minmax(0, 1.2fr);
  }
}

@media (max-width: 35.99rem) {
  .vn-link-builder__options,
  .vn-analytics-demo__metrics {
    grid-template-columns: 1fr;
  }

  .vn-link-builder footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .vn-analytics-demo__chart footer {
    grid-template-columns: 1fr;
  }
}

.vn-final-pricing__grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}