/* vv-components: the vermilionvitez.com page kit (docs/page-playbook.md).
   Eleven blocks every public page is built from. Brand Guide v2 (Daylight)
   tokens only (assets/vv-daylight-tokens.css, linked first in every head);
   no literal brand colours here. Every class is prefixed vvc- so nothing
   collides with the vv.css utilities (.grid, .hidden, .fixed...).

   Motion: nothing here hides content. Reveals, count-ups, the timeline fill
   and the chart bars are driven by vv-components.js (GSAP + ScrollTrigger
   when the page loads them, IntersectionObserver otherwise) and are skipped
   entirely under prefers-reduced-motion, so a page with no JS, or a reader
   who asked for less motion, sees every block at rest.

   Demo of every block: /admin-components (admin login, noindex). */

/* ---------- shared ---------- */
.vvc-wrap { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 768px) { .vvc-wrap { padding: 0 1.5rem; } }
.vvc-kicker { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vv-blue); margin: 0 0 .5rem; }
.vvc-h2 { font-family: 'Playfair Display', 'Playfair Fallback', Georgia, serif; font-weight: 400; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); line-height: 1.2; color: var(--vv-ink); margin: 0 0 .75rem; }
.vvc-lede { color: var(--vv-muted); line-height: 1.65; margin: 0 0 1.25rem; max-width: 42rem; }
.vvc-ic { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .75rem; background: var(--vv-sky); color: var(--vv-blue); font-size: 1.05rem; flex-shrink: 0; }
.vvc-ic svg { width: 1.25rem; height: 1.25rem; }
.vvc-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: .8rem 1.5rem; border-radius: 12px; font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer; border: 2px solid transparent; transition: transform .2s ease-out, filter .2s ease-out, background-color .2s ease-out; }
.vvc-btn:hover { transform: translateY(-1px); filter: brightness(.95); }
.vvc-btn:focus-visible { outline: 3px solid var(--vv-night-accent); outline-offset: 2px; }
.vvc-btn--buy { background: var(--vv-green); color: #fff; }
.vvc-btn--buy:hover { background: var(--vv-green-hover); }
.vvc-btn--primary { background: var(--vv-blue); color: #fff; }
.vvc-btn--primary:hover { background: var(--vv-blue-hover); }
.vvc-btn--ghost { background: transparent; color: var(--vv-blue); border-color: var(--vv-blue); }
.vvc-btn--light { background: #fff; color: var(--vv-navy); }
.vvc-btn--light:hover { background: var(--vv-glow); }
.vvc-btn--block { width: 100%; }
.vvc-link { color: var(--vv-blue); font-weight: 600; text-decoration: none; }
.vvc-link:hover { text-decoration: underline; }
.vvc-note { font-size: .85rem; color: var(--vv-muted); line-height: 1.5; margin: .5rem 0 0; }

/* ---------- 1. answer box: the 2-line answer at the top ---------- */
.vvc-answer { position: relative; background: #fff; border: 1px solid var(--vv-line); border-left: 4px solid var(--vv-blue); border-radius: 0 16px 16px 0; padding: 1.1rem 1.25rem 1.1rem 1.35rem; margin: 0 0 1.5rem; }
.vvc-answer-k { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vv-blue); margin: 0 0 .4rem; }
.vvc-answer-k::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--vv-blue); }
.vvc-answer p { margin: 0; color: var(--vv-ink); font-size: 1.08rem; line-height: 1.65; }
.vvc-answer p + p { margin-top: .5rem; }
.vvc-answer strong { color: var(--vv-ink); }
.vvc-answer-checked { display: block; margin-top: .65rem; font-size: .82rem; color: var(--vv-muted); }
.vvc-answer-list { margin: 0; padding: 0 0 0 1.15rem; list-style: disc; }
.vvc-answer-list li { margin: .3rem 0; color: var(--vv-ink); font-size: 1.02rem; line-height: 1.6; }
.vvc-answer-list li::marker { color: var(--vv-blue); }
.vvc-answer p.vvc-note { margin-top: .75rem; font-size: .85rem; line-height: 1.5; color: var(--vv-muted); }

/* ---------- 2. step timeline that fills on scroll ---------- */
.vvc-timeline { position: relative; list-style: none; margin: 1.25rem 0 1.5rem; padding: 0 0 0 2.75rem; counter-reset: vvc-step; }
.vvc-timeline-rail { position: absolute; left: 1.05rem; top: .6rem; bottom: .6rem; width: 3px; border-radius: 3px; background: var(--vv-line); overflow: hidden; }
.vvc-timeline-fill { position: absolute; inset: 0; background: var(--vv-blue); transform-origin: top; }
.vvc-step { position: relative; padding: 0 0 1.5rem; counter-increment: vvc-step; }
.vvc-step:last-child { padding-bottom: 0; }
.vvc-step-n { position: absolute; left: -2.75rem; top: -.1rem; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: #fff; border: 2px solid var(--vv-line); color: var(--vv-muted); font-weight: 700; font-size: .85rem; font-variant-numeric: tabular-nums; transition: background-color .2s ease-out, border-color .2s ease-out, color .2s ease-out; }
.vvc-step-n:empty::before { content: counter(vvc-step); }
.vvc-step.is-done .vvc-step-n { background: var(--vv-blue); border-color: var(--vv-blue); color: #fff; }
.vvc-step h3 { margin: 0 0 .3rem; font-size: 1.05rem; font-weight: 700; color: var(--vv-ink); line-height: 1.35; }
.vvc-step p { margin: 0; color: var(--vv-muted); line-height: 1.6; }
.vvc-step-meta { display: inline-block; margin-top: .4rem; font-size: .8rem; font-weight: 600; color: var(--vv-blue); background: var(--vv-sky); padding: .15rem .55rem; border-radius: 999px; }
@media (min-width: 860px) { .vvc-timeline--wide .vvc-step { display: grid; grid-template-columns: 1fr 2fr; gap: 1.5rem; } }

/* ---------- 3. icon feature grid ---------- */
.vvc-grid { display: grid; gap: 1rem; margin: 1.25rem 0 1.5rem; }
@media (min-width: 640px) { .vvc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .vvc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vvc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vvc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vvc-feature { background: #fff; border: 1px solid var(--vv-line); border-radius: 16px; padding: 1.15rem 1.2rem; display: flex; flex-direction: column; gap: .6rem; transition: border-color .2s ease-out, transform .2s ease-out; }
a.vvc-feature { text-decoration: none; color: inherit; }
a.vvc-feature:hover { border-color: var(--vv-blue); transform: translateY(-2px); }
.vvc-feature h3 { margin: 0; font-size: 1.02rem; font-weight: 700; color: var(--vv-ink); line-height: 1.35; }
.vvc-feature p { margin: 0; font-size: .92rem; color: var(--vv-muted); line-height: 1.6; }
.vvc-feature .vvc-link { font-size: .9rem; margin-top: auto; }

/* ---------- 4. comparison cards: a table on wide screens, cards on phones ---------- */
.vvc-compare-wrap { border: 1px solid var(--vv-line); border-radius: 16px; background: #fff; overflow: hidden; margin: 1.25rem 0 1.5rem; }
.vvc-compare { width: 100%; border-collapse: collapse; font-size: .92rem; }
.vvc-compare caption { caption-side: top; text-align: left; padding: .9rem 1rem; font-size: .82rem; color: var(--vv-muted); line-height: 1.5; border-bottom: 1px solid var(--vv-line); }
.vvc-compare thead th { text-align: left; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--vv-muted); padding: .7rem 1rem; background: var(--vv-mist); border-bottom: 1px solid var(--vv-line); }
.vvc-compare tbody th, .vvc-compare tbody td { text-align: left; vertical-align: top; padding: .8rem 1rem; border-top: 1px solid var(--vv-line); line-height: 1.5; color: var(--vv-muted); }
.vvc-compare tbody tr:first-child th, .vvc-compare tbody tr:first-child td { border-top: 0; }
.vvc-compare tbody th { font-weight: 700; color: var(--vv-ink); }
.vvc-compare .vvc-yes { color: var(--vv-green); font-weight: 700; }
.vvc-compare .vvc-no { color: var(--vv-muted); }
.vvc-compare .vvc-price { font-weight: 700; color: var(--vv-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vvc-compare tr.vvc-us th, .vvc-compare tr.vvc-us td { background: var(--vv-sky); }
.vvc-compare a { color: var(--vv-blue); font-weight: 600; overflow-wrap: anywhere; }
.vvc-tag { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .12rem .5rem; border-radius: 999px; background: var(--vv-mist); color: var(--vv-ink); }
.vvc-tag--blue { background: var(--vv-blue); color: #fff; }
@media (max-width: 760px) {
  .vvc-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .vvc-compare, .vvc-compare tbody, .vvc-compare tr, .vvc-compare th, .vvc-compare td { display: block; width: 100%; box-sizing: border-box; }
  .vvc-compare caption { display: block; }
  .vvc-compare tbody tr { padding: .85rem 1rem; border-top: 1px solid var(--vv-line); }
  .vvc-compare tbody tr:first-child { border-top: 0; }
  .vvc-compare tbody th { padding: 0 0 .35rem; border: 0; font-size: 1rem; }
  /* label in an absolute box on the left, content indented: mixed inline content (text + links) stays one flow, unlike a grid cell */
  .vvc-compare tbody td { display: block; position: relative; padding: .25rem 0 .25rem calc(38% + .5rem); border: 0; min-height: 1.5em; }
  .vvc-compare tbody td::before { content: attr(data-label); position: absolute; left: 0; top: .4rem; width: 38%; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--vv-muted); line-height: 1.3; }
  .vvc-compare tbody td:not([data-label]) { padding-left: 0; }
  .vvc-compare tbody td:not([data-label])::before { content: none; }
  .vvc-compare .vvc-price { white-space: normal; }
}

/* ---------- 5. stat / number callout with count-up ---------- */
.vvc-stats { display: grid; gap: 1rem; margin: 1.25rem 0 1.5rem; }
@media (min-width: 640px) { .vvc-stats { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); } }
.vvc-stat { background: #fff; border: 1px solid var(--vv-line); border-radius: 16px; padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .3rem; }
.vvc-stat--band { background: var(--vv-navy); border-color: transparent; }
.vvc-stat-n { font-family: 'Playfair Display', 'Playfair Fallback', Georgia, serif; font-size: clamp(2rem, 1.6rem + 1.5vw, 2.6rem); line-height: 1.05; color: var(--vv-ink); font-variant-numeric: tabular-nums; }
.vvc-stat--band .vvc-stat-n { color: #fff; }
.vvc-stat-n small { font-family: Inter, system-ui, sans-serif; font-size: .95rem; color: var(--vv-muted); margin-left: .25rem; }
.vvc-stat--band .vvc-stat-n small { color: var(--vv-glow); }
.vvc-stat-l { font-size: .9rem; color: var(--vv-muted); line-height: 1.5; }
.vvc-stat--band .vvc-stat-l { color: var(--vv-glow); }
.vvc-stat-src { font-size: .78rem; color: var(--vv-muted); }
.vvc-stat-src a { color: var(--vv-blue); }
.vvc-stat--band .vvc-stat-src, .vvc-stat--band .vvc-stat-src a { color: var(--vv-night-accent); }

/* ---------- 6. cost chart: horizontal SVG bars from data attributes ---------- */
.vvc-chart { background: #fff; border: 1px solid var(--vv-line); border-radius: 16px; padding: 1.1rem 1.2rem 1rem; margin: 1.25rem 0 1.5rem; }
.vvc-chart figcaption { font-weight: 700; color: var(--vv-ink); margin: 0 0 .85rem; line-height: 1.4; }
.vvc-chart figcaption small { display: block; font-weight: 400; font-size: .82rem; color: var(--vv-muted); margin-top: .15rem; }
.vvc-chart-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.vvc-chart-row { display: grid; grid-template-columns: minmax(6rem, 10rem) 1fr auto; align-items: center; gap: .6rem; font-size: .9rem; }
.vvc-chart-label { color: var(--vv-ink); font-weight: 600; line-height: 1.3; }
.vvc-chart-svg { display: block; width: 100%; height: 1.1rem; }
.vvc-chart-bar { fill: var(--vv-blue); rx: 3; }
.vvc-chart-row.vvc-us .vvc-chart-bar { fill: var(--vv-green); }
.vvc-chart-row.vvc-dim .vvc-chart-bar { fill: var(--vv-field); }
.vvc-chart-value { color: var(--vv-ink); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.vvc-chart-src { margin: .75rem 0 0; font-size: .78rem; color: var(--vv-muted); }
.vvc-chart-src a { color: var(--vv-blue); }
@media (max-width: 480px) { .vvc-chart-row { grid-template-columns: 1fr auto; } .vvc-chart-row .vvc-chart-svg { grid-column: 1 / -1; order: 3; } }

/* ---------- 7. trust strip ---------- */
.vvc-trust { display: grid; gap: .75rem; margin: 1.25rem 0; padding: .9rem 1rem; background: var(--vv-mist); border: 1px solid var(--vv-line); border-radius: 16px; }
@media (min-width: 640px) { .vvc-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .vvc-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vvc-trust-item { display: flex; align-items: flex-start; gap: .6rem; min-width: 0; font-size: .88rem; line-height: 1.4; color: var(--vv-muted); text-decoration: none; }
.vvc-trust-item .vvc-ic { width: 2rem; height: 2rem; border-radius: .6rem; font-size: .9rem; background: #fff; }
.vvc-trust-item b { display: block; color: var(--vv-ink); font-weight: 700; }
a.vvc-trust-item:hover b { color: var(--vv-blue); }
.vvc-stars { color: var(--vv-star); letter-spacing: .05em; font-size: .85rem; }

/* ---------- 8. CTA band: one button ---------- */
.vvc-cta { background: var(--vv-navy); color: #fff; border-radius: 20px; padding: 2rem 1.5rem; margin: 2rem 0; text-align: center; }
.vvc-cta--flush { border-radius: 0; margin: 2.5rem 0 0; padding: 3rem 1rem; }
.vvc-cta-in { max-width: 40rem; margin: 0 auto; }
.vvc-cta .vvc-kicker { color: var(--vv-night-accent); }
.vvc-cta h2 { font-family: 'Playfair Display', 'Playfair Fallback', Georgia, serif; font-weight: 400; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); line-height: 1.2; color: #fff; margin: 0 0 .6rem; }
.vvc-cta p { color: var(--vv-glow); margin: 0 0 1.25rem; line-height: 1.6; }
.vvc-cta .vvc-btn { min-width: 14rem; }
.vvc-cta-after { display: block; margin-top: .85rem; font-size: .85rem; color: var(--vv-glow); }
.vvc-cta-after a { color: var(--vv-night-accent); }
@media (min-width: 768px) { .vvc-cta { padding: 2.75rem 2rem; } }

/* ---------- 9. FAQ accordion (details/summary, read by build/gen_faq_schema.py) ---------- */
.vvc-faq { display: grid; gap: .75rem; margin: 1.25rem 0 1.5rem; }
.vvc-faq > details { background: var(--vv-mist); border: 1px solid var(--vv-line); border-radius: 16px; padding: 0; margin: 0; }
.vvc-faq > details > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.25rem; font-weight: 700; color: var(--vv-ink); cursor: pointer; list-style: none; line-height: 1.4; }
.vvc-faq > details > summary::-webkit-details-marker { display: none; }
.vvc-faq > details > summary::after { content: ""; flex-shrink: 0; width: .6rem; height: .6rem; border-right: 2px solid var(--vv-blue); border-bottom: 2px solid var(--vv-blue); transform: rotate(45deg); margin: -.3rem .25rem 0 0; transition: transform .2s ease-out; }
.vvc-faq > details[open] > summary::after { transform: rotate(225deg); margin-top: .3rem; }
.vvc-faq > details > summary:focus-visible { outline: 3px solid var(--vv-night-accent); outline-offset: -3px; border-radius: 16px; }
.vvc-faq > details > *:not(summary) { padding: 0 1.25rem 1.1rem; margin: 0; color: var(--vv-muted); font-size: .95rem; line-height: 1.65; }
.vvc-faq > details > p + p { padding-top: 0; margin-top: -.4rem; }
.vvc-faq > details a { color: var(--vv-blue); font-weight: 600; }

/* ---------- 10. sources disclosure (collapsed) ---------- */
.vvc-sources { margin: 1.5rem 0; border: 1px solid var(--vv-line); border-radius: 16px; background: #fff; padding: 0; }
.vvc-sources > summary { display: flex; align-items: center; gap: .6rem; padding: .9rem 1.1rem; cursor: pointer; list-style: none; font-weight: 700; color: var(--vv-ink); font-size: .95rem; }
.vvc-sources > summary::-webkit-details-marker { display: none; }
.vvc-sources > summary::before { content: ""; width: .5rem; height: .5rem; border-right: 2px solid var(--vv-blue); border-bottom: 2px solid var(--vv-blue); transform: rotate(-45deg); transition: transform .2s ease-out; flex-shrink: 0; margin-left: .15rem; }
.vvc-sources[open] > summary::before { transform: rotate(45deg); }
.vvc-sources > summary::after { content: none; }
.vvc-sources > summary small { font-weight: 400; color: var(--vv-muted); margin-left: auto; font-size: .82rem; }
.vvc-sources ol, .vvc-sources ul { margin: 0; padding: 0 1.1rem 1rem 2.2rem; font-size: .85rem; color: var(--vv-muted); line-height: 1.55; }
.vvc-sources li { margin: 0 0 .4rem; overflow-wrap: anywhere; }
.vvc-sources li::marker { color: var(--vv-blue); font-weight: 700; }
.vvc-sources a { color: var(--vv-blue); font-weight: 600; }
.vvc-sources-checked { padding: 0 1.1rem .9rem; margin: 0; font-size: .8rem; color: var(--vv-muted); }

/* ---------- 11. "who it's for" cards ---------- */
.vvc-who { display: grid; gap: 1rem; margin: 1.25rem 0 1.5rem; }
@media (min-width: 720px) { .vvc-who { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } }
.vvc-who-card { position: relative; background: #fff; border: 1px solid var(--vv-line); border-top: 4px solid var(--vv-blue); border-radius: 16px; padding: 1.1rem 1.2rem; }
.vvc-who-card--not { border-top-color: var(--vv-field); }
.vvc-who-k { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vv-blue); margin: 0 0 .5rem; }
.vvc-who-card--not .vvc-who-k { color: var(--vv-muted); }
.vvc-who-card h3 { margin: 0 0 .35rem; font-size: 1.02rem; font-weight: 700; color: var(--vv-ink); line-height: 1.35; }
.vvc-who-card p { margin: 0; font-size: .92rem; color: var(--vv-muted); line-height: 1.6; }
.vvc-who-card ul { margin: .5rem 0 0; padding: 0; list-style: none; font-size: .9rem; color: var(--vv-muted); }
.vvc-who-card li { position: relative; padding-left: 1.1rem; margin: 0 0 .3rem; line-height: 1.5; }
.vvc-who-card li::before { content: ""; position: absolute; left: 0; top: .55em; width: .4rem; height: .4rem; border-radius: 50%; background: var(--vv-blue); }
.vvc-who-card--not li::before { background: var(--vv-field); }

/* ---------- 12. list filter (search box over a table or list of rows) ---------- */
.vvc-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .75rem; margin: 1rem 0 .75rem; }
.vvc-filter-label { flex: 0 0 100%; font-weight: 700; color: var(--vv-ink); font-size: .95rem; }
.vvc-filter-box { position: relative; flex: 1 1 16rem; min-width: 0; display: flex; align-items: center; }
.vvc-filter-box .vvc-filter-ic { position: absolute; left: .85rem; color: var(--vv-muted); pointer-events: none; font-size: .95rem; }
.vvc-filter input { width: 100%; min-width: 0; padding: .75rem 2.75rem .75rem 2.5rem; border: 1px solid var(--vv-field); border-radius: 12px; font: inherit; font-size: 1rem; background: #fff; color: var(--vv-ink); -webkit-appearance: none; appearance: none; }
.vvc-filter input::-webkit-search-cancel-button, .vvc-filter input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.vvc-filter input:focus { outline: 3px solid var(--vv-blue-soft); border-color: var(--vv-blue); }
.vvc-filter-clear { position: absolute; right: .35rem; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border: 0; border-radius: 10px; background: transparent; color: var(--vv-muted); cursor: pointer; font-size: 1rem; }
.vvc-filter-clear:hover { background: var(--vv-mist); color: var(--vv-ink); }
.vvc-filter-clear[hidden] { display: none; }
.vvc-filter-count { font-size: .85rem; color: var(--vv-muted); font-variant-numeric: tabular-nums; }
.vvc-filter-empty { margin: .25rem 0 0; padding: .9rem 1rem; background: var(--vv-sky); border-radius: 12px; color: var(--vv-ink); font-size: .92rem; line-height: 1.5; }
.vvc-filter-empty[hidden] { display: none; }
.vvc-filter-chips { display: flex; flex-wrap: wrap; gap: .4rem; flex: 0 0 100%; }
.vvc-chip { border: 1px solid var(--vv-line); background: #fff; color: var(--vv-ink); border-radius: 999px; padding: .3rem .75rem; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.vvc-chip[aria-pressed="true"] { background: var(--vv-blue); border-color: var(--vv-blue); color: #fff; }

/* ---------- reduced motion: every transition above collapses to its end state ---------- */
@media (prefers-reduced-motion: reduce) {
  .vvc-btn, .vvc-feature, .vvc-step-n, .vvc-faq > details > summary::after, .vvc-sources > summary::before { transition: none !important; }
  .vvc-btn:hover, a.vvc-feature:hover { transform: none; }
}

/* a filtered-out row stays hidden in both layouts: the phone card rule sets display:block on tr, which beat the hidden attribute (found by the trademark rebuild, 2026-10-30) */
.vvc-compare tr[hidden], [data-vvc-row][hidden] { display: none !important; }

/* under 480px a cell that holds a link (a URL, a long agency page) stacks its label above the value instead of squeezing the link into a 60% column (trademark register table at 390, 2026-10-30) */
@media (max-width: 480px) {
  .vvc-compare tbody td:has(a), .vvc-compare tbody td.vvc-stack { padding-left: 0; }
  .vvc-compare tbody td:has(a)::before, .vvc-compare tbody td.vvc-stack::before { position: static; display: block; width: auto; margin-bottom: .15rem; }
}

/* ======================================================================
   Kit, round 2 (Vinny, 2026-10-31): hero with its own animated SVG, hero
   reveal on load, and the four ways long content stays short: show more,
   tabs, carousel, picker. Rules in docs/page-playbook.md "Long content".
   ====================================================================== */

/* ---------- 13. hero, round 3 (Vinny, 2026-10-31 PM): the navy hero from /business-ideas and /llc-by-industry ----------
   Copy left (crumbs, eyebrow, Playfair H1 at clamp(2rem, 4.5vw, 3rem), a one or two sentence lede, one muted meta line,
   one quiet text link), a visual on the right built from the page's own content (.vvc-viz-deck cycling cards,
   .vvc-viz-checks rows lighting in turn, or figure.vvc-chart--dark bars). The answer box sits UNDER the hero in its
   own white strip (.vvc-answer-strip), never on the navy edge. Text reveals from opacity .4, never 0 (LCP). */
.vvc-hero-band { position: relative; overflow: hidden; color: #dce3ee;
  background: radial-gradient(900px 480px at 85% -10%, rgba(31, 95, 191, .28), transparent 60%),
              radial-gradient(700px 420px at -5% 60%, rgba(31, 95, 191, .22), transparent 60%),
              linear-gradient(180deg, var(--vv-navy) 0%, #0b1220 100%); }
.vvc-hero-in { max-width: 1040px; margin: 0 auto; padding: 2.5rem 1rem 2.75rem; display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 900px) { .vvc-hero-in { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); column-gap: 3rem; padding: 4rem 1rem 4.5rem; } }
.vvc-hero-text { min-width: 0; }
.vvc-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0 0 1.1rem; font-size: .8rem; line-height: 1.4; color: rgba(220, 227, 238, .72); }
.vvc-crumbs a { color: #dce3ee; text-decoration: none; }
.vvc-crumbs a:hover { color: #fff; text-decoration: underline; }
.vvc-crumbs .vvc-sep { color: rgba(220, 227, 238, .4); }
.vvc-crumbs [aria-current] { color: #fff; }
.vvc-eyebrow { margin: 0 0 .7rem; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--vv-night-accent); }
.vvc-h1 { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.1; color: #fff; margin: 0; text-wrap: balance; max-width: 20ch; }
.vvc-h1 .vvc-h1-sub { display: block; margin-top: .6rem; font-size: .58em; font-weight: 400; line-height: 1.25; color: rgba(220, 227, 238, .86); }
.vvc-lede { max-width: 44ch; font-size: 1.08rem; line-height: 1.6; color: rgba(220, 227, 238, .82); margin: 1rem 0 0; }
.vvc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin: 1.1rem 0 0; font-size: .8rem; line-height: 1.4; color: rgba(220, 227, 238, .6); }
.vvc-meta span + span::before { content: "\00b7"; margin-right: .5rem; color: rgba(220, 227, 238, .4); }
.vvc-meta i { display: none; }
/* reading-experience.js inserts its own reading-time line before the H1's siblings; the kit meta line already carries the read time */
.vvc-hero-text > .reading-time { display: none; }
@media (max-width: 479px) { .vvc-meta { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; } .vvc-meta span:nth-child(n+3) { display: none; } }
.vvc-hero-next { display: inline-flex; align-items: center; gap: .4rem; margin: 1.4rem 0 0; font-size: .95rem; font-weight: 600; color: var(--vv-night-accent); text-decoration: underline; text-underline-offset: .2em; text-decoration-color: rgba(110, 168, 255, .45); }
.vvc-hero-next:hover { color: #fff; text-decoration-color: #fff; }
.vvc-hero-art { position: relative; width: 100%; max-width: 22rem; margin: 0 auto; min-width: 0; }
@media (min-width: 640px) { .vvc-hero-art { max-width: 28rem; } }
@media (min-width: 900px) { .vvc-hero-art { max-width: 32rem; margin: 0 0 0 auto; } }
.vvc-hero-glow { position: absolute; inset: -8%; border-radius: 2rem; overflow: hidden; pointer-events: none; }
.vvc-hero-glow::before { content: ""; position: absolute; left: 30%; top: 25%; width: 55%; height: 55%; border-radius: 50%; background: radial-gradient(circle, rgba(31, 95, 191, .34), rgba(31, 95, 191, .16) 45%, transparent 70%); filter: blur(10px); }

/* answer strip: the Short answer box in its own white band right under the hero */
.vvc-answer-strip { background: #fff; border-bottom: 1px solid var(--vv-line); }
.vvc-answer-strip-in { max-width: 1040px; margin: 0 auto; padding: 1.5rem 1rem; }
.vvc-answer-strip .vvc-answer { margin: 0; border-radius: 16px; max-width: 64rem; }
@media (min-width: 900px) { .vvc-answer-strip-in { padding: 2rem 1rem; } }

/* viz A: cycling cards (ported from /business-ideas bid-deck). At rest the deck is fanned by the data-slot CSS; the
   script only layers the loop on top, pauses it off-screen and skips it under prefers-reduced-motion. */
.vvc-viz-deck { position: relative; aspect-ratio: 5 / 4; }
@media (min-width: 900px) { .vvc-viz-deck { aspect-ratio: 4 / 3; max-width: 30rem; margin-left: auto; } }
.vvc-deck { position: absolute; inset: 0; }
.vvc-dk { position: absolute; left: 50%; top: 50%; width: 78%; margin-left: -39%; height: 12rem; margin-top: -6rem; background: #fff; border-radius: 1.25rem; border: 1px solid rgba(10, 37, 64, .08); box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .12); padding: 1.25rem; display: flex; flex-direction: column; gap: .75rem; transform-origin: 50% 85%; will-change: transform; color: var(--vv-ink); }
.vvc-dk[data-slot="0"] { z-index: 4; }
.vvc-dk[data-slot="1"] { z-index: 3; transform: translate(-9%, 5%) rotate(-7deg) scale(.95); }
.vvc-dk[data-slot="2"] { z-index: 2; transform: translate(9%, 8%) rotate(6deg) scale(.9); }
.vvc-dk[data-slot="3"] { z-index: 1; transform: translate(0, 11%) scale(.85); }
.vvc-dk-head { display: flex; align-items: center; gap: .75rem; }
.vvc-dk-ico { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: .75rem; background: var(--vv-navy); color: #fff; font-size: 1rem; flex-shrink: 0; }
.vvc-dk-id { min-width: 0; }
.vvc-dk-name { margin: 0; font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 1.125rem; line-height: 1.2; color: var(--vv-navy); }
.vvc-dk-cat { margin: .125rem 0 0; font-size: .75rem; color: var(--vv-muted); }
.vvc-dk-label { margin: .25rem 0 0; padding-top: .75rem; border-top: 1px solid var(--vv-mist); font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--vv-muted); display: flex; align-items: center; gap: .375rem; }
.vvc-dk-label i { color: var(--vv-blue); font-size: .6875rem; }
.vvc-dk-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .375rem; }
.vvc-dk-chips li { font-size: .75rem; line-height: 1.3; font-weight: 500; color: var(--vv-muted); background: var(--vv-mist); border: 1px solid var(--vv-line); border-radius: .5rem; padding: .25rem .5rem; }
@media (max-width: 639px) { .vvc-dk { height: 13.5rem; margin-top: -6.75rem; padding: 1rem; gap: .625rem; width: 72%; margin-left: -36%; } .vvc-dk-name { font-size: 1rem; }
  .vvc-dk[data-slot="1"] { transform: translate(-6%, 5%) rotate(-5deg) scale(.95); } .vvc-dk[data-slot="2"] { transform: translate(6%, 8%) rotate(4deg) scale(.9); } }
@media (max-width: 379px) { .vvc-dk { height: 14.75rem; margin-top: -7.375rem; } }

/* viz B: rows that light up in turn (a sequence of checks, sources or years). At rest every row shows its final
   state; with motion the rows dim, then light one after another and hold, on a loop while on screen. */
.vvc-viz-checks { position: relative; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-radius: 1.25rem; padding: 1.25rem; backdrop-filter: blur(2px); }
.vvc-vz-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: 0 0 .9rem; }
.vvc-vz-title { margin: 0; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(220, 227, 238, .7); }
.vvc-vz-badge { flex-shrink: 0; font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vv-glow); border: 1px solid rgba(185, 212, 255, .4); border-radius: 999px; padding: .22rem .55rem; }
.vvc-ck { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; counter-reset: vvc-ck; }
.vvc-ck-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .8rem .9rem; border-radius: .9rem; background: #fff; color: var(--vv-ink); box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .6); transition: opacity .35s ease-out, transform .35s ease-out; }
.vvc-ck-n { display: flex; align-items: center; justify-content: center; min-width: 2.25rem; padding: 0 .45rem; height: 2.25rem; border-radius: .7rem; background: var(--vv-navy); color: #fff; font-weight: 700; font-size: .9rem; font-variant-numeric: tabular-nums; }
.vvc-ck-main { min-width: 0; }
.vvc-ck-main b { display: block; font-weight: 700; font-size: .95rem; line-height: 1.25; }
.vvc-ck-main small { display: block; margin-top: .15rem; font-size: .76rem; line-height: 1.35; color: var(--vv-muted); }
.vvc-ck-tag { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .3rem .55rem; border-radius: 999px; }
.vvc-ck-row[data-state="ok"] .vvc-ck-tag { color: var(--vv-blue); background: var(--vv-blue-soft); }
.vvc-ck-row[data-state="no"] .vvc-ck-tag { color: var(--vv-warn-fg); background: var(--vv-warn-bg); }
.vvc-ck-row[data-state="note"] .vvc-ck-tag { color: var(--vv-muted); background: var(--vv-mist); }
.vvc-js .vvc-viz-checks.is-live .vvc-ck-row { opacity: .28; transform: translateX(-4px); }
.vvc-js .vvc-viz-checks.is-live .vvc-ck-row.is-on { opacity: 1; transform: none; }
.vvc-js .vvc-viz-checks.is-live .vvc-ck-row .vvc-ck-tag { opacity: 0; transition: opacity .3s ease-out .15s; }
.vvc-js .vvc-viz-checks.is-live .vvc-ck-row.is-on .vvc-ck-tag { opacity: 1; }
.vvc-vz-foot { margin: .9rem 0 0; font-size: .82rem; line-height: 1.45; color: rgba(220, 227, 238, .75); }
/* rows and deck cards that link to the section they name (legal pages) */
.vvc-ck-main b a, .vvc-dk-name a { color: inherit; text-decoration: none; }
.vvc-ck-main b a:hover, .vvc-dk-name a:hover { text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 639px) { .vvc-ck-row { grid-template-columns: auto minmax(0, 1fr); gap: .5rem .7rem; padding: .7rem .8rem; } .vvc-ck-n { min-width: 2rem; height: 2rem; font-size: .8rem; } .vvc-ck-tag { grid-column: 2; justify-self: start; } }
/* dense: five or more rows on a phone drop their subtitles so the hero stays under about 1.5 screens */
@media (max-width: 639px) { .vvc-ck--dense .vvc-ck-main small { display: none; } .vvc-ck--dense .vvc-ck-row { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; } .vvc-ck--dense .vvc-ck-tag { grid-column: auto; } }
@media (prefers-reduced-motion: reduce) { .vvc-ck-row, .vvc-ck-tag { transition: none !important; } }

/* viz C: the kit cost chart on navy */
.vvc-hero-art .vvc-chart--dark { margin: 0; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-radius: 1.25rem; padding: 1.25rem; backdrop-filter: blur(2px); }
.vvc-chart--dark figcaption { color: #fff; }
.vvc-chart--dark figcaption small { color: rgba(220, 227, 238, .7); }
.vvc-chart--dark .vvc-chart-label { color: #dce3ee; }
.vvc-chart--dark .vvc-chart-value { color: #fff; }
.vvc-chart--dark .vvc-chart-svg { background: rgba(255, 255, 255, .08); border-radius: 3px; }
.vvc-chart--dark .vvc-chart-bar { fill: var(--vv-night-accent); }
.vvc-chart--dark .vvc-chart-row.vvc-us .vvc-chart-bar { fill: var(--vv-green); }
.vvc-chart--dark .vvc-chart-row.vvc-us .vvc-chart-label::after { content: "ours"; margin-left: .4rem; font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--vv-glow); border: 1px solid rgba(185, 212, 255, .4); border-radius: 999px; padding: .1rem .4rem; vertical-align: middle; }
.vvc-chart--dark .vvc-chart-src { color: rgba(220, 227, 238, .65); }
.vvc-chart--dark .vvc-chart-src a { color: var(--vv-night-accent); }
@keyframes vvc-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes vvc-spin { to { transform: rotate(360deg); } }
.vvc-js [data-vvc-float] { animation: vvc-float 4s ease-in-out infinite; }
.vvc-js [data-vvc-spin] { animation: vvc-spin 14s linear infinite; }
@media (prefers-reduced-motion: reduce) { [data-vvc-float], [data-vvc-spin] { animation: none !important; } }

/* ---------- 14. show more: a list, table or FAQ shows 8 items, the rest behind one button ---------- */
.vvc-more-hidden { display: none !important; }
.vvc-more-btn { display: inline-flex; align-items: center; gap: .4rem; margin: .6rem 0 0; padding: .55rem 1rem; border-radius: 10px; border: 1px solid var(--vv-line); background: #fff; color: var(--vv-blue); font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; }
.vvc-more-btn:hover { border-color: var(--vv-blue); }
.vvc-more-btn::after { content: ""; width: .45rem; height: .45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: -.2rem 0 0; }
.vvc-more-btn[aria-expanded="true"]::after { transform: rotate(225deg); margin-top: .2rem; }
.vvc-compare-wrap + .vvc-more-btn, .vvc-faq + .vvc-more-btn { margin-top: .75rem; }

/* ---------- 15. tabs ---------- */
.vvc-tabs { margin: 1.25rem 0 1.5rem; }
.vvc-tablist { display: flex; gap: .25rem; flex-wrap: wrap; border-bottom: 1px solid var(--vv-line); margin: 0 0 1rem; padding: 0; }
.vvc-tab { position: relative; padding: .6rem .9rem; border: 0; background: transparent; color: var(--vv-muted); font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; border-radius: 8px 8px 0 0; }
.vvc-tab:hover { color: var(--vv-ink); background: var(--vv-mist); }
.vvc-tab[aria-selected="true"] { color: var(--vv-blue); }
.vvc-tab[aria-selected="true"]::after { content: ""; position: absolute; left: .5rem; right: .5rem; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--vv-blue); }
.vvc-tab:focus-visible { outline: 3px solid var(--vv-night-accent); outline-offset: -3px; }
.vvc-tabpanel[hidden] { display: none; }

/* ---------- 16. carousel: horizontal scroll with snap, arrows on wide screens ---------- */
.vvc-carousel-wrap { position: relative; margin: 1.25rem 0 1.5rem; }
.vvc-carousel { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 1rem; padding: .25rem .25rem 1rem; margin: 0; list-style: none; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.vvc-carousel > * { flex: 0 0 min(82%, 19rem); scroll-snap-align: start; min-width: 0; }
.vvc-carousel-nav { display: none; gap: .4rem; justify-content: flex-end; margin: .25rem 0 0; }
@media (min-width: 760px) { .vvc-carousel-nav { display: flex; } }
.vvc-carousel-nav button { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--vv-line); background: #fff; color: var(--vv-blue); cursor: pointer; display: grid; place-items: center; font-size: 1rem; }
.vvc-carousel-nav button:hover { border-color: var(--vv-blue); }
.vvc-carousel-count { font-size: .82rem; color: var(--vv-muted); align-self: center; margin-right: auto; }

/* ---------- 17. picker: one select shows one panel (a state, a scenario) ---------- */
.vvc-picker { margin: 1.25rem 0 1.5rem; }
.vvc-picker-label { display: block; font-weight: 700; color: var(--vv-ink); margin: 0 0 .4rem; font-size: .95rem; }
.vvc-picker select { width: 100%; max-width: 24rem; padding: .7rem 2.5rem .7rem .9rem; border: 1px solid var(--vv-field); border-radius: 12px; font: inherit; font-size: 1rem; color: var(--vv-ink); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%231F5FBF' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right .8rem center / 1rem; -webkit-appearance: none; appearance: none; }
.vvc-picker select:focus { outline: 3px solid var(--vv-blue-soft); border-color: var(--vv-blue); }
.vvc-picker [data-vvc-pick] { margin-top: 1rem; }
.vvc-picker [data-vvc-pick][hidden] { display: none; }

/* hero plan PR 10 (sales pages): the one green button inside the band, and the strip under it that carries the
   small print, trust chips and the quiet text link that used to sit beside the button. */
.vvc-hero-cta { margin: 1.4rem 0 0; }
.vvc-hero-cta .vvc-btn { max-width: 100%; text-align: center; }
@media (max-width: 479px) { .vvc-hero-cta .vvc-btn { width: 100%; } }
.vvc-strip-stack { display: grid; gap: .65rem; max-width: 64rem; }
.vvc-strip-stack p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--vv-muted); }
.vvc-strip-stack p b, .vvc-strip-stack p strong { color: var(--vv-ink); }
.vvc-strip-stack a:not(.vvc-strip-link) { color: var(--vv-blue); }
.vvc-strip-link { display: inline-flex; align-items: center; gap: .4rem; justify-self: start; font-size: .95rem; font-weight: 600; color: var(--vv-blue); text-decoration: underline; text-underline-offset: .2em; }
.vvc-strip-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .5rem; }
.vvc-strip-chips li { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; line-height: 1.3; font-weight: 500; color: var(--vv-muted); background: var(--vv-mist); border: 1px solid var(--vv-line); border-radius: 999px; padding: .3rem .7rem; }
.vvc-strip-chips li i { color: var(--vv-blue); font-size: .75rem; }
/* a fifth deck card sits behind the fourth until the loop moves it */
.vvc-dk[data-slot="4"] { z-index: 0; transform: translate(0, 11%) scale(.85); }