/* Sales pages: the homepage, features, exports, prop firms, futures and security.
   Scoped to body.vg-sales; extracted from the homepage so every sales page looks alike. */
.vg-sales {
    color-scheme: light;
    /* The page's names for the design tokens (static/css/tokens.css, WOW.md §2). */
    --vg-bg: var(--ds-white);
    --vg-soft: var(--ds-gray-50);
    --vg-soft-2: var(--ds-gray-100);
    --vg-text: var(--ds-gray-900);
    --vg-muted: var(--ds-gray-500);
    --vg-muted-strong: var(--ds-gray-600);
    --vg-line: var(--ds-gray-200);
    --vg-line-strong: var(--ds-gray-300);
    --vg-blue: var(--ds-blue-600);
    --vg-blue-strong: var(--ds-blue-700);
    --vg-blue-soft: var(--ds-blue-50);
    --vg-red: #b4123b;
    --vg-green: var(--ds-gain-text);
    --bg: var(--vg-bg);
    --bg-soft: var(--vg-soft);
    --panel: #ffffff;
    --line: var(--vg-line);
    --text: var(--vg-text);
    --muted: var(--vg-muted);
    --blue: var(--vg-blue);
    background: var(--vg-bg);
}
.vg-sales .brand, .vg-sales .footer strong { color: var(--vg-text); }
.vg-sales .footer a:hover { color: var(--vg-blue); }
.vg-sales .btn-secondary { background: #fff; border-color: var(--vg-line); color: var(--vg-text); }
.vg-sales .btn-primary { background: var(--vg-blue); border-color: var(--vg-blue); color: #fff; }
.vg-sales .btn-primary:hover { background: var(--vg-blue-strong); border-color: var(--vg-blue-strong); }
.vg-sales .footer { background: #fff; border-top-color: var(--vg-line); }
.vg-sales .footer a, .vg-sales .footer .muted { color: var(--vg-muted); }

.vg-sales-root { color: var(--vg-text); }
.vg-shell { width: var(--ds-shell); margin-inline: auto; }
.vg-eyebrow { display: inline-flex; align-items: center; gap: var(--ds-space-2); color: var(--ds-blue-700); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); letter-spacing: var(--ds-tracking-caps); text-transform: uppercase; }
.vg-eyebrow span { width: 6px; height: 6px; border-radius: var(--ds-radius-pill); background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); flex: 0 0 auto; }
.vg-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2); min-height: 48px; padding: 0 var(--ds-space-6); border: var(--ds-border-strong); border-radius: var(--ds-radius-pill); background: var(--ds-white); color: var(--ds-gray-900); font: inherit; font-size: var(--ds-text-base); font-weight: var(--ds-weight-semibold); letter-spacing: -.005em; line-height: 1.2; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background var(--ds-dur-base) var(--ds-ease-out), border-color var(--ds-dur-base) var(--ds-ease-out), box-shadow var(--ds-dur-base) var(--ds-ease-out), transform var(--ds-dur-fast) var(--ds-ease-out); }
.vg-btn:hover { border-color: var(--ds-gray-400); }
.vg-btn:active { transform: translateY(1px); }
.vg-btn-primary { background: var(--ds-blue-600); border-color: var(--ds-blue-600); color: var(--ds-white); box-shadow: var(--ds-shadow-button); }
.vg-btn-primary:hover { background: var(--ds-blue-700); border-color: var(--ds-blue-700); }
.vg-btn-primary::after { content: ""; width: 7px; height: 7px; margin-left: .15rem; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--ds-dur-base) var(--ds-ease-out); }
.vg-btn-primary:hover::after { transform: translateX(3px) rotate(45deg); }
.vg-btn:focus-visible, .vg-link-button:focus-visible, .vg-faq summary:focus-visible { outline: none; box-shadow: var(--ds-ring-offset); }
.vg-link-button { background: none; border: 0; padding: .4rem 0; color: var(--vg-blue); font: inherit; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.vg-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

.vg-hero { padding: clamp(2rem, 4.5vw, 4rem) 0 clamp(2.5rem, 5vw, 4.5rem); background: var(--ds-grad-soft); border-bottom: var(--ds-border); }
.vg-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.vg-hero-copy, .vg-hero-visual { min-width: 0; }
.vg-hero h1, .vg-section h2, .vg-final-card h2 { text-wrap: balance; }
.vg-hero h1 { margin: .85rem 0 0; max-width: 660px; font-size: clamp(2.4rem, 4.4vw, 4rem); font-weight: 850; letter-spacing: -.035em; line-height: 1.02; }
.vg-hero-sub { max-width: 600px; margin: 1.1rem 0 0; color: var(--vg-muted-strong); font-size: clamp(1rem, 1.25vw, 1.14rem); line-height: 1.62; }
.vg-drop { margin-top: 1.5rem; max-width: 600px; padding: 1.1rem 1.15rem 1rem; border: 1px solid var(--vg-line-strong); border-radius: 22px; background: #fff; transition: border-color .15s, background .15s; }
.vg-drop.is-dragging { border-color: var(--vg-blue); background: var(--vg-blue-soft); }
.vg-drop .vg-actions { margin-top: 0; }
.vg-drop-hint { margin: .8rem 0 0; color: var(--vg-muted-strong); font-size: .9rem; font-weight: 650; line-height: 1.5; }
.vg-drop-alt { margin: .35rem 0 0; color: var(--vg-muted); font-size: .86rem; line-height: 1.5; }
.vg-drop-alt a, .vg-hero-trust a { color: var(--vg-blue); font-weight: 750; text-decoration: underline; text-underline-offset: 2px; }
.vg-drop-status { margin: .6rem 0 0; padding: .6rem .75rem; border-radius: 12px; background: var(--vg-blue-soft); color: var(--vg-text); font-size: .88rem; font-weight: 650; line-height: 1.5; }
.vg-drop-status a { color: var(--vg-blue); font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.vg-hero-trust { margin: .9rem 0 0; color: var(--vg-muted); font-size: .84rem; font-weight: 650; line-height: 1.5; }

.vg-sample { max-width: 520px; margin-left: auto; padding: 1.3rem 1.35rem 1.2rem; border: 1px solid var(--vg-line-strong); border-radius: 24px; background: #fff; box-shadow: 0 24px 60px rgba(15,23,42,.1); }
.vg-sample-label { margin: 0; color: var(--vg-muted); font-size: .7rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.vg-sample-kicker { margin: .9rem 0 0; color: var(--vg-blue); font-size: .78rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.vg-sample-value { margin: .2rem 0 0; color: var(--vg-red); font-size: clamp(2.6rem, 6vw, 3.6rem); font-weight: 850; letter-spacing: -.035em; line-height: 1.02; font-variant-numeric: tabular-nums; }
.vg-sample-line { margin: .35rem 0 0; color: var(--vg-muted-strong); font-size: .98rem; line-height: 1.5; }
.vg-sample-rows { display: grid; gap: .5rem; margin: 1rem 0 0; }
.vg-sample-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .65rem .8rem; border: 1px solid var(--vg-line); border-radius: 12px; background: var(--vg-soft); }
.vg-sample-row span { color: var(--vg-muted-strong); font-size: .86rem; font-weight: 700; }
.vg-sample-row strong { font-size: 1.05rem; font-weight: 850; font-variant-numeric: tabular-nums; }
.vg-pos { color: var(--vg-green); }
.vg-neg { color: var(--vg-red); }
.vg-sample-focus { margin: 1rem 0 0; padding: .8rem .9rem; border-radius: 14px; background: #0f172a; color: #e2e8f0; font-size: .9rem; line-height: 1.5; }
.vg-sample-focus strong { display: block; color: #93c5fd; font-size: .7rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .2rem; }
.vg-sample-more { display: inline-block; margin-top: .9rem; color: var(--vg-blue); font-size: .9rem; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

.vg-section { padding: var(--ds-section) 0; }
.vg-section-soft { background: var(--ds-gray-50); border-top: var(--ds-border); border-bottom: var(--ds-border); }
.vg-section-head { max-width: 760px; margin: 0 0 2.25rem; }
.vg-section-head.centered { margin-inline: auto; text-align: center; }
.vg-section h2, .vg-final-card h2 { margin: var(--ds-space-3) 0 0; font-size: var(--ds-text-3xl); font-weight: var(--ds-weight-bold); letter-spacing: var(--ds-tracking-tight); line-height: var(--ds-leading-tight); }
.vg-section-head p, .vg-lead { margin: 1rem 0 0; color: var(--vg-muted-strong); font-size: 1.05rem; line-height: 1.65; }
.vg-section-head p a { color: var(--vg-blue); font-weight: 750; text-decoration: underline; text-underline-offset: 2px; }
.vg-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.vg-split.reverse { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.vg-checklist { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .75rem; }
.vg-checklist li { position: relative; padding-left: 1.8rem; color: var(--vg-muted-strong); line-height: 1.55; }
.vg-checklist li::before { content: ""; position: absolute; left: 0; top: .35rem; width: 1.05rem; height: 1.05rem; border-radius: 999px; background: #dcfce7; box-shadow: inset 0 0 0 4px #16a34a; }
.vg-checklist strong { color: var(--vg-text); }
.vg-shot { margin: 0; border: 1px solid var(--vg-line-strong); border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 24px 60px rgba(15,23,42,.1); }
.vg-shot picture { display: block; }
.vg-shot img { display: block; width: 100%; height: auto; }
.vg-shot video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #0b1526; }
.vg-shot figcaption { padding: .65rem .9rem; border-top: 1px solid var(--vg-line); background: var(--vg-soft); color: var(--vg-muted); font-size: .78rem; font-weight: 650; line-height: 1.45; }
.vg-shot figcaption strong { color: var(--vg-text); }
.vg-steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.vg-steps li { counter-increment: step; position: relative; padding: 1rem 1.1rem 1rem 3.4rem; border: 1px solid var(--vg-line); border-radius: 16px; background: #fff; color: var(--vg-muted-strong); line-height: 1.55; }
.vg-steps li::before { content: counter(step); position: absolute; left: 1rem; top: 1rem; width: 1.7rem; height: 1.7rem; border-radius: 999px; display: grid; place-items: center; background: var(--vg-blue-soft); color: var(--vg-blue-strong); font-weight: 850; font-size: .85rem; }
.vg-steps strong { display: block; color: var(--vg-text); }
.vg-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.vg-card { padding: 1.4rem; border: 1px solid var(--vg-line); border-radius: 18px; background: #fff; }
.vg-card h3 { margin: 0 0 .55rem; font-size: 1.12rem; font-weight: 850; }
.vg-card p { margin: 0; color: var(--vg-muted-strong); font-size: .94rem; line-height: 1.6; }
.vg-more-link { display: inline-block; margin-top: 1.4rem; color: var(--vg-blue); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.vg-built-for { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.vg-built-for a { padding: .45rem .8rem; border: 1px solid var(--vg-line-strong); border-radius: 999px; background: #fff; color: var(--vg-muted-strong); font-size: .84rem; font-weight: 750; }
.vg-built-for a:hover { border-color: var(--vg-blue); color: var(--vg-blue); }
.vg-demo-line { margin: 1.1rem 0 0; color: var(--vg-muted); font-size: .9rem; line-height: 1.6; }
.vg-demo-line form { display: inline; }

.vg-connect-band { padding: clamp(1.75rem, 3.5vw, 2.75rem) 0; border-bottom: var(--ds-border); background: var(--ds-white); text-align: center; }
.vg-connect-title { margin: 0; color: var(--ds-gray-500); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); letter-spacing: var(--ds-tracking-caps); text-transform: uppercase; }
.vg-connect-wall { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ds-space-2) var(--ds-space-3); margin-top: var(--ds-space-4); }
.vg-connect-chip { display: inline-flex; align-items: center; min-height: 34px; padding: 0 var(--ds-space-4); border: var(--ds-border); border-radius: var(--ds-radius-pill); background: var(--ds-gray-25); color: var(--ds-gray-700); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold); white-space: nowrap; }
.vg-connect-sub { margin: 1.1rem 0 0; color: var(--vg-muted); font-size: .9rem; }
.vg-connect-sub a { color: var(--vg-blue); font-weight: 800; }
.vg-connect-band .vg-platform-trademarks { margin-inline: auto !important; }

.vg-price-band { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; max-width: 860px; margin: 0 auto; }
.vg-price-band.one { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
.vg-price-card { display: flex; flex-direction: column; gap: .6rem; padding: 1.6rem; border: 1px solid var(--vg-line); border-radius: 20px; background: #fff; }
.vg-price-card.primary { border-color: rgba(0,88,188,.4); box-shadow: 0 18px 44px rgba(0,88,188,.1); }
.vg-price-card strong { font-size: .85rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--vg-muted-strong); }
.vg-price-card.primary strong { color: var(--vg-blue-strong); }
.vg-price-amount { font-size: 1.6rem; font-weight: 900; letter-spacing: -.02em; }
.vg-price-card p { margin: 0; color: var(--vg-muted); font-size: .92rem; line-height: 1.6; flex: 1; }
.vg-price-note { margin: 1.25rem 0 0; color: var(--vg-muted); font-size: .92rem; text-align: center; }
.vg-price-note a { color: var(--vg-blue); font-weight: 800; }

.vg-faq { max-width: 820px; margin: 0 auto; display: grid; gap: 0; border: var(--ds-border); border-radius: var(--ds-radius-lg); background: var(--ds-white); box-shadow: var(--ds-shadow-xs); overflow: hidden; }
.vg-faq details { border-top: var(--ds-border); }
.vg-faq details:first-child { border-top: 0; }
.vg-faq summary { cursor: pointer; list-style: none; padding: var(--ds-space-5) var(--ds-space-6); font-weight: var(--ds-weight-semibold); color: var(--ds-gray-900); transition: background var(--ds-dur-base) var(--ds-ease-out); }
.vg-faq summary:hover { background: var(--ds-gray-25); }
.vg-faq summary::-webkit-details-marker { display: none; }
.vg-faq summary::after { content: "+"; float: right; color: var(--ds-gray-500); font-weight: var(--ds-weight-regular); font-size: 1.25rem; line-height: 1; transition: transform var(--ds-dur-base) var(--ds-ease-out); }
.vg-faq details[open] summary::after { content: "–"; }
.vg-faq p { margin: 0; padding: 0 var(--ds-space-6) var(--ds-space-5); color: var(--ds-gray-600); line-height: var(--ds-leading-body); }
.vg-faq a { color: var(--vg-blue); font-weight: 750; text-decoration: underline; text-underline-offset: 2px; }

.vg-isnt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1rem 0 0; align-items: stretch; }
.vg-isnt > div { padding: 1.05rem 1.15rem; border: 1px solid var(--vg-line); border-radius: 16px; background: #fff; }
.vg-isnt h3 { margin: 0 0 .5rem; font-size: 1.02rem; font-weight: 850; }
.vg-isnt p { margin: 0; color: var(--vg-muted-strong); font-size: .94rem; line-height: 1.6; }
.vg-isnt a, .vg-founder a { color: var(--vg-blue); font-weight: 750; text-decoration: underline; text-underline-offset: 2px; }
.vg-founder { padding: 1.4rem 1.5rem; border-radius: 18px; background: #0f172a; color: #e2e8f0; }
.vg-founder h3 { margin: 0 0 .6rem; color: #fff; font-size: 1.1rem; font-weight: 850; }
.vg-founder p { margin: 0 0 .8rem; line-height: 1.65; font-size: .95rem; color: #cbd5e1; }
.vg-founder a { color: #93c5fd; }

.vg-final-cta { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.vg-final-card { border: 1px solid var(--vg-line); border-radius: 28px; padding: clamp(2rem, 5vw, 4rem); text-align: center; background: linear-gradient(180deg, #f8fafc, #fff); }
.vg-final-card p { max-width: 700px; margin: 1rem auto 0; color: var(--vg-muted-strong); font-size: 1.05rem; line-height: 1.7; }
.vg-final-card .vg-actions { justify-content: center; }

@media (max-width: 1040px) {
    .vg-hero-grid, .vg-split, .vg-split.reverse { grid-template-columns: 1fr; }
    .vg-sample { margin-left: 0; }
}
@media (max-width: 880px) {
    .vg-cards, .vg-price-band, .vg-isnt { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .vg-hero h1 { font-size: clamp(2.2rem, 9.6vw, 3rem); }
}
@media (max-width: 460px) {
    .vg-hero-sub { font-size: .98rem; line-height: 1.55; }
    .vg-actions { gap: .55rem; }
    .vg-actions .vg-btn { width: 100%; }
    .vg-drop { padding: .9rem .9rem .85rem; }
    .vg-steps li { padding-left: 3rem; }
    .vg-connect-chip { white-space: normal; }
}
@media (min-width: 1041px) and (max-height: 820px) {
    .vg-hero { padding-top: 1.6rem; padding-bottom: 2rem; }
    .vg-hero h1 { font-size: clamp(2.3rem, 3.4vw, 3.3rem); }
}

/* Shared by the pages built on _sales_base.html. */
.vg-sales-root { color: var(--vg-text); }
.vg-hero-figure { max-width: 560px; margin-left: auto; }
.vg-anchors { position: sticky; top: 0; z-index: 5; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--vg-line); backdrop-filter: blur(6px); }
.vg-anchors .vg-shell { display: flex; gap: .45rem; overflow-x: auto; padding: .65rem 0; scrollbar-width: none; }
.vg-anchors .vg-shell::-webkit-scrollbar { display: none; }
.vg-anchors a { flex: 0 0 auto; padding: .4rem .8rem; border: 1px solid var(--vg-line-strong); border-radius: 999px; background: #fff; color: var(--vg-muted-strong); font-size: .84rem; font-weight: 750; white-space: nowrap; }
.vg-anchors a:hover, .vg-anchors a:focus-visible { border-color: var(--vg-blue); color: var(--vg-blue); }
.vg-sales section[id] { scroll-margin-top: 4.5rem; }
.vg-table-wrap { overflow-x: auto; border: 1px solid var(--vg-line); border-radius: 18px; background: #fff; }
.vg-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .93rem; }
.vg-table th, .vg-table td { padding: .85rem 1rem; border-bottom: 1px solid var(--vg-line); text-align: left; vertical-align: top; line-height: 1.55; }
.vg-table thead th { color: var(--vg-muted); font-size: .72rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.vg-table tbody th { color: var(--vg-text); font-weight: 850; white-space: nowrap; }
.vg-table td { color: var(--vg-muted-strong); }
.vg-table tr:last-child th, .vg-table tr:last-child td { border-bottom: 0; }
.vg-table a { color: var(--vg-blue); font-weight: 750; text-decoration: underline; text-underline-offset: 2px; }
.vg-pro-band { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding: clamp(1.6rem, 4vw, 2.6rem); border-radius: 28px; background: #0f172a; color: #e2e8f0; }
.vg-pro-band h2 { margin: .6rem 0 0; color: #fff; font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 850; letter-spacing: -.025em; line-height: 1.1; }
.vg-pro-band p { margin: .9rem 0 0; color: #cbd5e1; line-height: 1.65; }
.vg-pro-band .vg-eyebrow { color: #93c5fd; }
.vg-pro-band .vg-eyebrow span { background: #93c5fd; }
.vg-pro-band ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.vg-pro-band li { position: relative; padding: .75rem .9rem .75rem 2.4rem; border: 1px solid rgba(148,163,184,.28); border-radius: 14px; background: rgba(255,255,255,.04); color: #e2e8f0; line-height: 1.5; }
.vg-pro-band li::before { content: "✓"; position: absolute; left: .95rem; top: .72rem; color: #86efac; font-weight: 900; }
.vg-pro-band .vg-btn-primary { background: #fff; border-color: #fff; color: #0f172a; box-shadow: none; }
.vg-pro-band .vg-btn-secondary { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; }
.vg-pro-price { margin-top: 1rem; color: #fff; font-size: 1.15rem; font-weight: 850; }
.vg-pro-price small { color: #94a3b8; font-size: .88rem; font-weight: 650; }
.vg-note { margin: 1rem 0 0; color: var(--vg-muted); font-size: .86rem; line-height: 1.6; }
.vg-note a { color: var(--vg-blue); font-weight: 750; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 1040px) {
    .vg-hero-figure { margin-left: 0; }
    .vg-pro-band { grid-template-columns: 1fr; }
}

/* The wow round (WOW.md §1): a dark band for first screens and closing calls to action, with
   light product panels on it; one filled button per screen; benefits as outcome rows, each
   with a crop of the real product screen (partials/benefit_shot.html). */
.vg-dark { --vg-muted: var(--ds-ink-text-3); --vg-muted-strong: var(--ds-ink-text-2); background: var(--ds-band-ink); color: var(--ds-ink-text); border-bottom: 0; }
.vg-dark h1, .vg-dark h2, .vg-dark h3 { color: var(--ds-white); }
.vg-dark .vg-eyebrow { color: var(--ds-blue-300); }
.vg-dark .vg-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); }
.vg-dark .vg-btn-primary:hover { background: var(--ds-blue-500); border-color: var(--ds-blue-400); }
.vg-dark .vg-btn-secondary { background: transparent; border-color: var(--ds-ink-line-strong); color: var(--ds-white); }
.vg-dark a:not(.vg-btn):not(.vg-journal-card) { color: var(--ds-blue-300); text-decoration-color: rgba(147, 182, 253, .45); }
.vg-dark a:not(.vg-btn):not(.vg-journal-card):hover { color: var(--ds-white); }
.vg-dark .vg-btn:focus-visible { box-shadow: 0 0 0 2px var(--ds-ink-950), 0 0 0 5px var(--ds-blue-400); }

.vg-benefit { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; gap: clamp(1.5rem, 4.5vw, 4rem); padding: clamp(1.75rem, 3.5vw, 2.75rem) 0; border-top: 1px solid var(--vg-line); }
.vg-section-head + .vg-benefit { border-top: 0; padding-top: 0; }
.vg-benefit.is-flipped .vg-benefit-copy { order: 2; }
.vg-benefit h3 { margin: 0; font-size: clamp(1.45rem, 2.5vw, 2rem); font-weight: 850; letter-spacing: -.022em; line-height: 1.15; text-wrap: balance; }
.vg-benefit p { margin: .85rem 0 0; color: var(--vg-muted-strong); font-size: 1.06rem; line-height: 1.6; }
.vg-benefit p.vg-benefit-note { color: var(--vg-muted); font-size: .88rem; line-height: 1.55; }
.vg-benefit-note a { color: var(--vg-blue); font-weight: 750; text-decoration: underline; text-underline-offset: 2px; }
.vg-benefit-shot { margin: 0; border: 1px solid var(--vg-line-strong); border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 28px 64px -18px rgba(15,23,42,.22); }
.vg-benefit-shot img { display: block; width: 100%; height: auto; }
.vg-benefit-shot figcaption { padding: .5rem .85rem; border-top: 1px solid var(--vg-line); background: var(--vg-soft); color: var(--vg-muted); font-size: .76rem; font-weight: 650; }
@media (max-width: 880px) {
    .vg-benefit { grid-template-columns: minmax(0, 1fr); }
    .vg-benefit.is-flipped .vg-benefit-copy { order: 0; }
}

/* The feature tour (WOW.md §5 I2; POLISH.md finding 17): tabs over the steps; each step three
   compact visual steps (the problem, what VantageGrid does, the next session) beside a live visual:
   the real screen in a refined frame with its numbers marked and numbered, or the room gauge.
   Without JavaScript the steps stack. */
.vg-tour { display: grid; gap: var(--ds-space-10); }
.vg-tour-tabs { display: flex; gap: var(--ds-space-1); padding: var(--ds-space-1); border: var(--ds-border); border-radius: var(--ds-radius-pill); background: var(--ds-gray-50); width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.vg-tour-tabs::-webkit-scrollbar { display: none; }
.vg-tour-tabs[hidden] { display: none; }
.vg-tour-tabs button { display: inline-flex; flex: 0 0 auto; align-items: center; gap: var(--ds-space-2); min-height: 40px; padding: 0 var(--ds-space-4); border: 0; border-radius: var(--ds-radius-pill); background: transparent; color: var(--ds-gray-600); font: inherit; font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold); cursor: pointer; transition: background var(--ds-dur-base) var(--ds-ease-out), color var(--ds-dur-base) var(--ds-ease-out), box-shadow var(--ds-dur-base) var(--ds-ease-out); }
.vg-tour-tabs button:hover { color: var(--ds-gray-900); }
.vg-tour-tabs button[aria-selected="true"] { background: var(--ds-white); color: var(--ds-gray-900); box-shadow: var(--ds-shadow-sm); }
.vg-tour-tabs button[aria-selected="true"] .ds-icon { color: var(--ds-accent); }
.vg-tour-panel { display: grid; grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr); align-items: center; gap: clamp(2rem, 5vw, 4.5rem); }
.vg-tour:not(.is-tabs) .vg-tour-panel + .vg-tour-panel { padding-top: var(--ds-space-10); border-top: var(--ds-border); }
.vg-tour-panel[hidden] { display: none; }
.vg-tour-panel:focus-visible { box-shadow: none; }
.vg-tour-copy h3 { margin: 0; color: var(--ds-gray-900); font-size: var(--ds-text-2xl); font-weight: var(--ds-weight-bold); letter-spacing: var(--ds-tracking-tight); line-height: var(--ds-leading-tight); text-wrap: balance; }
/* Three steps on a connector: an icon each, the label, one line. */
.vg-tour-value { position: relative; display: grid; gap: var(--ds-space-5); margin: var(--ds-space-8) 0 0; }
.vg-tour-value::before { content: ""; position: absolute; left: 15px; top: 18px; bottom: 18px; width: 1px; background: linear-gradient(var(--ds-gray-200), var(--ds-gray-200)); }
.vg-tour-value div { position: relative; padding-left: 48px; }
.vg-tour-value dt { display: flex; align-items: center; min-height: 32px; color: var(--ds-gray-500); font-size: var(--ds-text-2xs); font-weight: var(--ds-weight-semibold); letter-spacing: var(--ds-tracking-caps); text-transform: uppercase; }
.vg-tour-value dt .ds-icon { position: absolute; left: 0; top: 0; width: 32px; height: 32px; padding: 8px; border: var(--ds-border); border-radius: 50%; background: var(--ds-white); box-shadow: var(--ds-shadow-xs); }
.vg-tour-value .is-problem .ds-icon { color: var(--ds-loss-text); }
.vg-tour-value .is-do .ds-icon { color: var(--ds-accent); }
.vg-tour-value .is-next .ds-icon { border-color: rgba(16, 185, 129, .35); background: var(--ds-gain-soft); color: var(--ds-gain-text); }
.vg-tour-value dd { margin: 0; color: var(--ds-gray-700); font-size: var(--ds-text-base); line-height: 1.5; }
.vg-tour-value .is-next dd { color: var(--ds-gray-900); font-weight: var(--ds-weight-semibold); }
.vg-tour-visual .vg-gauge { max-width: 560px; margin-left: auto; }
/* The real screen in a refined frame: a window bar, a hairline and a long soft shadow. */
.vg-benefit-shot { margin: 0; }
.vg-shot-frame { position: relative; overflow: hidden; padding-top: 30px; border: var(--ds-border); border-radius: var(--ds-radius-xl); background: var(--ds-white); box-shadow: var(--ds-shadow-lg); }
.vg-shot-frame::before { content: ""; position: absolute; z-index: 2; inset: 0 0 auto; height: 30px; border-bottom: 1px solid var(--ds-gray-100); background: radial-gradient(circle at 18px 15px, var(--ds-gray-300) 0 4px, transparent 4.5px), radial-gradient(circle at 34px 15px, var(--ds-gray-300) 0 4px, transparent 4.5px), radial-gradient(circle at 50px 15px, var(--ds-gray-300) 0 4px, transparent 4.5px), var(--ds-gray-50); }
.vg-shot-canvas { position: relative; counter-reset: vg-mark; }
.vg-shot-canvas picture { display: block; }
.vg-shot-canvas img { display: block; width: 100%; height: auto; }
.vg-benefit-shot figcaption { margin-top: var(--ds-space-3); color: var(--ds-gray-500); font-size: var(--ds-text-xs); }
/* As tabs, a tall screen sits in a window that pans to the step's last mark (feature_tour.mjs). */
.vg-tour.is-tabs .vg-shot-frame { max-height: min(600px, 72vh); }
.vg-tour.is-tabs .vg-shot-canvas { transition: transform var(--ds-dur-draw) var(--ds-ease-in-out); }
/* The marks: a numbered pin on the number the step explains, and its label. */
.vg-shot-mark { counter-increment: vg-mark; position: absolute; border: 2px solid var(--ds-accent); border-radius: var(--ds-radius-md); background: rgba(37, 99, 235, .04); box-shadow: 0 0 0 4px rgba(37, 99, 235, .14); pointer-events: none; }
.vg-shot-mark::before { content: counter(vg-mark); position: absolute; left: 6px; top: -12px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ds-accent); color: var(--ds-white); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-bold); box-shadow: 0 0 0 3px var(--ds-white), var(--ds-shadow-sm); }
.vg-shot-mark > span { position: absolute; left: 36px; top: -12px; max-width: calc(100% - 44px); overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; height: 24px; padding: 0 .6rem; border-radius: var(--ds-radius-pill); background: var(--ds-gray-900); color: var(--ds-white); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); white-space: nowrap; box-shadow: var(--ds-shadow-sm); }
.vg-tour.is-tabs .vg-tour-panel.is-entering .vg-shot-mark { animation: vg-mark-in var(--ds-dur-slow) var(--ds-ease-out) .12s both; }
.vg-tour.is-tabs .vg-tour-panel.is-entering .vg-tour-copy { animation: vg-copy-in var(--ds-dur-slow) var(--ds-ease-out) both; }
@keyframes vg-mark-in { from { opacity: 0; transform: scale(1.04); } }
@keyframes vg-copy-in { from { opacity: 0; transform: translateY(6px); } }

/* The room-left gauge (WOW.md §5 I3), an ink panel like the product's dark theme. */
.vg-gauge-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 4.5vw, 4.5rem); }
.vg-gauge { padding: var(--ds-space-6); border-radius: var(--ds-radius-xl); background: var(--ds-grad-panel-ink); color: var(--ds-ink-text); box-shadow: var(--ds-shadow-ink); }
.vg-gauge-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ds-space-4); padding-bottom: var(--ds-space-3); border-bottom: var(--ds-border-ink); }
.vg-gauge-title { margin: 0; font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold); }
.vg-gauge-day { margin: 0; color: var(--ds-ink-text-3); font-family: var(--ds-font-mono); font-size: var(--ds-text-2xs); }
.vg-gauge-figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ds-space-3); margin: var(--ds-space-5) 0 0; color: var(--ds-ink-text-3); font-size: var(--ds-text-sm); }
.vg-gauge-figure strong { color: var(--ds-ink-text); font-size: var(--ds-figure-lg); font-weight: var(--ds-weight-bold); line-height: 1; transition: color var(--ds-dur-base) var(--ds-ease-out); }
.vg-gauge.is-low .vg-gauge-figure strong { color: var(--ds-loss-on-ink); }
.vg-gauge.is-reached .vg-gauge-figure strong { color: var(--ds-ink-text-3); }
/* The readout (FIX-ROUND.md F1.9): squared like a measure, not a slider's track; the used room in the loss
   red, the room left neutral, a thin marker where they meet; nothing on it looks draggable. */
.vg-gauge-meter { position: relative; height: 10px; margin-top: var(--ds-space-4); border-radius: 3px; background: rgba(148, 163, 184, .16); box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .12); overflow: hidden; }
.vg-gauge-used { position: absolute; inset: 0 auto 0 0; border-radius: 3px 0 0 3px; background: var(--ds-loss); box-shadow: 2px 0 0 0 var(--ds-ink-text); transition: width var(--ds-dur-slow) var(--ds-ease-out); }
.vg-gauge.is-reached .vg-gauge-used { border-radius: 3px; box-shadow: none; background: repeating-linear-gradient(135deg, var(--ds-loss-on-ink) 0 6px, rgba(229, 72, 77, .6) 6px 12px); }
.vg-gauge-status { margin: var(--ds-space-3) 0 0; min-height: 2.9em; color: var(--ds-ink-text-2); font-size: var(--ds-text-sm); line-height: 1.45; }
.vg-gauge-controls { margin-top: var(--ds-space-4); }
.vg-gauge-controls[hidden] { display: none; }
.vg-gauge-limit { display: flex; justify-content: space-between; color: var(--ds-ink-text-2); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); }
.vg-gauge-limit output { color: var(--ds-ink-text); font-family: var(--ds-font-mono); }
.vg-gauge-controls input { width: 100%; height: 24px; margin: var(--ds-space-2) 0 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.vg-gauge-controls input::-webkit-slider-runnable-track { height: 4px; border-radius: var(--ds-radius-pill); background: rgba(148, 163, 184, .25); }
.vg-gauge-controls input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border: 2px solid var(--ds-ink-900); border-radius: 50%; background: var(--ds-white); box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.vg-gauge-controls input::-moz-range-track { height: 4px; border-radius: var(--ds-radius-pill); background: rgba(148, 163, 184, .25); }
.vg-gauge-controls input::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid var(--ds-ink-900); border-radius: 50%; background: var(--ds-white); }
.vg-gauge-controls input:focus-visible { box-shadow: var(--ds-ring); }
.vg-gauge-trades { display: grid; gap: var(--ds-space-1); margin: var(--ds-space-4) 0 0; padding: 0; list-style: none; }
.vg-gauge-trade { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--ds-space-3); width: 100%; min-height: 44px; padding: 0 var(--ds-space-3); border: var(--ds-border-ink); border-radius: var(--ds-radius-md); background: rgba(148, 163, 184, .04); color: var(--ds-ink-text); font: inherit; font-size: var(--ds-text-sm); text-align: left; cursor: pointer; transition: background var(--ds-dur-base) var(--ds-ease-out), border-color var(--ds-dur-base) var(--ds-ease-out), opacity var(--ds-dur-base) var(--ds-ease-out); }
.vg-gauge-trade:disabled { cursor: default; }
.vg-gauge-trade:hover:not(:disabled) { border-color: var(--ds-ink-line-strong); background: rgba(148, 163, 184, .08); }
/* The trade the gauge stands at (MATCH-ROUND.md M6.3): a fill and a marker, not only a border. */
.vg-gauge-trade[aria-pressed="true"] { border-color: var(--ds-accent-on-ink); background: rgba(61, 126, 245, .24); box-shadow: 0 0 0 1px var(--ds-accent-on-ink); }
.vg-gauge-trade[aria-pressed="true"] .vg-gauge-time { color: var(--ds-white); }
.vg-gauge-trade[aria-pressed="true"] .vg-gauge-time::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: .45rem; border-radius: 50%; background: var(--ds-accent-on-ink); vertical-align: .1em; }
.vg-gauge-trade.is-future { opacity: .45; }
.vg-gauge-time { color: var(--ds-ink-text-3); font-family: var(--ds-font-mono); font-size: var(--ds-text-2xs); }
.vg-gauge-rule { overflow: hidden; color: var(--ds-ink-text-2); font-size: var(--ds-text-xs); text-overflow: ellipsis; white-space: nowrap; }
.vg-gauge-trade.is-broke .vg-gauge-rule { color: var(--ds-loss-on-ink); }
.vg-gauge-net { font-weight: var(--ds-weight-semibold); }
.vg-gauge-caption { margin: var(--ds-space-4) 0 0; color: var(--ds-ink-text-3); font-size: var(--ds-text-2xs); line-height: 1.5; }
.vg-gauge-split .vg-benefit-note, .vg-gauge-split .vg-note { margin: var(--ds-space-4) 0 0; color: var(--ds-gray-500); font-size: var(--ds-text-sm); line-height: 1.55; }
.vg-gauge-split .vg-benefit-note a { color: var(--ds-blue-700); font-weight: var(--ds-weight-semibold); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 880px) {
    .vg-tour-panel, .vg-gauge-split { grid-template-columns: minmax(0, 1fr); }
    /* On a phone the rule a trade broke wraps rather than being cut off. */
    .vg-gauge-trade { grid-template-columns: auto minmax(0, 1fr); padding: var(--ds-space-2) var(--ds-space-3); }
    .vg-gauge-rule { grid-column: 1 / -1; grid-row: 2; white-space: normal; }
    .vg-gauge-net { justify-self: end; }
    .vg-tour-tabs { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .vg-tour.is-tabs .vg-tour-panel.is-entering .vg-shot-mark, .vg-tour.is-tabs .vg-tour-panel.is-entering .vg-tour-copy { animation: none; }
}

/* Every callout inside its frame (FIX-ROUND.md F1.1): pins inside the mark's left edge, labels growing to
   the right; on a phone the labels move to a numbered legend under the picture. The tour's tabs are a
   two-by-two grid there, never cut at the screen's edge. */
.vg-shot-legend { display: none; counter-reset: vg-legend; margin: var(--ds-space-3) 0 0; padding: 0; list-style: none; }
.vg-shot-legend li { counter-increment: vg-legend; display: flex; align-items: center; gap: var(--ds-space-2); margin-top: var(--ds-space-2); color: var(--ds-gray-700); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); }
.vg-shot-legend li::before { content: counter(vg-legend); display: grid; place-items: center; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--ds-accent); color: var(--ds-white); font-size: var(--ds-text-2xs); font-weight: var(--ds-weight-bold); }
/* A phone's crop has its own marks (MATCH-ROUND.md M5); each width shows only its own. */
.vg-shot-mark.is-phone { display: none; }
@media (max-width: 640px) {
    .vg-shot-mark:not(.is-phone) { display: none; }
    .vg-shot-mark.is-phone { display: block; }
    .vg-shot-mark > span { display: none; }
    .vg-shot-mark::before { width: 22px; height: 22px; left: 4px; top: -11px; }
    .vg-shot-legend { display: block; }
    .vg-tour-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; border-radius: var(--ds-radius-lg); overflow: visible; }
    .vg-tour-tabs button { justify-content: center; min-width: 0; padding: 0 var(--ds-space-2); border-radius: var(--ds-radius-md); white-space: nowrap; }
}