/* The guide pages (inc/guides.php): VPS, Brokers, Prop firms, Affiliates. Loaded on those pages only.
   Light and dark come from the theme's tokens. */

.vg-entry { padding-top: 0; padding-bottom: 0; }
.k3-guide { --vg-gap: clamp(56px, 8vw, 96px); }
.k3-guide .vi { width: 22px; height: 22px; flex: none; }
.vg-bleed { margin-inline: calc(50% - 50vw); }
.vg-section { padding-top: var(--vg-gap); scroll-margin-top: 90px; }
.vg-head { max-width: 720px; margin-bottom: 30px; }
.vg-head h2 { margin: 0; font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.vg-sub { color: var(--mute); font-size: 1.06rem; margin: .5em 0 0; }
.vg-note { color: var(--mute); text-align: center; margin: 22px auto 0; max-width: 640px; }
.vg-small { color: var(--mute); font-size: .9rem; }
.vg-band { position: relative; }
.vg-band::before { content: ""; position: absolute; z-index: -1; inset: calc(var(--vg-gap) * .55) calc(50% - 50vw) calc(var(--vg-gap) * -.45); background: var(--soft); border-block: 1px solid var(--line); }

/* ---- hero */
.vg-hero { position: relative; overflow: hidden; color: #fff; padding: 64px 0 34px;
	background: radial-gradient(720px 420px at 88% 8%, #f0b42930, transparent 62%), radial-gradient(900px 520px at 8% 110%, #19b8ab45, transparent 60%), linear-gradient(155deg, #073a41 0%, var(--brand-deep) 55%, #041a1e 100%); }
.vg-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.vg-hero h1 { color: #fff; font-size: clamp(2rem, 4.6vw, 3.3rem); line-height: 1.08; margin: 0 0 .4em; }
.vg-hero h1 span { display: block; background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vg-hero .eyebrow { color: var(--accent); }
.vg-hero .lead { font-size: 1.14rem; color: #cfe3e0; max-width: 34em; }
.vg-hero-art svg { width: 100%; height: auto; display: block; }
.vg-grid-dots circle { fill: #ffffff22; }
.vg-laptop rect { fill: #ffffff10; stroke: #ffffff55; stroke-width: 1.5; }
.vg-laptop text, .vg-ping text { fill: #fff; font: 700 13px var(--font); }
.vg-laptop text { fill: #ff9d94; }
.vg-slow { fill: none; stroke: #ff8076; stroke-width: 2; stroke-dasharray: 5 7; opacity: .75; animation: vg-dash 6s linear infinite; }
.vg-rack > rect:first-child { fill: #0a3a41; stroke: #19b8ab; stroke-width: 2; }
.vg-unit { fill: #062a30; stroke: #19b8ab66; }
.vg-led { fill: #35d0c3; animation: vg-blink 1.6s infinite; }
.vg-led2 { fill: var(--accent); animation-delay: .8s; }
.vg-vent { stroke: #19b8ab55; stroke-width: 2; stroke-linecap: round; }
.vg-cap { fill: #b9d3d0; font: 700 12px var(--font); letter-spacing: .14em; text-transform: uppercase; }
.vg-fast { fill: none; stroke-width: 4; stroke-linecap: round; }
.vg-packet { fill: #fff; filter: drop-shadow(0 0 6px #f0b429); }
.vg-broker > rect { fill: #ffffff12; stroke: var(--accent); stroke-width: 2; }
.vg-chart { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.vg-ping rect { fill: var(--accent); }
.vg-ping text { fill: var(--accent-ink); }
.vg-stats { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.vg-stats li { background: #ffffff0d; border: 1px solid #ffffff1f; border-radius: 14px; padding: 14px 16px; }
.vg-stats b { display: block; font-size: 1.6rem; color: var(--accent); line-height: 1.1; }
.vg-stats span { color: #b9d3d0; font-size: .88rem; }
@keyframes vg-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes vg-dash { to { stroke-dashoffset: -120; } }

/* ---- home PC against VPS */
.vg-versus { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; }
.vg-side { border-radius: 18px; padding: 24px; border: 1px solid var(--line); background: var(--card); height: 100%; }
.vg-side h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.vg-side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vg-side li { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--soft); }
.vg-home h3 .vi, .vg-home li .vi { color: var(--bad); }
.vg-home li { text-decoration: line-through; text-decoration-color: #b3261e55; }
.vg-vps { border: 2px solid var(--brand-bright); box-shadow: var(--shadow); }
.vg-vps h3 .vi, .vg-vps li .vi { color: var(--brand-bright); }
.vg-vs { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: var(--accent-ink); background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 10px 24px -10px #b97f0a; }

/* ---- the ping race */
.vg-race { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.vg-lane { display: grid; grid-template-columns: minmax(150px, 230px) 1fr 92px; gap: 14px; align-items: center; }
.vg-lane-name { font-weight: 600; }
.vg-track { height: 16px; border-radius: 99px; background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.vg-bar { display: block; height: 100%; width: var(--w); border-radius: inherit; transform-origin: left; transform: scaleX(.02); transition: transform 1.4s cubic-bezier(.2, .8, .2, 1); }
.vg-go .vg-bar { transform: scaleX(1); }
.vg-lane:nth-child(2) .vg-bar { transition-delay: .12s; } .vg-lane:nth-child(3) .vg-bar { transition-delay: .24s; } .vg-lane:nth-child(4) .vg-bar { transition-delay: .36s; } .vg-lane:nth-child(5) .vg-bar { transition-delay: .48s; }
.vg-win .vg-bar { background: linear-gradient(90deg, #13795b, #35c48f); }
.vg-good .vg-bar { background: linear-gradient(90deg, var(--brand), var(--brand-bright)); }
.vg-slow .vg-bar { background: linear-gradient(90deg, #b97f0a, #ff8076); }
.vg-ms { text-align: right; font-variant-numeric: tabular-nums; }
.vg-win .vg-ms { color: var(--ok); }
.vg-tip { display: flex; gap: 14px; align-items: flex-start; margin-top: 26px; padding: 16px 18px; border-radius: 14px; background: var(--card); border: 1px dashed var(--brand-bright); }
.vg-tip p { margin: 0; }
.vg-tip .vi { color: var(--brand-bright); width: 28px; height: 28px; }

/* ---- the trading hubs, as a line of stations */
.vg-metro { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; padding-top: 6px; }
.vg-metro::before { content: ""; position: absolute; left: 6%; right: 6%; top: 32px; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--brand-bright), var(--accent)); }
.vg-stop { position: relative; text-align: center; }
.vg-dot { all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 4px 8px; border-radius: 12px; width: 100%; box-sizing: border-box; }
.vg-dot:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.vg-pin { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--card); border: 3px solid var(--brand-bright); color: var(--brand-bright); transition: transform .2s, background .2s, color .2s; }
.vg-pin .vi { width: 24px; height: 24px; }
.vg-dot b { color: var(--ink); font-size: .95rem; }
.vg-dot small { color: var(--mute); font-weight: 700; letter-spacing: .06em; }
.vg-dot[aria-expanded="true"] .vg-pin, .vg-dot:hover .vg-pin { transform: scale(1.12); background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.vg-hub-note { display: none; margin: 4px 0 0; font-size: .9rem; color: var(--ink-2); background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px; box-shadow: var(--shadow); }
.vg-dot[aria-expanded="true"] + .vg-hub-note { display: block; }
.vg-find { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.vg-find li { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.vg-find li > b, .vg-num { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; font-weight: 800; }

/* ---- the picker */
.vg-picker { display: grid; grid-template-columns: 1.15fr .85fr; gap: 22px; align-items: start; }
.vg-pick-in, .vg-pick-out { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px; }
.vg-pick-in fieldset { border: 0; margin: 0; padding: 0; }
.vg-pick-in legend { font-weight: 700; margin-bottom: 12px; }
.vg-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vg-chip { position: relative; cursor: pointer; }
.vg-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.vg-chip span { display: block; padding: 12px 14px 12px 42px; border-radius: 12px; border: 2px solid var(--line); background: var(--paper); transition: border-color .15s, background .15s; }
.vg-chip span::before { content: ""; position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 5px; border: 2px solid var(--field-line); background: var(--card); }
.vg-chip b { display: block; font-size: .95rem; color: var(--ink); }
.vg-chip small { color: var(--mute); }
.vg-chip input:checked + span { border-color: var(--brand-bright); background: var(--soft); }
.vg-chip input:checked + span::before { background: var(--brand-bright) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 14px no-repeat; border-color: var(--brand-bright); }
.vg-chip input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.vg-stepper { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; font-weight: 700; }
.vg-stepper button { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--brand); background: var(--card); color: var(--brand); font-size: 1.2rem; font-weight: 800; cursor: pointer; }
.vg-stepper button:hover { background: var(--brand); color: #fff; }
.vg-stepper output { min-width: 2ch; text-align: center; font-size: 1.4rem; }
.vg-stepper small { color: var(--mute); font-weight: 400; }
.vg-pick-out { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; position: sticky; top: 96px; background: linear-gradient(160deg, var(--brand-deep), #04191d); border-color: #ffffff1a; color: #fff; }
.vg-spec { border-radius: 14px; padding: 14px; background: #ffffff0d; border: 1px solid #ffffff1a; }
.vg-spec .vi { color: var(--accent); }
.vg-spec b { display: block; font-size: 1.7rem; line-height: 1.1; margin-top: 6px; }
.vg-spec span { color: #b9d3d0; font-size: .85rem; }
.vg-spec-ms.vg-hot { border-color: var(--accent); background: #f0b4291f; }
.vg-verdict { grid-column: 1 / -1; margin: 4px 0 0; color: #e7f3f1; }
.vg-pick-out .btn { grid-column: 1 / -1; justify-content: center; }
.vg-table { margin-top: 18px; }
.vg-table summary { cursor: pointer; font-weight: 700; color: var(--link); }

/* ---- each EA, with its dial */
.vg-eas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.vg-ea { display: grid; grid-template-columns: 96px 1fr; grid-template-rows: auto auto 1fr; column-gap: 14px; align-items: center; padding: 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s; }
.vg-ea:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--brand-bright); color: var(--ink); }
.vg-dial { grid-row: 1 / 4; width: 96px; }
.vg-arc { fill: none; stroke: var(--soft); stroke-width: 12; stroke-linecap: round; }
.vg-arc-hot { fill: none; stroke: url(#vgDial); stroke: var(--brand-bright); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 60 200; stroke-dashoffset: -97; }
.vg-needle { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; transform-box: view-box; transform-origin: 60px 64px; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.vg-hub { fill: var(--accent); }
.vg-ea b { font-size: 1rem; }
.vg-need { font-weight: 700; color: var(--link); font-size: .9rem; }
.vg-ea small { color: var(--mute); }

/* ---- four kinds */
.vg-kinds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.vg-kind { position: relative; padding: 22px 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.vg-kind .vi { width: 34px; height: 34px; color: var(--brand-bright); }
.vg-kind h3 { margin: 6px 0 0; font-size: 1.08rem; }
.vg-kind p { margin: 0; color: var(--ink-2); font-size: .94rem; flex: 1; }
.vg-kind span { font-size: .85rem; font-weight: 700; color: var(--link); }
.vg-kind-top { border: 2px solid var(--accent); }
.vg-kind-top::after { content: "\2605"; position: absolute; top: 14px; right: 16px; color: var(--accent-deep); font-size: 1.1rem; }

/* ---- the steps */
.vg-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: vg; }
.vg-steps li { display: flex; gap: 12px; padding: 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); position: relative; }
.vg-steps h3 { margin: 4px 0 4px; font-size: 1rem; }
.vg-steps p { margin: 0; font-size: .92rem; color: var(--ink-2); }
.vg-steps li:last-child .vg-num { background: var(--accent); color: var(--accent-ink); }

/* ---- checklist */
.vg-check { display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: center; padding: 24px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.vg-ring { position: relative; width: 180px; aspect-ratio: 1; display: grid; place-items: center; text-align: center; }
.vg-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.vg-ring-bg { fill: none; stroke: var(--soft); stroke-width: 12; }
.vg-ring-fg { fill: none; stroke: var(--brand-bright); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 314.16; stroke-dashoffset: 314.16; transition: stroke-dashoffset .6s, stroke .3s; }
.vg-ring b { font-size: 2.2rem; line-height: 1; display: block; }
.vg-ring span { color: var(--mute); font-size: .85rem; }
.vg-check.vg-done .vg-ring-fg { stroke: var(--accent); }
.vg-check ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vg-check label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; cursor: pointer; background: var(--paper); border: 1px solid var(--line); }
.vg-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand); flex: none; }
.vg-check input:checked + span { color: var(--mute); text-decoration: line-through; }

/* ---- security */
.vg-locks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.vg-lock { display: flex; gap: 14px; align-items: center; padding: 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.vg-lock .vi { width: 30px; height: 30px; color: var(--brand-bright); }
.vg-lock p { margin: 0; font-weight: 600; }

/* ---- questions */
.vg-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vg-faq details { border-radius: 14px; background: var(--card); border: 1px solid var(--line); padding: 0 18px; }
.vg-faq summary { cursor: pointer; padding: 16px 28px 16px 0; font-weight: 700; list-style: none; position: relative; }
.vg-faq summary::-webkit-details-marker { display: none; }
.vg-faq summary::after { content: "+"; position: absolute; right: 0; top: 12px; font-size: 1.4rem; color: var(--brand-bright); transition: transform .2s; }
.vg-faq details[open] summary::after { transform: rotate(45deg); }
.vg-faq details p { margin: 0 0 16px; color: var(--ink-2); }

/* ---- the last band */
.vg-cta { margin-top: var(--vg-gap); padding: 60px 0; text-align: center; color: #fff; background: radial-gradient(700px 300px at 50% 0%, #f0b42933, transparent 70%), linear-gradient(160deg, var(--brand-deep), #04191d); }
.vg-cta h2 { color: #fff; margin: 0 0 .3em; font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
.vg-cta p { color: #cfe3e0; margin: 0 auto; max-width: 560px; }
.vg-cta .hero-actions { justify-content: center; }

/* ---- shared: calculators, plain EA cards, four-step rows */
.vg-calc { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.vg-calc-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px; }
.vg-calc-in label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: .92rem; }
.vg-calc-in small { font-weight: 400; color: var(--mute); }
.vg-calc-in input, .vg-calc-in select { width: 100%; box-sizing: border-box; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--field-line); background: var(--field); color: var(--ink); font: inherit; font-size: 1.05rem; }
.vg-calc-out { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; border-radius: 18px; padding: 22px; background: linear-gradient(160deg, var(--brand-deep), #04191d); color: #fff; border: 1px solid #ffffff1a; }
.vg-spec-wide { grid-column: 1 / -1; }
.vg-ea-plain { grid-template-columns: 52px 1fr; }
.vg-ea-icon { grid-row: 1 / 4; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--soft); color: var(--brand-bright); }
.vg-steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.k3-guide .vg-arc-hot { stroke: var(--accent); }

/* ---- brokers */
.bg-band { fill: #f0b42922; }
.bg-ask, .bg-bid { fill: none; stroke-width: 3; stroke-linecap: round; }
.bg-ask { stroke: var(--accent); }
.bg-bid { stroke: #35d0c3; }
.bg-chip-bid rect { fill: #35d0c3; }
.bg-chip-bid text { fill: #04191d; font: 700 13px var(--font); }
.bg-spread-tag { fill: #ffffff12; stroke: #ffffff55; }
.bg-spread-val { fill: var(--accent); font: 800 15px var(--font); }
.bg-arrow { stroke: #ffffff88; stroke-width: 2; stroke-dasharray: 4 4; }
.bg-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 22px; padding: 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.bg-chip { position: relative; cursor: pointer; }
.bg-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.bg-chip span { display: inline-block; padding: 8px 14px; border-radius: 99px; border: 2px solid var(--line); background: var(--paper); font-weight: 700; font-size: .9rem; transition: background .15s, border-color .15s, color .15s; }
.bg-chip input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; }
.bg-chip input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.bg-reset { margin-left: auto; border: 0; background: none; color: var(--link); font-weight: 700; cursor: pointer; text-decoration: underline; }
.k3-guide .partner[hidden] { display: none; }
.bg-none { text-align: center; padding: 18px; }
.bg-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bg-acc { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; }
.bg-acc-card { display: grid; grid-template-columns: 110px 1fr; grid-template-rows: auto 1fr auto; column-gap: 18px; padding: 22px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.bg-acc-card h3 { grid-column: 1 / -1; margin: 0 0 12px; }
.bg-acc-raw { border: 2px solid var(--brand-bright); box-shadow: var(--shadow); }
.bg-stack { grid-row: 2 / 4; height: 170px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; border-radius: 12px; background: var(--soft); padding: 6px; }
.bg-stack span { display: flex; align-items: center; justify-content: center; text-align: center; height: var(--h); border-radius: 8px; font-size: .74rem; font-weight: 800; color: #fff; transform-origin: bottom; transform: scaleY(.05); transition: transform 1s cubic-bezier(.2, .8, .2, 1); }
.vg-go .bg-stack span { transform: none; }
.bg-s-spread { background: linear-gradient(180deg, #ff8076, #b97f0a); }
.bg-s-comm { background: linear-gradient(180deg, var(--brand-bright), var(--brand)); }
.bg-acc-card p { margin: 0 0 10px; color: var(--ink-2); }

/* ---- prop firms */
.pg-road { fill: none; stroke: #19b8ab; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 2 12; }
.pg-stop { fill: #062a30; stroke: #35d0c3; stroke-width: 3; }
.pg-stop-n { fill: #fff; font: 800 15px var(--font); }
.pg-flag { fill: var(--accent); stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.pg-goal { fill: var(--accent); }
.pg-meter { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: #ffffff0d; border: 1px solid #ffffff1a; }
.pg-meter span { color: #cfe3e0; font-size: .9rem; }
.pg-meter b { font-size: 1.6rem; color: var(--accent); }
.pg-meter i { grid-column: 1 / -1; display: block; height: 10px; border-radius: 99px; background: #ffffff14; overflow: hidden; }
.pg-meter em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #35c48f, var(--accent)); transition: width .4s; }

/* ---- affiliates */
.ag-wire { fill: none; stroke: #ffffff44; stroke-width: 3; stroke-dasharray: 6 8; animation: vg-dash 8s linear infinite; }
.ag-node { fill: #0a3a41; stroke: #35d0c3; stroke-width: 3; }
.ag-gold { stroke: var(--accent); fill: #2e2608; }
.ag-glyph { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ag-dollar { fill: var(--accent); font: 900 30px var(--font); }
.ag-line { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; position: relative; }
.ag-line::before { content: ""; position: absolute; left: 12%; right: 12%; top: 30px; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--brand-bright), var(--accent)); transform-origin: left; transform: scaleX(0); transition: transform 1.6s cubic-bezier(.2, .8, .2, 1); }
.ag-line.vg-go::before { transform: none; }
.ag-line li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; opacity: .2; transition: opacity .5s calc(var(--i) * .35s); }
.ag-line.vg-go li { opacity: 1; }
.ag-dot { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: var(--card); border: 3px solid var(--brand-bright); color: var(--brand-bright); }
.ag-line li:last-child .ag-dot { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ag-line small { color: var(--mute); }
.ag-who { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ag-who li { display: flex; gap: 12px; align-items: center; padding: 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); font-weight: 600; }
.ag-who .vi { color: var(--brand-bright); width: 26px; height: 26px; }
.ag-rules .vg-side li { padding-left: 14px; }
.ag-join { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; padding: 30px; border-radius: 20px; color: #fff; background: radial-gradient(500px 220px at 90% 0%, #f0b42933, transparent 70%), linear-gradient(160deg, var(--brand-deep), #04191d); }
.ag-join h2 { color: #fff; margin: 0 0 .2em; }
.ag-join p { margin: 0; color: #cfe3e0; }
.ag-join .btn { padding: 14px 26px; }

@media (max-width: 980px) {
	.vg-calc { grid-template-columns: 1fr; }
	.bg-five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.vg-steps-4, .ag-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ag-line::before { display: none; }
	.ag-who { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
	.vg-calc-in, .vg-calc-out, .bg-five, .vg-steps-4, .ag-line, .ag-who { grid-template-columns: 1fr; }
	.bg-acc { grid-template-columns: 1fr; }
	.bg-acc-card { grid-template-columns: 90px 1fr; }
	.bg-reset { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.ag-wire { animation: none; }
	.bg-stack span, .ag-line::before { transition: none; transform: none; }
	.ag-line li { opacity: 1; transition: none; }
}

/* ---- an Expert Advisor's page (inc/ea-page.php) */
.ea-page .ea-glance { list-style: none; margin: 22px 0; padding: 0; position: relative; z-index: 2; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.ea-glance li { display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.ea-glance .vi { grid-row: 1 / 3; width: 28px; height: 28px; color: var(--brand-bright); }
.ea-glance b { font-size: 1.05rem; line-height: 1.2; }
.ea-glance span { color: var(--mute); font-size: .8rem; }
.ea-intro { padding: 0; font-size: 1.08rem; max-width: 820px; }
.ea-never { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 22px 0 6px; }
.ea-no { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--card); border: 2px solid var(--line); }
.ea-no .vi { grid-row: 1 / 3; width: 32px; height: 32px; color: var(--bad); }
.ea-no b { font-size: 1.05rem; }
.ea-no small { color: var(--mute); }
.ea-sub { margin: 28px 0 12px; }
.ea-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.ea-card-mini { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.ea-card-mini .vi { width: 30px; height: 30px; color: var(--brand-bright); }
.ea-card-mini b { display: block; margin-bottom: 2px; }
.ea-card-mini p { margin: 0; color: var(--ink-2); font-size: .94rem; }
.ea-callouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 22px; }
.ea-callout { padding: 20px 22px; border-radius: 16px; background: var(--soft); border: 1px solid var(--line); border-left: 4px solid var(--accent); }
.ea-callout h3 { margin: 0 0 8px; }
.ea-callout ul { margin: 8px 0; padding-left: 1.2em; }
.ea-callout p:last-child { margin-bottom: 0; }
.ea-features { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.ea-features li { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-weight: 600; }
.ea-features .vi { color: var(--brand-bright); }
.ea-features .ea-feature-no .vi { color: var(--bad); }
.ea-reqs { display: grid; gap: 10px; margin-top: 12px; }
.ea-req { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.ea-req .vi { width: 28px; height: 28px; color: var(--brand-bright); }
.ea-req b { display: block; }
.ea-req p { margin: 2px 0 0; color: var(--ink-2); font-size: .94rem; }
.ea-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 16px; }
.ea-helpers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 18px; }
.ea-helper { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: 14px; background: linear-gradient(160deg, var(--brand-deep), #04191d); color: #fff; text-decoration: none; border: 1px solid #ffffff1a; transition: transform .15s, box-shadow .15s; }
.ea-helper:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: #fff; }
.ea-helper .vi { width: 30px; height: 30px; color: var(--accent); }
.ea-helper b { display: block; }
.ea-helper small { color: #b9d3d0; }
.ea-page .vg-faq { margin-top: 14px; }
@media (max-width: 980px) {
	.ea-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
	.ea-page .ea-glance { margin-top: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ea-never, .ea-steps { grid-template-columns: 1fr; }
}

/* ---- the FAQ page */
.faq-guide .fq-search { position: sticky; top: 84px; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 26px; padding: 10px 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.faq-guide .fq-search .vi { color: var(--brand-bright); }
.faq-guide .fq-search input { flex: 1; min-width: 200px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 1.05rem; padding: 8px 4px; outline: none; }
.faq-guide .fq-none { width: 100%; margin: 0 0 4px; }
.faq-guide h2 { margin-top: 1.4em; }
.fq-item { border-radius: 14px; background: var(--card); border: 1px solid var(--line); padding: 0 18px; margin: 0 0 10px; }
.fq-item summary { cursor: pointer; padding: 16px 30px 16px 0; font-weight: 700; list-style: none; position: relative; }
.fq-item summary::-webkit-details-marker { display: none; }
.fq-item summary::after { content: "+"; position: absolute; right: 0; top: 12px; font-size: 1.4rem; color: var(--brand-bright); transition: transform .2s; }
.fq-item[open] summary::after { transform: rotate(45deg); }
.fq-item[open] { border-color: var(--brand-bright); }
.fq-answer p { margin: 0 0 14px; color: var(--ink-2); }

/* ---- smaller screens */
@media (max-width: 980px) {
	.vg-hero-grid, .vg-picker { grid-template-columns: 1fr; }
	.vg-hero-art { max-width: 520px; }
	.vg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vg-kinds, .vg-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vg-eas, .vg-locks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vg-pick-out { position: static; }
}
@media (max-width: 720px) {
	.vg-versus { grid-template-columns: 1fr; }
	.vg-vs { margin: -8px auto; }
	.vg-lane { grid-template-columns: 1fr 80px; }
	.vg-lane-name { grid-column: 1 / -1; }
	.vg-metro { grid-template-columns: 1fr; gap: 0; padding-left: 0; }
	.vg-metro::before { left: 25px; right: auto; top: 10px; bottom: 10px; width: 6px; height: auto; background: linear-gradient(180deg, var(--brand-bright), var(--accent)); }
	.vg-dot { flex-direction: row; text-align: left; gap: 12px; padding: 6px 0; }
	.vg-dot small { margin-left: auto; }
	.vg-hub-note { margin: 0 0 8px 64px; }
	.vg-find, .vg-chips, .vg-kinds, .vg-steps, .vg-eas, .vg-locks, .vg-faq, .vg-check ul { grid-template-columns: 1fr; }
	.vg-check { grid-template-columns: 1fr; justify-items: center; }
	.vg-check ul { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.vg-led, .vg-slow { animation: none; }
	.vg-packet { display: none; }
	.vg-bar { transition: none; transform: none; }
}