/* The rest of the funnel (WOW.md §10, W5) on the design tokens: the sales pages' first screens as
   ink bands (features, futures, prop firms, exports, security, the platform pages, NinjaTrader,
   the comparison, the Trade Check), one filled action per screen with the rest as text links, the
   one sample week's card in place of the older sample, and the first screen kept clear of the
   cookie bar. The homepage has its own (home.css). */
:is(.vg-hero:not(.vg-dark), .story-hero, .vg-cmp-hero, .vg-tc-hero) {
    --on-surface-variant: var(--ds-ink-text-3);
    --muted: var(--ds-ink-text-3);
    background: var(--ds-band-ink);
    color: var(--ds-ink-text);
    border-bottom: 0;
}
:is(.vg-hero, .story-hero, .vg-cmp-hero, .vg-tc-hero) h1 { color: var(--ds-white); font-weight: var(--ds-weight-heavy); letter-spacing: var(--ds-tracking-display); line-height: var(--ds-leading-display); text-wrap: balance; }
.story-hero h1 { max-width: 12em; font-size: clamp(2.1rem, 1.2rem + 3vw, 3.2rem); }
.story-hero .story-hero-copy > p { font-size: var(--ds-text-md); line-height: 1.6; }
.vg-cmp .vg-cmp-hero h1 span { color: var(--ds-ink-text-2); }
.vg-cmp .vg-cmp-hero .vg-cmp-shot.vg-hero-sample { max-width: 520px; padding: 0; border: 0; background: none; box-shadow: none; }
:is(.vg-hero .vg-eyebrow, .story-hero .story-eyebrow, .vg-cmp-hero .vg-cmp-eyebrow, .vg-tc-hero .vg-tc-eyebrow) { color: var(--ds-blue-300); }
:is(.vg-hero .vg-eyebrow, .story-hero .story-eyebrow) span { background: var(--ds-blue-300); }
:is(.vg-hero .vg-hero-sub, .story-hero .story-hero-copy > p, .story-hero p.story-lead, .vg-cmp-hero .vg-cmp-lead, .vg-tc-hero .vg-tc-lead) { color: var(--ds-ink-text-2); }
:is(.vg-hero .vg-hero-trust, .vg-hero .vg-demo-line, .story-hero .story-nofile, .story-hero .story-proof span, .vg-tc-hero .vg-tc-steps li) { color: var(--ds-ink-text-3); }
:is(.vg-hero, .story-hero, .vg-cmp-hero) a:not([class*="btn"]) { color: var(--ds-blue-300); text-decoration: underline; text-decoration-color: rgba(147, 182, 253, .45); text-underline-offset: 3px; }
:is(.vg-hero, .story-hero, .vg-cmp-hero) a:not([class*="btn"]):hover { color: var(--ds-white); }

/* The one filled action, and the rest as text links. */
:is(.vg-hero .vg-btn-primary, .story-hero .story-btn.primary, .vg-cmp-hero .vg-cmp-btn.primary) { background: var(--ds-blue-600); border-color: var(--ds-blue-500); color: var(--ds-white); box-shadow: var(--ds-shadow-button), 0 0 0 1px rgba(147, 182, 253, .15); }
:is(.vg-hero .vg-btn-primary, .story-hero .story-btn.primary, .vg-cmp-hero .vg-cmp-btn.primary):hover { background: var(--ds-blue-500); }
:is(.vg-sales .vg-btn-secondary, .story-hero .story-btn:not(.primary), .vg-cmp-hero .vg-cmp-btn:not(.primary)) { min-height: 0; padding: .35rem 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--ds-blue-700); font-weight: var(--ds-weight-semibold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
:is(.vg-sales .vg-btn-secondary, .story-hero .story-btn:not(.primary), .vg-cmp-hero .vg-cmp-btn:not(.primary))::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: .5rem; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); vertical-align: .12em; }
:is(.vg-hero .vg-btn-secondary, .story-hero .story-btn:not(.primary), .vg-cmp-hero .vg-cmp-btn:not(.primary)) { color: var(--ds-blue-300); }
.vg-sales .vg-actions { align-items: center; gap: var(--ds-space-3) var(--ds-space-6); }
.vg-sales :is(.vg-pro-band, .vg-dark) .vg-btn-secondary { color: var(--ds-blue-300); }

/* The one sample week's card where the older sample was (core/services/sample_week.view). */
.vg-hero-sample { align-self: center; width: 100%; max-width: 560px; margin-left: auto; }
.vg-hero-sample .sample-week-compact { margin: 0; }

/* Product shots on ink and on light. */
.vg-hero .vg-shot { border: var(--ds-border-ink-strong); box-shadow: var(--ds-shadow-ink); }
.vg-hero .vg-shot figcaption { border-top: var(--ds-border-ink); background: var(--ds-ink-900); color: var(--ds-ink-text-3); }
.vg-hero .vg-shot figcaption strong { color: var(--ds-ink-text); }
.vg-sales .vg-shot { border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-lg); }

/* The Trade Check's first screen (POLISH.md finding 31): the copy, then the three steps on a connector
   and the privacy line, centred on the right column. There, one light card with one primary action and
   a designed drop zone (an icon, its formats, a drag state); under it the ways in without a file as a
   quieter ink panel, and the trademark notice as their footnote. */
.vg-tc .vg-tc-hero { padding-top: clamp(2rem, 3.4vw, 3rem); }
.vg-tc-hero .vg-tc-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 29rem); grid-template-areas: "intro side" "more side"; align-items: center; column-gap: clamp(2.5rem, 6vw, 6rem); row-gap: var(--ds-space-8); }
.vg-tc-intro { grid-area: intro; align-self: end; }
.vg-tc-more { grid-area: more; align-self: start; }
.vg-tc-side { grid-area: side; }
.vg-tc .vg-tc-hero h1 { max-width: 12.5em; margin: var(--ds-space-4) 0 var(--ds-space-5); font-size: clamp(2.125rem, 1.4rem + 2.6vw, 3.375rem); }
.vg-tc-hero .vg-tc-lead { max-width: 34rem; font-size: var(--ds-text-lg); line-height: 1.55; }
.vg-tc-hero .vg-tc-steps { position: relative; counter-reset: tc-step; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-4); max-width: 34rem; margin: 0; }
.vg-tc-hero .vg-tc-steps::before { content: ""; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 1px; background: var(--ds-ink-line-strong); }
.vg-tc-hero .vg-tc-steps li { counter-increment: tc-step; position: relative; padding: 0 0 0 2.75rem; border: 0 !important; background: none !important; color: var(--ds-ink-text-3); font-size: var(--ds-text-sm); line-height: 1.5; }
.vg-tc-hero .vg-tc-steps li::before { content: counter(tc-step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: var(--ds-ink-800); box-shadow: inset 0 0 0 1px rgba(122, 167, 255, .45), 0 0 0 4px var(--ds-ink-950); color: var(--ds-blue-300); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); }
.vg-tc-hero .vg-tc-steps li strong { display: block; margin: 0 0 .1rem; color: var(--ds-ink-text); font-size: var(--ds-text-base); font-weight: var(--ds-weight-semibold); }
.vg-tc-hero .vg-tc-privacy { display: flex; align-items: flex-start; gap: .65rem; max-width: 34rem; margin: var(--ds-space-6) 0 0; padding: var(--ds-space-4) 0 0; border: 0; border-top: var(--ds-border-ink); border-radius: 0; background: none; color: var(--ds-ink-text-3); font-size: var(--ds-text-sm); line-height: 1.55; }
.vg-tc-hero .vg-tc-privacy .ds-icon { flex: 0 0 auto; margin-top: .2rem; color: var(--ds-accent-on-ink); }
.vg-tc-hero .vg-tc-privacy strong { color: var(--ds-ink-text); white-space: normal; font-weight: var(--ds-weight-semibold); }
/* The result's preview (FIX-ROUND.md F2.3): the Rule Cost beside the Split, on the sample week. At 1440 the
   steps become one row of titles under it (their lines repeat the lead and the privacy line). */
.vg-tc-preview { margin: var(--ds-space-5) 0 0; padding: var(--ds-space-3) var(--ds-space-4) var(--ds-space-2); border-radius: var(--ds-radius-xl); background: var(--ds-surface-ink); box-shadow: var(--ds-shadow-ink); max-width: 34rem; }
.vg-tc-preview-head { display: flex; justify-content: space-between; gap: var(--ds-space-3); padding-bottom: var(--ds-space-2); border-bottom: var(--ds-border-ink); color: var(--ds-ink-text); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); }
.vg-tc-preview-head span + span { color: var(--ds-ink-text-3); font-family: var(--ds-font-mono); font-size: var(--ds-text-2xs); font-weight: var(--ds-weight-regular); }
.vg-tc-preview-body { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); align-items: center; gap: var(--ds-space-3); }
.vg-tc-preview-cost { margin: 0; }
.vg-tc-preview-cost > span { display: block; color: var(--ds-ink-text-3); font-size: var(--ds-text-2xs); font-weight: var(--ds-weight-semibold); letter-spacing: var(--ds-tracking-caps); text-transform: uppercase; }
.vg-tc-preview-cost strong { display: block; margin: .2rem 0; color: var(--ds-loss-on-ink); font-size: var(--ds-figure-md); font-weight: var(--ds-weight-bold); line-height: 1; }
.vg-tc-preview-cost small { display: block; color: var(--ds-ink-text-3); font-size: var(--ds-text-xs); line-height: 1.4; text-wrap: balance; }
.vg-tc-preview-chart { display: block; width: 100%; height: auto; }
@media (min-width: 961px) {
    .vg-tc-hero .vg-tc-steps { grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; column-gap: var(--ds-space-6); }
    .vg-tc-hero .vg-tc-steps::before { display: none; }
    .vg-tc-hero .vg-tc-steps li { padding-left: 2.1rem; }
    .vg-tc-hero .vg-tc-steps li::before { width: 24px; height: 24px; top: -1px; box-shadow: inset 0 0 0 1px rgba(122, 167, 255, .45); }
    .vg-tc-hero .vg-tc-steps li strong { font-size: var(--ds-text-sm); }
    .vg-tc-hero .vg-tc-steps li span { display: none; }
    .vg-tc-hero .vg-tc-privacy { margin-top: var(--ds-space-4); }
    .vg-tc .vg-tc-hero h1 { margin-bottom: var(--ds-space-4); }
}
@media (max-width: 960px) {
    /* On a phone the preview is its figure line: the Rule Cost and the count, under the lead. */
    .vg-tc-preview { margin-top: var(--ds-space-4); padding: var(--ds-space-3); }
    .vg-tc-preview-body { grid-template-columns: 1fr; }
    .vg-tc-preview-cost { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--ds-space-3); }
    .vg-tc-preview-cost > span { width: 100%; }
    .vg-tc-preview-chart { display: none; }
}

/* The drop card. */
.vg-tc-hero .vg-tc-card { padding: var(--ds-space-3); border: 0; border-radius: var(--ds-radius-2xl); background: var(--ds-white); color: var(--ds-gray-900); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 2px 4px rgba(0, 0, 0, .25), 0 30px 70px -20px rgba(0, 0, 0, .7); }
/* One system (FIX-ROUND.md F1.8): the drop zone's radius is the card's less its padding (24 − 12), the
   panels' radii match, every rule is 1 px. */
.vg-tc-hero .vg-tc-drop { display: grid; justify-items: center; padding: var(--ds-space-6) var(--ds-space-6) var(--ds-space-5); border: 1px dashed var(--ds-gray-400); border-radius: var(--ds-radius-md); background: var(--ds-gray-25); text-align: center; transition: border-color var(--ds-dur-base) var(--ds-ease-out), box-shadow var(--ds-dur-base) var(--ds-ease-out), background var(--ds-dur-base) var(--ds-ease-out); }
.vg-tc-hero .vg-tc-drop:hover { border-color: var(--ds-gray-400); }
.vg-tc-hero .vg-tc-drop.is-dragging { border-style: solid; border-color: var(--ds-accent); background: var(--ds-blue-50); box-shadow: var(--ds-ring); }
.vg-tc-drop-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--ds-space-3); border-radius: 14px; background: var(--ds-white); box-shadow: inset 0 0 0 1px var(--ds-blue-100), var(--ds-shadow-sm); color: var(--ds-accent); font-size: 22px; transition: transform var(--ds-dur-base) var(--ds-ease-out); }
.vg-tc-hero .vg-tc-drop.is-dragging .vg-tc-drop-icon { transform: translateY(-3px); }
.vg-tc-hero .vg-tc-card h2 { margin: 0 0 var(--ds-space-4); color: var(--ds-gray-900); font-size: var(--ds-text-md); font-weight: var(--ds-weight-semibold); letter-spacing: -.01em; }
.vg-tc-hero .vg-tc-btn { border-radius: var(--ds-radius-pill); font-weight: var(--ds-weight-semibold); }
.vg-tc-hero .vg-tc-btn-primary { min-width: 15rem; min-height: 50px; background: var(--ds-blue-600); border-color: var(--ds-blue-600); box-shadow: var(--ds-shadow-button); }
.vg-tc-hero .vg-tc-btn-primary:hover { background: var(--ds-blue-700); border-color: var(--ds-blue-700); }
.vg-tc-hero .vg-tc-drop-hint { margin: var(--ds-space-3) 0 0; color: var(--ds-gray-600); font-size: var(--ds-text-sm); }
.vg-tc-drop-formats { max-width: 28rem; margin: var(--ds-space-3) 0 0; padding-top: var(--ds-space-3); border-top: 1px solid var(--ds-gray-200); color: var(--ds-gray-500); font-size: var(--ds-text-xs); line-height: 1.5; }
.vg-tc-drop-formats sup { color: var(--ds-gray-400); }
.vg-tc-hero .vg-tc-card .vg-tc-error { margin: var(--ds-space-3) var(--ds-space-2) var(--ds-space-1); }
/* The ways in without a file: quieter, on the ink. */
.vg-tc-alt { margin-top: var(--ds-space-3); padding: var(--ds-space-4) var(--ds-space-5) var(--ds-space-5); border-radius: var(--ds-radius-2xl); background: var(--ds-surface-ink-2); box-shadow: var(--ds-shadow-ink-sm); }
.vg-tc-hero .vg-tc-alt .vg-tc-or { margin: 0 0 var(--ds-space-3); color: var(--ds-ink-text-3); font-size: var(--ds-text-2xs); font-weight: var(--ds-weight-semibold); letter-spacing: var(--ds-tracking-caps); }
.vg-tc-hero .vg-tc-or::before, .vg-tc-hero .vg-tc-or::after { background: var(--ds-ink-line); }
.vg-tc-hero .vg-tc-alt .vg-tc-btn-secondary { width: 100%; min-height: 44px; border-color: var(--ds-ink-line-strong); background: rgba(255, 255, 255, .04); color: var(--ds-ink-text); font-size: var(--ds-text-sm); }
.vg-tc-hero .vg-tc-alt .vg-tc-btn-secondary:hover { border-color: rgba(148, 163, 184, .5); background: rgba(255, 255, 255, .08); }
.vg-tc-hero .vg-tc-alt details.vg-tc-typed { margin-top: var(--ds-space-2); border-color: var(--ds-ink-line-strong); border-radius: var(--ds-radius-lg); background: rgba(5, 8, 16, .3); }
.vg-tc-hero .vg-tc-alt .vg-tc-typed summary { color: var(--ds-ink-text); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold); text-align: center; list-style-position: inside; }
.vg-tc-hero .vg-tc-alt details p, .vg-tc-hero .vg-tc-alt details li, .vg-tc-hero .vg-tc-alt .vg-tc-typed-note { color: var(--ds-ink-text-2); }
.vg-tc-hero .vg-tc-alt .vg-tc-typed label { color: var(--ds-ink-text-2); }
.vg-tc-hero .vg-tc-alt .vg-tc-typed-row { border-color: var(--ds-ink-line); }
.vg-tc-hero .vg-tc-alt .vg-tc-typed-n { color: var(--ds-ink-text-3); }
.vg-tc-hero .vg-tc-alt details strong { color: var(--ds-ink-text); }
.vg-tc-hero .vg-tc-alt details:not(.vg-tc-typed) summary { margin-top: var(--ds-space-3); color: var(--ds-blue-300); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold); }
.vg-tc-hero .vg-tc-alt .vg-tc-formats { margin: var(--ds-space-3) 0 0; color: var(--ds-ink-text-3); font-size: var(--ds-text-sm); line-height: 1.55; }
.vg-tc-hero .vg-tc-alt a.vg-tc-inline, .vg-tc-hero .vg-tc-alt .tc-link-button { color: var(--ds-blue-300); text-decoration-color: rgba(147, 182, 253, .45); }
/* The trademark notice: the footnote of the formats line's asterisk (13 px, beside the names). */
.vg-tc-side [data-platform-trademarks] { margin: var(--ds-space-4) var(--ds-space-1) 0 !important; }
.vg-tc-side [data-platform-trademarks]::before { content: "* "; }
@media (max-width: 960px) {
    .vg-tc-hero .vg-tc-hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "side" "more"; row-gap: var(--ds-space-6); }
    .vg-tc-intro { align-self: start; }
    .vg-tc-side { max-width: 34rem; }
    /* While the cookie bar is up on a phone, the ways in without a file start below the first screen. */
    .vg-ck-pending .vg-tc-alt { margin-top: max(var(--vg-ck-reserve), calc(100svh - 36rem)); }
}
@media (max-width: 560px) {
    /* On a phone there is no dragging: the drop zone is its action and its formats (F2.3 made room). */
    .vg-tc-drop-icon, .vg-tc-hero .vg-tc-drop-hint { display: none; }
    .vg-tc-preview { margin-top: var(--ds-space-3); padding: var(--ds-space-2) var(--ds-space-3); }
    .vg-tc-preview-head { padding-bottom: var(--ds-space-1); font-size: var(--ds-text-2xs); }
    .vg-tc-preview-cost > span { display: none; }
    .vg-tc-preview-cost strong { font-size: var(--ds-figure-sm); }
    .vg-tc .vg-tc-hero h1 { margin: var(--ds-space-3) 0 var(--ds-space-3); font-size: 2rem; }
    .vg-tc-hero .vg-tc-lead { font-size: var(--ds-text-base); }
    .vg-tc-hero .vg-tc-drop { padding: var(--ds-space-5) var(--ds-space-4) var(--ds-space-4); }
    .vg-tc-drop-icon { width: 40px; height: 40px; margin-bottom: var(--ds-space-3); font-size: 18px; }
    .vg-tc-hero .vg-tc-card h2 { margin-bottom: var(--ds-space-4); }
    .vg-tc-hero .vg-tc-btn-primary { min-width: 0; width: 100%; }
}

/* The Trade Check's step after a result: what an account and Pro add, in outcomes. */
.vg-tc-gains { display: grid; gap: var(--ds-space-3); margin: var(--ds-space-5) 0 0; padding: 0; list-style: none; }
.vg-tc-gains li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--ds-space-3); align-items: start; color: var(--ds-gray-700); line-height: 1.5; }
.vg-tc-gains .ds-icon { width: 2rem; height: 2rem; padding: .45rem; border: var(--ds-border); border-radius: var(--ds-radius-xs); color: var(--ds-gray-700); background: var(--ds-white); }
.vg-tc-gains strong { display: block; color: var(--ds-gray-900); }
.vg-tc-risk { display: flex; align-items: center; gap: var(--ds-space-2); margin: var(--ds-space-3) 0 0; color: var(--ds-gray-600); font-size: var(--ds-text-sm); }
.vg-tc-risk .ds-icon { color: var(--ds-gray-500); }

/* The sales pages below the first screen (POLISH.md findings 29, 32): section headings at the section
   scale beside their visual, one filled action per page section only where it is the page's action
   (the rest are text links), features as accent checks (green means a gain), product screens in the
   tour's window frame. */
.vg-sales .vg-split h2 { font-size: var(--ds-text-2xl); line-height: var(--ds-leading-tight); }
.vg-sales .vg-split .vg-lead { font-size: var(--ds-text-md); line-height: 1.6; }
#features-title { font-size: clamp(2.25rem, 1.45rem + 2.3vw, 3.375rem); }
.vg-hero-trust { text-wrap: balance; }
.vg-hero-trust span { white-space: nowrap; }
/* Items in a wrapping line, each after a gap that holds its separator; the gap at a line's start is clipped,
   so a dot never dangles where the line wraps (MATCH-ROUND.md M3). The text dots are for readers without CSS. */
@media (min-width: 621px) {
    .vg-hero-trust:has(span) { margin-left: -1.3rem; clip-path: inset(-4px -4px -4px 1.3rem); font-size: 0; }
    .vg-hero-trust:has(span) span { position: relative; display: inline-block; margin-left: 1.3rem; font-size: .84rem; }
    .vg-hero-trust:has(span) span + span::before { content: "·"; position: absolute; left: -.8rem; }
}
.vg-sales .vg-checklist li::before { top: .3rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--ds-blue-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / .7rem no-repeat; box-shadow: inset 0 0 0 1px var(--ds-blue-100); }
.vg-sales .vg-shot { position: relative; padding-top: 28px; border: var(--ds-border); border-radius: var(--ds-radius-xl); background: var(--ds-white); box-shadow: var(--ds-shadow-lg); }
.vg-sales .vg-shot::before { content: ""; position: absolute; z-index: 1; inset: 0 0 auto; height: 28px; border-bottom: 1px solid var(--ds-gray-100); background: radial-gradient(circle at 17px 14px, var(--ds-gray-300) 0 4px, transparent 4.5px), radial-gradient(circle at 32px 14px, var(--ds-gray-300) 0 4px, transparent 4.5px), radial-gradient(circle at 47px 14px, var(--ds-gray-300) 0 4px, transparent 4.5px), var(--ds-gray-50); }
.vg-sales .vg-shot figcaption { border-top: 1px solid var(--ds-gray-100); background: var(--ds-gray-25); color: var(--ds-gray-500); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); }
.vg-sales .vg-shot figcaption strong { color: var(--ds-gray-800); font-weight: var(--ds-weight-semibold); }
.vg-hero .vg-shot { border: var(--ds-border-ink-strong); }
/* The Trade Check, each rule on its own: an ink figure on the sample week, the features page's first screen
   (MATCH-ROUND.md M3). As calm as the homepage's card: two text sizes besides the figure (14 and 12 px), one
   label weight, colour only for money; each rule's share of the Rule Cost a flat bar in the gap's colour. */
.vg-rule-figure { margin: 0; padding: var(--ds-space-5) var(--ds-space-6) var(--ds-space-5); font-weight: var(--ds-weight-medium); }
.vg-rule-figure p { margin: 0; }
.vg-rule-figure-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ds-space-3); padding-bottom: var(--ds-space-4); border-bottom: var(--ds-border-ink); color: var(--ds-ink-text); font-size: var(--ds-text-sm); }
.vg-rule-figure-head span + span { color: var(--ds-ink-text-3); font-size: var(--ds-text-xs); white-space: nowrap; }
.vg-rule-figure-table { width: 100%; margin-top: var(--ds-space-3); border-collapse: collapse; font-variant-numeric: tabular-nums; }
.vg-rule-figure-table th, .vg-rule-figure-table td { padding: 1rem 0; border-bottom: var(--ds-border-ink); color: var(--ds-ink-text-2); font-size: var(--ds-text-sm); font-weight: inherit; text-align: left; vertical-align: top; }
.vg-rule-figure-table thead th { padding: .25rem 0 .75rem; color: var(--ds-ink-text-3); font-size: var(--ds-text-xs); }
.vg-rule-figure-table :is(td, thead th:not(:first-child)) { padding-left: var(--ds-space-5); text-align: right; white-space: nowrap; }
.vg-rule-figure-table tbody th { color: var(--ds-ink-text); }
.vg-rule-share { display: block; width: var(--share, 0%); height: 4px; margin-top: .65rem; border-radius: 2px; background: rgba(229, 72, 77, .26); }
.vg-rule-figure-table .is-loss { color: var(--ds-loss-on-ink); }
.vg-rule-figure-table tfoot :is(th, td) { padding-top: 1.1rem; padding-bottom: 0; border-bottom: 0; color: var(--ds-ink-text); vertical-align: baseline; }
.vg-rule-figure-table tfoot th { display: flex; align-items: center; gap: .5rem; }
.vg-rule-figure-table tfoot td:not(.is-loss) { color: var(--ds-ink-text-3); font-size: var(--ds-text-xs); }
.vg-rule-figure-table tfoot .is-loss { color: var(--ds-loss-on-ink); font-size: var(--ds-figure-sm); font-weight: var(--ds-weight-bold); }
.vg-rule-figure figcaption { margin-top: var(--ds-space-4); color: var(--ds-ink-text-3); font-size: var(--ds-text-xs); line-height: 1.5; }
.vg-hero .vg-hero-figure.vg-rule-figure { align-self: center; width: 100%; max-width: 520px; }
/* In the product's own chrome (HERO-ROUND.md H2): the app's window (ds.css .vg-app) on Reports, the figure only
   its frame and caption; the table's head is the section's caps label and the week. */
.vg-hero .vg-hero-figure.vg-rule-figure.vg-app-shot { max-width: 580px; padding: 0; }
.vg-rule-figure.vg-app-shot .vg-rule-figure-head { padding-bottom: var(--ds-space-3); color: var(--ds-ink-text-3); font-size: var(--ds-text-xs); }
.vg-rule-figure.vg-app-shot .vg-rule-figure-head span:first-child { letter-spacing: .06em; text-transform: uppercase; }
.vg-rule-figure.vg-app-shot figcaption { margin-top: var(--ds-space-3); padding: 0 var(--ds-space-1); }
/* Features' first screen (HERO-ROUND.md H2): one accent, the action's blue; the eyebrow and the second action
   are the page's neutrals. At 1440 the copy and the window have the first screen to themselves. */
#features-root .vg-hero .vg-eyebrow { color: var(--ds-ink-text-3); }
#features-root .vg-hero .vg-eyebrow span { background: var(--ds-ink-text-3); }
#features-root .vg-hero .vg-btn-secondary { color: var(--ds-ink-text); text-decoration-color: rgba(195, 205, 219, .4); }
#features-root .vg-hero .vg-btn-secondary:hover { text-decoration-color: currentColor; }
@media (min-width: 1041px) {
    #features-root .vg-hero { box-sizing: border-box; display: grid; align-content: center; min-height: calc(100svh - var(--ds-header)); }
    #features-root .vg-hero .vg-hero-grid { column-gap: clamp(2.5rem, 5.6vw, 5.5rem); }
    #features-root .vg-hero .vg-actions { margin-top: var(--ds-space-10); }
    #features-root .vg-hero .vg-hero-trust { margin-top: var(--ds-space-5); }
}

/* Prop firms' first screen (POLISH.md finding 30): the live room gauge is the visual, beside the copy;
   on a phone between the copy and its action, compact (the trades one row of chips), so the room and
   the action are both in the first screen. */
.vg-hero-room .vg-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 29rem); grid-template-areas: "copy gauge" "act gauge"; align-items: center; column-gap: clamp(2.5rem, 6vw, 6rem); row-gap: var(--ds-space-8); }
.vg-hero-room .vg-hero-copy { grid-area: copy; align-self: end; }
.vg-hero-room .vg-hero-act { grid-area: act; align-self: start; }
.vg-hero-room .vg-hero-act .vg-actions { margin-top: 0; }
.vg-hero-room .vg-hero-gauge { grid-area: gauge; }
.vg-hero-room .vg-gauge { background: var(--ds-surface-ink); box-shadow: 0 0 0 1px rgba(148, 163, 184, .14), inset 0 1px 0 rgba(255, 255, 255, .07), 0 30px 70px -20px rgba(0, 0, 0, .75); }
.vg-sales #room .vg-shot { align-self: center; }

/* The story pages below the first screen (POLISH.md finding 32): section headings at the section
   scale, card titles semibold, one filled action per section with the other a text link, actions on
   the accent. */
.vg-story-page .story-section { padding: var(--ds-section) 0; }
.vg-story-page :is(.story-copy h2, .story-section-head h2, .story-final h2) { font-size: var(--ds-text-3xl); font-weight: var(--ds-weight-bold); letter-spacing: var(--ds-tracking-tight); line-height: var(--ds-leading-tight); text-wrap: balance; }
.vg-story-page :is(.story-section h3, .story-card-title, .story-step strong) { font-weight: var(--ds-weight-semibold); letter-spacing: -.01em; }
.vg-story-page .story-section-head p, .vg-story-page .story-copy > p { font-size: var(--ds-text-md); line-height: 1.6; }
.vg-story-page .story-btn { font-weight: var(--ds-weight-semibold); }
.vg-story-page .story-btn.primary { border-color: var(--ds-accent); background: var(--ds-accent); box-shadow: var(--ds-shadow-button); }
.vg-story-page .story-btn.primary:hover { background: var(--ds-accent-hover); }
.vg-story-page :is(.story-section, .story-final-wrap) .story-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--ds-space-3) var(--ds-space-6); }
.vg-story-page :is(.story-section, .story-final-wrap) .story-btn:not(.primary) { min-height: 0; padding: .35rem 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--ds-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.vg-story-page .story-final .story-actions { justify-content: center; }
.vg-story-page .story-card { border-color: var(--ds-gray-200); border-radius: var(--ds-radius-xl); box-shadow: var(--ds-shadow-md); }

/* While the cookie bar is up, a first screen is the screen above the bar, its content centred in it
   (POLISH.md finding 2): never padded empty at the bottom. */
.vg-ck-pending :is(.vg-hero:not(.vg-dark), .story-hero, .vg-cmp-hero, .vg-tc-hero) { box-sizing: border-box; display: grid; align-content: center; min-height: calc(100svh - var(--ds-header)); padding-bottom: calc(var(--vg-ck-reserve) + 16px) !important; }

@media (max-width: 1040px) {
    .vg-hero-sample { margin: 0; max-width: 680px; }
    .vg-hero-room .vg-hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "gauge" "act"; row-gap: var(--ds-space-5); }
    .vg-hero-room .vg-hero-copy { align-self: start; }
    .vg-hero-room .vg-hero-gauge { max-width: 34rem; }
    /* The room is in the first screen: the copy does not fill it. */
    .vg-ck-pending .vg-hero-room .vg-hero-grid > :first-child { min-height: 0; padding-bottom: 0; }
    /* On a phone or tablet the copy and its action fill the first screen while the cookie bar is up,
       so the visual starts below it instead of under the bar. */
    .vg-ck-pending :is(.vg-hero-grid, .vg-cmp-hero-grid, .story-hero-grid) > :first-child { box-sizing: border-box; min-height: calc(100svh - var(--ds-header) - 2.5rem); }
    /* The copy is centred in that screen, never top-aligned over an empty field (POLISH.md, P7). */
    .vg-ck-pending :is(.vg-hero-grid, .vg-cmp-hero-grid, .story-hero-grid) > :first-child { display: flex; flex-direction: column; justify-content: center; padding-bottom: calc(var(--vg-ck-reserve) - 1.5rem); }
}
@media (max-width: 620px) {
    .vg-hero.vg-hero-room { padding-top: var(--ds-space-5); }
    .vg-hero-room .vg-hero-grid { row-gap: var(--ds-space-3); }
    .vg-hero-room h1 { margin-top: var(--ds-space-3); font-size: 1.875rem; }
    .vg-hero-room .vg-hero-sub { margin-top: var(--ds-space-2); font-size: .9375rem; line-height: 1.45; }
    .vg-hero-room .vg-hero-trust { display: none; }
    .vg-hero-room .vg-actions { gap: var(--ds-space-2); }
    .vg-hero-room .vg-gauge { padding: var(--ds-space-3) var(--ds-space-4); }
    .vg-hero-room .vg-gauge-head { padding-bottom: 0; border-bottom: 0; }
    .vg-hero-room .vg-gauge-figure { margin-top: var(--ds-space-2); }
    .vg-hero-room .vg-gauge-figure strong { font-size: 1.75rem; }
    .vg-hero-room .vg-gauge-meter { height: 10px; margin-top: var(--ds-space-2); }
    .vg-hero-room .vg-gauge-limit { font-size: var(--ds-text-2xs); }
    .vg-hero-room .vg-gauge-caveat { display: none; }
    /* The status stays for screen readers; the figure and the meter say it on screen. */
    .vg-hero-room .vg-gauge-status { position: absolute; width: 1px; height: 1px; min-height: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .vg-hero-room .vg-gauge-controls { margin-top: var(--ds-space-1); }
    /* The day's trades as three equal chips in one row, all inside the card (FIX-ROUND.md F1.2). */
    .vg-hero-room .vg-gauge-trades { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-space-2); margin-top: var(--ds-space-2); }
    .vg-hero-room .vg-gauge-trades li { min-width: 0; }
    .vg-hero-room .vg-gauge-time { font-size: 10px; letter-spacing: -.02em; white-space: nowrap; }
    .vg-hero-room .vg-gauge-trade { grid-template-columns: minmax(0, 1fr); gap: .1rem; min-width: 0; min-height: 44px; padding: var(--ds-space-2); }
    .vg-hero-room .vg-gauge-rule { display: none; }
    .vg-hero-room .vg-gauge-net { justify-self: start; }
    .vg-hero-room .vg-gauge-caption { margin-top: var(--ds-space-2); }
    .story-hero { padding-top: var(--ds-space-8); }
    .story-hero h1 { font-size: clamp(1.95rem, 8.6vw, 2.4rem); }
    .story-hero .story-hero-copy > p { font-size: var(--ds-text-base); }
    /* On a phone the next section is the anchor's target, and the sub names what the proof chips say. */
    .story-hero .story-btn[href^="#"], .story-hero .story-proof { display: none; }
}
/* POLISH.md, P7: on a phone the hero's short facts stack, one per line, without their separators; the
   story pages' in-page anchor gives way at every size (one action and one text link beside the copy). */
.story-hero .story-btn[href^="#"] { display: none; }
@media (max-width: 620px) {
    .vg-hero-trust:has(span) { display: grid; gap: .2rem; font-size: 0; }
    .vg-hero-trust:has(span) span { font-size: var(--ds-text-sm); }
}
/* POLISH.md, P7: the platform pages' H1 at the features page's display size (three lines, not four);
   the compact sample card's sentence never ends on an orphan. */
#platform-title { font-size: clamp(2.25rem, 1.45rem + 2.3vw, 3.375rem); }
.sample-week-ink .sample-week-line { text-wrap: pretty; }
@media (max-width: 620px) { #platform-title { max-width: none; } }
/* The platform pages' lower sections (POLISH.md, P7): card titles semibold; the questions' heading on
   the questions' axis, centred over them. */
.vg-platform-page .vg-section article h3 { font-weight: var(--ds-weight-semibold); letter-spacing: -.01em; }
.vg-platform-page #questions .vg-section-head { margin-inline: auto; text-align: center; }
.vg-platform-page #questions .vg-section-head .vg-eyebrow { justify-content: center; }
/* The comparison's eyebrows in the system's eyebrow (POLISH.md, P7): small caps, the accent below the
   ink first screen. */
.vg-compare-page .vg-cmp-eyebrow { font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); letter-spacing: var(--ds-tracking-caps); }
.vg-compare-page section:not(.vg-cmp-hero) .vg-cmp-eyebrow { color: var(--ds-accent); }
/* The Trade Check on the site's one shell width (POLISH.md, P7): its column edges on the header's. */
.vg-tc .vg-tc-shell { width: var(--ds-shell); }
/* A screen frame whose image has not arrived yet (a fast scroll past lazy images) shows a soft field, so
   it reads as loading, never as an empty frame (FIX-ROUND.md F0.3). */
:is(.vg-sales .vg-shot, .vg-shot-canvas) img { background: var(--ds-gray-50); }
@media (max-width: 359px) { .vg-hero-room .vg-gauge-side { display: none; } }
/* A compact product visual in the first screen on a phone (FIX-ROUND.md F2.4): on futures, NinjaTrader, the
   platform pages and the comparison the copy column opens up, so the sample card sits between the sub
   and the actions, as prop firms' gauge does; the card shows the Rule Cost and its synthetic label (as before, the
   chart stays off the phone's first screen; MATCH-ROUND.md M3 took the waterfall out of the card). */
@media (max-width: 620px) {
    /* Over the pending-bar rule that centres the copy column (it sets display: flex). */
    body .vg-hero-mini > :first-child { display: contents !important; }
    .vg-hero-mini > :is(.vg-hero-sample, .vg-hero-visual) { order: 1; margin: var(--ds-space-1) 0 var(--ds-space-2); }
    .vg-hero-mini :is(.vg-actions, .story-actions, .vg-cmp-actions), .vg-hero-mini :is(.vg-actions, .story-actions, .vg-cmp-actions) ~ * { order: 2; }
    .vg-hero-mini .sample-week-ink :is(.sample-week-line, .vg-split-key, picture, .sample-week-chart) { display: none; }
    .vg-hero-mini .sample-week-ink { padding: 12px 14px 10px; }
    /* The card's head (its dates) gives way; its label below names the sample week. */
    .vg-hero-mini .sample-week-ink .sample-week-head { display: none; }
    .vg-hero-mini .sample-week-ink .sample-week-figures { margin-top: 0; }
    .vg-hero-mini .sample-week-ink .sample-week-label { margin-top: 8px !important; }
    /* The flattened children are grid items: their margins set the rhythm, not the grid's row gap. */
    body .vg-hero-mini { row-gap: 0 !important; }
    .vg-hero-mini :is(h1, .vg-hero-sub, .story-hero-copy > p, .vg-cmp-lead, .vg-eyebrow, .story-eyebrow, .vg-cmp-eyebrow) { margin-top: 0 !important; margin-bottom: var(--ds-space-3) !important; }
    .vg-hero-mini :is(.vg-hero-sub, .story-hero-copy > p, .vg-cmp-lead) { font-size: .9375rem !important; line-height: 1.5 !important; }
    .vg-hero-mini > :is(.vg-hero-sample, .vg-hero-visual) { margin: var(--ds-space-1) 0 var(--ds-space-4) !important; }
    .vg-hero-mini :is(.vg-actions, .story-actions, .vg-cmp-actions) { margin-top: 0 !important; }
    .vg-hero-mini :is(.vg-actions, .story-actions, .vg-cmp-actions) ~ * { margin-top: var(--ds-space-3); }
    :is(.vg-hero, .story-hero, .vg-cmp-hero):has(.vg-hero-mini) { padding-top: var(--ds-space-5) !important; }
}
/* Features (FIX-ROUND.md F3.3): white sections parted by a hairline; the hero, the Pro band and the last
   call are the only ink. The review stacked over a wide screen, the import a compact band of facts. */
#features-root .vg-section { background: var(--ds-white); }
#features-root .vg-section + .vg-section { border-top: 1px solid var(--ds-gray-100); }
#features-root .vg-section-head.centered { margin-inline: auto; text-align: center; }
#features-root .vg-section-head.centered .vg-eyebrow { justify-content: center; }
#features-root .vg-section-head.centered p { max-width: 44rem; margin-inline: auto; }
.vg-shot-wide { max-width: 64rem; margin: var(--ds-space-10) auto 0; }
.vg-feature-facts { margin: var(--ds-space-5) 0 0; padding-top: var(--ds-space-4); border-top: 1px solid var(--ds-gray-100); color: var(--ds-gray-600); font-size: var(--ds-text-sm); line-height: 1.6; }
.vg-feature-band-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(2rem, 5vw, 4rem); }
.vg-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-3); margin: 0; padding: 0; list-style: none; }
.vg-feature-grid li { padding: var(--ds-space-4) var(--ds-space-5); border: var(--ds-border); border-radius: var(--ds-radius-lg); background: var(--ds-gray-25); color: var(--ds-gray-600); font-size: var(--ds-text-sm); line-height: 1.5; }
.vg-feature-grid strong { display: block; margin-bottom: .2rem; color: var(--ds-gray-900); font-weight: var(--ds-weight-semibold); }
#features-root .vg-section-link { margin: var(--ds-space-5) 0 0; }
#features-root .vg-section-link a { color: var(--ds-accent); font-weight: var(--ds-weight-semibold); text-decoration: underline; text-underline-offset: 4px; }
/* The last call on ink, wherever a page sets it (the homepage's own rules live in home.css). */
.vg-sales .vg-final-cta.vg-dark .vg-final-card { border: 0; background: transparent; box-shadow: none; }
.vg-sales .vg-final-cta.vg-dark .vg-final-card h2 { color: var(--ds-white); }
.vg-sales .vg-final-cta.vg-dark .vg-final-card p { color: var(--ds-ink-text-2); }
@media (max-width: 860px) {
    .vg-feature-band-grid, .vg-feature-grid { grid-template-columns: minmax(0, 1fr); }
}
.vg-sales .vg-checklist a, .vg-feature-facts a { color: var(--ds-accent); font-weight: var(--ds-weight-semibold); text-decoration: underline; text-underline-offset: 3px; }
/* FIX-ROUND.md F4 review, on a phone: the anchor chips fade at the edge where they scroll on; the rule
   table gives its names the room. */
@media (max-width: 620px) {
    .vg-anchors .vg-shell { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); padding-right: 2rem; }
    /* The table becomes one row per rule: its name on its own line, then broken and net (F4 review). */
    .vg-rule-figure { padding: var(--ds-space-4); }
    .vg-rule-figure-head { flex-direction: column; gap: .2rem; }
    .vg-hero .vg-hero-figure.vg-rule-figure.vg-app-shot { padding: 0; }
    .vg-rule-figure-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .vg-rule-figure-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--ds-space-3); padding: .7rem 0; border-bottom: var(--ds-border-ink); }
    .vg-rule-figure-table :is(tbody, tfoot) :is(th, td) { padding: 0; border: 0; }
    .vg-rule-figure-table td:not(.is-loss) { color: var(--ds-ink-text-3); text-align: left; }
    .vg-rule-figure-table tbody tr { grid-template-columns: minmax(0, 1fr) auto auto; }
    .vg-rule-figure-table tbody th { grid-column: 1; align-self: center; }
    .vg-rule-figure-table tfoot tr { grid-template-columns: auto minmax(0, 1fr) auto; border-bottom: 0; }
    .vg-rule-figure-table tfoot th { grid-column: auto; }
    .vg-rule-figure-table tfoot td:not(.is-loss) { align-self: baseline; }
}
/* A text link's chevron never sits on a line of its own (FIX-ROUND.md F4 review): the link wraps as a
   block of text and the chevron stays with its last word. */
.vg-sales .vg-btn-secondary { display: inline; text-wrap: balance; }
.vg-sales .vg-btn-secondary::after { margin-left: .4rem; }
/* The comparison below its hero (FIX-ROUND.md F4 review): one accent primary, the other a text link, as on
   the other sales pages; the ink last call keeps its white primary and a light text link. */
.vg-compare-page .vg-cmp-btn.primary { background: var(--ds-accent); border-color: var(--ds-accent); box-shadow: var(--ds-shadow-button); }
.vg-compare-page .vg-cmp-btn.primary:hover { background: var(--ds-accent-hover); }
.vg-compare-page .vg-cmp-btn:not(.primary) { min-height: 0; padding: .35rem 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--ds-accent); font-weight: var(--ds-weight-semibold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.vg-compare-page .vg-cmp-btn:not(.primary)::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: .45rem; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); vertical-align: .12em; }
.vg-compare-page .vg-cmp-hero .vg-cmp-btn:not(.primary), .vg-compare-page .vg-cmp-cta-card .vg-cmp-btn:not(.primary) { color: var(--ds-blue-300); }
.vg-compare-page .vg-cmp-cta-card .vg-cmp-btn.primary { background: var(--ds-white); border-color: var(--ds-white); color: var(--ds-gray-900); }
@media (max-width: 460px) { .vg-compare-page .vg-cmp-actions .vg-cmp-btn:not(.primary) { width: auto; } }
/* The story pages' links in the system (FIX-ROUND.md F4 review): the hero's text link and its chevron
   inline, never on a line of their own. */
.vg-story-page .story-hero .story-btn:not(.primary):not([href^="#"]) { display: inline; text-wrap: balance; }
/* A primary button's chevron keeps its size in a tight button (FIX-ROUND.md F4 review). */
.vg-btn-primary::after { flex: 0 0 auto; }