/* vc-tool-list.css — the "what the subscription includes" section, SHARED by
   /pricing (public/legal/pricing.html) and /account/upgrade
   (public/account/upgrade.html).
   ⚠ BUMP `?v=` ON EVERY EDIT, in BOTH pages, and keep the two tags identical so
     they resolve to one asset. A versioned /public/* file is served
     `max-age=31536000, immutable` (server.js ~L1082), so an unbumped edit reaches
     a returning visitor NEVER.

   WHY A FILE AND NOT TWO <style> BLOCKS. The markup is emitted by one script
   (vc-tool-list.js) from one payload (src/web/toolCatalogue.js). Copying the
   rules into each page's own <style> would be the one part of the component that
   could still drift, on a surface where a stale rule shows a buyer a broken list.
   The `.vctl-` prefix keeps it out of both hosts' namespaces (`pr-` / `uc-`).

   PORTED FROM public/vc/founding.html, rule-for-rule: the same gold hairline
   rule, the same cards with the gold ✓ disc, the same boxed sub-feature block, so
   a reader who saw the landing page recognises the same component. The one
   systematic change is the palette hook: founding.html declares its own :root
   (--gold/--ink/--sub/--panel/--line) and these pages do not, so each is mapped
   to its vc-theme equivalent (var(--vc-gold), --vc-text, --vc-text-sub) or to the
   literal rgba the landing page resolves to (--panel → rgba(255,255,255,0.035),
   --line → rgba(255,255,255,0.09)). NOT ported: the landing's [data-rise] reveal
   animation (neither host runs an IntersectionObserver — the CSS without the
   observer would leave the section at opacity 0).

   NO OPEN/CLOSED VARIANT. The list no longer states per-row availability (owner,
   2026-08-04), so there is exactly one card treatment and one sub-feature block
   treatment. The whole-list qualifier is the `.vctl-note` line. */

.vctl-sec { max-width: 1000px; margin: 40px auto 0; padding: 34px 0 20px; }
.vctl-sec::before {
  content: ""; display: block; width: 60px; height: 2px; margin: 0 auto 26px;
  background: linear-gradient(90deg, transparent, var(--vc-gold), transparent);
}
/* The headline now stands alone where a kicker + h2 + lead + coverage line used
   to stack, so it carries the section's whole visual weight: the rule sits
   closer above it and the note closer under it than the ported values, or the
   single line reads as the leftover of something that was removed. */
.vctl-sec h2 {
  text-align: center; font-size: clamp(1.55rem, 3.8vw, 2.15rem); font-weight: 800;
  letter-spacing: -0.02em; margin: 0 0 12px; text-wrap: balance; color: var(--vc-text);
}
/* The two banner rows. Leagues read as the louder statement (this is what you
   get), formats as the qualifier beneath it (this is what we speak) — so the
   leagues take the gold gradient and the formats sit lighter and tracked-out.
   Both wrap and both drop their separators when wrapped, because a leading
   separator on a new line reads as a missing item. */
.vctl-leagues, .vctl-formats {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0 10px; margin: 0 auto; text-align: center;
}
.vctl-leagues {
  font-size: clamp(1.05rem, 2.6vw, 1.5rem); font-weight: 900; letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.vctl-leagues span {
  background: linear-gradient(100deg, #f6e7b0, var(--vc-gold) 45%, #e2c268);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .vctl-leagues span { color: var(--vc-gold); }
}
.vctl-formats {
  font-size: clamp(0.82rem, 1.9vw, 0.98rem); font-weight: 700;
  letter-spacing: 0.06em; color: var(--vc-text-sub); margin-bottom: 26px;
}
.vctl-dot, .vctl-bar { font-style: normal; opacity: 0.42; font-weight: 400; }
.vctl-bar { transform: translateY(-1px); }
.vctl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.vctl-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 13px 14px;
  background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px; font-size: 0.85rem; line-height: 1.5; color: var(--vc-text);
  transition: border-color .2s, transform .2s; text-align: start;
}
.vctl-item:hover { border-color: rgba(252,198,29,0.45); transform: translateY(-2px); }
.vctl-item .vctl-ck {
  flex: none; width: 22px; height: 22px; border-radius: 50%; background: rgba(252,198,29,0.15);
  color: var(--vc-gold); display: grid; place-items: center; font-weight: 900; font-size: 0.78rem; margin-top: 1px;
}
.vctl-txt { display: block; min-width: 0; }
.vctl-nm { font-weight: 800; }
.vctl-ds { color: var(--vc-text-sub); }
/* The one emphasised clause a row may end on. Same gold gradient as the leagues
   banner above, so the page has ONE way of saying "this part matters" — and the
   same @supports fallback, because a browser without background-clip:text would
   otherwise render it transparent, i.e. invisible. Slightly heavier than the
   description it follows; it is a clause of the same sentence, not a heading. */
.vctl-gold {
  font-weight: 700;
  background: linear-gradient(100deg, #f6e7b0, var(--vc-gold) 45%, #e2c268);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .vctl-gold { color: var(--vc-gold); }
}
/* A tool's sub-feature list — the landing page's boxed league block. Emitted
   after the grid so the section closes on it, exactly as the original does. */
.vctl-league {
  margin-top: 14px; padding: 22px 24px; border-radius: 18px; text-align: start;
  background: rgba(252,198,29,0.06); border: 1px solid rgba(252,198,29,0.32);
  box-shadow: 0 0 0 1px rgba(252,198,29,0.22), 0 24px 60px -34px rgba(252,198,29,0.4);
}
.vctl-league h3 { margin: 0 0 15px; font-size: 1.12rem; display: flex; align-items: center; gap: 10px; color: var(--vc-text); }
.vctl-league ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px 22px; }
.vctl-league li { position: relative; padding-inline-start: 24px; color: var(--vc-text); font-size: 0.96rem; line-height: 1.45; }
.vctl-league li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--vc-gold); font-weight: 800; }
@media (max-width: 640px) {
  .vctl-grid { grid-template-columns: 1fr; }
  .vctl-league ul { grid-template-columns: 1fr; }
}

/* ─── The way back to the offer ───────────────────────────────────────────────
   PORTED FROM public/vc/founding.html's `.cta` family, rule-for-rule (gold fill,
   #08121c ink, 14px radius, 800 weight, the same lift + glow on hover), because
   a reader arriving from the landing page has already been taught what a gold
   pill on this campaign means. The one change is the ARROW AXIS: the landing
   CTA's arrow points along the reading direction and slides sideways; this one
   points UP, at the plan cards it scrolls back to, so it slides up.
   Palette hook as everywhere else in this file: --gold → var(--vc-gold). */
.vctl-ctaWrap { text-align: center; margin: 26px 0 2px; }
.vctl-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--vc-gold); color: #08121c; border: 0; border-radius: 14px; font: inherit;
  font-size: 1.08rem; font-weight: 800; padding: 16px 38px; cursor: pointer; text-decoration: none;
  transition: transform .18s, box-shadow .18s, filter .18s;
  box-shadow: 0 16px 40px -16px rgba(252,198,29,0.75);
}
.vctl-cta:hover { transform: translateY(-2px); box-shadow: 0 22px 52px -18px rgba(252,198,29,0.9); filter: brightness(1.04); }
/* The landing page is a <a>; this is a real <button>, so it needs a keyboard
   ring of its own. Dark on gold — a gold ring on a gold pill is invisible. */
.vctl-cta:focus-visible { outline: 3px solid #08121c; outline-offset: -7px; }
.vctl-arw { transition: transform .2s; line-height: 1; }
.vctl-cta:hover .vctl-arw { transform: translateY(-4px); }

/* The landing signal on the plan card the button scrolls to. A brief shake plus
   a gold pulse, then it SETTLES: no `forwards` fill and the class is removed by
   the script, so the card is left exactly as it was found. Applied to the host's
   own card element (.pr-card / .uc-card), which is why it only touches
   transform and box-shadow — the two properties neither host sets on the
   featured card in a way a 1.6s animation would permanently disturb. */
@keyframes vctl-spot-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
@keyframes vctl-spot-glow {
  0%   { box-shadow: 0 0 0 0 rgba(252,198,29,0); }
  25%  { box-shadow: 0 0 0 4px rgba(252,198,29,0.6), 0 0 48px -4px rgba(252,198,29,0.8); }
  100% { box-shadow: 0 0 0 0 rgba(252,198,29,0); }
}
.vctl-spot { animation: vctl-spot-shake .5s ease, vctl-spot-glow 1.6s ease-out; }

/* Same contract as the landing page's own reduced-motion block: nothing moves.
   The emphasis does NOT disappear with the animation — it becomes a static gold
   ring, which the script removes on the same timer, so a reader who cannot have
   motion still gets told which card they were sent to. */
@media (prefers-reduced-motion: reduce) {
  .vctl-cta { transition: none; }
  .vctl-cta:hover { transform: none; }
  .vctl-cta:hover .vctl-arw { transform: none; }
  .vctl-spot { animation: none; outline: 3px solid var(--vc-gold); outline-offset: 4px; }
}