/* =========================================================================
   Ludic Media Studio — Visual Scribing v2 (experiment)
   Loaded by visual-scribing-v2.html ONLY, after foundation.css and
   components.css, via the page's `extra_css` in _build/build_visual_scribing_v2.py.

   Same brand kit as the rest of the site — black, white, cream, #fdc727 and
   Archivo — pushed harder: heavier weights, bigger type, hand-drawn marks.
   Same rules as the other stylesheets: no ID selectors, only the documented
   breakpoints (36 / 48 / 64 / 80rem), every colour pair one checks.py
   measures, and white is never set on yellow.

   Motion: every animation here stops under prefers-reduced-motion (the global
   rule in foundation.css) and pauses when the visitor presses "Pause motion"
   (html[data-vx-paused], set by js/motion.js) — WCAG 2.2.2 asks for a
   pause control on anything that moves for more than five seconds.
   ========================================================================= */

:root {
  --vx-ink-on-dark: var(--white);
  --vx-shadow: 0.5rem 0.5rem 0 var(--black);
  --vx-display: clamp(2.75rem, 6vw, 4.75rem);
  --vx-title: clamp(2rem, 4.2vw, 3.5rem);
  --vx-reveal-shift: 1.5rem;
  --vx-cross: #b3261e;   /* 6.44:1 on white — the cross pair checks.py measures */
}

/* ---------- shared ----------------------------------------------------- */
.vx-eyebrow {
  display: inline-block;
  margin-bottom: var(--space-xs);
  padding: 0.25rem 0.625rem;
  background: var(--black);
  color: var(--yellow);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: var(--leading-mid);
}
.section[data-tone="black"] .vx-eyebrow,
.vx-hero .vx-eyebrow { background: var(--yellow); color: var(--black); }

.vx-title {
  font-size: var(--vx-title);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 22ch;
}
.vx-lede { font-size: var(--text-md); line-height: var(--leading-mid); color: var(--ink-muted); max-width: 38rem; }
.section[data-tone="black"] .vx-lede { color: var(--white); }
.section[data-tone="yellow"] .vx-lede { color: var(--black); }

.vx-head { margin-bottom: var(--space-lg); }
.vx-head--center { text-align: center; }
.vx-head--center .vx-title,
.vx-head--center .vx-lede { margin-inline: auto; }
.vx-head--center .vx-lede { margin-top: var(--space-xs); }
@media (min-width: 64rem) {
  .vx-head--split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-lg); align-items: end; }
}
.vx-head--split .vx-lede,
.vx-head > .vx-lede { margin-top: var(--space-xs); }

.vx-link { text-decoration: underline; }

.vx-mark { position: absolute; left: -2%; width: 104%; overflow: visible; pointer-events: none; }
.vx-mark path {
  fill: none;
  stroke: var(--yellow);
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: vx-draw 1.1s 0.5s cubic-bezier(.6, 0, .3, 1) forwards;
}
.vx-mark--underline { bottom: -0.18em; height: 0.32em; }
.vx-mark--underline path { stroke-width: 7; }

@keyframes vx-draw { to { stroke-dashoffset: 0; } }

/* Shown only when the script is there to make it do something. */
.vx-motion { display: none; }
html[data-js] .vx-motion {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--space-sm);
  padding: 0.375rem 0.875rem;
  border: 2px solid currentColor;
  background: transparent;
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
}
.vx-motion::before { content: ""; width: 0.625rem; height: 0.75rem; border-inline: 3px solid currentColor; }
.vx-motion[aria-pressed="true"]::before { width: 0; height: 0; border-block: 0.375rem solid transparent; border-inline: 0.625rem solid currentColor; border-inline-end: 0; }
.section[data-tone="yellow"] .vx-motion[aria-pressed="true"] { background: var(--black); color: var(--yellow); border-color: var(--black); }
.section[data-tone="black"] .vx-motion { color: var(--yellow); }
.section[data-tone="black"] .vx-motion[aria-pressed="true"] { background: var(--yellow); color: var(--black); border-color: var(--yellow); }

html[data-vx-paused] .vx *,
html[data-vx-paused] .vx *::before,
html[data-vx-paused] .vx *::after { animation-play-state: paused; }

/* Reveal on scroll. The hidden state hangs off .vx-ready, which the script
   sets only once its observer exists — if the script never runs, nothing on
   this page is ever hidden. */
html.vx-ready [data-vx-reveal] {
  opacity: 0;
  transform: translateY(var(--vx-reveal-shift));
  transition: opacity 0.7s var(--ease), transform 0.7s cubic-bezier(.2, .7, .2, 1);
}
html.vx-ready [data-vx-reveal].is-in { opacity: 1; transform: none; }

/* ---------- 1. hero ---------------------------------------------------- */
.vx-hero { position: relative; overflow: hidden; background: var(--black); color: var(--white); padding-block: var(--space-xl) var(--space-2xl); }
.vx-hero__inner { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 64rem) { .vx-hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-lg); } }

.vx-hero__title {
  font-size: var(--vx-display);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.03em;
}
.vx-hl { position: relative; display: inline-block; color: var(--yellow); }
.vx-hero__lede { margin-top: var(--space-md); font-size: var(--text-md); line-height: var(--leading-mid); max-width: 36rem; }
.vx-hero__note { margin-top: var(--space-sm); font-size: var(--text-base); line-height: var(--leading-mid); max-width: 34rem; padding-left: var(--space-xs); border-left: 3px solid var(--yellow); }
.vx-hero__proof { margin-top: var(--space-lg); padding-top: var(--space-sm); border-top: 1px solid var(--dark-grey); font-size: var(--text-sm); max-width: 36rem; }
.vx-hero__proof strong { color: var(--yellow); font-weight: 700; }

.vx-hero__art { position: relative; width: 100%; max-width: 34rem; padding: 0 var(--space-md) var(--space-xl) 0; }
@media (min-width: 64rem) { .vx-hero__art { max-width: none; } }
.vx-hero__photo { transform: rotate(-2deg); border: 4px solid var(--yellow); }
.vx-hero__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.vx-hero__card {
  position: absolute;
  left: -0.5rem;
  bottom: 0;
  width: 46%;
  border: 3px solid var(--black);
  background: var(--yellow);
  box-shadow: 0.625rem 0.625rem 0 var(--yellow);
  transform: rotate(4deg);
  animation: vx-bob 6s ease-in-out infinite;
}
.vx-hero__card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@keyframes vx-bob { 50% { transform: rotate(2deg) translateY(-0.5rem); } }

.vx-hero__live {
  position: absolute;
  top: -0.75rem;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  background: var(--white);
  color: var(--black);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: rotate(3deg);
}
.vx-hero__dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--vx-cross); animation: vx-pulse 1.6s ease-in-out infinite; }
@keyframes vx-pulse { 50% { transform: scale(0.55); opacity: 0.5; } }

/* ---------- 2. why now ------------------------------------------------- */
.vx-signals { display: grid; gap: var(--space-lg) var(--space-md); }
@media (min-width: 36rem) { .vx-signals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .vx-signals { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vx-signal { border-top: 6px solid var(--black); padding-top: var(--space-sm); }
.vx-signal__big {
  display: inline-block;
  font-size: clamp(2.75rem, 5vw, 4.25rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.vx-signal:nth-child(even) .vx-signal__big { background: var(--yellow); padding: 0.05em 0.15em; }
.vx-signal__body { margin-top: var(--space-xs); font-size: var(--text-base); line-height: var(--leading-mid); }
.vx-signal__src { margin-top: var(--space-2xs); font-size: var(--text-xs); color: var(--ink-muted); }
.vx-signals__so {
  margin-top: var(--space-xl);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.35;
  max-width: 50rem;
}
.vx-signals__so strong { font-weight: 800; background: linear-gradient(transparent 60%, var(--yellow) 60%); }

/* ---------- 3. a day with us ------------------------------------------ */
.vx-day {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 78%);
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-sm);
  position: relative;
}
.vx-day__step { scroll-snap-align: start; position: relative; }
@media (min-width: 48rem) { .vx-day { grid-auto-columns: minmax(15rem, 40%); } }
@media (min-width: 64rem) {
  .vx-day { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: visible; padding-bottom: 0; }
  .vx-day::before {
    content: "";
    position: absolute;
    top: 0.95rem;
    left: 0.5rem;
    right: 0;
    border-top: 3px dashed var(--yellow);
  }
}
.vx-day__time {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding-right: 0.5rem;
  background: var(--black);
  color: var(--yellow);
  font-size: var(--text-lg);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.vx-day__time::before { content: ""; width: 1rem; height: 1rem; border-radius: 50%; background: var(--yellow); }
.vx-day__media { margin-top: var(--space-sm); border: 2px solid var(--yellow); }
.vx-day__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.vx-day__title { margin-top: var(--space-sm); font-size: var(--text-md); font-weight: 800; line-height: var(--leading-snug); }
.vx-day__body { margin-top: var(--space-2xs); font-size: var(--text-sm); line-height: var(--leading-mid); }

/* ---------- 4. two disciplines ---------------------------------------- */
.vx-spectrum { margin: 0 auto var(--space-lg); max-width: 56rem; display: grid; gap: 0.5rem; }
.vx-spectrum__line { display: none; }
@media (min-width: 36rem) {
  .vx-spectrum__line {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    position: relative;
    padding-top: 1.25rem;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
  }
  .vx-spectrum__line::before { content: ""; position: absolute; top: 0.4rem; left: 8.33%; right: 8.33%; border-top: 2px solid var(--black); }
  .vx-spectrum__stop { position: relative; }
  .vx-spectrum__stop::before {
    content: "";
    position: absolute;
    top: -1.25rem;
    left: 50%;
    width: 0.875rem;
    height: 0.875rem;
    margin-left: -0.4375rem;
    border-radius: 50%;
    background: var(--yellow);
    border: 2px solid var(--black);
  }
  .vx-spectrum__range { display: none; }
}
.vx-spectrum__span { padding: 0.375rem 0.875rem; font-size: var(--text-sm); }
.vx-spectrum__span--rec { background: var(--black); color: var(--yellow); }
.vx-spectrum__span--fac { background: var(--yellow); color: var(--black); border: 2px solid var(--black); }
@media (min-width: 36rem) { .vx-spectrum__span--rec { width: 50%; } }

.vx-modes { display: grid; gap: var(--space-md); }
@media (min-width: 64rem) { .vx-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vx-mode { display: flex; flex-direction: column; background: var(--white); border: 3px solid var(--black); }
.vx-mode__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 3px solid var(--black); }
.vx-mode__text { padding: var(--space-md); display: grid; gap: var(--space-xs); align-content: start; }
.vx-mode__kicker { font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.vx-mode__title { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; line-height: 1.1; }
.vx-mode--fac { background: var(--black); color: var(--white); }
.vx-mode--fac .vx-mode__kicker { color: var(--yellow); }
.vx-mode--fac .arrow-link,
.vx-mode--fac .arrow-link:hover { color: var(--yellow); }
.vx-mode--fac :focus-visible { outline-color: var(--white); }

.vx-ticks { display: grid; gap: 0.375rem; margin-top: var(--space-2xs); }
.vx-ticks li { position: relative; padding-left: 1.75rem; font-weight: 600; }
.vx-ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35rem;
  width: 1.125rem;
  height: 1.125rem;
  background: var(--yellow);
  border: 2px solid var(--black);
}
.vx-mode--fac .vx-ticks li::before { border-color: var(--yellow); }

/* ---------- 5. one drawing, many lives -------------------------------- */
.vx-tiles { display: grid; gap: var(--space-md); }
/* --r is each tile's aspect ratio, set inline by the build per format; this is
   the default for a tile that does not set one. */
.vx-tile { --r: 1.5; }
.vx-tiles__row { display: grid; gap: var(--space-md); }
@media (min-width: 48rem) {
  /* Each tile grows in proportion to its own aspect ratio, so every frame in
     a row comes out the same height without anyone computing a width. */
  .vx-tiles__row { display: flex; align-items: flex-start; }
  .vx-tile { flex: var(--r) 1 0; min-width: 0; }
}
.vx-tile__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--r);
  background: var(--white);
  border: 3px solid var(--black);
  box-shadow: var(--vx-shadow);
}
.vx-tile__frame img { width: 100%; height: 100%; object-fit: cover; }
.vx-tile__label { margin-top: 0.875rem; font-size: var(--text-sm); }
.vx-tile__label strong { font-weight: 800; margin-right: 0.25rem; }
@media (max-width: 47.999rem) { .vx-tile--story { max-width: 14rem; } }

/* GIF: the drawing redraws itself, in steps, like a frame-by-frame loop. */
.vx-tile--gif img { animation: vx-wipe 3.6s steps(12) infinite; }
@keyframes vx-wipe {
  0% { clip-path: inset(0 100% 0 0); }
  70%, 100% { clip-path: inset(0 0 0 0); }
}
/* Story: a slow pan across the board, inside a phone-shaped frame. */
.vx-tile--story .vx-tile__frame { border-width: 6px; border-radius: 1.5rem; }
.vx-tile--story img { object-position: 0% 50%; animation: vx-pan 9s ease-in-out infinite alternate; }
@keyframes vx-pan { to { object-position: 100% 50%; } }
/* Square post: a close crop with a quote card. */
.vx-tile--post img { transform: scale(1.7); transform-origin: 58% 62%; }
.vx-tile__quote {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  padding: 0.25rem 0.625rem;
  background: var(--black);
  color: var(--yellow);
  font-size: clamp(1rem, 2vw, 1.5rem);
  font-weight: 900;
  animation: vx-pop 4s ease-in-out infinite;
}
@keyframes vx-pop { 0%, 60%, 100% { transform: none; } 70% { transform: rotate(-4deg) scale(1.08); } }
/* Animation: a slow push-in with a play mark. */
.vx-tile--film img { animation: vx-push 10s ease-in-out infinite alternate; }
@keyframes vx-push { to { transform: scale(1.18) translate(-3%, 2%); } }
.vx-tile__play {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 3.5rem;
  height: 3.5rem;
  margin: -1.75rem 0 0 -1.75rem;
  border-radius: 50%;
  background: var(--yellow);
  border: 3px solid var(--black);
}
.vx-tile__play::after {
  content: "";
  position: absolute;
  left: 1.25rem;
  top: 0.875rem;
  border-block: 0.75rem solid transparent;
  border-left: 1.125rem solid var(--black);
}
/* Banner: a letterbox crop with the campaign line sliding in. */
/* Cropped low enough to keep the face, the lifted rock and the bug — the
   story of the drawing — with the campaign line over the jacket on the left. */
.vx-tile--banner img { object-position: 50% 63%; }
.vx-tile__headline {
  position: absolute;
  left: 1rem;
  top: 50%;
  max-width: 34%;
  padding: 0.5rem 0.875rem;
  background: var(--black);
  color: var(--yellow);
  font-size: clamp(0.9375rem, 2.4vw, 1.75rem);
  font-weight: 900;
  line-height: 1.1;
  transform: translateY(-50%);
}
.vx-tile__headline::after {
  content: "";
  display: block;
  height: 0.25rem;
  margin-top: 0.375rem;
  background: var(--yellow);
  transform-origin: left;
  animation: vx-grow 5s cubic-bezier(.6, 0, .3, 1) infinite;
}
@keyframes vx-grow { 0% { transform: scaleX(0); } 40%, 100% { transform: scaleX(1); } }

.vx-caption { margin-top: var(--space-md); font-size: var(--text-sm); font-weight: 600; }
.vx-channels { display: grid; gap: var(--space-md); margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 3px solid var(--black); }
@media (min-width: 48rem) { .vx-channels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vx-channels__title { font-size: var(--text-md); font-weight: 800; margin-bottom: var(--space-xs); }
.vx-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.vx-chip { padding: 0.25rem 0.75rem; border: 2px solid var(--black); background: var(--white); font-size: var(--text-sm); font-weight: 600; }

/* ---------- 6. the chain ---------------------------------------------- */
.vx-chain { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-sm); }
@media (min-width: 48rem) { .vx-chain { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); } }
@media (min-width: 64rem) { .vx-chain { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-md) 2.25rem; } }
.vx-node { position: relative; display: flex; flex-direction: column; gap: 0.5rem; }
.vx-node__n { align-self: flex-start; padding: 0 0.5rem; background: var(--yellow); font-weight: 900; font-variant-numeric: tabular-nums; }
.vx-node__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 2px solid var(--black); }
.vx-node__title { font-size: var(--text-md); font-weight: 800; line-height: var(--leading-snug); }
.vx-node__body { font-size: var(--text-sm); line-height: var(--leading-mid); color: var(--ink-muted); }
.vx-node__link { margin-top: auto; font-size: var(--text-sm); font-weight: 700; }
.vx-arrow { display: none; }
@media (min-width: 64rem) {
  .vx-arrow {
    display: block;
    position: absolute;
    top: 5.5rem;
    right: -2.15rem;
    width: 2rem;
    height: 1rem;
  }
  .vx-arrow path { fill: none; stroke: var(--black); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
}

/* ---------- 7. why Ludic ------------------------------------------------ */
.vx-why { display: grid; gap: var(--space-lg) var(--space-md); }
@media (min-width: 36rem) { .vx-why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .vx-why { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vx-why__item { position: relative; border-top: 3px solid var(--black); padding-top: var(--space-sm); }
.vx-why__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--yellow);
  border: 2px solid var(--black);
  font-weight: 900;
}
.vx-why__title { margin-top: var(--space-xs); font-size: var(--text-lg); font-weight: 800; line-height: var(--leading-snug); }
.vx-why__body { margin-top: var(--space-2xs); line-height: var(--leading-mid); color: var(--ink-muted); }

/* ---------- 8. formats ------------------------------------------------- */
.vx-formats-wrap { padding-top: 0; overflow: hidden; }
.vx-marquee {
  overflow: hidden;
  margin-bottom: var(--space-xl);
  padding-block: var(--space-sm);
  border-bottom: 3px solid var(--yellow);
  white-space: nowrap;
}
.vx-marquee__track {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  color: var(--yellow);
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  animation: vx-marquee 60s linear infinite;
}
.vx-marquee__star { font-size: 0.5em; }
.vx-marquee:hover .vx-marquee__track { animation-play-state: paused; }
@keyframes vx-marquee { to { transform: translateX(-50%); } }

.vx-formats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--space-sm); }
@media (min-width: 48rem) { .vx-formats { gap: var(--space-lg) var(--space-md); } }
@media (min-width: 64rem) { .vx-formats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vx-format__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 2px solid var(--yellow); }
.vx-format__title { margin-top: var(--space-sm); font-size: var(--text-md); font-weight: 800; }
.vx-format__body { margin-top: 0.25rem; font-size: var(--text-sm); line-height: var(--leading-mid); }

/* ---------- 9. story ----------------------------------------------------- */
.vx-story { display: grid; gap: var(--space-lg); align-items: center; }
@media (min-width: 64rem) { .vx-story { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); } }
.vx-story__media { border: 3px solid var(--black); box-shadow: 0.75rem 0.75rem 0 var(--yellow); }
.vx-story__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.vx-story__text { display: grid; gap: var(--space-sm); justify-items: start; }
.vx-beats { display: grid; gap: var(--space-xs); counter-reset: vx-beat; }
.vx-beats li { position: relative; padding-left: 2.75rem; line-height: var(--leading-mid); counter-increment: vx-beat; }
.vx-beats li::before {
  content: counter(vx-beat);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  background: var(--black);
  color: var(--yellow);
  font-weight: 900;
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.vx-story__quote { padding-left: var(--space-sm); border-left: 6px solid var(--yellow); }
.vx-story__quote p { font-size: var(--text-md); font-weight: 600; line-height: var(--leading-mid); }
.vx-story__quote footer { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--ink-muted); }

/* ---------- 10. FAQ ------------------------------------------------------ */
@media (min-width: 64rem) { .vx-faq { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-xl); align-items: start; } }
.vx-faq__item { border-bottom: 2px solid var(--black); }
.vx-faq__item:first-child { border-top: 2px solid var(--black); }
.vx-faq__q {
  position: relative;
  padding: var(--space-sm) 3rem var(--space-sm) 0;
  font-size: var(--text-md);
  font-weight: 700;
  line-height: var(--leading-snug);
  cursor: pointer;
  list-style: none;
}
.vx-faq__q::-webkit-details-marker { display: none; }
.vx-faq__q::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  width: 2rem;
  height: 2rem;
  margin-top: -1rem;
  border-radius: 50%;
  background: var(--yellow);
  border: 2px solid var(--black);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.6rem;
  text-align: center;
  transition: transform var(--duration) var(--ease);
}
.vx-faq__item[open] .vx-faq__q::after { transform: rotate(45deg); }
.vx-faq__a { padding-bottom: var(--space-sm); max-width: 44rem; line-height: var(--leading-body); color: var(--ink-muted); }

/* ---------- 11. CTA ------------------------------------------------------ */
.vx-cta { text-align: center; display: grid; justify-items: center; gap: var(--space-sm); padding-block: var(--space-lg); }
.vx-cta__title { font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 900; line-height: 1; letter-spacing: -0.03em; }
.vx-cta__body { font-size: var(--text-md); max-width: 40rem; line-height: var(--leading-mid); }
.vx-cta .button-group { justify-content: center; }