/* Ver-IF-MCP landing. Layout over hexart.css; every move follows the scroll: story.js writes the
   numbers (--in, --out, --c on [data-sa]; --p, --e, --l, --t, --w on the board), this file draws
   them. No inline styles anywhere (strict CSP). */

/* the page grows with a big screen, so 4K keeps the proportions of a laptop */
html {
  font-size: clamp(16px, min(0.52vw + 7.2px, 0.9vh + 7.2px), 24px);
}

:root {
  --vf-screen: 100vh;
  --vf-nav: 4.5rem;
  --vf-glow: 209 174 83;
  --vf-onyx: 10 10 12;
}

@supports (height: 100svh) {
  :root {
    --vf-screen: 100svh;
  }
}

body.vf-landing {
  overflow-x: clip;
}

.vf-landing .hx-container {
  --hx-container: min(1440px, 82rem);
}

/* ---------- type ---------- */

.vf-display {
  margin: 0;
  max-width: 13ch;
  font-size: clamp(2.6rem, min(6.4vw, 10.5svh), 6.25rem);
  font-weight: var(--hx-weight-light);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.vf-h2 {
  margin: 0;
  max-width: 21ch;
  font-size: clamp(2rem, min(3.9vw, 7svh), 3.5rem);
  font-weight: var(--hx-weight-light);
  line-height: 1.08;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.vf-body {
  margin: 0;
  max-width: 38rem;
  font-size: clamp(1.0625rem, 0.4vw + 0.95rem, 1.25rem);
  line-height: 1.62;
  color: var(--hx-fg-muted);
  text-wrap: pretty;
}

.vf-head {
  display: grid;
  gap: var(--hx-space-6);
  margin-bottom: clamp(2.5rem, 6svh, 4rem);
}

/* ---------- scroll-driven entry of blocks (defaults: visible without the script) ---------- */

[data-sa] {
  --in: 1;
  --out: 0;
  --c: 0;
}

.sa-rise {
  --k: clamp(0, calc((var(--in) - var(--d, 0)) / (1 - var(--d, 0))), 1);
  opacity: var(--k);
  transform: translate3d(0, calc((1 - var(--k)) * 5vh), 0);
}

.d1 {
  --d: 0.12;
}

.d2 {
  --d: 0.24;
}

.d3 {
  --d: 0.36;
}

/* ---------- photographs: full bleed, the quiet left side carries the text ---------- */

.vf-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  margin: 0;
  overflow: clip;
  background: var(--hx-bg-deep);
}

.vf-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% 50%;
}

.vf-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgb(var(--vf-onyx) / 0.94) 0%, rgb(var(--vf-onyx) / 0.78) 30%, rgb(var(--vf-onyx) / 0.18) 58%, rgb(var(--vf-onyx) / 0) 72%),
    linear-gradient(0deg, rgb(var(--vf-onyx) / 1) 0%, rgb(var(--vf-onyx) / 0) 26%),
    linear-gradient(180deg, rgb(var(--vf-onyx) / 0.7) 0%, rgb(var(--vf-onyx) / 0) 18%);
}

/* AI label in a corner of the frame, on its own plate (brand rule: never on the logo side) */
.vf-ai {
  position: absolute;
  z-index: 3;
}

.vf-ai--tr {
  top: clamp(0.75rem, 2vw, 1.5rem);
  inset-inline-end: clamp(0.75rem, 2vw, 1.5rem);
}

.vf-ai--bl {
  inset-inline-start: var(--hx-container-gutter);
  bottom: 1.25rem;
}

/* ---------- hero ---------- */

.vf-hero2 {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: calc(var(--vf-screen) - var(--vf-nav));
  overflow: clip;
}

.vf-hero2__media > img {
  object-position: 64% 50%;
  transform: translate3d(0, calc(var(--c) * -5vh), 0) scale(calc(1.03 - var(--c) * 0.08));
}

.vf-hero2__inner {
  display: grid;
  gap: clamp(2.5rem, 7svh, 5rem);
  padding-block: clamp(4rem, 12svh, 9rem) clamp(1.5rem, 4svh, 2.75rem);
}

.vf-hero2__copy {
  display: grid;
  justify-items: start;
  gap: clamp(1.1rem, 2.8svh, 1.9rem);
  max-width: 44rem;
  transform: translate3d(0, calc(var(--c) * 12vh), 0);
  opacity: calc(1 + var(--c) * 1.7);
}

.vf-hero2__lead {
  max-width: 34rem;
  color: var(--hx-fg-muted);
}

.vf-hero2__note {
  max-width: 34rem;
  color: var(--hx-fg-subtle);
}

.vf-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1rem, 3vw, 2.5rem);
  margin: 0;
}

.vf-facts > div {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.35rem;
  padding: 1.1rem 0 0.4rem;
  border-top: 1px solid var(--hx-line);
}

.vf-facts > div::before {
  content: "";
  position: absolute;
  top: -1px;
  inset-inline-start: 0;
  width: 2.25rem;
  height: 1px;
  background: var(--hx-accent);
}

.vf-facts dt {
  font-family: var(--hx-font-condensed);
  font-size: 1.125rem;
  font-weight: var(--hx-weight-semibold);
  letter-spacing: var(--hx-tracking-caps-tight);
  text-transform: uppercase;
  color: var(--hx-fg);
}

.vf-facts dd {
  margin: 0;
  font-size: var(--hx-text-small);
  color: var(--hx-fg-muted);
}

@media (min-width: 900px) {
  .vf-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- full-bleed bands with a photograph (mission, privacy) ---------- */

.vf-band2 {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: min(96svh, 60rem);
  overflow: clip;
}

.vf-band2__media > img {
  transform: translate3d(0, calc(var(--c) * -7vh), 0) scale(1.09);
}

.vf-band2__copy {
  display: grid;
  justify-items: start;
  gap: var(--hx-space-6);
  max-width: 38rem;
  padding-block: clamp(5rem, 14svh, 9rem);
}

.vf-band2__copy--wide {
  max-width: 46rem;
}

.vf-band2 .vf-media::after {
  background:
    linear-gradient(90deg, rgb(var(--vf-onyx) / 0.95) 0%, rgb(var(--vf-onyx) / 0.82) 34%, rgb(var(--vf-onyx) / 0.2) 62%, rgb(var(--vf-onyx) / 0) 76%),
    linear-gradient(0deg, rgb(var(--vf-onyx) / 1) 0%, rgb(var(--vf-onyx) / 0) 22%),
    linear-gradient(180deg, rgb(var(--vf-onyx) / 1) 0%, rgb(var(--vf-onyx) / 0) 22%);
}

/* on a phone the photograph sits above the text instead of behind it */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .vf-band2 {
    display: block;
    min-height: 0;
  }
  .vf-band2 .vf-media {
    position: relative;
    z-index: 0;
    aspect-ratio: 4 / 3;
  }
  .vf-band2 .vf-media > img {
    object-position: 72% 50%;
  }
  .vf-band2 .vf-media::after {
    background:
      linear-gradient(0deg, rgb(var(--vf-onyx) / 1) 0%, rgb(var(--vf-onyx) / 0) 45%),
      linear-gradient(180deg, rgb(var(--vf-onyx) / 0.85) 0%, rgb(var(--vf-onyx) / 0) 22%);
  }
  .vf-band2__copy {
    padding-block: 0 clamp(3rem, 8svh, 5rem);
    margin-top: -2.5rem;
    position: relative;
  }
  .vf-hero2__media > img {
    object-position: 72% 50%;
  }
  .vf-hero2 .vf-media::after {
    background:
      linear-gradient(0deg, rgb(var(--vf-onyx) / 0.98) 0%, rgb(var(--vf-onyx) / 0.86) 55%, rgb(var(--vf-onyx) / 0.3) 100%);
  }
}

/* ---------- mission: the sentence and three principles ---------- */

.vf-quote {
  position: relative;
  margin: 0;
  padding-block: clamp(3.5rem, 11svh, 7rem) clamp(2.5rem, 7svh, 4.5rem);
  border-top: 1px solid var(--hx-line);
}

.vf-quote::before {
  content: "";
  position: absolute;
  top: -1px;
  inset-inline-start: 0;
  width: 4rem;
  height: 1px;
  background: var(--hx-accent);
}

.vf-quote p {
  margin: 0;
  max-width: 24ch;
  font-size: clamp(1.75rem, 3.4vw, 3.1rem);
  font-weight: var(--hx-weight-extralight);
  line-height: 1.16;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.vf-principles {
  display: grid;
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0 0 clamp(4rem, 12svh, 8rem);
  list-style: none;
}

.vf-principles li {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: 1.75rem 0;
  border-top: 1px solid var(--hx-line);
}

.vf-principles__num {
  font-family: var(--hx-font-condensed);
  font-size: var(--hx-text-label);
  font-weight: var(--hx-weight-semibold);
  letter-spacing: var(--hx-tracking-caps);
  color: var(--hx-accent-text);
}

.vf-principles h3 {
  margin: 0;
  font-size: clamp(1.25rem, 1.3vw + 0.8rem, 1.6rem);
  font-weight: var(--hx-weight-regular);
  letter-spacing: -0.01em;
}

.vf-principles p {
  margin: 0;
  max-width: 30rem;
  color: var(--hx-fg-muted);
}

@media (min-width: 860px) {
  .vf-principles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .vf-principles li {
    padding: 2rem 2rem 2rem 0;
  }
  .vf-principles li + li {
    padding-inline-start: 2rem;
    border-inline-start: 1px solid var(--hx-line);
  }
}

/* ---------- the board: one pinned screen, four frames swap with the scroll ---------- */

.seq {
  --n: 4;
  position: relative;
  height: calc(var(--vf-screen) * (1 + 0.65 * var(--n)));
  background:
    radial-gradient(60% 50% at 50% 46%, rgb(var(--vf-glow) / 0.07), transparent 70%),
    var(--hx-bg-deep);
  border-block: 1px solid var(--hx-line);
}

.seq-stage {
  --e: 1;
  --l: 0;
  --p: 0;
  position: sticky;
  top: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(0.5rem, 2svh, 1.5rem);
  height: var(--vf-screen);
  padding: calc(var(--vf-nav) + 3svh) var(--hx-container-gutter) 4.5svh;
  overflow: clip;
}

.seq-head {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  text-align: center;
  opacity: calc(min(1, calc(var(--e) * 1.6)) * (1 - var(--l)));
  transform: translate3d(0, calc((1 - var(--e)) * 6vh - var(--l) * 6vh), 0);
}

.seq-title {
  margin: 0;
  font-size: clamp(1.5rem, min(2.6vw, 4.4svh), 2.6rem);
  font-weight: var(--hx-weight-light);
  letter-spacing: -0.012em;
}

.seq-scene {
  position: relative;
  min-height: 0;
  container-type: size;
  opacity: calc(min(1, calc(var(--e) * 1.4)) * (1 - var(--l)));
  transform: scale(calc((0.88 + 0.12 * var(--e)) * (1 - 0.06 * var(--l))));
}

/* the pool of light the frames float in: no box, no card, no glass behind them */
.seq-scene::before {
  content: "";
  position: absolute;
  inset: 6% 16%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--vf-glow) / 0.2), rgb(var(--vf-glow) / 0.05) 55%, transparent 76%);
  transform: scale(calc(0.9 + 0.2 * var(--p)));
}

.seq-frame {
  --t: 1;
  --w: 0;
  position: absolute;
  inset: 0;
  display: grid;
  grid-template: 100% / 100%;
  place-items: center;
  opacity: clamp(0, calc(var(--w) * 1.6 - 0.45), 1);
  transform: translate3d(0, calc(var(--t) * -7svh), 0) scale(calc(1 + var(--t) * 0.08));
  filter: blur(calc((1 - var(--w)) * 10px));
  will-change: transform, opacity, filter;
}

.seq-frame:first-child {
  --t: 0;
  --w: 1;
}

.seq-frame > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 34px 44px rgb(0 0 0 / 0.55));
}

.seq-foot {
  display: grid;
  justify-items: center;
  gap: clamp(0.7rem, 2svh, 1.3rem);
  opacity: calc(min(1, calc(var(--e) * 1.6)) * (1 - var(--l)));
  transform: translate3d(0, calc((1 - var(--e)) * 6vh - var(--l) * 6vh), 0);
}

.seq-caps {
  display: grid;
  width: 100%;
  text-align: center;
}

.seq-cap {
  --t: 1;
  --w: 0;
  grid-area: 1 / 1;
  display: grid;
  justify-items: center;
  align-content: end;
  gap: 0.55rem;
  margin: 0;
  opacity: clamp(0, calc(var(--w) * 2.5 - 1.25), 1);
  transform: translate3d(0, calc(var(--t) * -2rem), 0);
}

.seq-cap:first-child {
  --t: 0;
  --w: 1;
}

.seq-cap__num {
  font-family: var(--hx-font-condensed);
  font-size: var(--hx-text-label);
  font-weight: var(--hx-weight-semibold);
  letter-spacing: var(--hx-tracking-caps);
  color: var(--hx-accent-text);
}

.seq-cap strong {
  max-width: 22ch;
  font-size: clamp(1.75rem, min(3.8vw, 5.8svh), 3.75rem);
  font-weight: var(--hx-weight-light);
  line-height: 1.05;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.seq-cap > span:last-child {
  max-width: 36em;
  font-size: clamp(0.95rem, min(1.3vw, 2.2svh), 1.2rem);
  color: var(--hx-fg-muted);
  text-wrap: balance;
}

.seq-bar {
  width: clamp(8rem, 16vw, 14rem);
  height: 1px;
  overflow: hidden;
  background: var(--hx-line);
}

.seq-bar i {
  display: block;
  height: 100%;
  background: var(--hx-gradient-gold-line, var(--hx-accent));
  transform: scaleX(var(--p));
  transform-origin: left;
}

.seq-stage > .vf-ai {
  opacity: calc(min(1, calc(var(--e) * 1.6)) * (1 - var(--l)));
}

/* Captions sit next to the object, not at the bottom of a tall screen. Narrow screens: head, object of a
   capped height and caption stacked in the middle of the stage. Wide screens: caption on the left at the
   object's height, object on the right. */
.seq-stage {
  grid-template-rows: auto auto auto;
  align-content: center;
}

.seq-scene {
  height: clamp(12rem, 46svh, 34rem);
}

.seq-cap strong {
  font-size: clamp(2rem, min(7vw, 5.4svh), 3.6rem);
  font-weight: var(--hx-weight-regular);
}

.seq-cap > span:last-child {
  font-size: clamp(1.05rem, min(3.6vw, 2.4svh), 1.35rem);
}

@media (min-width: 1024px), (min-width: 640px) and (min-aspect-ratio: 3/2) {
  .seq-stage {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas:
      ". scene"
      "head scene"
      "foot scene"
      ". scene";
    align-content: stretch;
    column-gap: clamp(2rem, 5vw, 6rem);
    row-gap: clamp(1rem, 3.5svh, 2.5rem);
    padding-inline: max(var(--hx-container-gutter), calc((100vw - 82rem) / 2));
    padding-bottom: 6svh;
  }
  .seq-head {
    grid-area: head;
    justify-items: start;
    text-align: start;
  }
  .seq-title {
    font-size: clamp(1.25rem, min(1.8vw, 3.4svh), 2rem);
    color: var(--hx-fg-muted);
  }
  .seq-scene {
    grid-area: scene;
    align-self: center;
    height: calc(var(--vf-screen) - var(--vf-nav) - 12svh);
  }
  .seq-scene::before {
    inset: 4% 4%;
  }
  .seq-foot {
    grid-area: foot;
    justify-items: start;
  }
  .seq-caps {
    text-align: start;
  }
  .seq-cap {
    justify-items: start;
    align-content: start;
    gap: clamp(0.6rem, 1.6svh, 1.1rem);
  }
  .seq-cap strong {
    max-width: 14ch;
    font-size: clamp(2.2rem, min(4.3vw, 7.6svh), 5.4rem);
    line-height: 1.02;
  }
  .seq-cap > span:last-child {
    max-width: 26em;
    font-size: clamp(1.05rem, min(1.45vw, 2.6svh), 1.6rem);
    text-wrap: pretty;
  }
}

/* ---------- report: what the assistant receives ---------- */

.vf-report {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}

.vf-report__copy {
  display: grid;
  justify-items: start;
  gap: var(--hx-space-6);
}

@media (min-width: 1024px) {
  .vf-report {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }
}

.vf-term {
  --hx-cut: var(--hx-chamfer-lg);
  margin: 0;
  min-width: 0;
  background: var(--hx-bg-deep);
  border: 1px solid var(--hx-line);
  box-shadow: 0 40px 90px -40px rgb(0 0 0 / 0.9);
}

.vf-term__bar {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid var(--hx-line);
  font-family: var(--hx-font-condensed);
  font-size: var(--hx-text-label);
  font-weight: var(--hx-weight-semibold);
  letter-spacing: var(--hx-tracking-caps);
  text-transform: uppercase;
  color: var(--hx-fg-muted);
}

.vf-term__dots {
  display: inline-flex;
  gap: 0.35rem;
}

.vf-term__dots i {
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid var(--hx-line-strong, var(--hx-line));
}

.vf-term__body {
  margin: 0;
  padding: 1.25rem 1.4rem 1.5rem;
  overflow-x: auto;
  font-family: var(--hx-font-mono);
  font-size: clamp(0.72rem, 0.55vw + 0.5rem, 0.875rem);
  line-height: 1.75;
  color: var(--hx-fg-muted);
}

.vf-term__body code {
  display: grid;
  font: inherit;
}

/* lines arrive one after another as the block enters, like the stream itself */
.vf-term .ln {
  display: block;
  min-height: 1.75em;
  white-space: pre;
  opacity: clamp(0, calc((var(--in) * 1.35 - var(--i, 0) / 18) * 5), 1);
}

.vf-term .ln:nth-child(2) { --i: 1; }
.vf-term .ln:nth-child(3) { --i: 2; }
.vf-term .ln:nth-child(4) { --i: 3; }
.vf-term .ln:nth-child(5) { --i: 4; }
.vf-term .ln:nth-child(6) { --i: 5; }
.vf-term .ln:nth-child(7) { --i: 6; }
.vf-term .ln:nth-child(8) { --i: 7; }
.vf-term .ln:nth-child(9) { --i: 8; }
.vf-term .ln:nth-child(10) { --i: 9; }
.vf-term .ln:nth-child(11) { --i: 10; }
.vf-term .ln:nth-child(12) { --i: 11; }
.vf-term .ln:nth-child(13) { --i: 12; }
.vf-term .ln:nth-child(14) { --i: 13; }
.vf-term .ln:nth-child(15) { --i: 14; }
.vf-term .ln:nth-child(16) { --i: 15; }

.t-h {
  color: var(--hx-fg);
}

.t-g {
  color: var(--hx-accent-text);
}

.t-ok {
  color: var(--hx-success-base);
}

.t-bad,
.t-alarm {
  color: var(--hx-signal-text);
}

.t-alarm {
  font-weight: 600;
}

/* ---------- lists with a hairline tick ---------- */

.vf-ticks {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--hx-fg-muted);
}

.vf-ticks li {
  position: relative;
  padding-inline-start: 1.6rem;
}

.vf-ticks li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.78em;
  width: 0.9rem;
  height: 1px;
  background: var(--hx-accent);
}

.vf-ticks--never li::before {
  background: var(--hx-fg-subtle);
}

/* ---------- plans ---------- */

.vf-plans3 {
  display: grid;
  grid-template-columns: 1fr;
  margin-bottom: var(--hx-space-6);
  border: 1px solid var(--hx-line);
}

.vf-plan3 {
  position: relative;
  display: grid;
  align-content: start;
  gap: 1.25rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--hx-bg);
}

.vf-plan3 + .vf-plan3 {
  border-top: 1px solid var(--hx-line);
}

.vf-plan3--main {
  background: var(--hx-surface);
}

.vf-plan3--main::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto;
  height: 2px;
  background: var(--hx-accent);
}

.vf-plan3__name {
  margin: 0;
  font-family: var(--hx-font-condensed);
  font-size: var(--hx-text-label);
  font-weight: var(--hx-weight-semibold);
  letter-spacing: var(--hx-tracking-caps);
  text-transform: uppercase;
  color: var(--hx-accent-text);
}

.vf-plan3__price {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--hx-line);
}

.vf-plan3__value {
  font-size: clamp(3rem, 4.4vw, 4.25rem);
  font-weight: var(--hx-weight-extralight);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.vf-plan3__unit {
  font-family: var(--hx-font-condensed);
  font-weight: var(--hx-weight-medium);
  letter-spacing: var(--hx-tracking-caps-tight);
  text-transform: uppercase;
  color: var(--hx-fg-muted);
}

.vf-plan3 {
  grid-template-rows: auto auto auto 1fr auto;
}

.vf-plan3__free {
  justify-self: start;
  margin: 0;
  padding: 0.3rem 0.65rem;
  font-family: var(--hx-font-condensed);
  font-size: var(--hx-text-label);
  font-weight: var(--hx-weight-semibold);
  letter-spacing: var(--hx-tracking-caps-tight);
  text-transform: uppercase;
  color: var(--hx-on-accent, #0a0a0c);
  background: var(--hx-accent);
}

.vf-plan3__cta {
  margin-top: 0.5rem;
}

.vf-plans__trial {
  max-width: 46rem;
  color: var(--hx-fg-muted);
}

@media (min-width: 860px) {
  .vf-plans3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .vf-plan3 + .vf-plan3 {
    border-top: 0;
    border-inline-start: 1px solid var(--hx-line);
  }
}

/* ---------- connect ---------- */

.vf-connect {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--hx-space-8);
}

.vf-connect .vf-head {
  margin-bottom: 0;
}

.vf-connect > *,
.vf-tabs,
.vf-details {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
}

/* ---------- privacy ---------- */

.vf-privacy__cols {
  display: grid;
  gap: 2rem;
  width: 100%;
}

.vf-privacy__h {
  margin: 0 0 1rem;
  font-family: var(--hx-font-condensed);
  font-size: var(--hx-text-label);
  font-weight: var(--hx-weight-semibold);
  letter-spacing: var(--hx-tracking-caps);
  text-transform: uppercase;
  color: var(--hx-fg);
}

@media (min-width: 760px) {
  .vf-privacy__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- closing ---------- */

.vf-cta {
  position: relative;
  isolation: isolate;
  overflow: clip;
  border-top: 1px solid var(--hx-line);
}

.vf-cta::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: 80vmin;
  height: 80vmin;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--vf-glow) / 0.14), transparent 72%);
  transform: scale(calc(0.6 + 0.4 * var(--in)));
}

.vf-cta__inner {
  display: grid;
  justify-items: center;
  gap: var(--hx-space-6);
  padding-block: clamp(5rem, 16svh, 10rem);
  text-align: center;
}

.vf-cta .vf-h2 {
  max-width: 18ch;
}

/* ---------- reduced motion: the board still cross-fades, nothing travels ---------- */

.still .sa-rise,
.still .vf-hero2__copy,
.still .vf-hero2__media > img,
.still .vf-band2__media > img,
.still .seq-head,
.still .seq-scene,
.still .seq-foot,
.still .seq-frame,
.still .seq-cap,
.still .vf-cta::before {
  transform: none;
  filter: none;
}

.still .vf-term .ln {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .vf-term .ln {
    opacity: 1;
  }
}

/* ---------- right-to-left: photographs and their shade mirror with the text ---------- */

[dir="rtl"] .vf-media > img,
[dir="rtl"] .vf-media::after {
  transform: scaleX(-1);
}

[dir="rtl"] .vf-hero2__media > img {
  transform: scaleX(-1) translate3d(0, calc(var(--c) * -5vh), 0) scale(calc(1.03 - var(--c) * 0.08));
}