/* ══ CAPABILITY TABS ══════════════════════════════════════════════════
   The design system's own tab component (.d-tabs / .d-tabs__bar[data-tabs] /
   .d-tabs__body[data-pane]); vodlix-2026.js switches panes on click. This
   block adds only the two-column pane and the autoplay. Namespace vcap —
   never ct__, which the DS owns (.ct__phone, .ct__tv).

   Load: <link rel="stylesheet" href="https://landing.vodlix.com/shared/lp/capability-tabs.css">
         <script src="https://landing.vodlix.com/shared/lp/capability-tabs.js" defer></script>
   Markup: copy the .d-tabs.vcap block from shared/lp/tabs-preview/index.html
   (generated from one table of tabs and screens, so every page gets the same
   copy). Approved by the owner 2026-09-16.

   ORDER (owner, 2026-09-16): Backend Manager, Front End, Mobile Apps, TV
   Apps first; then Monetization, Creator Manager, AI, CRM. Each LP chooses
   which to show with data-show / data-skip (see the script). Screens come
   from shared/product/ and shared/vodlix/app/; each one has exactly one
   point on the left, paired by order.
   NOT USED: apps/02-app-branding (renders broken), ai/01 (shows Dubbing),
   mobile/02-title-detail (legacy layout; app/mobile-title-sheet replaces it),
   crm/03-email-templates (its sidebar shows Clouds, a SaaS screen),
   analytics/02-dashboard (the same image as backend/02-dashboard),
   shared/vodlix/admin/* (Test Mode badge and demo banners). */

.vcap .d-tabs__bar{overflow-x:auto;scrollbar-width:none;padding:8px 16px 0;overscroll-behavior-x:contain;scroll-padding-inline:24px;
  /* fades at the edges say "there are more tabs"; JS sets them only when the bar actually scrolls that way */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl,0px),#000 calc(100% - var(--fr,0px)),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl,0px),#000 calc(100% - var(--fr,0px)),transparent 100%)}
.vcap .d-tabs__bar::-webkit-scrollbar{display:none}
.vcap .d-tabs__bar button{flex:0 0 auto;white-space:nowrap;position:relative}
.vcap .d-tabs__body{padding:0}

/* autoplay loader = the DS underline, filling */
.vcap .d-tabs__bar button::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--accent-ink);transform-origin:left;transform:scaleX(var(--p,0));opacity:0}
.vcap[data-auto="on"] .d-tabs__bar button[aria-selected="true"]{border-bottom-color:var(--line)}
.vcap[data-auto="on"] .d-tabs__bar button[aria-selected="true"]::after{opacity:1}

.vcap__pane{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);min-height:456px}
.vcap__pane[hidden]{display:none}

/* TYPE: the DS scale only (vodlix-2026.css "Type scale — LOCKED"):
   eyebrow = DS .eyebrow; title = display face at the .vtabs__title size;
   lead = --fs-body; points = the DS tab body size (13.5px, .d-tabs__body);
   caption and note = --fs-small; link = --fs-btn. Weights 400/600/700 only,
   the ones the page loads. ICONS: Lucide, stroke 2, currentColor. */
.vcap .d-tabs__bar button{display:inline-flex;align-items:center;gap:7px;min-height:44px;-webkit-tap-highlight-color:transparent}
.vcap .d-tabs__bar button:focus-visible{outline:2px solid var(--accent-ink);outline-offset:-4px;border-radius:10px}
.vcap .d-tabs__bar .vcap__ico{flex:none;color:var(--faint);transition:color .15s ease}
.vcap .d-tabs__bar button:hover .vcap__ico,.vcap .d-tabs__bar button[aria-selected="true"] .vcap__ico{color:currentColor}
.vcap__text{padding:30px 30px 26px;display:flex;flex-direction:column}
.vcap__text .eyebrow{margin-bottom:10px;align-self:flex-start}
.vcap__text h3{font-family:var(--ff-display),system-ui,sans-serif;font-size:20px;font-weight:600;letter-spacing:-0.01em;line-height:1.3;margin:0 0 8px;text-wrap:balance}
.vcap__lead{font-size:var(--fs-body);color:var(--sub);line-height:1.6;margin:0 0 14px}
/* each point is linked to its screenshot: click it to show that screen;
   the point for the screen on show is highlighted */
.vcap__list{list-style:none;margin:0 -10px 16px;padding:0;display:grid;gap:2px}
.vcap__list button{display:grid;grid-template-columns:18px 1fr;gap:9px;align-items:start;width:100%;text-align:left;border:0;background:transparent;
  padding:8px 10px;border-radius:10px;cursor:pointer;font:inherit;font-size:13.5px;line-height:1.5;color:var(--sub);transition:background .2s ease,color .2s ease}
.vcap__list button:hover{color:var(--ink);background:var(--btn-soft)}
.vcap__list button:focus-visible{outline:2px solid var(--accent-ink);outline-offset:1px}
.vcap__list button[aria-current="true"]{color:var(--ink);background:var(--btn-soft)} /* no weight change: bold text rewraps and moves the page */
.vcap__tick{display:grid;place-items:center;width:18px;height:18px;margin-top:1px;border-radius:50%;background:var(--brand-tint);color:var(--brand);transition:background .2s ease,color .2s ease}
.vcap__list button[aria-current="true"] .vcap__tick{background:var(--brand);color:#fff}
.vcap__note{font-size:var(--fs-small);color:var(--sub);line-height:1.5;margin:0 0 14px;padding:8px 11px;border-radius:9px;background:var(--btn-soft)}
.vcap__note b{color:var(--ink);font-weight:600}
.vcap__more{margin-top:auto;font-size:var(--fs-btn);font-weight:600;color:var(--accent-ink);text-decoration:none;align-self:flex-start}
.vcap__more:hover{text-decoration:underline}

.vcap__stage{display:flex;flex-direction:column;justify-content:center;padding:24px 24px 14px;border-left:1px solid var(--line);
  background:radial-gradient(90% 90% at 70% 10%, var(--brand-tint) 0%, transparent 60%), var(--btn-soft)}
/* each slide carries its own gutter, so a neighbour's shadow never shows at the edge and the frame's own shadow is not clipped */
.vcap__vp{overflow:hidden;margin:-6px -18px -24px;touch-action:pan-y}
.vcap__track.is-drag{transition:none}
.vcap__track{display:flex;align-items:center;transition:transform .38s cubic-bezier(.4,0,.2,1)}
.vcap__slide{flex:0 0 100%;min-width:0;box-sizing:border-box;padding:6px 18px 24px}

.vcap__frame{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);
  box-shadow:0 1px 3px rgba(12,12,14,.07),0 18px 40px -26px rgba(12,12,14,.55)}
.vcap__chrome{display:flex;align-items:center;gap:6px;padding:7px 10px;border-bottom:1px solid var(--line);background:var(--bg)}
.vcap__chrome i{width:7px;height:7px;border-radius:50%;background:var(--line);display:block}
.vcap__url{margin-left:6px;flex:1;min-width:0;font-size:11px;line-height:20px;color:var(--faint);
  background:var(--btn-soft);border-radius:999px;padding:0 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vcap__slide img{cursor:zoom-in;-webkit-user-drag:none;-webkit-touch-callout:none;user-select:none}
.vcap__frame img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top}

.vcap__phones{display:flex;justify-content:center;align-items:center;gap:16px;padding:10px 0}
.vcap__ph{width:31%;max-width:140px;background:#0c0c0e;border-radius:22px;padding:6px;position:relative;
  box-shadow:0 1px 3px rgba(12,12,14,.2),0 18px 36px -22px rgba(12,12,14,.6)}
.vcap__ph::before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:30%;height:10px;border-radius:999px;background:#0c0c0e;z-index:1}
.vcap__ph img{display:block;width:100%;aspect-ratio:9/19.5;object-fit:cover;border-radius:17px}
.vcap__ph:nth-child(2){transform:translateY(-10px)}

.vcap__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;min-height:20px}
.vcap__cap{font-size:var(--fs-small);color:var(--sub);margin:0;min-width:0}
.vcap__cap b{color:var(--ink);font-weight:600}
.vcap__dots{display:flex;flex:none;margin-right:-6px}
/* 24px tall hit area per dot (WCAG 2.5.8); the pill is drawn inside it */
.vcap__dots button{display:grid;place-items:center;height:24px;min-width:24px;padding:0 2px;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.vcap__dots button::before,.vcap__dots button::after{content:"";grid-area:1/1;height:7px;border-radius:99px}
.vcap__dots button::before{width:7px;background:var(--faint);opacity:.45;transition:width .2s ease,background .2s ease,opacity .2s ease}
.vcap__dots button::after{width:0;background:var(--accent-ink);transform-origin:left;transform:scaleX(var(--p,0));opacity:0}
.vcap__dots button[aria-current="true"]::before{width:20px;background:var(--accent-ink);opacity:1}
.vcap__dots button[aria-current="true"]::after{width:20px}
.vcap__dots button:focus-visible{outline:2px solid var(--accent-ink);outline-offset:0;border-radius:6px}
.vcap[data-auto="on"] .vcap__dots button[aria-current="true"]::before{background:var(--faint);opacity:.45}
.vcap[data-auto="on"] .vcap__dots button[aria-current="true"]::after{opacity:1}

/* screenshot opened full size: modal dialog, page scroll locked, close
   button, Esc or a tap anywhere closes it */
html:has(.vcap__lb[open]){overflow:hidden}
.vcap__lb{position:fixed;inset:0;margin:auto;width:fit-content;height:fit-content;border:0;padding:0;background:transparent;max-width:94vw;max-height:92vh;overflow:visible}
.vcap__lb::backdrop{background:rgba(12,12,14,.86)}
.vcap__lb img{display:block;max-width:min(94vw,1500px);max-height:min(88vh,88dvh);width:auto;height:auto;border-radius:12px;cursor:zoom-out}
.vcap__lb button{position:fixed;top:max(12px,env(safe-area-inset-top));right:12px;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;cursor:pointer}
.vcap__lb button:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* PHONE: one column in reading order: title, screenshot, then the points
   that drive it (so the screen changes right above the thumb), then the
   link. Eyebrow and lead are dropped; the tab already names the section.
   The .vcap__text box dissolves (display:contents) so its children can be
   placed around the stage. Tap targets are 44px or more. */
@media (max-width:859.98px){
  .vcap .d-tabs__bar{padding:4px 8px 0;gap:0}
  .vcap .d-tabs__bar button{padding:10px 12px}
  .vcap__pane{display:flex;flex-direction:column;min-height:0}
  .vcap__text{display:contents}
  .vcap__text .eyebrow,.vcap__lead{display:none}
  .vcap__text h3{order:1;font-size:18px;margin:0;padding:18px 18px 14px}
  .vcap__stage{order:2;border:0;border-block:1px solid var(--line);padding:14px 14px 4px}
  .vcap__list{order:3;margin:10px 8px 6px;gap:0}
  .vcap__list button{padding:11px 10px;min-height:44px;font-size:14px}
  .vcap__note{order:4;margin:0 18px 12px}
  .vcap__more{order:5;margin:auto 18px 18px;padding-top:2px;min-height:44px;display:inline-flex;align-items:center}
  .vcap__foot{margin-top:6px;justify-content:center}
  .vcap__cap{display:none}
  .vcap__phones{gap:10px;padding:6px 0}
  .vcap__ph{border-radius:18px;padding:5px}
  .vcap__ph img{border-radius:14px}
  .vcap__ph:nth-child(2){transform:translateY(-6px)}
}
@media (hover:none){ .vcap__list button:hover{background:transparent;color:var(--sub)} .vcap__list button[aria-current="true"]:hover{background:var(--btn-soft);color:var(--ink)} }
@media (prefers-reduced-motion:reduce){.vcap__track,.vcap__list button,.vcap__tick,.vcap__dots button::before{transition:none}}

/* ── SCROLL MODE (phones): the block pins under the top bar while the page's
   scroll steps through the screens; capability-tabs.js turns it on only when
   the compact block fits the viewport. ── */
.vcap-scroll{position:relative}
/* the heading above the tabs takes the full measure: title on one line, subtitle on two */
.sechead:has(+ .d-tabs.vcap), .sechead:has(+ .vcap-scroll), .vcap-pin .sechead{max-width:none}
.sechead:has(+ .d-tabs.vcap) p, .sechead:has(+ .vcap-scroll) p, .vcap-pin .sechead p{max-width:64ch;margin-inline:auto}
/* native stepping: the document snaps to one marker per screen while the
   block is on screen (class set by the script), and stops at every marker */
html.vcap-snap{scroll-snap-type:y proximity;scroll-padding-top:var(--vcap-pin,0px)}
.vcap-snapmark{position:absolute;left:0;width:1px;height:1px;scroll-snap-align:start;scroll-snap-stop:always;pointer-events:none;visibility:hidden}
/* ── Background that answers the scroll ────────────────────────────────
   Behind the pinned card, driven by --sp (0 at the first screen, 1 at the
   last). Nothing here reacts to the pointer and nothing moves the card: the
   glows drift and trade places, the grid creeps up, the hairline fills. All
   transform/opacity, and it disappears under reduced motion. */
.vcap-bg{position:absolute;top:-90px;bottom:-110px;z-index:0;pointer-events:none;overflow:hidden;border-radius:40px;
  /* it reaches past the card into the margins, but never past the viewport:
     without the max() the page itself scrolls sideways at 1280 */
  left:max(-140px, calc(50% - 50vw + 8px));right:max(-140px, calc(50% - 50vw + 8px))}
.vcap-bg__glow{position:absolute;display:block;border-radius:50%;filter:blur(60px)}
.vcap-bg__glow--a{width:52%;aspect-ratio:1;left:-12%;top:-16%;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--brand) 42%, transparent), transparent);
  translate:calc(var(--sp, 0) * 26%) calc(var(--sp, 0) * 190%);scale:calc(1 + var(--sp, 0) * .25);
  opacity:calc(.55 + var(--sp, 0) * .35)}
.vcap-bg__glow--b{width:46%;aspect-ratio:1;right:-10%;bottom:-16%;
  background:radial-gradient(closest-side, color-mix(in srgb, #f89436 34%, transparent), transparent);
  translate:calc(var(--sp, 0) * -22%) calc(var(--sp, 0) * -170%);scale:calc(1.15 - var(--sp, 0) * .2);
  opacity:calc(.75 - var(--sp, 0) * .3)}
.vcap-bg__grid{position:absolute;inset:-40px 0;display:block;opacity:.85;
  background-image:radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 18%, transparent) 1.2px, transparent 0);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(85% 75% at 50% 45%, #000 45%, transparent 80%);
          mask-image:radial-gradient(85% 75% at 50% 45%, #000 45%, transparent 80%);
  translate:0 calc(var(--sp, 0) * -150px)}
/* ── Charge, pop, release (opt in with data-bg="charge") ───────────────
   The reaction-button feel, borrowed for a scroll: pressure builds while
   you hold. Rings swell and fill the further you get, product icons and
   bubbles rise at their own depths, every tab you pass sends one pulse
   outward, and at 95% of the run the burst pays it off. All of it reads
   the same --sp the glows do; the card itself never moves. */
.vcap-bg__ring{position:absolute;left:50%;top:50%;width:var(--r);aspect-ratio:1;translate:-50% -50%;
  border-radius:50%;border:1.5px solid color-mix(in srgb, var(--brand) var(--tint,22%), transparent);
  background:radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--brand) calc(var(--fill,5%) + var(--sp,0) * 4%), transparent) 55%, transparent 72%);
  scale:calc(.55 + var(--sp,0) * .7);opacity:calc(.25 + var(--sp,0) * .5)}
/* On a phone the card fills the width, so anything the size of the card is
   simply behind it. The rings grow instead of shrinking: their arcs cross
   the strips above and below the card, which is the only background the
   reader can actually see there. */
@media (max-width:859.98px){   /* same breakpoint the script calls narrow */
  .vcap-bg__ring{width:calc(var(--r) * 1.85);opacity:calc(.2 + var(--sp,0) * .4)}
  .vcap-bg__pulse{width:460px;margin:-230px}
  /* the bands are small, so what lands in them carries a little more weight */
  .vcap-bg__ic{opacity:calc(var(--o,.22) * 1.45)}
  .vcap-bg__bub{opacity:calc(.4 + var(--sp,0) * .35)}
}
/* --d is depth: 1 = close (moves most), .3 = far */
.vcap-bg__ic{position:absolute;left:var(--x);top:var(--y);width:var(--size,30px);height:var(--size,30px);
  color:var(--brand);opacity:var(--o,.22);
  translate:0 calc(var(--sp,0) * var(--d,1) * -260px);
  animation:vcapIcFloat var(--t,7s) ease-in-out infinite alternate;animation-delay:var(--delay,0s)}
.vcap-bg__ic svg{width:100%;height:100%;display:block}
@keyframes vcapIcFloat{from{transform:translateY(-6px) rotate(-3deg)}to{transform:translateY(6px) rotate(3deg)}}
.vcap-bg__bub{position:absolute;left:var(--x);top:var(--y);width:var(--size,14px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,
    color-mix(in srgb, var(--c2,#fff) 85%, transparent), color-mix(in srgb, var(--c1,var(--brand)) 34%, transparent));
  border:1px solid color-mix(in srgb, var(--c1,var(--brand)) 22%, transparent);
  translate:0 calc(var(--sp,0) * var(--d,1) * -220px);
  scale:calc(.6 + var(--sp,0) * .9);opacity:calc(.3 + var(--sp,0) * .35);
  animation:vcapBubFloat var(--t,8s) ease-in-out infinite alternate;animation-delay:var(--delay,0s)}
@keyframes vcapBubFloat{from{transform:translateY(-7px)}to{transform:translateY(7px)}}
/* one pulse per tab passed */
.vcap-bg__pulse{position:absolute;left:50%;top:50%;width:200px;aspect-ratio:1;margin:-100px;border-radius:50%;
  border:2px solid color-mix(in srgb, var(--brand) 40%, transparent);
  background:radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 70%);
  opacity:0}
.vcap-bg.is-pop .vcap-bg__pulse{animation:vcapPulse .62s cubic-bezier(.2,.75,.3,1) both}
@keyframes vcapPulse{0%{scale:.5;opacity:.55}100%{scale:2.1;opacity:0}}
.vcap-bg.is-pop .vcap-bg__ring{animation:vcapRingPop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes vcapRingPop{40%{scale:calc(.62 + var(--sp,0) * .7)}}
/* The release. It rides ABOVE the card, not behind it: on a phone the card
   fills the screen, and a burst hidden behind it is a burst nobody sees. It
   lasts 1.5s, never takes the pointer, and leaves nothing on screen. */
.vcap-burst{position:absolute;top:-90px;bottom:-110px;z-index:6;pointer-events:none;overflow:hidden;
  left:max(-140px, calc(50% - 50vw + 8px));right:max(-140px, calc(50% - 50vw + 8px))}
.vcap-bg__burst{position:absolute;inset:0;opacity:0}
.vcap-bg__burst i{position:absolute;left:calc(50% + var(--ox,0%));top:calc(50% + var(--oy,0%));
  width:var(--size,18px);height:var(--size,18px);margin:calc(var(--size,18px) / -2);
  color:var(--brand);opacity:0}
.vcap-bg__burst i.is-dot{border-radius:50%;background:var(--c,color-mix(in srgb, var(--brand) 75%, transparent))}
.vcap-bg__burst i svg{width:100%;height:100%;display:block}
.is-done .vcap-bg__burst{opacity:1}
.is-done .vcap-bg__burst i{animation:vcapBurst 1.5s cubic-bezier(.12,.72,.24,1) both;animation-delay:var(--delay,0s)}
@keyframes vcapBurst{
  0%{translate:0 0;scale:.2;opacity:0;rotate:0deg}
  14%{opacity:1;scale:1.12}
  62%{opacity:1}
  100%{translate:var(--tx) var(--ty);scale:.8;opacity:0;rotate:var(--rot,90deg)}
}
@media (prefers-reduced-motion:reduce){.vcap-bg{display:none}}

/* the sticky group: heading (when it fits) + card */
.vcap-pin{position:sticky;z-index:5}
.vcap-pin > :not(.vcap-bg):not(.vcap-burst){position:relative;z-index:1}
.vcap-pin .sechead{margin-bottom:14px}
.vcap-pin[data-head="title"] .sechead p{display:none}
.vcap-pin[data-head="title"] .sechead{margin-bottom:10px}
@media (max-width:859.98px){ .vcap-pin .sechead h2{font-size:20px} }
.vcap[data-scrolly="on"]{position:relative;display:flex;flex-direction:column;height:auto}   /* the rail is placed against the card, not the pinned group */
/* one height for every tab while pinned (set by the script); on a phone the
   spare room goes around the screenshot, not under the points */
.vcap[data-scrolly="on"] > [data-pane]:not([hidden]){flex:1 1 auto}
@media (max-width:859.98px){
  .vcap[data-scrolly="on"] .vcap__stage{flex:1 1 auto;justify-content:center}
  .vcap[data-scrolly="on"] .vcap__list{flex:0 0 auto}
}
.vcap[data-scrolly="on"] .d-tabs__bar button[aria-selected="true"]{border-bottom-color:var(--line)}
.vcap[data-scrolly="on"] .d-tabs__bar button[aria-selected="true"]::after{opacity:1}
.vcap[data-scrolly="on"] .vcap__dots button[aria-current="true"]::before{background:var(--faint);opacity:.45}
.vcap[data-scrolly="on"] .vcap__dots button[aria-current="true"]::after{opacity:1}
.vcap[data-scrolly="on"] .vcap__track{transition-duration:.3s}
/* PHONE, while pinned: compact type and spacing. Two fits, picked by the
   script: "full" shows every point of the tab (the one on screen
   highlighted); "lite" shows only the point on screen, for short viewports. */
@media (max-width:859.98px){
  .vcap[data-scrolly="on"] .vcap__text h3{font-size:16px;padding-top:12px;padding-bottom:6px}
  .vcap[data-scrolly="on"] .vcap__stage{padding-top:10px;padding-bottom:2px}
  .vcap[data-scrolly="on"] .vcap__ph{max-width:92px}
  .vcap[data-scrolly="on"] .vcap__foot{margin-top:2px}
  .vcap[data-scrolly="on"] .vcap__list button{padding-top:5px;padding-bottom:5px;font-size:13px;line-height:1.35}
  .vcap[data-scrolly="on"] .vcap__tick{width:16px;height:16px}
  .vcap[data-scrolly="on"] .vcap__note{font-size:11.5px;padding:6px 10px;margin:2px 14px 8px;line-height:1.4}
  .vcap[data-scrolly="on"] .vcap__more{display:none}
  .vcap[data-scrolly="on"] .vcap__list{margin:8px 8px 10px}
  .vcap[data-scrolly="on"][data-fit="lite"] .vcap__list{min-height:58px}
  .vcap[data-scrolly="on"][data-fit="lite"] .vcap__list li:not(:has(> [aria-current="true"])){display:none}
}
/* a tab change while pinned fades in rather than cutting */
.vcap[data-scrolly="on"] > [data-pane]:not([hidden]){animation:vcapIn .28s ease both}
@keyframes vcapIn{from{opacity:.35}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.vcap[data-scrolly="on"] > [data-pane]:not([hidden]){animation:none}}
/* progress rail: shown only while pinned, on the right edge of the card */
.vcap__rail{display:none}
.vcap[data-scrolly="on"]{padding-right:40px}
.vcap[data-scrolly="on"] .vcap__rail{display:flex;flex-direction:column;align-items:center;gap:8px;position:absolute;top:0;right:0;bottom:0;width:40px;padding:12px 0 10px;border-left:1px solid var(--line);background:var(--bg)}
.vcap__rail-l{writing-mode:vertical-rl;transform:rotate(180deg);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);flex:none}
.vcap__rail-track{flex:1 1 auto;display:flex;flex-direction:column;gap:3px;width:4px;min-height:0}
.vcap__rail-track i{flex:1 1 0;min-height:4px;border-radius:2px;background:var(--line);transition:background .25s ease}
.vcap__rail-track i.vcap__seg--first{margin-top:5px}
.vcap__rail-track i.is-done{background:color-mix(in srgb,var(--brand) 45%,var(--line))}
.vcap__rail-track i.is-on{background:var(--brand);box-shadow:0 0 0 2px var(--brand-tint)}
.vcap__count{font-size:10px;font-variant-numeric:tabular-nums;color:var(--sub);white-space:nowrap;flex:none}
.vcap__skiprow{display:flex;justify-content:center;padding:10px 0 2px}
/* the DS secondary pill (.btn.btn--secondary.btn--sm); nothing styled here:
   the DS says borders not shadows, colour-only hovers */
.vcap__skip svg{display:block;transition:rotate .2s cubic-bezier(.2,.8,.25,1)}
@media (prefers-reduced-motion:reduce){.vcap__skip svg{transition:none}}