/* The homepage (templates/landing.html; WOW.md, POLISH.md), on the design tokens (static/css/tokens.css).
   The first screen: the copy and its one action in a lead column centred on the product's This week
   panel in its ink theme, on the sample week (PLAN §37.2). Colour means one thing each (POLISH.md §2):
   the accent is actions and selection, red is loss and a rule break, green is gain and the plan. */

/* The first screen. A soft light and a hairline grid sit behind the product visual (finding 3). */
.vg-landing-page .vg-hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(1.25rem, 2.6vw, 2.5rem) 0 clamp(2rem, 3.4vw, 3rem); }
/* Its box is set in rem, not in the hero's height, so the hero growing never moves it (CLS). */
.vg-landing-page .vg-hero::before { content: ""; position: absolute; z-index: -1; top: -5rem; height: 62rem; right: -6%; width: 64%; pointer-events: none;
    background: radial-gradient(42% 40% at 50% 46%, rgba(84, 104, 148, .16) 0%, rgba(84, 104, 148, 0) 72%), var(--ds-grid-ink);
    background-size: 100% 100%, 48px 48px, 48px 48px;
    -webkit-mask-image: radial-gradient(56% 52% at 50% 48%, #000 26%, transparent 78%); mask-image: radial-gradient(56% 52% at 50% 48%, #000 26%, transparent 78%); }
/* The grid becomes the week (NEXT-LEVEL.md N9, static/js/hero_grid.mjs): the canvas covers the hero behind its content;
   once it draws, the CSS grid above gives way to it (its glow stays). Without JavaScript the CSS grid shows. */
.vg-landing-page .vg-hero-canvas { position: absolute; top: 0; left: 0; z-index: -1; pointer-events: none;
    -webkit-mask-image: linear-gradient(#000 calc(100% - 44px), transparent); mask-image: linear-gradient(#000 calc(100% - 44px), transparent); }
.vg-landing-page .vg-hero.has-grid-canvas::before { background: radial-gradient(42% 40% at 50% 46%, rgba(84, 104, 148, .16) 0%, rgba(84, 104, 148, 0) 72%); background-size: 100% 100%; }
/* While the cookie bar is up on a wide screen, the next section starts below it. */
@media (min-width: 1041px) { .vg-ck-pending.vg-landing-page .vg-hero { padding-bottom: calc(var(--vg-ck-reserve) + var(--ds-space-6)); } }
.vg-landing-page .vg-hero-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-areas: "lead fig" "lead more"; column-gap: clamp(2.5rem, 5.6vw, 5.5rem); row-gap: 0; align-items: start; }
.vg-hero-lead { grid-area: lead; align-self: center; padding-bottom: var(--ds-space-6); }
.vg-landing-page .vg-split-hero { grid-area: fig; }
.vg-landing-page .vg-split-more { grid-area: more; }
.vg-landing-page .vg-hero h1 { max-width: 10.5em; margin-top: var(--ds-space-5); font-size: clamp(2.125rem, 1.45rem + 2.5vw, 3.25rem); font-weight: var(--ds-weight-heavy); letter-spacing: var(--ds-tracking-display); line-height: var(--ds-leading-display); }
.vg-landing-page .vg-hero-sub { max-width: 28rem; margin-top: var(--ds-space-5); color: var(--ds-ink-text-2); font-size: var(--ds-text-lg); line-height: 1.5; }
.vg-hero-act .vg-actions { margin-top: var(--ds-space-10); }
.vg-hero-act .vg-btn-primary { min-width: 15rem; }
.vg-hero-alt { margin: var(--ds-space-4) 0 0; font-size: var(--ds-text-base); font-weight: var(--ds-weight-semibold); }
.vg-hero-alt a, .vg-final-alt a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.vg-hero-alt a::after, .vg-final-alt a::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; transition: transform var(--ds-dur-base) var(--ds-ease-out); }
.vg-hero-alt a:hover::after, .vg-final-alt a:hover::after { transform: translateX(3px) rotate(45deg); }
.vg-hero-note { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; margin: var(--ds-space-8) 0 0; padding: 0; list-style: none; color: var(--ds-ink-text-3); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); }
.vg-hero-note li { display: inline-flex; align-items: center; gap: .4rem; }
.vg-hero-note .ds-icon { color: var(--ds-ink-text-3); }
/* One accent in the first screen (HERO-ROUND.md H1): the action's blue. The eyebrow and the account-free link
   are the page's own neutrals; money is the only other colour (the loss figure and the gap). */
.vg-landing-page .vg-hero .vg-eyebrow { color: var(--ds-ink-text-3); }
.vg-landing-page .vg-hero .vg-eyebrow span { background: var(--ds-ink-text-3); }
.vg-landing-page .vg-hero .vg-hero-alt a { color: var(--ds-ink-text); text-decoration-color: rgba(195, 205, 219, .4); }
.vg-landing-page .vg-hero .vg-hero-alt a:hover { text-decoration-color: currentColor; }

/* The product panel in two parts, the result and its controls (finding 4). The result is the product itself
   (HERO-ROUND.md H1): the app's window (ds.css .vg-app) on This week. Its caption sits under the window. */
.vg-split-hero { position: relative; margin: 0; color: var(--ds-ink-text); }
.vg-split-more { position: relative; padding: var(--ds-space-4) var(--ds-space-6) var(--ds-space-5); border-top: 1px solid var(--ds-ink-line); border-radius: 0 0 var(--ds-radius-2xl) var(--ds-radius-2xl); background: #0a101e; color: var(--ds-ink-text); box-shadow: 0 0 0 1px rgba(148, 163, 184, .13), 0 40px 80px -24px rgba(0, 0, 0, .65); clip-path: inset(0 -120px -120px -120px); }
/* The first step (MATCH-ROUND.md M2): the week, the Rule Cost, the Split and one sentence. Two text sizes
   besides the figure (14 px: the title and the sentence; 12 px: every label, the chart's included) and one
   label weight; colour only for money (the figure and the gap, the chart's one fill). */
.vg-split-hero { font-weight: var(--ds-weight-medium); }
.vg-split-week { margin: 0; color: var(--ds-ink-text-3); font-size: var(--ds-text-xs); white-space: nowrap; }
.vg-split-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--ds-space-3) var(--ds-space-6); margin-top: var(--ds-space-5); }
.vg-split-cost { margin: 0; }
.vg-split-cost > span { display: flex; align-items: center; gap: .5rem; color: var(--ds-ink-text-3); font-size: var(--ds-text-xs); letter-spacing: .06em; text-transform: uppercase; }
.vg-split-cost strong { display: block; margin-top: .55rem; color: var(--ds-ink-text); font-size: var(--ds-figure-xl); font-weight: var(--ds-weight-bold); line-height: .9; }
.vg-split-cost[data-sign="is-loss"] strong { color: var(--ds-loss-on-ink); }
.vg-split-cost[data-sign="is-gain"] strong { color: var(--ds-gain-on-ink); }
.vg-split-hero .vg-split-key { margin: 0 0 .3rem; }
.vg-split-meaning { margin: var(--ds-space-4) 0 0; color: var(--ds-ink-text-2); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-regular); line-height: 1.5; }
.vg-split-meaning span { color: var(--ds-ink-text); }
/* The calm chart's markers: neutral, like its lines. */
.vg-split-hero .sc-point.is-plan { background: var(--ds-ink-text); }
.vg-split-hero .sc-point.is-traded { background: #7d8aa1; }
.vg-split-hero .sc-breakpoint:hover::after, .vg-split-hero .sc-breakpoint:focus-visible::after, .vg-split-hero .sc-breakpoint[aria-expanded="true"]::after { box-shadow: 0 0 0 2px rgba(242, 245, 249, .85), 0 0 0 6px rgba(148, 163, 184, .2); }
/* One dot per trade, with its legend (finding 12), in the second step. */
.vg-split-legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-2) var(--ds-space-4); margin-top: var(--ds-space-4); }
.vg-split-legend p { margin: 0; color: var(--ds-ink-text-3); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); }
.vg-split-legend .is-kept { color: var(--ds-gain-on-ink); }
.vg-split-legend .is-broke { color: var(--ds-loss-on-ink); }
.vg-split-dots { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; min-height: 8px; }
.vg-dot { width: 8px; height: 8px; border-radius: 50%; transition: transform var(--ds-dur-slow) var(--ds-ease-out), background-color var(--ds-dur-base) var(--ds-ease-out); }
.vg-dot.is-followed { background: var(--ds-gain-on-ink); order: 0; }
.vg-dot.is-broke { background: var(--ds-loss); box-shadow: 0 0 0 2px rgba(229, 72, 77, .22); order: 1; }
.vg-split-hero.is-start ~ .vg-split-more .vg-wf-bar { transform: scaleX(0); }
.vg-split-hero.is-start ~ .vg-split-more .vg-dot { transform: translateY(-10px); background: var(--ds-ink-text-3); }
.vg-split-chart { margin-top: var(--ds-space-5); }
.vg-split-line { aspect-ratio: 640 / 216; }
/* A phone's chart is taller (split_chart.mjs PHONE_HEIGHT), from the first paint; until the script places
   the annotation, it sits where the phone's static chart draws its dot (FIX-ROUND.md F1.4). */
@media (max-width: 560px) {
    .vg-split-line { aspect-ratio: 640 / 286; }
    .vg-split-note:not(.is-placed) { left: var(--phone-left) !important; top: var(--phone-top) !important; }
}
.vg-split-line img, .vg-split-line svg { display: block; width: 100%; height: 100%; }
/* The costliest break, on its dot: a quiet label on the card's own surface (MATCH-ROUND.md M2: no box,
   no colour), its lower right corner over the dot with a hairline down to it. */
.vg-split-note { position: absolute; z-index: 1; margin: 0; padding: .15rem .4rem; transform: translate(calc(-100% + 8px), calc(-100% - 14px)); border-radius: var(--ds-radius-sm); background: rgba(13, 20, 38, .92); color: var(--ds-ink-text-2); font-size: var(--ds-text-xs); line-height: 1.35; white-space: nowrap; pointer-events: none; }
.vg-split-note::after { content: ""; position: absolute; right: 7px; bottom: -12px; width: 1px; height: 10px; background: rgba(195, 205, 219, .45); }
.vg-split-note[hidden] { display: none; }
.vg-split-hero figcaption { margin-top: var(--ds-space-3); padding: 0 var(--ds-space-1); color: var(--ds-ink-text-3); font-size: var(--ds-text-xs); line-height: 1.5; }

/* The panel's second part: the view, the scrubber, the rules and the one to fix. In the first step's palette
   (HERO-ROUND.md H1): on plan in the white of its line, as traded in its slate, the rule breaks in the loss
   red; the followed trades' dots slate, the broken ones red; the switches in the action's blue. */
.vg-split-more .vg-wf-row.is-plan .vg-wf-bar, .vg-split-more .vg-wf-row.is-cost[data-sign="is-gain"] .vg-wf-bar { background: var(--ds-ink-text); }
.vg-split-more .vg-wf-row.is-plan strong, .vg-split-more .vg-wf-row.is-cost[data-sign="is-gain"] strong { color: var(--ds-ink-text); }
.vg-split-more .vg-wf-row.is-all .vg-wf-bar { background: #7d8aa1; }
.vg-split-more .vg-dot.is-followed { background: #7d8aa1; }
.vg-split-more .vg-split-legend :is(.is-kept, .is-broke) { color: var(--ds-ink-text-2); }
.sc-controls[hidden] { display: none; }
.vg-split-switches { border: 0; margin: var(--ds-space-4) 0 0; padding: var(--ds-space-4) 0 0; min-width: 0; border-top: var(--ds-border-ink); }
.vg-split-switches legend { float: left; width: 100%; padding: 0; margin-bottom: 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); text-transform: uppercase; }
.vg-split-chips { clear: both; display: flex; flex-wrap: wrap; gap: .4rem; }
/* A switch, not a browser checkbox: the input stays for keyboards and screen readers. On is the
   accent with the knob right; off is grey with the knob left and the rule struck out (finding 13). */
.vg-split-chips label { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; gap: .45rem; min-height: 32px; padding: 0 .7rem 0 .4rem; border: 1px solid var(--ds-ink-line-strong); border-radius: var(--ds-radius-pill); background: rgba(148, 163, 184, .05); color: var(--ds-ink-text-3); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); white-space: nowrap; cursor: pointer; transition: border-color var(--ds-dur-base) var(--ds-ease-out), background var(--ds-dur-base) var(--ds-ease-out), color var(--ds-dur-base) var(--ds-ease-out); }
.vg-split-chips label:hover { border-color: rgba(148, 163, 184, .45); }
.vg-split-chips label:not(:has(input:checked)) { text-decoration: line-through; text-decoration-color: rgba(147, 160, 181, .7); }
.vg-split-chips input { position: relative; flex: 0 0 auto; width: 26px; height: 16px; margin: 0; border-radius: var(--ds-radius-pill); background: rgba(148, 163, 184, .32); -webkit-appearance: none; appearance: none; cursor: pointer; transition: background var(--ds-dur-base) var(--ds-ease-out); }
.vg-split-chips input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--ds-ink-text-2); transition: transform var(--ds-dur-base) var(--ds-ease-out), background var(--ds-dur-base) var(--ds-ease-out); }
.vg-split-chips input:checked { background: var(--ds-accent); }
.vg-split-chips input:checked::after { transform: translateX(10px); background: var(--ds-white); }
.vg-split-chips label:has(input:checked) { border-color: rgba(122, 167, 255, .4); background: rgba(61, 126, 245, .1); color: var(--ds-ink-text); }
.vg-split-chips input:focus-visible { box-shadow: var(--ds-ring-ink); }
.vg-split-chips input:disabled { cursor: default; }
.vg-split-hint { margin: var(--ds-space-2) 0 0; color: var(--ds-ink-text-3); font-size: var(--ds-text-xs); }
.vg-split-fix { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .65rem; margin: var(--ds-space-4) 0 0; padding: var(--ds-space-3) var(--ds-space-4); border: 1px solid var(--ds-ink-line-strong); border-radius: var(--ds-radius-md); background: var(--ds-surface-ink-2); color: var(--ds-ink-text); font-size: var(--ds-text-sm); line-height: 1.45; }
.vg-split-fix strong { 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; }

/* The exports it reads (POLISH.md finding 16): text chips, no marks; the trademark notice is the
   footnote of the line's asterisk. */
.vg-landing-page .vg-connect-band { padding: var(--ds-space-8) 0 var(--ds-space-6); border-bottom: var(--ds-border); background: var(--ds-white); }
.vg-connect-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--ds-space-3) var(--ds-space-5); }
.vg-landing-page .vg-connect-title { margin: 0; color: var(--ds-gray-600); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold); letter-spacing: 0; text-transform: none; }
.vg-connect-title sup { margin-left: 1px; color: var(--ds-gray-400); }
.vg-landing-page .vg-connect-wall { margin: 0; gap: var(--ds-space-2); }
.vg-landing-page .vg-connect-chip { gap: .45rem; min-height: 32px; padding: 0 .8rem 0 .65rem; border: var(--ds-border); background: var(--ds-gray-25); color: var(--ds-gray-800); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); box-shadow: var(--ds-shadow-xs); }
.vg-landing-page .vg-connect-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ds-gain); box-shadow: 0 0 0 3px rgba(16, 185, 129, .15); }
.vg-connect-link { color: var(--ds-accent); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; white-space: nowrap; }
/* The notice as a quiet footnote (FIX-ROUND.md F3.2): under a short rule, a narrower measure, the muted
   tone; 13 px is the trademark test's floor. The wording is unchanged. */
.vg-landing-page .vg-connect-band [data-platform-trademarks] { max-width: 52rem !important; margin: var(--ds-space-6) auto 0 !important; padding-top: var(--ds-space-4); background: linear-gradient(var(--ds-gray-200), var(--ds-gray-200)) top center / 3rem 1px no-repeat; color: var(--ds-gray-500) !important; font-size: .8125rem !important; font-weight: var(--ds-weight-regular) !important; line-height: 1.6 !important; text-align: center; text-wrap: balance; }
.vg-landing-page .vg-connect-band [data-platform-trademarks]::before { content: "* "; }

/* Try it now (finding 18): one action beside the Trade Check's result on the sample week. */
.vg-section-tight { padding: clamp(2rem, 4vw, 3.5rem) 0; }
.vg-drop.vg-dark { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: var(--ds-space-8) clamp(2rem, 5vw, 4rem); max-width: none; margin: 0; padding: clamp(1.75rem, 3.5vw, 3rem); border: 1px solid var(--ds-ink-line); border-radius: var(--ds-radius-2xl); box-shadow: var(--ds-shadow-lg); transition: border-color var(--ds-dur-base) var(--ds-ease-out), box-shadow var(--ds-dur-base) var(--ds-ease-out); }
.vg-drop.vg-dark.is-dragging { border-color: var(--ds-accent-on-ink); box-shadow: 0 0 0 4px rgba(61, 126, 245, .25), var(--ds-shadow-lg); }
.vg-drop h2 { margin: 0; font-size: var(--ds-text-2xl); font-weight: var(--ds-weight-bold); letter-spacing: var(--ds-tracking-tight); line-height: var(--ds-leading-tight); }
.vg-drop .vg-drop-hint { display: flex; align-items: center; gap: .5rem; margin: var(--ds-space-3) 0 0; color: var(--ds-ink-text-2); font-size: var(--ds-text-base); }
.vg-drop .vg-drop-hint .ds-icon { color: var(--ds-gain-on-ink); }
.vg-drop-copy .vg-actions { margin-top: var(--ds-space-6); }
.vg-drop .vg-drop-alt { margin: var(--ds-space-4) 0 0; color: var(--ds-ink-text-3); font-size: var(--ds-text-sm); line-height: 1.7; }
.vg-drop .vg-drop-alt a { color: var(--ds-ink-text-2); text-decoration-color: rgba(195, 205, 219, .35); }
.vg-drop .vg-drop-status { margin: var(--ds-space-3) 0 0; }
.vg-drop-result { margin: 0; padding: var(--ds-space-5) var(--ds-space-6); border-radius: var(--ds-radius-xl); background: var(--ds-surface-ink); box-shadow: var(--ds-shadow-ink); }
.vg-drop-result p { margin: 0; }
.vg-drop-result-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ds-space-3); padding-bottom: var(--ds-space-3); border-bottom: var(--ds-border-ink); color: var(--ds-ink-text); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold); }
.vg-drop-result-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-drop-result-cost { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ds-space-3); margin-top: var(--ds-space-4) !important; }
.vg-drop-result-cost > span { 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-drop-result-cost strong { color: var(--ds-loss-on-ink); font-size: var(--ds-figure-lg); font-weight: var(--ds-weight-bold); line-height: 1; }
.vg-drop-result-dots { display: flex; flex-wrap: wrap; gap: 5px; margin-top: var(--ds-space-4); }
.vg-drop-result-line { margin-top: var(--ds-space-3) !important; color: var(--ds-ink-text-2); font-size: var(--ds-text-sm); }

/* Why keep Pro (#pro-ai): the copy, and the sample week read through the Pro API in the same ink card. */
.vg-pro-ai-copy .vg-section-link { margin-top: var(--ds-space-5); }
.vg-ai-sample .vg-ai-turn { margin-top: var(--ds-space-4); color: var(--ds-ink-text-2); font-size: var(--ds-text-sm); line-height: 1.6; }
.vg-ai-sample .vg-ai-turn.is-you { color: var(--ds-ink-text); font-family: var(--ds-font-mono); }
.vg-ai-sample .vg-ai-who { display: block; margin-bottom: .2rem; color: var(--ds-ink-text-3); font-family: var(--ds-font-sans); font-size: var(--ds-text-2xs); font-weight: var(--ds-weight-semibold); letter-spacing: var(--ds-tracking-caps); text-transform: uppercase; }
.vg-ai-sample .vg-ai-turn strong { color: var(--ds-ink-text); font-weight: var(--ds-weight-semibold); }
.vg-ai-sample figcaption { margin-top: var(--ds-space-4); padding-top: var(--ds-space-3); border-top: var(--ds-border-ink); color: var(--ds-ink-text-3); font-size: var(--ds-text-xs); }

/* Who builds it (finding 19): a founder card, and a separate grid of facts, one icon each. */
.vg-founder-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.vg-founder-col h2 { margin-bottom: 0; }
.vg-founder { margin-top: var(--ds-space-6); padding: var(--ds-space-6); border: var(--ds-border); border-radius: var(--ds-radius-xl); background: var(--ds-white); box-shadow: var(--ds-shadow-md); }
.vg-founder p { margin: 0; color: var(--ds-gray-700); font-size: var(--ds-text-md); line-height: 1.6; }
.vg-founder-id { display: flex; align-items: center; gap: var(--ds-space-3); margin-bottom: var(--ds-space-4); }
/* The founder's mark (FIX-ROUND.md F3.4): a designed monogram, never a stock or generated photo. */
.vg-founder-id .vg-founder-mono, .vg-founder-mono { position: relative; display: grid; place-items: center; flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(120% 120% at 30% 20%, #26345a 0%, #0b1120 70%); color: var(--ds-white); font-size: 1.375rem; font-weight: var(--ds-weight-heavy); letter-spacing: -.04em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 2px var(--ds-white), 0 0 0 3px rgba(61, 126, 245, .45), var(--ds-shadow-sm); }
.vg-founder .vg-founder-id p { font-size: var(--ds-text-sm); line-height: 1.3; }
.vg-founder-id strong { display: block; color: var(--ds-gray-900); font-size: var(--ds-text-base); font-weight: var(--ds-weight-semibold); }
.vg-founder-id span { color: var(--ds-gray-500); }
.vg-founder .vg-founder-links { margin-top: var(--ds-space-4); color: var(--ds-gray-500); font-size: var(--ds-text-sm); }
.vg-founder-links a { color: var(--ds-accent); font-weight: var(--ds-weight-semibold); }
.vg-trust-col .vg-section-link { margin-top: var(--ds-space-5); text-align: left; }
/* A section's own text link: the accent, underlined, with the chevron. */
.vg-landing-page .vg-section-link { margin: var(--ds-space-8) 0 0; font-size: var(--ds-text-base); }
.vg-landing-page .vg-section-link a { color: var(--ds-accent); font-weight: var(--ds-weight-semibold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.vg-landing-page .vg-section-link a::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; }
.vg-trust3 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-3); margin: 0; }
.vg-trust3 p { position: relative; margin: 0; padding: 4.25rem var(--ds-space-5) var(--ds-space-5); border: var(--ds-border); border-radius: var(--ds-radius-lg); background: var(--ds-white); box-shadow: var(--ds-shadow-sm); color: var(--ds-gray-600); font-size: var(--ds-text-sm); line-height: 1.5; }
.vg-trust3 p::before { content: ""; position: absolute; left: var(--ds-space-5); top: var(--ds-space-5); width: 36px; height: 36px; border-radius: 10px; background: var(--ds-blue-50); box-shadow: inset 0 0 0 1px var(--ds-blue-100); }
.vg-trust3 p::after { content: ""; position: absolute; left: calc(var(--ds-space-5) + 9px); top: calc(var(--ds-space-5) + 9px); width: 18px; height: 18px; background: var(--ds-accent); -webkit-mask: var(--vg-trust-icon) center / contain no-repeat; mask: var(--vg-trust-icon) center / contain no-repeat; }
.vg-trust3 p:nth-child(1) { --vg-trust-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9h14'/%3E%3Cpath d='M5 15h14'/%3E%3C/svg%3E"); }
.vg-trust3 p:nth-child(2) { --vg-trust-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); }
.vg-trust3 p:nth-child(3) { --vg-trust-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='5' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E"); }
.vg-trust3 p:nth-child(4) { --vg-trust-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E"); }
.vg-trust3 strong { display: block; margin-bottom: .2rem; color: var(--ds-gray-900); font-size: var(--ds-text-base); font-weight: var(--ds-weight-semibold); line-height: 1.35; }

/* Pricing (finding 20): the price, then what it buys, then the one action and the guarantee. */
/* Pricing: its heading centred over the Pro card, no half-empty column. */
.vg-plans-grid { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--ds-space-8); text-align: center; }
.vg-plans-grid .vg-eyebrow { justify-content: center; }
.vg-plans-grid .vg-price-band.one { width: 100%; max-width: 480px; text-align: left; }
.vg-plans-grid .vg-price-note { margin-top: var(--ds-space-3); color: var(--ds-gray-600); font-size: var(--ds-text-md); line-height: 1.6; }
.vg-plans-grid .vg-price-note a { color: var(--ds-accent); font-weight: var(--ds-weight-semibold); }
.vg-plans-grid .vg-price-band.one { margin: 0; }
.vg-price-card.primary { position: relative; display: flex; flex-direction: column; gap: var(--ds-space-4); padding: var(--ds-space-8); border: var(--ds-border); border-radius: var(--ds-radius-2xl); background: var(--ds-white); box-shadow: var(--ds-shadow-lg); overflow: hidden; }
.vg-price-card.primary::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--ds-blue-500), var(--ds-gain)); }
.vg-price-card.primary > strong { color: var(--ds-accent); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); letter-spacing: var(--ds-tracking-caps); text-transform: uppercase; }
.vg-price-amount { color: var(--ds-gray-900); font-size: var(--ds-figure-lg); font-weight: var(--ds-weight-bold); letter-spacing: var(--ds-tracking-figure); line-height: 1; }
.vg-price-amount .vg-price-unit { margin-left: .35rem; color: var(--ds-gray-500); font-size: var(--ds-text-base); font-weight: var(--ds-weight-medium); letter-spacing: 0; }
.vg-price-amount small { display: block; margin-top: var(--ds-space-3); color: var(--ds-gray-600); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); letter-spacing: 0; }
.vg-price-list { display: grid; gap: .6rem; margin: 0; padding: var(--ds-space-4) 0 0; border-top: 1px solid var(--ds-gray-100); list-style: none; }
.vg-price-list li { display: flex; align-items: center; gap: .6rem; color: var(--ds-gray-700); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); }
.vg-price-list .ds-icon { width: 16px; height: 16px; color: var(--ds-gain-text); }
.vg-price-card .vg-btn { margin-top: var(--ds-space-1); }
.vg-price-risk { margin: 0; color: var(--ds-gray-500); font-size: var(--ds-text-xs); line-height: 1.5; text-align: center; }
.vg-founding { margin: 0; padding: var(--ds-space-3) var(--ds-space-4); border: 1px solid var(--ds-blue-100); border-radius: var(--ds-radius-md); background: var(--ds-blue-50); color: var(--ds-gray-700); font-size: var(--ds-text-sm); }

/* The last call (finding 21). */
.vg-final-cta.vg-dark .vg-final-card { border: 0; background: transparent; }
.vg-final-cta.vg-dark h2 { font-size: var(--ds-text-3xl); letter-spacing: var(--ds-tracking-tight); }

/* A calmer first screen (FIX-ROUND.md F3.1): on a wide screen the first screen is the copy and the card's
   result (the figures, the dots, the chart), centred together; the card's second step, the view, the
   scrubber, the rule switches and the rule to fix, is a full-width panel just below it. Every
   interaction stays. */
@media (min-width: 1041px) {
    .vg-landing-page .vg-hero-grid { grid-template-areas: "lead fig" "more more"; grid-template-rows: minmax(calc(100svh - var(--ds-header) - 2.5rem), auto) auto; row-gap: var(--ds-space-6); }
    .vg-landing-page .vg-split-hero { align-self: center; }
    .vg-landing-page .vg-split-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--ds-space-8) var(--ds-space-10); padding: var(--ds-space-6); border-top: 0; border-radius: var(--ds-radius-2xl); background: var(--ds-surface-ink); box-shadow: var(--ds-shadow-ink); clip-path: none; }
    .vg-split-more .sc-controls { flex-direction: column; align-items: stretch; gap: var(--ds-space-3); }
    .vg-split-more .sc-scrub { flex: 0 0 auto; }
    .vg-split-more .vg-split-switches { margin: 0; padding: 0; border-top: 0; }
    .vg-split-more .vg-split-fix { margin: 0; flex-direction: column; align-items: flex-start; gap: var(--ds-space-2); }
    .vg-ck-pending.vg-landing-page .vg-hero { padding-bottom: clamp(2rem, 3.4vw, 3rem); }
}
@media (max-width: 1040px) {
    .vg-landing-page .vg-hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "fig" "act" "more"; row-gap: var(--ds-space-5); }
    .vg-hero-lead { display: contents; }
    .vg-landing-page .vg-hero-copy { grid-area: copy; }
    .vg-landing-page .vg-hero-act { grid-area: act; }
    .vg-landing-page .vg-hero::before { top: 9rem; bottom: auto; height: 34rem; right: -20%; width: 120%; }
    .vg-split-hero, .vg-split-more { max-width: 680px; clip-path: none; }
    .vg-split-more { border-radius: var(--ds-radius-xl); }
    .vg-split-more { border-top: 0; background: var(--ds-surface-ink); box-shadow: var(--ds-shadow-ink); }
    .vg-split-more .vg-split-switches { margin-top: var(--ds-space-3); }
    .vg-split-sum + .sc-controls { margin-top: var(--ds-space-4); padding-top: var(--ds-space-4); border-top: var(--ds-border-ink); }
    /* While the cookie bar is up, the panel's controls start below the first screen: at once below
       the fold (so nothing in view moves), then exactly there (hero_split.mjs sets --vg-more-gap). */
    .vg-ck-pending .vg-split-more { margin-top: var(--vg-more-gap, max(var(--vg-ck-reserve), calc(100svh - 34rem))); }
    .vg-hero-act .vg-actions { margin-top: 0; }
    .vg-founder-grid, .vg-plans-grid, .vg-drop.vg-dark { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .vg-landing-page .vg-hero { padding-top: var(--ds-space-3); }
    .vg-landing-page .vg-hero h1 { max-width: none; margin-top: var(--ds-space-2); font-size: clamp(1.75rem, 8.1vw, 2rem); }
    .vg-landing-page .vg-hero-sub { margin-top: var(--ds-space-2); font-size: .9375rem; line-height: 1.45; }
    .vg-landing-page .vg-hero-grid { row-gap: var(--ds-space-5); }
    .vg-hero-act .vg-btn-primary { min-height: 46px; }
    .vg-hero-act .vg-btn-primary { width: 100%; min-width: 0; }
    .vg-hero-alt { margin-top: var(--ds-space-3); text-align: center; font-size: var(--ds-text-sm); }
    .vg-hero-note { display: none; }
    /* The week is the page bar's selector on a phone (ds.css .vg-app-select.is-phone), so not repeated. */
    .vg-app-body > .vg-split-week { display: none; }
    .vg-split-more { padding: var(--ds-space-4); border-radius: var(--ds-radius-lg); }
    .vg-split-top { display: block; margin-top: 0; }
    .vg-split-cost { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ds-space-3); }
    .vg-split-cost strong { margin-top: 0; font-size: 2.25rem; }
    .vg-split-key { margin: var(--ds-space-2) 0 0; }
    .vg-wf { gap: .3rem; }
    .vg-wf-row { grid-template-columns: 4.75rem minmax(0, 1fr) 3.75rem; gap: var(--ds-space-2); }
    .vg-split-chart { margin-top: var(--ds-space-3); }
    .vg-split-meaning { margin-top: var(--ds-space-2); line-height: 1.45; }
    /* On a phone the note docks in the plot's empty top-left corner, above both lines, with its dot named
       in its text (FIX-ROUND.md F4 review: placed on the dot it crossed the line's end). */
    .vg-split-note, .vg-split-note:not(.is-placed) { left: 0 !important; top: 0 !important; transform: none; padding: .1rem 0; }
    .vg-split-note::after { display: none; }
    .vg-split-hero figcaption { margin-top: var(--ds-space-2); }
    .sc-controls { gap: var(--ds-space-2) var(--ds-space-3); }
    .sc-segment button { min-height: 30px; padding: 0 .6rem; }
    /* The three switches wrap inside the card, never cut at its edge (FIX-ROUND.md F4 review). */
    .vg-split-chips { flex-wrap: wrap; }
    .vg-split-chips label { min-height: 32px; }
    .vg-split-fix { padding: var(--ds-space-2) var(--ds-space-3); font-size: var(--ds-text-xs); }
    .vg-drop-copy .vg-btn { width: 100%; }
    .vg-trust3 { grid-template-columns: 1fr; }
    .vg-trust3 p { padding: var(--ds-space-4) var(--ds-space-4) var(--ds-space-4) 4rem; }
    .vg-trust3 p::before { left: var(--ds-space-4); top: var(--ds-space-4); }
    .vg-trust3 p::after { left: calc(var(--ds-space-4) + 9px); top: calc(var(--ds-space-4) + 9px); }
    .vg-price-card.primary { padding: var(--ds-space-6); }
}
/* The Try-it card's head on a phone: each label on one line (FIX-ROUND.md F4 review). */
.vg-drop-result-head span { white-space: nowrap; }
@media (max-width: 400px) { .vg-drop-result-head { flex-wrap: wrap; } }

/* ---- The product, on the sample week (NEXT-LEVEL.md N9; static/js/home_live.mjs, static/css/vg_live.css) ------------ */
/* The year and the clock are drawn by the server; until their styles have come they stay out of sight (a visitor never
   reaches them that soon: they load 900 px ahead), and without script the page's <noscript> styles show them. */
.vg-product .vg-live:not(.is-ready) { visibility: hidden; }
.vg-product-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(1rem, 2.4vw, 1.75rem); align-items: start; margin-top: var(--ds-space-8); }
.vg-product .ty-home { padding: 0; }
.vg-product .ty-home .ty-grid { max-width: 26rem; }
.vg-product .ty-home .ty-wrap { padding: .4rem 0; }
.vg-product .stats-fig-home .stats-clock { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
.vg-product .stats-fig-home .stats-clock-svg { max-width: 19rem; margin: 0 auto; }
.vg-product .stats-fig-home .stats-fig-head .focus-muted { font-size: .8125rem; }
@media (max-width: 1040px) { .vg-product-grid { grid-template-columns: minmax(0, 1fr); } }
/* This week's instrument in the tour's first step, in place of its screenshot. */
.vg-live-slot .vg-live-fallback[hidden] { display: none; }
.vg-live-week { padding: 1rem 1rem .8rem; }
.vg-live-week .this-week { margin: 0; }

/* ---- How a week goes: each figure draws as it comes into view, once, and stays drawn ------------------------------ */
.vg-story-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); margin: var(--ds-space-8) 0 0; padding: 0; list-style: none; }
.vg-story-step h3 { display: flex; align-items: center; gap: .6rem; margin: var(--ds-space-4) 0 0; font-size: var(--ds-text-lg); }
.vg-story-step p { margin: var(--ds-space-2) 0 0; color: var(--vg-muted-strong, var(--vg-muted)); line-height: 1.55; }
.vg-story-n { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border: 1px solid currentColor; border-radius: 50%; font-size: .8125rem; font-weight: 700; }
.vg-story-figure { justify-content: flex-start; padding: .8rem 0; }
.vg-story-figure .vg-ill { max-width: 15rem; }
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .vg-story-figure [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; animation: vg-story-draw linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
    }
}
@keyframes vg-story-draw { to { stroke-dashoffset: 0; } }
/* The script's fallback (no scroll-driven animations): undrawn until the figure is in view, then its one draw-in. */
.vg-story-figure.is-waiting [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; }
@media (max-width: 760px) { .vg-story-steps { grid-template-columns: minmax(0, 1fr); } }

/* ---- NEXT-FIX.md NF8: the home page's first screen and its story ------------------------------------------------- */
/* F8.3: the hero card's hero state is the Rule Cost, the two lines and the gap with their one annotation, and the sample
   label: the app's rail and page bar stay in the tour (its own This week instrument), and the week's line and the
   sentence under the chart are read to a screen reader, not drawn. */
.vg-landing-page #hero-split .vg-app-rail,
.vg-landing-page #hero-split .vg-app-bar { display: none; }
.vg-landing-page #hero-split .vg-split-week,
.vg-landing-page #hero-split .vg-split-meaning { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* F8.2: on a wide screen the first screen is composed to its bottom: the copy and the card centred in a row that stops
   short of the fold, so the opening of the card's second panel is in view under them. On a first visit the cookie bar
   is that bottom (the rule above keeps the panel clear of it), so the row stays at the fold until a choice is made. */
@media (min-width: 1041px) {
    .vg-landing-page:not(.vg-ck-pending) .vg-hero-grid { grid-template-rows: minmax(calc(100svh - var(--ds-header) - 10rem), auto) auto; }
}
/* F8.5: each step of the story is the product's own element on the sample, on the raised tier over its patch of the
   dot grid; its line draws as it scrolls in (the [pathLength] rule above). */
.vg-story-card { position: relative; width: 100%; max-width: 20rem; padding: .85rem .95rem .8rem; border: 1px solid var(--vg-hairline-strong); border-radius: var(--vg-radius-card, 16px); background: var(--vg-surface-raised); box-shadow: var(--vg-elev-raised); color: var(--vg-ink-2); font-size: .75rem; line-height: 1.35; font-variant-numeric: tabular-nums; text-align: left; }
.vg-story-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin: 0 0 .55rem; color: var(--vg-ink-1); font-weight: 650; }
.vg-story-file { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-story-chip { flex: 0 0 auto; padding: .1rem .45rem; border-radius: 999px; background: var(--vg-surface-quiet); color: var(--vg-ink-3); font-size: .6875rem; font-weight: 600; }
.vg-story-rows { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.vg-story-rows li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .35rem .5rem; border: 1px solid var(--vg-hairline); border-radius: 8px; background: var(--vg-surface-1); }
.vg-story-rows li span:nth-child(2) { display: inline-flex; align-items: center; gap: .35rem; overflow: hidden; color: var(--vg-ink-1); text-overflow: ellipsis; white-space: nowrap; }
.vg-story-rows b, .vg-story-cost b, .vg-story-head b { font-weight: 700; }
.vg-story-card .is-up { color: var(--vg-up); }
.vg-story-card .is-down { color: var(--vg-down); }
.vg-story-flag { position: relative; flex: 0 0 auto; display: inline-block; width: 7px; height: 11px; background: linear-gradient(var(--vg-break), var(--vg-break)) left/1.5px 100% no-repeat; }
.vg-story-flag::after { content: ""; position: absolute; left: 1.5px; top: 0; border-left: 6px solid var(--vg-break); border-top: 3px solid transparent; border-bottom: 3px solid transparent; }
.vg-story-more { margin: .3rem 0 0; color: var(--vg-ink-3); }
.vg-story-line { display: block; width: 100%; height: 48px; margin: .55rem 0 .2rem; overflow: visible; }
.vg-story-line.is-week { height: 56px; }
.vg-story-zero { stroke: var(--vg-ink-3); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.vg-story-traded { fill: none; stroke: var(--vg-traded); stroke-width: 1.75; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.vg-story-plan { fill: none; stroke: var(--vg-plan); stroke-width: 2.25; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.vg-story-gap { fill: var(--vg-break-tint); stroke: none; }
.vg-story-number { margin: 0; font-size: 1.75rem; font-weight: 750; letter-spacing: -.02em; line-height: 1.05; }
.vg-story-key { display: flex; gap: .9rem; margin: 0; color: var(--vg-ink-3); font-size: .6875rem; }
.vg-story-key span { display: inline-flex; align-items: center; gap: .35rem; }
.vg-story-key i { display: inline-block; width: 12px; height: 2px; border-radius: 1px; }
.vg-story-key .is-plan i { background: var(--vg-plan); }
.vg-story-key .is-traded i { background: var(--vg-traded); }
.vg-story-cost { display: flex; justify-content: space-between; margin: .25rem 0 0; color: var(--vg-ink-1); font-weight: 600; }
.vg-story-commit { margin: .45rem 0 0; padding: .45rem .55rem; border-left: 2px solid var(--vg-accent); border-radius: 0 8px 8px 0; background: var(--vg-surface-quiet); color: var(--vg-ink-1); }
.vg-story-commit span { display: block; color: var(--vg-ink-3); font-size: .6875rem; font-weight: 650; }
.vg-story-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: .55rem 0 0; color: var(--vg-ink-2); }
.vg-story-button { flex: 0 0 auto; padding: .3rem .65rem; border-radius: 8px; background: var(--vg-accent); color: #fff; font-size: .6875rem; font-weight: 700; }
.vg-story-label { margin: var(--ds-space-6) 0 0; color: var(--vg-muted, var(--ds-gray-500)); font-size: var(--ds-text-xs); }
.vg-story-figure { justify-content: center; }