/* ============================================================================
 * Vayra — page shell and the sections that are written for this template
 *
 * The components in parts.css are reusable blocks. What is in this file is the reset,
 * the page shell, and the sections that exist only here: problem, capability, trust,
 * metrics, pricing and the FAQ.
 * ============================================================================ */

/* ═══════════════════════════════════════════════════════════════════════════
 * 0. Reset and shell
 * ═══════════════════════════════════════════════════════════════════════════ */

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

html {
  background: var(--vy-bg-primary);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* No horizontal scroll at any width from 320 to 1920 (clip preserves sticky) */
html, body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--vy-bg-primary);
  color: var(--vy-text-primary);
  font-family: var(--vy-font-body);
  font-size: var(--vy-fluid-body);
  line-height: var(--leading-body);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img, video, canvas, svg { max-width: 100%; }
img, video { height: auto; }

a { color: inherit; }

:focus-visible { outline: 2px solid var(--vy-text-primary); outline-offset: 2px; }

.vy-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.vy-shell { max-width: var(--vy-container); margin: 0 auto; padding: 0 clamp(20px, 3.2vw, 48px); }
.vy-section { padding: var(--vy-section-lg) 0; position: relative; }
.vy-section--tight { padding: var(--vy-section-sm) 0; }

.vy-eyebrow {
  font-family: var(--vy-font-mono);
  font-size: var(--vy-t-12);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--vy-text-secondary);
  margin: 0 0 20px;
}

.vy-h2 {
  margin: 0;
  font-family: var(--vy-font-display);
  font-size: var(--vy-fluid-title);
  font-weight: 800;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.vy-lede-sub {
  margin: 18px 0 0;
  max-width: 62ch;
  font-size: var(--vy-t-16);
  color: var(--vy-text-secondary);
}

.vy-rule { border: 0; border-top: 1px solid var(--vy-line); margin: 0; }

/* ── Entrance reveal (global) ──
   The default is visible. Elements only hide once JavaScript adds the armed class, so a
   script failure leaves the content readable instead of blank. */
.vy-armed .vy-rise { opacity: 0; transform: translateY(22px); }
.vy-rise {
  transition:
    opacity var(--vy-dur-section) var(--vy-ease),
    transform var(--vy-dur-section) var(--vy-ease);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.vy-rise.is-in { opacity: 1; transform: none; }

/* ── Placeholders ──
   An empty slot is a flat panel that keeps its aspect ratio, so dropping the real image
   in later does not move the layout. */
.vy-ph {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--vy-bg-secondary);
  border: 0;
  color: transparent;
  font-size: 0;
}
.vy-ph[data-status="pending"]:not([src]) { min-height: 1px; }

/* ═══════════════════════════════════════════════════════════════════════════
 * 1. Problem — one large left aligned sentence per line, one image on the right.
 * Deliberately still: this is the quiet stretch of the page.
 * ═══════════════════════════════════════════════════════════════════════════ */

.vy-problem { padding: var(--vy-section-lg) 0; }

.vy-problem__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
}

.vy-problem__lede {
  margin: 0;
  font-family: var(--vy-font-display);
  font-size: var(--vy-fluid-lede);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: var(--tracking-display);
  color: var(--vy-text-primary);
}

.vy-problem__lede span { display: block; }
.vy-problem__lede span + span { margin-top: 2px; }
.vy-problem__lede .vy-dim { color: var(--vy-text-secondary); }

.vy-problem__media { aspect-ratio: 3 / 4; overflow: hidden; background: var(--vy-bg-secondary); }

@media (max-width: 900px) {
  .vy-problem { padding: var(--vy-section-sm) 0; }
  .vy-problem__grid { grid-template-columns: 1fr; }
  .vy-problem__media { aspect-ratio: 4 / 3; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 2. Gallery console chrome (filter bar, prompt field) layered over the archive grid
 * ═══════════════════════════════════════════════════════════════════════════ */

.vy-console-bar {
  max-width: var(--vy-container);
  margin: 0 auto 40px;
  padding: 0 clamp(20px, 3.2vw, 48px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.vy-filter {
  appearance: none;
  background: transparent;
  border: 1px solid var(--vy-line);
  color: var(--vy-text-secondary);
  font-family: var(--vy-font-mono);
  font-size: var(--vy-t-12);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: 0 16px;
  min-height: 44px;
  cursor: pointer;
  transition: color var(--vy-dur-micro) var(--vy-ease), border-color var(--vy-dur-micro) var(--vy-ease);
}

.vy-filter:hover { border-color: var(--vy-text-secondary); color: var(--vy-text-primary); }
.vy-filter[aria-pressed="true"] { color: var(--vy-bg-primary); background: var(--vy-text-primary); border-color: var(--vy-text-primary); }

.vy-console-count {
  margin-left: auto;
  font-family: var(--vy-font-mono);
  font-size: var(--vy-t-12);
  color: var(--vy-text-secondary);
  font-variant-numeric: tabular-nums;
}

.vy-copy-prompt {
  margin-top: 14px;
  appearance: none;
  background: transparent;
  border: 1px solid var(--vy-line);
  color: var(--vy-text-secondary);
  font-family: var(--vy-font-mono);
  font-size: var(--vy-t-12);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: 0 14px;
  min-height: 44px;
  cursor: pointer;
  transition: color var(--vy-dur-micro) var(--vy-ease), border-color var(--vy-dur-micro) var(--vy-ease);
}

.vy-copy-prompt:hover { border-color: var(--vy-text-primary); color: var(--vy-text-primary); }
.vy-copy-prompt[data-copied="1"] { color: var(--vy-text-primary); border-color: var(--vy-text-primary); }

/* ═══════════════════════════════════════════════════════════════════════════
 * 3. Capability — section title, one line of subtitle, three columns of
 * (heading plus two lines), revealed line by line.
 * ═══════════════════════════════════════════════════════════════════════════ */

.vy-cap__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(40px, 5vw, 80px);
  border-top: 1px solid var(--vy-line);
}

.vy-cap__item {
  padding: 34px clamp(20px, 2.4vw, 40px) 34px 0;
  border-right: 1px solid var(--vy-line);
}

.vy-cap__item:last-child { border-right: 0; }
.vy-cap__item:not(:first-child) { padding-left: clamp(20px, 2.4vw, 40px); }

.vy-cap__item h3 {
  margin: 0 0 12px;
  font-family: var(--vy-font-display);
  font-size: var(--vy-t-20);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--tracking-display);
}

.vy-cap__item p { margin: 0; color: var(--vy-text-secondary); font-size: var(--vy-t-14); }

.vy-cap__item dl {
  margin: 18px 0 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 2px;
  font-family: var(--vy-font-mono);
  font-size: var(--vy-t-12);
  color: var(--vy-text-secondary);
}

.vy-cap__item dt { letter-spacing: var(--tracking-label); text-transform: uppercase; }
.vy-cap__item dd { margin: 0; color: var(--vy-text-primary); font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .vy-cap__grid { grid-template-columns: 1fr; }
  .vy-cap__item { border-right: 0; border-bottom: 1px solid var(--vy-line); padding: 28px 0; }
  .vy-cap__item:not(:first-child) { padding-left: 0; }
  .vy-cap__item:last-child { border-bottom: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 4. Trust — an endless marquee (cropped at both edges, which is what makes it read as
 * continuous), a greyscale portrait and an oversized quote.
 * The marquee behaviour itself belongs to the ticker component in parts.css.
 * ═══════════════════════════════════════════════════════════════════════════ */

.vy-trust { padding: var(--vy-section-lg) 0; }
.vy-trust__marquee { border-top: 1px solid var(--vy-line); border-bottom: 1px solid var(--vy-line); padding: 26px 0; }

.vy-trust__quote-grid {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
  margin-top: clamp(48px, 6vw, 104px);
}

.vy-trust__portrait { aspect-ratio: 4 / 5; overflow: hidden; background: var(--vy-bg-secondary); }
.vy-trust__portrait img { filter: var(--media-grade); }

.vy-trust__quote { margin: 0; }

.vy-trust__quote blockquote {
  margin: 0;
  font-family: var(--vy-font-display);
  font-size: clamp(24px, 3.2vw, 40px);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: var(--tracking-display);
}

.vy-trust__quote figcaption {
  margin-top: 24px;
  font-family: var(--vy-font-mono);
  font-size: var(--vy-t-12);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--vy-text-secondary);
  line-height: 1.9;
}

.vy-trust__quote figcaption b { display: block; color: var(--vy-text-primary); font-weight: 500; }

@media (max-width: 820px) {
  .vy-trust { padding: var(--vy-section-sm) 0; }
  .vy-trust__quote-grid { grid-template-columns: 1fr; }
  .vy-trust__portrait { max-width: 240px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 5. Metrics — a multi series panel, not a decorative chart.
 * Series are told apart by lightness and dash pattern rather than by colour, because
 * the palette has no hues to spend. That constraint is also what makes it look distinct.
 * ═══════════════════════════════════════════════════════════════════════════ */

.vy-metrics__panel {
  margin-top: clamp(32px, 4vw, 64px);
  border: 1px solid var(--vy-line);
  background: var(--vy-bg-secondary);
  padding: clamp(18px, 2.2vw, 32px);
}

.vy-metrics__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 20px;
  font-family: var(--vy-font-mono);
  font-size: var(--vy-t-12);
  letter-spacing: var(--tracking-label);
  color: var(--vy-text-secondary);
  text-transform: uppercase;
}

.vy-metrics__readout { color: var(--vy-text-primary); font-variant-numeric: tabular-nums; }

.vy-chart { position: relative; margin-top: 18px; }
.vy-chart svg { display: block; width: 100%; height: auto; }

.vy-chart__grid line { stroke: var(--vy-line-soft); stroke-width: 1; }
.vy-chart__axis text { fill: var(--vy-text-secondary); font-family: var(--vy-font-mono); font-size: 13px; }
.vy-chart__series path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Four series, separated by lightness and dash pattern (no colour) */
.vy-chart__series path[data-series="0"] { stroke: var(--vy-text-primary); }
.vy-chart__series path[data-series="1"] { stroke: var(--vy-text-secondary); stroke-dasharray: 10 6; }
.vy-chart__series path[data-series="2"] { stroke: var(--vy-ink-55); stroke-dasharray: 2 6; }
.vy-chart__series path[data-series="3"] { stroke: var(--vy-text-secondary); stroke-dasharray: 18 5 3 5; opacity: 0.62; }

.vy-chart__series g[data-off="1"] { display: none; }

.vy-chart__cursor line { stroke: var(--vy-text-primary); stroke-width: 1; opacity: 0.5; }
.vy-chart__cursor[data-on="0"] { display: none; }

.vy-legend { display: flex; flex-wrap: wrap; gap: 8px 6px; margin-top: 20px; }

.vy-legend button {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--vy-text-secondary);
  font-family: var(--vy-font-mono);
  font-size: var(--vy-t-12);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  min-height: 44px;
  cursor: pointer;
  transition: color var(--vy-dur-micro) var(--vy-ease), border-color var(--vy-dur-micro) var(--vy-ease);
}

.vy-legend button:hover { border-color: var(--vy-line); color: var(--vy-text-primary); }
.vy-legend button[aria-pressed="false"] { opacity: 0.4; }
.vy-legend button[aria-pressed="true"] { color: var(--vy-text-primary); }

.vy-legend .vy-swatch { width: 22px; height: 0; border-top-width: 2px; border-top-style: solid; flex: 0 0 auto; }
.vy-legend button[data-series="0"] .vy-swatch { border-top-color: var(--vy-text-primary); }
.vy-legend button[data-series="1"] .vy-swatch { border-top-color: var(--vy-text-secondary); border-top-style: dashed; }
.vy-legend button[data-series="2"] .vy-swatch { border-top-color: var(--vy-ink-55); border-top-style: dotted; }
.vy-legend button[data-series="3"] .vy-swatch { border-top-color: var(--vy-text-secondary); border-top-style: double; border-top-width: 4px; }

.vy-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 1px;
  background: var(--vy-line-soft);
  border-top: 1px solid var(--vy-line);
}

.vy-stat { background: var(--vy-bg-primary); padding: 26px clamp(14px, 1.6vw, 24px); }

.vy-stat dt {
  font-family: var(--vy-font-mono);
  font-size: var(--vy-t-12);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--vy-text-secondary);
}

.vy-stat dd {
  margin: 8px 0 0;
  font-family: var(--vy-font-display);
  font-size: clamp(28px, 3.4vw, 64px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}

.vy-stat dd small { font-size: 0.4em; font-weight: 500; color: var(--vy-text-secondary); margin-left: 4px; }

@media (max-width: 900px) {
  .vy-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vy-chart__axis text { font-size: 18px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 6. Pricing — three tiers with the middle one emphasised, then a working calculator:
 * inputs on the left, recommendation on the right, and a comparison accordion.
 * The emphasis on the middle card is a light panel rather than a colour fill.
 * ═══════════════════════════════════════════════════════════════════════════ */

.vy-tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(32px, 4vw, 64px);
  background: var(--vy-line);
  border: 1px solid var(--vy-line);
}

.vy-tier { background: var(--vy-bg-primary); padding: clamp(22px, 2.6vw, 40px); display: flex; flex-direction: column; }

/* The emphasised card is a light achromatic panel (this is a colour fill in most templates) */
.vy-tier--feature { background: var(--vy-text-primary); color: var(--vy-bg-primary); }
.vy-tier--feature .vy-tier__name,
.vy-tier--feature .vy-tier__note,
.vy-tier--feature .vy-tier__list { color: color-mix(in oklch, var(--vy-bg-primary) 72%, transparent); }
.vy-tier--feature .vy-tier__list b { color: var(--vy-bg-primary); }

.vy-tier__name {
  font-family: var(--vy-font-mono);
  font-size: var(--vy-t-12);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--vy-text-secondary);
}

.vy-tier__price {
  margin: 14px 0 0;
  font-family: var(--vy-font-display);
  font-size: clamp(40px, 4.4vw, 64px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}

.vy-tier__price small { font-size: 0.28em; font-weight: 500; letter-spacing: 0; margin-left: 4px; }
.vy-tier__note { margin: 10px 0 0; font-size: var(--vy-t-14); color: var(--vy-text-secondary); }

.vy-tier__list { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: var(--vy-t-14); color: var(--vy-text-secondary); }
.vy-tier__list b { font-weight: 600; color: var(--vy-text-primary); font-variant-numeric: tabular-nums; }

.vy-btn {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--vy-text-primary);
  background: transparent;
  color: var(--vy-text-primary);
  font-family: var(--vy-font-mono);
  font-size: var(--vy-t-12);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--vy-dur-micro) var(--vy-ease), color var(--vy-dur-micro) var(--vy-ease);
}

.vy-btn:hover { background: var(--vy-text-primary); color: var(--vy-bg-primary); }
.vy-tier__cta { margin-top: 28px; }

/* ── Link to the detail page ────────────────────────────────────────────────
   The section on index is the summary and the subpage is the detail. This is a hairline
   link rather than a button: a second call to action at the end of a section gives that
   section two places for the eye to end up.
   The motion is a 6px arrow shift, the smallest step already used elsewhere. */
.vy-deeplink {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: 20px;
  border-top: 1px solid var(--vy-line);
  font-family: var(--vy-font-mono);
  font-size: var(--vy-t-12);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--vy-text-secondary);
  transition: color var(--vy-dur-micro) var(--vy-ease);
}
.vy-deeplink:hover,
.vy-deeplink:focus-visible { color: var(--vy-text-primary); }
.vy-deeplink__arrow {
  display: inline-block;
  transition: transform var(--vy-dur-micro) var(--vy-ease);
}
.vy-deeplink:hover .vy-deeplink__arrow,
.vy-deeplink:focus-visible .vy-deeplink__arrow { transform: translateX(6px); }

/* The archive section has no horizontal padding of its own; each child carries its own
   container width and padding. So this link has to carry the same container rules, or it
   stretches to the full width and runs under the side rail on the right.
   The grid above already provides the spacing, so no top margin is added here. */
.vy-vault > .vy-deeplink {
  --dl-gutter: clamp(20px, 3.2vw, 48px);
  /* Narrowed with width rather than padding. Padding does not shrink a border box, so the
     hairline itself would still reach the edge of the screen, and the same component would
     end up a different width here than on the pricing page. */
  box-sizing: border-box;
  width: min(calc(100% - var(--dl-gutter) * 2), calc(var(--vy-container) - var(--dl-gutter) * 2));
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
}

@media (prefers-reduced-motion: reduce) {
  .vy-deeplink, .vy-deeplink__arrow { transition: none; }
  .vy-deeplink:hover .vy-deeplink__arrow { transform: none; }
}
.vy-tier--feature .vy-btn { border-color: var(--vy-bg-primary); color: var(--vy-bg-primary); }
.vy-tier--feature .vy-btn:hover { background: var(--vy-bg-primary); color: var(--vy-text-primary); }

/* ── Calculator ── */
.vy-calc {
  margin-top: clamp(40px, 5vw, 88px);
  border: 1px solid var(--vy-line);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
}

.vy-calc__inputs { padding: clamp(22px, 2.6vw, 40px); border-right: 1px solid var(--vy-line); }
.vy-calc__result { padding: clamp(22px, 2.6vw, 40px); background: var(--vy-bg-secondary); display: flex; flex-direction: column; }

.vy-calc__title {
  margin: 0 0 26px;
  font-family: var(--vy-font-mono);
  font-size: var(--vy-t-12);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--vy-text-secondary);
}

.vy-calc__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--vy-line);
  margin-bottom: 28px;
}

.vy-calc__total-label { font-family: var(--vy-font-mono); font-size: var(--vy-t-12); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.vy-calc__total-label small { display: block; text-transform: none; letter-spacing: 0; color: var(--vy-text-secondary); margin-top: 4px; }

.vy-calc__total-value {
  font-family: var(--vy-font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.vy-field { margin-bottom: 26px; }

.vy-field__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.vy-field label { font-size: var(--vy-t-14); color: var(--vy-text-secondary); }
.vy-field output { font-family: var(--vy-font-mono); font-size: var(--vy-t-14); font-variant-numeric: tabular-nums; }

/* Range input: straight edges on both the track and the thumb */
.vy-field input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 44px;
  background: transparent;
  cursor: pointer;
  margin: 0;
}

.vy-field input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: var(--vy-line); }
.vy-field input[type="range"]::-moz-range-track { height: 1px; background: var(--vy-line); }

.vy-field input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 12px;
  height: 24px;
  margin-top: -12px;
  background: var(--vy-text-primary);
  border: 0;
  border-radius: 0;
}

.vy-field input[type="range"]::-moz-range-thumb {
  width: 12px; height: 24px;
  background: var(--vy-text-primary);
  border: 0; border-radius: 0;
}

.vy-stepper { display: flex; align-items: stretch; gap: 0; border: 1px solid var(--vy-line); width: max-content; }

.vy-stepper button {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--vy-text-primary);
  font-family: var(--vy-font-mono);
  font-size: var(--vy-t-16);
  min-width: 48px;
  min-height: 44px;
  cursor: pointer;
  transition: background-color var(--vy-dur-micro) var(--vy-ease), color var(--vy-dur-micro) var(--vy-ease);
}

.vy-stepper button:hover:not(:disabled) { background: var(--vy-text-primary); color: var(--vy-bg-primary); }
.vy-stepper button:disabled { opacity: 0.35; cursor: not-allowed; }

.vy-stepper output {
  min-width: 64px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--vy-line);
  border-right: 1px solid var(--vy-line);
  font-family: var(--vy-font-mono);
  font-variant-numeric: tabular-nums;
}

.vy-calc__badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid var(--vy-line);
  font-family: var(--vy-font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--vy-text-secondary);
  align-self: flex-start;
}

.vy-calc__plan {
  margin: 18px 0 0;
  font-family: var(--vy-font-display);
  font-size: clamp(40px, 4.6vw, 64px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  will-change: transform;
}

.vy-calc__why { margin: 16px 0 0; font-size: var(--vy-t-14); color: var(--vy-text-secondary); min-height: 3lh; }
.vy-calc__cost { margin: 22px 0 0; font-family: var(--vy-font-mono); font-size: var(--vy-t-14); font-variant-numeric: tabular-nums; }
.vy-calc__cost b { font-size: var(--vy-t-20); font-weight: 600; }

.vy-compare { margin-top: 1px; border: 1px solid var(--vy-line); border-top: 0; }

@media (max-width: 900px) {
  .vy-tiers { grid-template-columns: 1fr; }
  .vy-calc { grid-template-columns: 1fr; }
  .vy-calc__inputs { border-right: 0; border-bottom: 1px solid var(--vy-line); }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 7. FAQ (rows open by animating grid-template-rows from 0fr to 1fr)
 * ═══════════════════════════════════════════════════════════════════════════ */

.vy-faq__list { margin-top: clamp(32px, 4vw, 64px); border-top: 1px solid var(--vy-line); }
.vy-faq__item { border-bottom: 1px solid var(--vy-line); }

.vy-faq__q {
  appearance: none;
  width: 100%;
  background: transparent;
  border: 0;
  color: inherit;
  text-align: left;
  font-family: var(--vy-font-display);
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  padding: 26px 48px 26px 0;
  min-height: 44px;
  cursor: pointer;
  position: relative;
  display: block;
}

.vy-faq__q::after,
.vy-faq__q::before {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 14px;
  height: 1px;
  background: currentColor;
  transition: transform var(--vy-dur-section) var(--vy-ease), opacity var(--vy-dur-section) var(--vy-ease);
}

.vy-faq__q::before { transform: translateY(-50%) rotate(90deg); }
.vy-faq__q::after  { transform: translateY(-50%); }
.vy-faq__q[aria-expanded="true"]::before { transform: translateY(-50%) rotate(0deg); opacity: 0; }

.vy-faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--vy-dur-section) var(--vy-ease);
}

.vy-faq__panel[data-open="1"] { grid-template-rows: 1fr; }
.vy-faq__panel > div { overflow: hidden; }

.vy-faq__panel p {
  margin: 0;
  padding: 0 clamp(20px, 8vw, 120px) 30px 0;
  color: var(--vy-text-secondary);
  font-size: var(--vy-t-16);
  max-width: 78ch;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 8. Call to action band, holding the footer form
 * ═══════════════════════════════════════════════════════════════════════════ */

.vy-cta { background: var(--vy-text-primary); color: var(--vy-bg-primary); padding: var(--vy-section-lg) 0; }

.vy-cta__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: end;
}

.vy-cta h2 {
  margin: 0;
  font-family: var(--vy-font-display);
  font-size: var(--vy-fluid-title);
  font-weight: 800;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.vy-cta__note { margin: 20px 0 0; max-width: 46ch; color: color-mix(in oklch, var(--vy-bg-primary) 70%, transparent); font-size: var(--vy-t-16); }

/* Inside the inverted band the form colours invert too. Inverting the background alone
   leaves black text on black. */
.vy-cta .vy-tail-entry-cap,
.vy-cta .vy-tail-entry-memo { color: color-mix(in oklch, var(--vy-bg-primary) 66%, transparent); }
.vy-cta .vy-tail-entry input { color: var(--vy-bg-primary); border-bottom-color: color-mix(in oklch, var(--vy-bg-primary) 28%, transparent); }
.vy-cta .vy-tail-entry input::placeholder { color: color-mix(in oklch, var(--vy-bg-primary) 48%, transparent); }
.vy-cta .vy-tail-entry input:focus-visible { outline-color: var(--vy-bg-primary); }
.vy-cta .vy-tail-entry button { color: var(--vy-bg-primary); border-color: color-mix(in oklch, var(--vy-bg-primary) 32%, transparent); }
.vy-cta .vy-tail-entry button:hover { background: var(--vy-bg-primary); color: var(--vy-text-primary); }
.vy-cta .vy-tail-entry button:focus-visible { outline-color: var(--vy-bg-primary); }

@media (max-width: 900px) {
  .vy-cta { padding: var(--vy-section-sm) 0; }
  .vy-cta__grid { grid-template-columns: 1fr; align-items: start; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 9. Footer container and the cursor switch
 * ═══════════════════════════════════════════════════════════════════════════ */

.vy-footer { padding: var(--vy-section-lg) 0 clamp(40px, 5vw, 88px); }

.vy-cursor-toggle {
  appearance: none;
  background: transparent;
  border: 1px solid var(--vy-line);
  color: var(--vy-text-secondary);
  font-family: var(--vy-font-mono);
  font-size: var(--vy-t-12);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  margin-top: 28px;
  cursor: pointer;
  transition: color var(--vy-dur-micro) var(--vy-ease), border-color var(--vy-dur-micro) var(--vy-ease);
}

.vy-cursor-toggle:hover { color: var(--vy-text-primary); border-color: var(--vy-text-primary); }
.vy-cursor-toggle .vy-toggle-state { color: var(--vy-text-primary); }

@media (max-width: 1024px), (hover: none), (pointer: coarse) {
  .vy-cursor-toggle { display: none; } /* Where the custom cursor never runs, the switch has nothing to switch */
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 10. Reduced motion fallbacks. Every transform and animation resolves to its end
 * state, so the content is fully visible even when nothing animates.
 * ═══════════════════════════════════════════════════════════════════════════ */

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

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .vy-armed .vy-rise { opacity: 1; transform: none; }
  .vy-rise-mid { transform: none !important; }
  .vy-crawl-mid { transform: none !important; }
  .vy-door { display: none; }
  .vy-night-hull-veil { clip-path: var(--curtain-open) !important; }
  #vy-probe-bead, #vy-probe-halo { display: none; }
  .vy-view-swap-rig { display: none; }
}