/* 04 · Volt Strength Co — gym. Black, electric blue, Archivo set wide and heavy. A film hero with the
   word VOLT drifting behind, rings of numbers, a dragged comparison, a pricing switch. */
.v-volt { --bg: #0b0c10; --fg: #f4f5f7; --mut: #8a8f9c; --acc: #3b5bff; --acc2: #7d93ff; --edge: #23252d; background: var(--bg); color: var(--fg); --btn-r: 10px; --fx-pin-accent: var(--acc); --fx-step-accent: var(--acc); --fx-price-ink: var(--fg); --fx-toggle-knob: var(--acc); --fx-toggle-track: var(--edge); --fx-toggle-on: var(--fg); --fx-toggle-line: var(--edge); --fx-badge-bg: var(--acc); --fx-badge-ink: #ffffff; --fx-ring-ink: var(--acc); --fx-ring-text: var(--fg); --fx-ring-track: var(--edge); }
.v-volt .volt-hero { min-height: 100svh; display: grid; align-content: end; }
.v-volt .volt-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.7; }
.v-volt .volt-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(11 12 16 / 0.2), rgb(11 12 16 / 0.6) 60%, var(--bg)); pointer-events: none; }
.v-volt .volt-hero > [data-fx-word] { font: 900 clamp(160px, 30vw, 460px)/0.84 "Archivo", var(--display); font-stretch: 118%; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 2px rgb(125 147 255 / 0.5); right: -2%; top: 8%; z-index: 1; }
.v-volt .volt-hero__in { position: relative; z-index: 2; padding-block: clamp(60px, 8vw, 110px) clamp(48px, 6vw, 80px); }
.v-volt .eyebrow--pill { color: var(--acc2); }
.v-volt h2 { font: 900 clamp(44px, 9.6vw, 150px)/0.9 "Archivo", var(--display); font-stretch: 110%; text-transform: uppercase; letter-spacing: -0.025em; max-width: 10ch; }
.v-volt h2 em { font-style: normal; color: var(--acc); }
.v-volt .btn { background: var(--acc); color: #fff; }
.v-volt .volt-body { padding-block: clamp(56px, 7vw, 100px); }
.v-volt .volt-rings { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; --fx-ring-color: var(--acc); --fx-ring-track: var(--edge); }
.v-volt .volt-rings figure { display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: center; padding: 22px; border: 1px solid var(--edge); border-radius: 16px; }
.v-volt .volt-rings [data-fx-ring] p { font: 900 40px/1 "Archivo", var(--display); color: var(--fg); }
.v-volt .volt-rings small { font-size: 0.5em; }
.v-volt .volt-rings figcaption b { font: 700 15px/1.3 var(--sans); }
.v-volt .volt-compare { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: clamp(56px, 7vw, 96px); }
.v-volt .volt-compare h3 { font: 900 clamp(34px, 4vw, 60px)/0.95 "Archivo", var(--display); text-transform: uppercase; letter-spacing: -0.02em; }
.v-volt .volt-compare h3 em { font-style: normal; color: var(--acc); }
.v-volt .volt-compare p { color: var(--mut); margin-top: 16px; max-width: 40ch; }
.v-volt .volt-ba { aspect-ratio: 4 / 3; border-radius: 16px; overflow: clip; }
.v-volt .volt-plans { margin-top: clamp(56px, 7vw, 96px); }
.v-volt .volt-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 28px; }
.v-volt .volt-tiers article { padding: 26px; border: 1px solid var(--edge); border-radius: 16px; }
.v-volt .volt-tiers .volt-top { border-color: var(--acc); background: rgb(59 91 255 / 0.1); }
.v-volt .volt-tier { font: 700 12px/1 var(--display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--acc2); }
.v-volt .volt-amt { font: 900 clamp(44px, 4.4vw, 64px)/1 "Archivo", var(--display); margin-top: 14px; }
.v-volt .volt-per { color: var(--mut); font-size: 14px; margin-top: 8px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.v-volt .volt-tiers ul { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--edge); display: grid; gap: 8px; font-size: 15px; }
.v-volt .fxlist { color: var(--mut); }
@media (max-width: 900px) { .v-volt .volt-compare { grid-template-columns: 1fr; } }