/* Beta one-pager (FV-464). Loaded only by the home page.

   Look: the design elements of the current www.finvantage.de (public.css):
   the page ground of `.landing`, gold accents in headlines, dark "glass"
   cards with gold icon tiles, gold step numbers. Gold buttons throughout
   (Adrian, 2026-11-10). Values from the finvantage Brandguide (2025-08) and
   its UI extension (2026-10) where they do not conflict: sentence-case
   labels, 6 px controls, 4 px tags, 44 px buttons and fields, three type
   weights (400/600/700), breakpoints 576/768/992/1200, side margin 40 px
   desktop / 16 px phone, errors with icon and text.

   The product frames of the scroll story stay in the cockpit's own light
   look on purpose: they show the product as it is.

   Spacing, one rhythm for the whole page (checked by measurement and tuned
   with Adrian, 2026-11-10):
   - between sections 192 px on desktop, 144 px on phones (2 × section
     padding);
   - section heading to its content 56 px (40 px on phones);
   - inside a text column: label → headline 12, headline → text 18, text →
     list or tags 28, tags or list → button 28;
   - grids: 24 px between cards (16 px on phones); in cards headline → text 10;
   - editorial rows of the platform section: 96 px from content to content,
     with a hairline in the middle.

   Every collapsed grid track is `minmax(0, 1fr)`, never a bare `1fr`, so no
   column can grow wider than a phone (FV-423). */

/* `.landing` clips horizontally with `overflow-x: hidden` (FV-423), which
   would make it a scroll container and break the sticky stage of the scroll
   story; `clip` keeps the clipping without creating one. Browsers without
   `clip` keep `hidden`, and js/beta.js then leaves the story a storyboard. */
.beta-body .landing { font-weight: 400; overflow-x: clip; }

/* ------------------------------------------------------------- navigation */
.beta-nav {
  max-width: 1280px;
  padding: 22px 40px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.beta-nav-brand .brand-logo-img { height: 38px; width: auto; }
.beta-nav .landing-nav-links {
  margin-left: auto;
  margin-right: 28px;
  gap: 28px;
  font-size: 15px;
  font-weight: 400;
  color: rgba(255, 255, 255, .78);
}
.beta-nav .landing-nav-links a:hover,
.beta-nav .landing-nav-links a:focus-visible { color: var(--fv-white); }

/* ---------------------------------------------------------------- buttons */
.b-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-family: var(--fv-font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
/* A solid ring clear of the button: it reads on the navy ground at more
   than 3:1, also next to the gold fill. */
.b-btn:focus-visible { outline: 2px solid var(--fv-gold-300); outline-offset: 2px; }
.b-btn--primary {
  background: var(--fv-gold-400);
  color: var(--fv-blue-600);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 2px rgba(12, 13, 26, .2);
}
.b-btn--primary:hover { background: var(--fv-gold-300); transform: translateY(-1px); }
.b-btn--outline {
  background: transparent;
  color: var(--fv-gold-300);
  border-color: rgba(211, 175, 55, .55);
}
.b-btn--outline:hover { background: rgba(211, 175, 55, .1); border-color: var(--fv-gold-400); }
.b-btn--block { width: 100%; }

/* ----------------------------------------------------- shared type & layout */
.beta-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 96px 40px;
  scroll-margin-top: 16px;
}
.beta-section-head { max-width: 780px; margin: 0 auto 56px; text-align: center; }
.beta-eyebrow {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--fv-gold-300);
}
/* Headlines keep their words whole (Adrian, 2026-11-10): public.css lets
   phone headlines hyphenate (FV-423, for the long compounds of the former
   landing page), which split words like "an-ders". Here a word that does not
   fit moves to the next line as a whole. */
.landing :is(h1, h2, h3) { -webkit-hyphens: manual; hyphens: manual; }
/* A hyphenated name that should not break at its hyphen either
   ("finvantage-Nutzer" in the German translation). */
.beta-nowrap { white-space: nowrap; }
/* Below the smallest phone width it may break again rather than run out
   over the side margin ("finvantage-Nutzer" needs 312 px). */
@media (max-width: 319px) {
  .beta-nowrap { white-space: normal; }
}
/* On a phone the lines of a headline are evened out, so a single short
   word ("ersten", "Versand.") is not left alone on the last line. */
@media (max-width: 767px) {
  .landing :is(h1, h2, h3) { text-wrap: balance; }
}
.beta-title {
  margin: 0 0 18px;
  font-size: 40px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--fv-white);
}
.beta-title--left { text-align: left; }
/* The gold part of a headline, as on the current website's hero. */
.beta-accent {
  background: linear-gradient(135deg, var(--fv-gold-300) 0%, var(--fv-gold-500) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--fv-gold-400);
}
.beta-sub {
  margin: 0 auto;
  max-width: 64ch;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .65);
}
.beta-sub--left { margin: 0; text-align: left; }
.beta-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }

/* The gold box of the current website's hero badge. */
.beta-badge {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 7px 14px;
  border-radius: 6px;
  background: rgba(211, 175, 55, .14);
  border: 1px solid rgba(211, 175, 55, .4);
  color: var(--fv-gold-300);
  font-size: 13px;
  font-weight: 600;
}
.beta-badge--seats { margin-top: 28px; }
.beta-dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--fv-gold-400); flex: 0 0 auto; }

/* ------------------------------------------------------------------- hero */
/* Calm on purpose (Adrian, 2026-11-10): no badge, no trust row; one quiet
   line with two facts under the buttons, separated by a small gold dot. */
.beta-hero {
  max-width: 1280px;
  margin: 0 auto;
  /* More air between the hero's last line and "So startest du"
     (Adrian, 2026-11-11): the story's own top padding adds to this. */
  padding: 120px 40px 112px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.beta-hero-title {
  margin: 0 0 24px;
  max-width: 15ch;
  font-size: 64px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--fv-white);
}
.beta-lead {
  margin: 0;
  max-width: 60ch;
  font-size: 19px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .72);
}
.beta-cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.beta-hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  margin: 24px 0 0;
  font-size: 14px;
  color: rgba(255, 255, 255, .6);
}
.beta-hero-meta span + span::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 14px 2px 0;
  border-radius: 999px;
  background: var(--fv-gold-400);
  vertical-align: middle;
}

/* ---------------------------------------------- dark glass cards (website) */
.beta-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, .015) 100%);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 16px;
  padding: 32px;
  color: var(--fv-white);
  transition: border-color .3s ease, background .3s ease;
}
.beta-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(211, 175, 55, .45), transparent);
  opacity: 0;
  transition: opacity .3s ease;
}
.beta-card:hover { border-color: rgba(211, 175, 55, .22); }
.beta-card:hover::before { opacity: 1; }
.beta-card h3 { margin: 0 0 10px; font-size: 20px; line-height: 1.35; font-weight: 600; color: var(--fv-white); }
.beta-card p { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .62); }
.beta-card-eyebrow { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--fv-gold-300); }
.beta-card-label { margin: 0 0 14px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .55); }
.beta-card .b-btn { margin-top: 8px; }
.beta-card--quiet { background: rgba(255, 255, 255, .025); }
/* The highlighted card, as `.persona-card.highlight` on the current website. */
.beta-card--highlight {
  background: linear-gradient(180deg, rgba(211, 175, 55, .1) 0%, rgba(211, 175, 55, .025) 100%);
  border-color: rgba(211, 175, 55, .28);
}
.beta-card--highlight .beta-card-label { color: var(--fv-gold-300); }

.beta-checks { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 12px; }
.beta-checks li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .85); }
.beta-checks--muted li { color: rgba(255, 255, 255, .6); }
.beta-checks--light li { color: var(--fv-white); }
.beta-tick,
.beta-cross {
  flex: 0 0 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.beta-tick { background: rgba(211, 175, 55, .16); color: var(--fv-gold-400); }
.beta-tick svg { width: 14px; height: 14px; }
.beta-cross { background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .5); }

/* Gold icon tile of the current website's feature cards. */
.beta-icon-tile {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--fv-gold-400) 0%, var(--fv-gold-600) 100%);
  color: var(--fv-blue-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.beta-icon-tile svg { width: 22px; height: 22px; }

/* -------------------------------------------------------- split sections */
.beta-split {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
}
.beta-split--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
.beta-split--form { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); align-items: start; }
.beta-split-copy .b-btn { margin-top: 28px; }
.beta-split-copy .beta-sub + .beta-checks { margin-top: 28px; }
.beta-split-copy .beta-checks { margin-bottom: 0; }
.beta-tags-label { margin: 28px 0 0; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .6); }
.beta-tags { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.beta-tags li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 10px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .07);
  color: var(--fv-white);
  font-size: 14px;
}
.beta-tags svg { width: 14px; height: 14px; color: var(--fv-gold-400); flex: 0 0 auto; }
.beta-features { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.beta-feature { padding: 28px; }
.beta-feature h3 { font-size: 17px; margin: 20px 0 10px; }
.beta-feature p { font-size: 14px; margin: 0; }

/* ----------------------------------------------- platform: editorial rows */
.beta-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
  padding: 48px 0;
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.beta-section-head + .beta-row { padding-top: 0; border-top: 0; }
.beta-row--reverse .beta-row-copy { order: 2; }
.beta-row-title { margin: 0 0 16px; font-size: 28px; line-height: 1.3; font-weight: 600; color: var(--fv-white); }
.beta-row-copy > p:not(.beta-eyebrow) { margin: 0 0 24px; font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, .68); max-width: 60ch; }

/* Visuals in the website's dark mock-up style; gold marks the important bits. */
.beta-visual {
  position: relative;
  padding: 28px;
  border-radius: 16px;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(211, 175, 55, .12) 0%, rgba(211, 175, 55, 0) 50%),
    linear-gradient(180deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, .015) 100%);
  border: 1px solid rgba(255, 255, 255, .09);
  display: grid;
  /* `minmax(0, 1fr)`, not the implicit `auto` column: an auto column never
     gets narrower than its widest one-line row, so on a phone the rows of a
     card (file name plus tag) ran out over the card's edge (FV-485). */
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  color: var(--fv-white);
}
.v-card {
  background: rgba(19, 21, 40, .55);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}
/* Head and recipient rows wrap: on a narrow phone the tag moves under the
   text instead of running out over the card's edge (FV-485). */
.v-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; }
.v-head strong { display: block; font-size: 14px; font-weight: 600; }
.v-head small,
.v-recipient small,
.v-entity small { display: block; font-size: 12px; color: rgba(255, 255, 255, .55); }
.v-flow { display: flex; gap: 8px; flex-wrap: wrap; }
.v-step,
.v-mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  background: rgba(211, 175, 55, .14);
  color: var(--fv-gold-300);
}
.v-step i,
.v-mark i { width: 6px; height: 6px; border-radius: 999px; background: var(--fv-gold-400); }
.v-step { background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .7); }
.v-step i { background: rgba(255, 255, 255, .5); }
.v-step--done i { background: #3DC48D; }
.v-step--now,
.v-mark--ok { background: rgba(30, 158, 106, .18); color: #8FD9B6; }
.v-step--now i,
.v-mark--ok i { background: #3DC48D; }
.v-mark--neutral { background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .7); }
.v-mark--neutral i { background: rgba(255, 255, 255, .5); }
.v-rows { display: grid; grid-template-columns: minmax(0, 1fr); }
.v-line,
.v-entity,
.v-file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-size: 13px;
}
.v-line { justify-content: space-between; }
.v-line:last-child,
.v-entity:last-child,
.v-file:last-child { border-bottom: 0; }
.v-line b,
.v-entity b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fv-gold-300); }
.v-entity b { margin-left: auto; }
.v-entity strong { display: block; font-weight: 600; }
.v-logo {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
}
.v-file > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-line--text { display: grid; gap: 6px; }
.v-skeleton { display: block; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .1); }
.v-skeleton--short { width: 60%; }
.v-thread { display: grid; gap: 10px; }
.v-bubble { display: flex; gap: 10px; align-items: flex-start; }
.v-bubble p {
  margin: 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(19, 21, 40, .55);
  border: 1px solid rgba(255, 255, 255, .1);
  font-size: 13px;
  line-height: 1.5;
}
.v-bubble strong { display: block; font-size: 12px; font-weight: 600; color: var(--fv-gold-300); }
.v-bubble--reply { margin-left: 32px; }
.v-docs { display: flex; flex-wrap: wrap; gap: 8px; }
.v-doc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(19, 21, 40, .55);
  border: 1px solid rgba(255, 255, 255, .1);
  font-size: 12px;
}
.v-doc-icon { display: inline-flex; color: var(--fv-gold-400); }
.v-doc-icon svg { width: 16px; height: 16px; }
.v-arrow { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; color: var(--fv-gold-300); }
.v-arrow::before,
.v-arrow::after { content: ""; flex: 1; height: 1px; background: rgba(211, 175, 55, .35); }
.v-recipient { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 13px; }
.v-recipient strong { display: block; font-weight: 600; }
.v-recipient .v-mark { margin-left: auto; }
.v-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.v-btn {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  background: var(--fv-gold-400);
  color: var(--fv-blue-600);
}
.v-btn--outline { background: transparent; color: var(--fv-gold-300); border: 1px solid rgba(211, 175, 55, .55); }
.v-foot { margin: 0; font-size: 12px; color: rgba(255, 255, 255, .55); }
.v-chat { gap: 10px; }
.v-msg {
  margin: 0;
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .07);
  font-size: 13px;
  line-height: 1.5;
}
.v-msg--me { justify-self: end; background: var(--fv-gold-400); color: var(--fv-blue-600); }


/* ------------------------------------------------------------------ form */
.beta-form-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .02) 100%);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px;
  padding: 40px;
  color: var(--fv-white);
  scroll-margin-top: 16px;
}
.beta-form-card h3 { margin: 0 0 6px; font-size: 24px; font-weight: 700; }
.beta-form-intro { margin: 0 0 20px; font-size: 14px; color: rgba(255, 255, 255, .62); }
.beta-hint {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 0 0 24px;
  padding: 16px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(211, 175, 55, .12) 0%, rgba(211, 175, 55, .04) 100%);
  border: 1px solid rgba(211, 175, 55, .3);
}
.beta-hint p { margin: 0; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .72); }
.beta-hint strong { display: block; color: var(--fv-gold-300); font-weight: 600; }
.beta-hint .beta-icon-tile { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 6px; }
.beta-hint .beta-icon-tile svg { width: 20px; height: 20px; }
.beta-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.beta-form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.beta-field { display: flex; flex-direction: column; gap: 6px; }
.beta-field label,
.beta-roles legend { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .78); }
.beta-form .required { color: var(--fv-gold-400); }
.beta-form .optional { font-size: 12px; font-weight: 400; color: rgba(255, 255, 255, .6); }
.beta-field input,
.beta-field textarea {
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  color: var(--fv-white);
  font: inherit;
  font-size: 15px;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.beta-field textarea { resize: vertical; }
.beta-field input::placeholder,
.beta-field textarea::placeholder { color: rgba(255, 255, 255, .5); }
.beta-field input:focus,
.beta-field textarea:focus {
  outline: none;
  border-color: var(--fv-gold-400);
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 0 0 3px rgba(211, 175, 55, .22);
}
/* `min-width: 0`: a fieldset is never narrower than its content by default
   (`min-inline-size: min-content`), which pushed the form out at 320 px. */
.beta-roles { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.beta-roles legend { padding: 0; margin-bottom: 8px; }
.beta-role {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  font-size: 14px;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.beta-role:has(input:checked) { border-color: var(--fv-gold-400); background: rgba(211, 175, 55, .12); }
.beta-role input,
.beta-consent input { accent-color: var(--fv-gold-400); }
.beta-consent { display: flex; gap: 12px; font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, .62); }
.beta-consent input { margin-top: 3px; }
.beta-consent a { color: var(--fv-gold-300); text-decoration: underline; }
.beta-form-note { margin: 0; text-align: center; font-size: 13px; color: rgba(255, 255, 255, .6); }
/* Errors with icon and text, never colour alone (Brandguide chapter 07). */
.beta-flash {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 20px;
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
}
.beta-flash svg { flex: 0 0 auto; margin-top: 1px; }
.beta-flash--error { background: rgba(217, 83, 79, .14); border: 1px solid rgba(217, 83, 79, .4); color: #F4B4B2; }
.beta-flash--success { background: rgba(30, 158, 106, .14); border: 1px solid rgba(30, 158, 106, .4); color: #8FD9B6; }

/* ------------------------------------------------------------------- faq */
.beta-faq { max-width: 880px; margin: 0 auto; display: grid; gap: 12px; }
.beta-faq .beta-card { padding: 20px 24px; }
.beta-faq summary { font-size: 16px; font-weight: 600; cursor: pointer; }
.beta-faq summary:focus-visible { outline: 2px solid var(--fv-gold-300); outline-offset: 4px; border-radius: 4px; }
.beta-faq details[open] { border-color: rgba(211, 175, 55, .22); }
.beta-faq p { margin: 12px 0 0; }

/* --------------------------------------------------------------- closing */
.beta-closing { text-align: center; }
.beta-closing .beta-sub { margin-bottom: 32px; }
.beta-closing-trust { margin: 24px 0 0; font-size: 13px; color: rgba(255, 255, 255, .5); }

/* ===================== Cockpit illustration (Brandguide v2) =====================
   The cockpit dashboard in HTML/CSS (last scene of the scroll story), so it
   stays sharp, translatable and free of external images. Sample data only;
   aria-hidden in the markup. */
.cp-browser { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: #EAEAEC; }
.cp-browser i { width: 10px; height: 10px; border-radius: 999px; background: #FF5F57; }
.cp-browser i:nth-child(2) { background: #FEBC2E; }
.cp-browser i:nth-child(3) { background: #28C840; }
.cp-browser span { margin-left: 8px; padding: 3px 12px; border-radius: 6px; background: var(--fv-white); font-size: 11px; color: var(--fv-grey-500); }
.cp-app { display: grid; grid-template-columns: 220px minmax(0, 1fr); }
.cp-sidebar { background: var(--fv-blue-600); color: var(--fv-white); padding: 18px 12px; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.cp-brand { padding: 0 8px 16px; }
.cp-brand img { height: 26px; width: auto; }
.cp-mandant { background: rgba(255, 255, 255, .06); border-radius: 6px; padding: 9px 12px; font-size: 13px; font-weight: 600; }
.cp-mandant .beta-dot { margin-right: 8px; }
.cp-nav-label { padding: 12px 12px 6px; font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, .4); }
.cp-nav { padding: 9px 12px; border-radius: 6px; font-size: 13px; color: rgba(255, 255, 255, .75); }
.cp-nav--active { background: rgba(255, 255, 255, .09); box-shadow: inset 2px 0 0 var(--fv-gold-400); color: var(--fv-white); font-weight: 600; }
.cp-user { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .08); display: flex; gap: 10px; align-items: center; font-size: 12px; }
.cp-user small { display: block; color: rgba(255, 255, 255, .5); }
.cp-avatar { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 999px; background: var(--fv-gold-400); color: var(--fv-blue-600); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.cp-avatar--navy { background: rgba(255, 255, 255, .1); color: var(--fv-white); border: 1px solid rgba(255, 255, 255, .14); }
.cp-main { text-align: left; }
.cp-topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 28px; background: rgba(255, 255, 255, .82); border-bottom: 1px solid rgba(32, 35, 68, .08); font-size: 12px; color: var(--fv-grey-500); }
.cp-crumbs b { color: var(--fv-grey-300); font-weight: 400; }
.cp-crumbs strong { color: var(--fv-blue-600); font-weight: 600; }
.cp-search { background: var(--fv-grey-100); color: var(--fv-grey-400); border-radius: 6px; padding: 7px 12px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cp-content { padding: 24px 28px 28px; display: grid; gap: 14px; }
.cp-row { display: flex; gap: 12px; }
.cp-row--head { justify-content: space-between; align-items: center; }
.cp-h1 { font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.cp-btn-secondary { background: var(--fv-white); border: 1px solid rgba(32, 35, 68, .14); border-radius: 6px; padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--fv-blue-600); white-space: nowrap; }
.cp-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cp-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.cp-card,
.cp-kpi {
  background: var(--fv-white);
  border: 1px solid rgba(32, 35, 68, .08);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(32, 35, 68, .04), 0 4px 16px rgba(32, 35, 68, .05);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.cp-kpi-label { font-size: 12px; color: #666A7D; }
.cp-kpi-value { font-size: 24px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cp-kpi--hero {
  border-color: transparent;
  color: var(--fv-white);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(211, 175, 55, .22) 0%, rgba(211, 175, 55, 0) 45%),
    linear-gradient(160deg, #272B52 0%, #202344 45%, #171A33 100%);
  box-shadow: 0 12px 32px -18px rgba(19, 21, 40, .55);
}
.cp-kpi--hero .cp-kpi-label { color: rgba(255, 255, 255, .66); }
.cp-kpi--hero .cp-kpi-value { font-size: 28px; }
.cp-card-title { font-size: 14px; font-weight: 600; }
.cp-list-item { padding: 8px 0; border-bottom: 1px solid rgba(32, 35, 68, .08); font-size: 13px; }
.cp-list-item:last-child { border-bottom: 0; }
.cp-list-row { display: flex; justify-content: space-between; gap: 12px; }
.cp-meta { color: #5A5E73; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cp-bar { margin-top: 6px; height: 6px; border-radius: 3px; background: rgba(32, 35, 68, .07); overflow: hidden; }
.cp-bar-fill { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--fv-gold-500), var(--fv-gold-400)); }
.cp-w-100 { width: 100%; } .cp-w-77 { width: 77%; } .cp-w-61 { width: 61%; } .cp-w-48 { width: 48%; }

/* ----------------------------------- flow diagrams (problem, solution) */
/* Small diagrams in the problem and solution cards (Adrian, 2026-11-11). A fixed
   viewBox that scales as a whole: drawn for a phone first, so its 11 px labels
   stay readable at 300 px; on wider cards it stops growing at 420 px. Today
   is drawn in grey with uneven dashes, the finvantage side in calm gold. */
.beta-flow-card { display: flex; flex-direction: column; }
.flow { display: block; width: 100%; max-width: 420px; height: auto; margin: 10px auto 26px; overflow: visible; }
.flow text { font-family: inherit; }
.flow-line { fill: none; stroke-width: 1.4; stroke-linecap: round; }
.flow-line--today { stroke: rgba(255, 255, 255, .28); }
.flow-line--gold { stroke: rgba(211, 175, 55, .55); }
.flow-chip rect:first-child { fill: rgba(255, 255, 255, .05); stroke: rgba(255, 255, 255, .14); }
.flow-chip-name { fill: rgba(255, 255, 255, .88); font-size: 11.5px; font-weight: 600; }
.flow-tag { fill: rgba(255, 255, 255, .08); }
.flow-tag-text { fill: rgba(255, 255, 255, .6); font-size: 9.5px; font-weight: 600; }
.flow-chip--gold rect:first-child { fill: rgba(211, 175, 55, .07); stroke: rgba(211, 175, 55, .35); }
.flow-chip--gold .flow-tag { fill: rgba(211, 175, 55, .18); }
.flow-chip--gold .flow-tag-text { fill: var(--fv-gold-300); }
.flow-node rect:first-child { fill: rgba(255, 255, 255, .04); stroke: rgba(255, 255, 255, .16); }
.flow-node--gold rect:first-child { fill: rgba(211, 175, 55, .06); stroke: rgba(211, 175, 55, .35); }
.flow-node-title { fill: var(--fv-white); font-size: 12.5px; font-weight: 600; }
.flow-note { fill: rgba(255, 255, 255, .55); font-size: 10.5px; }
.flow-icon { fill: none; stroke: rgba(255, 255, 255, .6); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.flow-icon--gold { stroke: var(--fv-gold-300); }
.flow-cell { fill: rgba(255, 255, 255, .1); }
.flow-cell--warn { fill: rgba(232, 160, 60, .45); }
.flow-hub { fill: var(--fv-blue-800); stroke: var(--fv-gold-400); stroke-width: 1.5; }
.flow-hub-ring { fill: none; stroke: var(--fv-gold-400); stroke-width: 1; opacity: 0; }
.flow-hub-label { fill: var(--fv-gold-300); font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.flow-bar { fill: var(--fv-gold-400); }
.flow-glow-stop { stop-color: var(--fv-gold-400); }
.flow-packet { display: none; }
.flow-packet--today { fill: rgba(255, 255, 255, .75); }
.flow-packet--gold { fill: var(--fv-gold-300); }

/* ================================================================ motion ====
   Only active when js/beta.js has set `beta-anim` on <html>, which it does not
   do for "reduce motion". Without it every rule below is inert and the page
   shows its final state. */
.beta-anim .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1);
}
.beta-anim .reveal.is-visible { opacity: 1; transform: none; }
.beta-anim .beta-grid-2 > .reveal:nth-child(2),
.beta-anim .beta-features > .reveal:nth-child(2) { transition-delay: .1s; }
.beta-anim .beta-features > .reveal:nth-child(3) { transition-delay: .2s; }
.beta-anim .beta-features > .reveal:nth-child(4) { transition-delay: .3s; }
.beta-anim .beta-row .v-card,
.beta-anim .beta-row .v-thread,
.beta-anim .beta-row .v-docs { opacity: 0; transform: translateY(16px); transition: opacity .7s ease .25s, transform .7s ease .25s; }
.beta-anim .beta-row.is-visible .v-card,
.beta-anim .beta-row.is-visible .v-thread,
.beta-anim .beta-row.is-visible .v-docs { opacity: 1; transform: none; }
.beta-anim .beta-row .v-thread { transition-delay: .6s; }

/* ============================================================ scroll story ==
   Sign-up to cockpit in five scenes (components/_beta_story.html).

   Default (no JavaScript, "reduce motion", no `overflow: clip`): a
   storyboard. The scenes stand below each other in their final state,
   caption beside the frame.
   With js/beta.js (`story-anim` on <html>): the section is several screens
   tall, the stage sticks to the viewport, and the script maps the scroll
   position to the scene shown and to the small steps inside it (typing,
   ticks, counters). Nothing is timed; scrolling back plays it backwards. */
.beta-story { max-width: 1280px; margin: 0 auto; padding: 48px 40px 96px; }
.story-head { max-width: 780px; margin: 0 auto 56px; text-align: center; }
.story-steps { display: none; }
.story-scenes { display: grid; gap: 72px; }
.story-scene {
  /* A container, so the caption can tell how wide its frame is (scene 3). */
  container: scene / inline-size;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.story-caption { display: grid; gap: 10px; align-content: center; text-align: left; }
.story-caption strong { font-size: 24px; line-height: 1.3; font-weight: 600; color: var(--fv-white); }
.story-caption > span:not(.story-num):not(.story-note) { font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .68); }
.story-num {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--fv-gold-400) 0%, var(--fv-gold-600) 100%);
  color: var(--fv-blue-600);
  font-size: 15px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Story notes (Adrian, 2026-11-10): registering works without an entity, and
   investments missing from the register are added afterwards. */
.story-note {
  display: flex;
  gap: 10px;
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 6px;
  background: rgba(211, 175, 55, .1);
  border: 1px solid rgba(211, 175, 55, .28);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fv-gold-200);
}
/* Scene 3 says it inside the frame (`.sw-hint`) while the frame is wider
   than 860 px; below that the holding tree is a list and fills the frame, so
   the caption carries the note instead (FV-485; 620 px before). The frame is
   the scene minus caption and gap (280 + 48) beside each other, the whole
   scene below 992 px. */
.story-scene[data-scene="3"] .story-note { display: none; }
@container scene (max-width: 860px) {
  .story-scene[data-scene="3"] .story-note { display: flex; }
}
@media (min-width: 992px) {
  @container scene (max-width: 1188px) {
    .story-scene[data-scene="3"] .story-note { display: flex; }
  }
}
/* "Illustration with sample data": a small note right under the last frame,
   aligned to its right edge. The scenes are a grid with a large gap, so the
   note pulls itself up to 10 px under the frame. */
.story-sample {
  margin: -62px 0 0;
  justify-self: end;
  text-align: right;
  font-size: 12px;
  color: rgba(255, 255, 255, .5);
}

/* The frame: the cockpit's own light look, as on the real screens. */
.story-window {
  position: relative;
  container-type: inline-size;
  overflow: hidden;
  border-radius: 12px;
  background: #F5F5F5;
  color: var(--fv-blue-600);
  text-align: left;
  box-shadow: 0 40px 80px -10px rgba(12, 13, 26, .55), 0 0 0 1px rgba(255, 255, 255, .06);
}
.sw-body { padding: 28px; min-height: 420px; }
.sw-body--center { display: flex; align-items: center; justify-content: center; }
.sw-card {
  width: min(400px, 100%);
  display: grid;
  gap: 14px;
  padding: 28px;
  background: var(--fv-white);
  border: 1px solid rgba(32, 35, 68, .08);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(32, 35, 68, .04), 0 4px 16px rgba(32, 35, 68, .05);
}
.sw-card--wide { width: min(520px, 100%); }
.sw-logo { height: 26px; width: auto; }
.sw-step { display: block; font-size: 12px; font-weight: 600; color: #666A7D; }
.sw-title { display: block; font-size: 20px; line-height: 1.3; font-weight: 600; }
.sw-text { font-size: 13px; line-height: 1.5; color: #5A5E73; }
.sw-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.sw-field { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: #202344; }
.sw-field b,
.sw-search b { font-weight: 400; }
.sw-field b {
  display: block;
  min-height: 40px;
  padding: 10px 12px;
  border: 1px solid rgba(32, 35, 68, .14);
  border-radius: 6px;
  background: var(--fv-white);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
}
.sw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 6px;
  background: var(--fv-gold-400);
  color: var(--fv-blue-600);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease;
}
.sw-btn--inline { min-height: 36px; font-size: 13px; }
.sw-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--fv-gold-400);
  border-radius: 6px;
  box-shadow: 0 0 0 3px rgba(211, 175, 55, .2);
  font-size: 14px;
  color: #666A7D;
}
.sw-search b { color: var(--fv-blue-600); }
.sw-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(32, 35, 68, .14);
  border-radius: 6px;
  font-size: 13px;
  transition: border-color .25s ease, background-color .25s ease;
}
.sw-result strong { display: block; font-weight: 600; }
.sw-result small { display: block; color: #666A7D; font-size: 12px; }
.sw-radio { flex: 0 0 16px; height: 16px; border-radius: 999px; border: 1.5px solid #9FA1AC; transition: border .25s ease; }
.st-select { border-color: var(--fv-gold-400); background: var(--fv-gold-50); }
.st-select .sw-radio { border: 5px solid var(--fv-gold-400); }
.sw-link { justify-self: center; font-size: 13px; color: #5A5E73; text-decoration: underline; text-underline-offset: 2px; }
.sw-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.sw-progress { height: 8px; border-radius: 4px; background: rgba(32, 35, 68, .08); overflow: hidden; }
.sw-progress span {
  display: block;
  height: 100%;
  width: calc(var(--t, 1) * 100%);
  border-radius: 4px;
  background: linear-gradient(90deg, var(--fv-gold-500), var(--fv-gold-400));
}
.sw-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 14px; }
.sw-tasks li { display: flex; align-items: center; gap: 12px; }
.st-state {
  position: relative;
  flex: 0 0 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #E4F5EC;
  color: #1A7350;
}
.st-state svg { width: 13px; height: 13px; }
.st-spin { display: none; }
.sw-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px auto 0;
  max-width: 560px;
  padding: 10px 14px;
  border-radius: 6px;
  background: var(--fv-white);
  border: 1px solid rgba(32, 35, 68, .1);
  font-size: 13px;
  line-height: 1.45;
  color: #5A5E73;
}
.sw-hint svg { flex: 0 0 auto; color: #7A6118; }

/* Investment chart: an organisation chart from nested lists. */
.st-tree { --line: #C9CCDA; display: flex; flex-direction: column; align-items: center; }
.st-tree ul { position: relative; display: flex; justify-content: center; margin: 0; padding: 16px 0 0; list-style: none; }
.st-tree ul::before { content: ""; position: absolute; top: 0; left: 50%; height: 16px; border-left: 1.5px solid var(--line); }
.st-tree li { position: relative; display: flex; flex-direction: column; align-items: center; padding: 16px 4px 0; }
.st-tree li::before,
.st-tree li::after { content: ""; position: absolute; top: 0; right: 50%; width: 50%; height: 16px; border-top: 1.5px solid var(--line); }
.st-tree li::after { right: auto; left: 50%; border-left: 1.5px solid var(--line); }
.st-tree li:only-child { padding-top: 0; }
.st-tree li:only-child::before,
.st-tree li:only-child::after { display: none; }
.st-tree li:first-child::before,
.st-tree li:last-child::after { border: 0; }
.st-tree li:last-child::before { border-right: 1.5px solid var(--line); border-radius: 0 6px 0 0; }
.st-tree li:first-child::after { border-radius: 6px 0 0 0; }
.st-node {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 152px;
  padding: 8px 10px;
  background: var(--fv-white);
  border: 1px solid rgba(32, 35, 68, .1);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(32, 35, 68, .04), 0 4px 16px rgba(32, 35, 68, .05);
  text-align: left;
  font-size: 12px;
  line-height: 1.3;
}
.st-node--root { width: auto; background: var(--fv-blue-600); color: var(--fv-white); border-color: transparent; padding: 8px 16px; }
.st-node--root small { color: rgba(255, 255, 255, .66); }
.st-node-text { flex: 1; min-width: 0; }
.st-node strong { display: block; font-weight: 600; }
.st-node small { display: block; font-size: 11px; color: #666A7D; }
.st-node-actions { display: flex; align-items: center; gap: 6px; }
.st-pen { display: inline-flex; padding: 3px; border-radius: 4px; color: #666A7D; background: rgba(32, 35, 68, .05); }
.st-box {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--fv-gold-400);
  border: 1.5px solid var(--fv-gold-400);
  color: var(--fv-blue-600);
  transition: background-color .2s ease, border-color .2s ease;
}
.st-box svg { width: 12px; height: 12px; transition: opacity .2s ease; }

/* The cockpit scene, compacted for the frame. */
.story-window .cp-app { grid-template-columns: 190px minmax(0, 1fr); min-height: 460px; }
.story-window .cp-content { padding: 18px 22px; gap: 12px; }
.story-window .cp-h1 { font-size: 20px; }
.story-window .cp-kpi { padding: 12px 14px; gap: 4px; }
.story-window .cp-kpi-value { font-size: 20px; }
.story-window .cp-kpi--hero .cp-kpi-value { font-size: 22px; }
.story-window .cp-card { padding: 14px 16px; gap: 4px; }
.story-window .cp-list-item { padding: 6px 0; font-size: 12px; }
.story-window .cp-sidebar { padding: 14px 10px; }
.story-window .cp-nav { padding: 7px 12px; }
.story-window .cp-user { display: none; }

@container (max-width: 780px) {
  .story-window .cp-app { grid-template-columns: minmax(0, 1fr); }
  .story-window .cp-sidebar { display: none; }
}
/* Side by side the holding tree is 805 px wide (measured), plus the frame's
   padding. In a narrower frame it becomes an indented list; up to FV-485
   that happened only from 620 px down, so between 620 and about 800 px (an
   iPad in portrait, a laptop around 1100 px) the tree was cut off on both
   sides. 860 px leaves it its padding. */
@container (max-width: 860px) {
  .st-tree { align-items: stretch; }
  .st-tree ul { display: block; padding: 0 0 0 16px; }
  .st-tree ul::before,
  .st-tree li::before,
  .st-tree li::after { display: none; }
  .st-tree li { display: block; padding: 6px 0 0 12px; border-left: 1.5px solid var(--line); }
  .st-tree li:only-child { padding-top: 6px; }
  .st-node { width: auto; padding: 6px 10px; }
  .st-node-text { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
  .st-node--root .st-node-text { display: block; }
  .sw-hint { display: none; }
}
/* On a phone the list has seven rows in a frame of fixed height; with the
   spacing above, the last row (PayFlex) fell out of the frame below 390 px.
   Less indent keeps more names on one line, less padding saves the rest. */
@container (max-width: 400px) {
  .st-tree ul { padding-left: 8px; }
  .st-tree li { padding: 4px 0 0 8px; }
  .st-tree li:only-child { padding-top: 4px; }
  .st-node { padding: 4px 8px; }
}
/* At 320 px the names wrap anyway; the share and role under each name go,
   the names and ticks stay. */
@container (max-width: 300px) {
  .st-node:not(.st-node--root) small { display: none; }
}
@container (max-width: 620px) {
  .sw-body { padding: 16px; min-height: 0; }
  .sw-card { padding: 20px; gap: 10px; }
  .sw-title { font-size: 17px; }
  .sw-head { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
  .sw-head .sw-step { display: none; }
  .story-window .cp-grid-4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .story-window .cp-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .story-window .cp-grid-2 > .cp-card:last-child { display: none; }
  .story-window .cp-search { display: none; }
}

/* ------------------------------------------------------- story animated */
.story-anim .beta-story { max-width: none; height: 600vh; padding: 0; }
.story-anim .story-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  padding: 28px 40px 0;
  overflow: hidden;
}
/* The stage spans the viewport; its content keeps the page's 1200 px. On a
   large screen js/beta.js grows that block as a whole and moves it to the
   middle (`is-zoomed`), so no empty band trails the story (FV-484). The
   transform is only set then: a transformed block would otherwise become
   the offset parent the script measures the frames against. */
.story-anim .story-inner { max-width: 1200px; margin: 0 auto; }
.story-anim .story-inner.is-zoomed {
  transform: translateY(var(--story-shift, 0px)) scale(var(--story-zoom, 1));
  transform-origin: top center;
}
/* The stage carries its own spacing. A little more air between the
   headline, the step bar and the frame (Adrian, 2026-11-10). */
.story-anim .story-head { margin-bottom: 24px; }
.story-anim .story-head .beta-title { font-size: 34px; margin-bottom: 0; }
.story-anim .story-steps { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 36px; padding: 0; }
.story-anim .story-steps li {
  padding: 6px 12px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .6);
  font-size: 13px;
  font-weight: 600;
  transition: background-color .3s ease, color .3s ease;
}
.story-anim .story-steps li.is-done { color: var(--fv-gold-300); background: rgba(211, 175, 55, .1); }
.story-anim .story-steps li.is-active { color: var(--fv-blue-600); background: var(--fv-gold-400); }
.story-anim .story-scenes {
  display: grid;
  gap: 0;
  transform: scale(var(--story-scale, 1));
  transform-origin: top center;
}
/* The scenes lie on top of each other; only the current one is seen. The
   others are transparent but not `visibility: hidden`, so a screen reader
   still reads all five captions in order (the frames are aria-hidden). */
.story-anim .story-scene {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity .45s ease, transform .45s ease;
}
.story-anim .story-scene.is-current { opacity: 1; pointer-events: auto; transform: none; }
.story-anim .story-window { height: 520px; }
.story-anim .sw-body { height: calc(100% - 40px); min-height: 0; }
.story-anim .story-window .cp-app { height: calc(100% - 40px); min-height: 0; }
/* The sample note hangs off each frame, so it sits right under the image
   whatever the length of the caption above it. */
.story-anim .story-sample { display: none; }
.story-anim .story-scene::after {
  content: attr(data-note);
  /* Empty alternative text: the note describes the frames, which are
     aria-hidden, so a screen reader would only hear it five times. */
  content: attr(data-note) / "";
  grid-column: 2;
  justify-self: end;
  margin-top: -38px;
  font-size: 12px;
  color: rgba(255, 255, 255, .5);
}

/* Small steps inside a scene, switched by the scroll position. */
.story-anim .st-appear { opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; }
.story-anim .st-appear.is-on { opacity: 1; transform: none; }
.story-anim .st-check:not(.is-on) { background: var(--fv-white); border-color: #9FA1AC; }
.story-anim .st-check:not(.is-on) svg { opacity: 0; }
.story-anim .st-press.is-on { transform: scale(.96); box-shadow: 0 0 0 4px rgba(211, 175, 55, .35); }
.story-anim .st-select:not(.is-selected) { border-color: rgba(32, 35, 68, .14); background: transparent; }
.story-anim .st-select:not(.is-selected) .sw-radio { border: 1.5px solid #9FA1AC; }
.story-anim .st-done:not(.is-on) { background: rgba(32, 35, 68, .06); }
.story-anim .st-done:not(.is-on) svg { display: none; }
.story-anim .st-done:not(.is-on) .st-spin {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 2px solid rgba(32, 35, 68, .15);
  border-top-color: var(--fv-gold-500);
  animation: st-spin .8s linear infinite;
}
@keyframes st-spin { to { transform: rotate(360deg); } }
.story-anim .st-grow { transform: scaleX(0); transform-origin: left; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.story-anim .st-grow.is-on { transform: none; }
.story-anim .is-typing::after {
  content: "";
  display: inline-block;
  width: 1.5px;
  height: 1em;
  margin-left: 1px;
  vertical-align: -2px;
  background: var(--fv-blue-600);
  animation: st-caret 1s steps(1) infinite;
}
@keyframes st-caret { 50% { opacity: 0; } }

/* Flow diagrams (rect 1 of a node is its frame, so cells and bars count
   from 2): dots travel the lines (SMIL, see _beta_flow.html), the
   grey dashes of "today" crawl unevenly while the cells of the spreadsheet
   are filled in one by one, again and again, with one value that does not
   match. Slow on purpose (Adrian, 2026-11-11): one dot every few seconds per
   line, so the drawing reads as calm, not busy. The finvantage side breathes once a few seconds and its bars rise
   when the card comes into view. */
.beta-anim .flow-packet { display: inline; }
.beta-anim .flow-line--today { animation: flow-dash 4s linear infinite; }
.beta-anim .flow-line--today:nth-of-type(2n) { animation-duration: 5.5s; }
.beta-anim .flow-cell { animation: flow-cell 12s ease-in-out infinite; }
.beta-anim .flow-cell--warn { animation-name: flow-cell-warn; }
.beta-anim .flow-hub-ring { animation: flow-ring 5s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.beta-anim .flow-bar { transform: scaleY(.15); transform-box: fill-box; transform-origin: bottom; transition: transform 1s cubic-bezier(.2, .7, .2, 1) .4s; }
.beta-anim .reveal.is-visible .flow-bar { transform: none; }
.beta-anim .reveal.is-visible .flow-bar:nth-of-type(3) { transition-delay: .5s; }
.beta-anim .reveal.is-visible .flow-bar:nth-of-type(4) { transition-delay: .6s; }
.beta-anim .reveal.is-visible .flow-bar:nth-of-type(5) { transition-delay: .7s; }
.beta-anim .reveal.is-visible .flow-bar:nth-of-type(6) { transition-delay: .8s; }
.beta-anim .flow-cell:nth-of-type(2) { animation-delay: 0.00s; }
.beta-anim .flow-cell:nth-of-type(3) { animation-delay: 0.70s; }
.beta-anim .flow-cell:nth-of-type(4) { animation-delay: 1.40s; }
.beta-anim .flow-cell:nth-of-type(5) { animation-delay: 2.10s; }
.beta-anim .flow-cell:nth-of-type(6) { animation-delay: 2.80s; }
.beta-anim .flow-cell:nth-of-type(7) { animation-delay: 3.50s; }
.beta-anim .flow-cell:nth-of-type(8) { animation-delay: 4.20s; }
.beta-anim .flow-cell:nth-of-type(9) { animation-delay: 4.90s; }
.beta-anim .flow-cell:nth-of-type(10) { animation-delay: 5.60s; }
.beta-anim .flow-cell:nth-of-type(11) { animation-delay: 6.30s; }
.beta-anim .flow-cell:nth-of-type(12) { animation-delay: 7.00s; }
.beta-anim .flow-cell:nth-of-type(13) { animation-delay: 7.70s; }
@keyframes flow-dash { to { stroke-dashoffset: -36; } }
@keyframes flow-cell {
  0%, 8% { fill: rgba(255, 255, 255, .05); }
  20%, 85% { fill: rgba(255, 255, 255, .22); }
  100% { fill: rgba(255, 255, 255, .05); }
}
@keyframes flow-cell-warn {
  0%, 8% { fill: rgba(255, 255, 255, .05); }
  20%, 40% { fill: rgba(255, 255, 255, .22); }
  50%, 85% { fill: rgba(232, 160, 60, .55); }
  100% { fill: rgba(255, 255, 255, .05); }
}
@keyframes flow-ring {
  0% { opacity: .6; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.5); }
}

/* Hero entrance (Adrian, 2026-11-11): played once on arrival, in the order
   the eye reads. A soft gold light opens behind the headline, the headline
   rises out of a slight blur, a sheen runs once across its gold words, and
   lead, buttons and the quiet line follow. Slow and short on purpose: under
   two seconds, no bounce, nothing that loops. Gated by `beta-anim` like every
   motion rule here, so "reduce motion" and no-JS visitors see the final
   state at once. `backwards` only: once played, no animation value stays
   on an element (an applied opacity or filter would open a new stacking
   context around the menu and the buttons). */
.beta-anim .beta-hero { position: relative; isolation: isolate; }
.beta-anim .beta-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 40px;
  width: min(900px, 120vw);
  height: 420px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(211, 175, 55, .14), transparent);
  pointer-events: none;
  animation: hero-glow 2.4s cubic-bezier(.2, .7, .2, 1) backwards;
}
.beta-anim .beta-hero-title {
  animation: hero-rise 1.2s cubic-bezier(.16, .84, .24, 1) .15s backwards;
}
/* Three copies of the accent gradient side by side: the first and last third
   look exactly like `.beta-accent`, the middle one carries the sheen. Moving
   from the last third to the first lets the light pass once and come to rest
   on the normal look. */
.beta-anim .beta-hero-title .beta-accent {
  background-image: linear-gradient(
    110deg,
    var(--fv-gold-300) 0%,
    var(--fv-gold-500) 33.3%,
    var(--fv-gold-200) 44%,
    var(--fv-gold-50) 50%,
    var(--fv-gold-200) 56%,
    var(--fv-gold-300) 66.6%,
    var(--fv-gold-500) 100%
  );
  background-size: 300% 100%;
  background-position: 0% 50%;
  animation: hero-sheen 1.6s cubic-bezier(.45, 0, .2, 1) 1s backwards;
}
.beta-anim .beta-lead { animation: hero-fade-up .9s cubic-bezier(.2, .7, .2, 1) .55s backwards; }
.beta-anim .beta-cta-row { animation: hero-fade-up .9s cubic-bezier(.2, .7, .2, 1) .72s backwards; }
.beta-anim .beta-hero-meta { animation: hero-fade-up .9s cubic-bezier(.2, .7, .2, 1) .9s backwards; }
.beta-anim .beta-nav { animation: hero-fade .8s ease backwards; }
@keyframes hero-glow {
  from { opacity: 0; transform: translateX(-50%) scale(.7); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(24px); filter: blur(10px); letter-spacing: -.01em; }
  to { opacity: 1; transform: none; filter: blur(0); letter-spacing: -.025em; }
}
@keyframes hero-sheen {
  from { background-position: 100% 50%; }
  to { background-position: 0% 50%; }
}
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }

/* reset.css scrolls smoothly to anchors; with "reduce motion" the jumps on
   this long page are immediate. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ============================================================ breakpoints */

/* ≤ 1200 px: the same breakpoint as the hamburger menu in public.css. */
@media (max-width: 1200px) {
  .beta-nav { padding: 20px 24px; }
  .beta-nav .landing-nav-links { margin: 16px 0 0; gap: 0; }
}
@media (max-width: 1199px) {
  .beta-split,
  .beta-split--reverse,
  .beta-split--form { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .beta-split--reverse .beta-features { order: 2; }
}

/* ≤ 991 px */
@media (max-width: 991px) {
  .beta-hero-title { font-size: 52px; }
  .beta-row { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .beta-row--reverse .beta-row-copy { order: 0; }
  .cp-grid-4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .story-scene { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .story-anim .story-scene { align-content: start; }
  .story-anim .story-scene::after { grid-column: 1; margin-top: -10px; }
  .story-anim .story-caption { gap: 6px; }
  .story-anim .story-caption strong { font-size: 19px; }
  .story-anim .story-caption > span:not(.story-num):not(.story-note) { font-size: 14px; }
  .story-anim .story-caption .story-num { display: none; }
}

/* ≤ 767 px */
@media (max-width: 767px) {
  .beta-section { padding: 72px 16px; }
  .beta-section-head { margin-bottom: 40px; }
  .beta-hero { padding: 64px 16px 72px; }
  .beta-hero-title { font-size: 40px; }
  .beta-hero-meta { flex-direction: column; align-items: center; gap: 4px; }
  .beta-hero-meta span + span::before { display: none; }
  .beta-lead { font-size: 17px; }
  .beta-title { font-size: 30px; }
  .beta-row { padding: 36px 0; }
  .beta-row-title { font-size: 24px; }
  .beta-grid-2,
  .beta-features,
  .cp-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .beta-features,
  .beta-grid-2 { gap: 16px; }
  .beta-card { padding: 24px; }
  .beta-visual { padding: 16px; }
  .cp-topbar .cp-search { display: none; }

  .beta-story { padding: 32px 16px 72px; }
  .story-head { margin-bottom: 40px; }
  .story-scenes { gap: 48px; }
  .story-sample { margin-top: -38px; }
  .story-anim .story-stage { padding: 16px 16px 0; }
  .story-anim .story-head { margin-bottom: 16px; }
  .story-anim .story-head .beta-eyebrow { display: none; }
  .story-anim .story-head .beta-title { font-size: 24px; }
  /* On a phone the step names would wrap; five progress segments say the same. */
  .story-anim .story-steps { flex-wrap: nowrap; gap: 4px; margin-bottom: 24px; }
  .story-anim .story-steps li { flex: 1; height: 4px; padding: 0; font-size: 0; }
  .story-anim .story-steps li.is-done { background: rgba(211, 175, 55, .45); }
  .story-anim .story-window { height: 510px; }
}

/* ≤ 575 px */
@media (max-width: 575px) {
  .beta-form-card { padding: 24px 16px; }
  .beta-form-row,
  .beta-roles { grid-template-columns: minmax(0, 1fr); }
  .beta-cta-row .b-btn { width: 100%; }
}