/* ============================================================
   MEDSY — PATTERNS
   Higher-order building blocks for data & narrative: icons,
   bar/line charts, and infographic primitives (stat, process,
   timeline, comparison). All token-driven and scale-flexible so
   they read well from dashboard cards up to 1920px slides.
   ============================================================ */

/* ---------- ICON ---------- */
.v-icon{display:inline-block;vertical-align:middle;flex:none;color:inherit}

/* ---------- BAR CHART (HTML/flex) ---------- */
.v-barchart{display:flex;align-items:stretch;gap:clamp(10px,2.5vw,28px);width:100%;height:100%;min-height:120px}
.v-bar-col{flex:1 1 0;display:flex;flex-direction:column;min-width:0}
.v-bar-track{flex:1;display:flex;align-items:flex-end;justify-content:center;min-height:0}
.v-bar{position:relative;width:min(72px,100%);border-radius:12px 12px 5px 5px;background:var(--grad-bar);box-shadow:0 1px 2px rgba(6,58,40,.12);transition: filter var(--dur-hover) var(--ease-standard)}
.v-bar:hover{filter:brightness(1.07) saturate(1.05)}
.v-bar-val{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:9px;font-variant-numeric:tabular-nums;font-size:.85rem;font-weight:700;color:var(--text-strong);white-space:nowrap}
.v-bar-label{margin-top:13px;text-align:center;font-size:.85rem;color:var(--ink-soft);font-weight:500;line-height:1.3}
.v-bar.stacked{background:none!important;display:flex;flex-direction:column-reverse;box-shadow:none}
.v-bar.stacked:hover{filter:none}
.v-bar-seg{width:100%;transition: filter var(--dur-hover) var(--ease-standard)}
.v-bar-seg:hover{filter:brightness(1.08)}
.v-chart-legend{display:flex;flex-wrap:wrap;gap:14px 22px;margin-bottom:18px}
.v-chart-legend .lg{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;color:var(--ink-soft);font-weight:500}
.v-chart-legend .lg-sw{width:13px;height:13px;border-radius:4px;flex:none}

/* ---------- LINE / AREA CHART (SVG) ---------- */
.v-linechart{display:block;width:100%;max-width:100%;height:auto;overflow:visible}
.v-line-area{opacity:1}
.v-line-path{fill:none;stroke:var(--forest);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.v-line-dot{fill:var(--surface-card);stroke:var(--forest);stroke-width:2.5;transition: stroke-width var(--dur-hover) var(--ease-standard)}
.v-line-dot:hover{stroke-width:4.5}
.v-line-xlabel{font-family:var(--f-caps);font-variant-numeric:tabular-nums;font-size:var(--fs-micro);fill:var(--ink-faint)}

/* ---------- SPARKLINE ---------- */
.v-sparkline{display:inline-block;vertical-align:middle}
.v-sparkline-path{fill:none;stroke:var(--forest);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.v-sparkline-area{opacity:1}
.v-sparkline-dot{fill:var(--surface-card);stroke:var(--forest);stroke-width:2}

/* ---------- STAT HIGHLIGHT ---------- */
.v-stat{display:flex;flex-direction:column}
.v-stat-ico{width:clamp(44px,4vw,58px);height:clamp(44px,4vw,58px);border-radius:16px;display:grid;place-items:center;background:var(--mint-100);border:1px solid var(--line-mint);color:var(--forest);margin-bottom:20px}
.v-stat-ico .v-icon{width:54%;height:54%}
.v-stat-value{font-family:var(--f-display);font-weight:800;font-size:clamp(2.6rem,5.5vw,4rem);line-height:.95;letter-spacing:-.03em;color:var(--text-strong)}
.v-stat-label{font-size:clamp(.95rem,1.4vw,1.1rem);color:var(--ink-soft);margin-top:14px;max-width:24ch;line-height:1.45}
.v-stat-delta{display:inline-flex;align-items:center;gap:6px;font-size:.9rem;font-weight:700;margin-top:16px;font-variant-numeric:tabular-nums}
.v-stat-delta.up{color:var(--forest)}
.v-stat-delta.down{color:var(--danger-ink)}
.v-stat-spot{background:var(--grad-deep);border-radius:var(--r-lg);padding:clamp(24px,3vw,40px)}
.v-stat-spot .v-stat-value{color:#fff}
.v-stat-spot .v-stat-label{color:rgba(255,255,255,.72)}
.v-stat-spot .v-stat-ico{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.22);color:#fff}

/* ---------- PROCESS STEPS ---------- */
.v-process{display:flex;align-items:flex-start;gap:clamp(8px,1.4vw,16px)}
.v-pstep{flex:1 1 0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;min-width:0}
.v-pstep-num{width:clamp(52px,5vw,68px);height:clamp(52px,5vw,68px);border-radius:50%;display:grid;place-items:center;background:var(--grad-primary);color:#fff;font-family:var(--f-display);font-weight:800;font-size:clamp(1.2rem,2vw,1.5rem);box-shadow:0 6px 16px -6px rgba(6,58,40,.4)}
.v-pstep-num .v-icon{width:46%;height:46%}
.v-pstep-num.soft{background:var(--mint-100);color:var(--forest);border:1.5px solid var(--line-mint);box-shadow:none}
.v-pstep-title{font-family:var(--f-display);font-weight:700;font-size:clamp(1.05rem,1.6vw,1.35rem);color:var(--text-strong);letter-spacing:-.01em}
.v-pstep-text{font-size:clamp(.85rem,1.2vw,1rem);color:var(--ink-soft);line-height:1.5;max-width:26ch}
.v-pstep-conn{flex:none;align-self:flex-start;margin-top:calc((clamp(52px,5vw,68px) - clamp(22px,2.4vw,30px))/2);color:var(--forest-300)}
.v-pstep-conn .v-icon{width:clamp(22px,2.4vw,30px);height:clamp(22px,2.4vw,30px)}

/* ---------- TIMELINE ---------- */
.v-timeline{position:relative}
.v-tl-item{display:flex;gap:clamp(16px,2vw,26px);padding-bottom:clamp(20px,2.4vw,32px);position:relative}
.v-tl-item:last-child{padding-bottom:0}
.v-tl-item::before{content:'';position:absolute;left:9px;top:16px;bottom:0;width:2px;background:var(--line-mint)}
.v-tl-item:last-child::before{display:none}
.v-tl-rail{flex:none;width:18px;display:flex;justify-content:center}
.v-tl-dot{width:18px;height:18px;border-radius:50%;background:var(--forest);border:3px solid var(--mint-200);margin-top:5px;position:relative;z-index:1}
.v-tl-content{padding-bottom:2px}
.v-tl-time{font-family:var(--f-caps);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--forest);margin-bottom:5px}
.v-tl-title{font-family:var(--f-display);font-weight:700;font-size:clamp(1.05rem,1.5vw,1.3rem);color:var(--text-strong);letter-spacing:-.01em}
.v-tl-text{font-size:clamp(.85rem,1.2vw,1rem);color:var(--ink-soft);line-height:1.5;margin-top:5px}

/* ---------- COMPARISON ---------- */
.v-compare{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:clamp(12px,1.5vw,20px)}
.v-compare-col{border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,2.4vw,34px);background:var(--surface-card);display:flex;flex-direction:column}
.v-compare-col.featured{background:var(--grad-soft);outline:2px solid var(--mint);outline-offset:-1px;box-shadow:var(--shadow-md);border-color:transparent}
.v-compare-title{font-family:var(--f-display);font-weight:700;font-size:clamp(1.2rem,1.8vw,1.6rem);color:var(--text-strong);letter-spacing:-.02em;display:flex;align-items:center;justify-content:space-between;gap:10px}
.v-compare-sub{font-size:clamp(.85rem,1.2vw,1rem);color:var(--ink-soft);margin:6px 0 20px}
.v-compare-row{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-top:1px solid var(--line-soft);font-size:clamp(.9rem,1.2vw,1.02rem);color:var(--ink);line-height:1.4}
.v-compare-row:first-of-type{border-top:none}
.v-compare-ico{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;margin-top:calc(.7lh - 11px)}
.v-compare-ico .v-icon{width:13px;height:13px}
.v-compare-row.yes .v-compare-ico{background:var(--mint-100);color:var(--forest)}
.v-compare-row.no{color:var(--ink-faint)}
.v-compare-row.no .v-compare-ico{background:var(--mist);color:var(--ink-faint)}

/* ---------- KPI / mini-stat tile ---------- */
.v-kpi{display:flex;flex-direction:column;gap:6px}
.v-kpi-k{font-family:var(--f-caps);font-size:var(--fs-micro);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint)}
.v-kpi-v{font-family:var(--f-display);font-weight:800;font-size:clamp(1.5rem,2.4vw,2rem);line-height:1;color:var(--text-strong)}

/* ---------- GAUGE (semicircle) ---------- */
.v-gauge{display:inline-block;text-align:center}
.v-gauge svg{display:block;width:100%;height:auto}
.v-gauge-track{fill:none;stroke:var(--mint-200);stroke-linecap:round}
.v-gauge-fill{fill:none;stroke:var(--forest);stroke-linecap:round}
.v-gauge-val{font-family:var(--f-display);font-weight:800;fill:var(--text-strong)}
.v-gauge-cap{font-family:var(--f-caps);font-size:var(--fs-micro);letter-spacing:.08em;fill:var(--ink-faint);text-transform:uppercase}

/* ---------- HORIZONTAL BAR / RANKING ---------- */
.v-hbar{display:flex;flex-direction:column;gap:14px;width:100%;flex:1 1 auto;min-width:0}
.v-hbar-row{display:grid;grid-template-columns:minmax(64px,auto) minmax(48px,1fr) auto;align-items:center;gap:14px}
.v-hbar-label{font-size:.92rem;font-weight:var(--fw-medium);color:var(--text-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-hbar-track{height:14px;border-radius:var(--r-pill);background:var(--mint-100);overflow:hidden}
.v-hbar-fill{display:block;height:100%;border-radius:var(--r-pill);background:var(--grad-primary);width:0;transition: width var(--dur-reveal) var(--ease-standard)}
.v-hbar-val{font-variant-numeric:tabular-nums;font-weight:700;font-size:.85rem;color:var(--text-strong);min-width:4ch;text-align:right}
.v-hbar-row .v-hbar-fill{transition: width var(--dur-reveal) var(--ease-standard),filter var(--dur-hover) var(--ease-standard)}
.v-hbar-row:hover .v-hbar-fill{filter:brightness(1.08)}

/* ---------- WAFFLE / DOT GRID ---------- */
.v-waffle{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;width:max-content}
.v-waffle-cell{width:var(--wf,18px);height:var(--wf,18px);border-radius:5px;background:var(--mint-100);transition: background var(--dur-overlay) var(--ease-standard),transform var(--dur-control) var(--ease-spring)}
.v-waffle-cell.on{background:var(--forest)}
.v-waffle-cell:hover{transform:scale(1.18)}

/* ---------- CHECKLIST ---------- */
.v-checklist{display:flex;flex-direction:column;gap:14px}
.v-check-row{display:flex;gap:14px;align-items:flex-start}
.v-check-mark{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--mint-100);color:var(--forest);border:1px solid var(--line-mint);margin-top:1px}
.v-check-mark.x{background:var(--mist);color:var(--ink-faint);border-color:var(--line)}
.v-check-mark .v-icon{width:15px;height:15px}
.v-check-body{flex:1}
.v-check-title{font-weight:var(--fw-semibold);color:var(--text-strong);font-size:clamp(.95rem,1.3vw,1.08rem)}
.v-check-text{font-size:clamp(.85rem,1.1vw,.96rem);color:var(--ink-soft);line-height:1.5;margin-top:2px}

/* ---------- PROGRESS LIST (skill mastery) ---------- */
.v-proglist{display:flex;flex-direction:column;gap:18px}
.v-prog-row .v-prog-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.v-prog-name{font-weight:var(--fw-semibold);color:var(--text-strong);font-size:clamp(.92rem,1.2vw,1.02rem)}
.v-prog-pct{font-variant-numeric:tabular-nums;font-weight:700;font-size:.85rem;color:var(--forest)}
.v-prog-track{height:10px;border-radius:var(--r-pill);background:var(--mint-100);overflow:hidden}
.v-prog-fill{height:100%;border-radius:var(--r-pill);background:var(--grad-primary);width:0;transition: width var(--dur-reveal) var(--ease-standard)}

/* ---------- STAT GRID ---------- */
.v-statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px}
.v-statgrid-cell{border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;background:var(--surface-card);box-shadow:var(--shadow-sm)}
.v-statgrid-ico{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--mint-100);border:1px solid var(--line-mint);color:var(--forest);margin-bottom:16px}
.v-statgrid-ico .v-icon{width:22px;height:22px}
.v-statgrid-v{font-family:var(--f-display);font-weight:800;font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1;color:var(--text-strong)}
.v-statgrid-l{font-size:.92rem;color:var(--ink-soft);margin-top:8px;line-height:1.4}

/* ---------- IMAGE FRAME ---------- */
.v-imgframe{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--mint-50);display:block;margin:0}
.v-imgframe img{display:block;width:100%;height:100%;object-fit:cover}
.v-imgframe.ratio-16x9{aspect-ratio:16/9}
.v-imgframe.ratio-4x3{aspect-ratio:4/3}
.v-imgframe.ratio-1x1{aspect-ratio:1/1}
.v-imgframe.ratio-3x4{aspect-ratio:3/4}
.v-imgframe.ratio-3x2{aspect-ratio:3/2}
.v-imgframe.shadow{box-shadow:var(--shadow-md)}
.v-imgframe-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,58,40,.6),rgba(6,58,40,.05) 55%,transparent);z-index:1}
.v-imgframe-cap{position:absolute;left:16px;bottom:16px;right:16px;z-index:2;display:flex;gap:8px;align-items:center}
.v-imgframe-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--forest);background-image:radial-gradient(var(--line) 1.4px,transparent 1.4px);background-size:22px 22px}
.v-imgframe-ph-ico{width:54px;height:54px;border-radius:16px;background:var(--surface-card);border:1px solid var(--line-mint);display:grid;place-items:center}
.v-imgframe-ph-ico .v-icon{width:26px;height:26px}
.v-imgframe-ph-txt{font-size:.85rem;color:var(--ink-faint);font-weight:500}

/* ---------- BACKDROPS (abstract, on-brand) ---------- */
.v-backdrop{position:relative;isolation:isolate}
.v-backdrop-mesh{background:
  radial-gradient(42% 52% at 12% 18%, rgba(95,232,177,.5), transparent 70%),
  radial-gradient(46% 56% at 88% 22%, rgba(227,220,255,.55), transparent 70%),
  radial-gradient(52% 62% at 78% 92%, rgba(255,216,196,.45), transparent 70%),
  var(--surface);}
.v-backdrop-glow{background:radial-gradient(62% 80% at 50% -10%, var(--mint-100), var(--surface) 68%);}
.v-backdrop-rings{background:repeating-radial-gradient(circle at 82% 18%, var(--line-soft) 0 1.5px, transparent 1.5px 40px), var(--surface);}
.v-backdrop-grid{background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);background-size:32px 32px;background-color:var(--surface);}
.v-backdrop-deepmesh{background:
  radial-gradient(48% 60% at 8% 8%, rgba(95,232,177,.28), transparent 70%),
  radial-gradient(44% 56% at 96% 94%, rgba(26,135,90,.45), transparent 70%),
  linear-gradient(150deg,#063a28 0%,#0F6844 60%,#1a875a 100%);}

/* ============================================================
   INTERACTION & FEEDBACK
   Hover lift for the data/infographic cards (no-op during a slide
   show, helpful in dashboards), image hover-zoom, and a modern
   CSS-only reveal-on-scroll. All reduced-motion safe.
   ============================================================ */

/* ---- hover feedback on data cards ---- */
.v-statgrid-cell{transition: transform var(--dur-entrance) var(--ease-spring),box-shadow var(--dur-entrance) var(--ease-standard),border-color var(--dur-entrance)}
.v-statgrid-ico{transition: transform var(--dur-entrance) var(--ease-spring)}
.v-statgrid-cell:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--line-mint)}
.v-statgrid-cell:hover .v-statgrid-ico{transform:scale(1.08) rotate(-3deg)}

/* process steps: the number answers the cursor, the whole step lifts a touch */
.v-pstep-num{transition: transform var(--dur-overlay) var(--ease-spring),box-shadow var(--dur-overlay) var(--ease-standard)}
.v-pstep:hover .v-pstep-num{transform:scale(1.08) rotate(-4deg);box-shadow:0 10px 24px -8px rgba(6,58,40,.45)}
.v-pstep:hover .v-pstep-num.soft{box-shadow:var(--shadow-sm)}

/* checklist + comparison marks pop on row hover */
.v-check-mark{transition: transform var(--dur-control) var(--ease-spring)}
.v-check-row:hover .v-check-mark{transform:scale(1.12) rotate(-4deg)}
.v-compare-ico{transition: transform var(--dur-control) var(--ease-spring)}
.v-compare-row:hover .v-compare-ico{transform:scale(1.18)}

/* count-ups and stacked figures stay in the brand face and take Inter's real
   tabular figures, so a rising number never re-flows its own width */
.v-stat-value,.v-statgrid-v,.v-kpi-v{font-variant-numeric:tabular-nums}
.v-stat-ico{transition: transform var(--dur-entrance) var(--ease-spring)}
.v-stat:hover .v-stat-ico{transform:scale(1.07) rotate(-4deg)}

.v-compare-col{transition: transform var(--dur-entrance) var(--ease-spring),box-shadow var(--dur-entrance) var(--ease-standard),border-color var(--dur-entrance)}
.v-compare-col:not(.featured):hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);border-color:var(--line-mint)}

.v-stat-spot{transition: transform var(--dur-entrance) var(--ease-spring),box-shadow var(--dur-entrance) var(--ease-standard)}
.v-stat-spot:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}

.v-tl-item .v-tl-dot{transition: transform var(--dur-overlay) var(--ease-spring),box-shadow var(--dur-overlay) var(--ease-standard)}
.v-tl-item:hover .v-tl-dot{transform:scale(1.25);box-shadow:0 0 0 5px var(--mint-100)}

/* ---- image hover-zoom (opt-in via .zoom) ---- */
.v-imgframe.zoom img{transition: transform var(--dur-slower) var(--ease-standard)}
.v-imgframe.zoom:hover img{transform:scale(1.05)}

/* ---- reveal-on-scroll · progressive enhancement, two engines ---- */
/* Base markup is ALWAYS the visible end-state. Preferred engine: a tiny
   IntersectionObserver script arms the page (html.v-armed) and flips .is-in per
   element — deterministic everywhere, including embedded/scaled previews where
   view() scroll timelines can silently stall at their pre-entry state. Fallback
   engine (script absent): the view() timeline, active only while un-armed.
   No JS + no timeline support, print/PDF and reduced-motion all show content.
   Arming snippet (before </body>):
   <script>(function(){try{if(!('IntersectionObserver' in window)||matchMedia('(prefers-reduced-motion: reduce)').matches)return;var els=[].slice.call(document.querySelectorAll('.v-reveal,.v-reveal-stagger>*'));if(!els.length)return;document.documentElement.classList.add('v-armed');var io=new IntersectionObserver(function(es){es.forEach(function(en){if(en.isIntersecting||en.boundingClientRect.top<0){en.target.classList.add('is-in');io.unobserve(en.target)}})},{rootMargin:'0px 0px -7% 0px'});els.forEach(function(el){io.observe(el)})}catch(e){}})();</script> */
@keyframes v-reveal-in{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@supports (animation-timeline: view()){
  @media screen and (prefers-reduced-motion: no-preference){
    html:not(.v-armed) .v-reveal{animation: v-reveal-in linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
    html:not(.v-armed) .v-reveal-stagger > *{animation: v-reveal-in linear both;animation-timeline:view();animation-range:entry 5% entry 55%}
  }
}
@media screen and (prefers-reduced-motion: no-preference){
  html.v-armed .v-reveal,html.v-armed .v-reveal-stagger > *{opacity:0;transform:translateY(26px);transition: opacity var(--dur-entrance,var(--dur-entrance)) var(--ease-standard,cubic-bezier(.16,1,.3,1)),transform var(--dur-entrance,var(--dur-entrance)) var(--ease-standard,cubic-bezier(.16,1,.3,1))}
  html.v-armed .v-reveal.is-in,html.v-armed .v-reveal-stagger > .is-in{opacity:1;transform:none}
  html.v-armed .v-reveal-stagger > .is-in:nth-child(2){transition-delay:.06s}
  html.v-armed .v-reveal-stagger > .is-in:nth-child(3){transition-delay:.12s}
  html.v-armed .v-reveal-stagger > .is-in:nth-child(4){transition-delay:.18s}
  html.v-armed .v-reveal-stagger > .is-in:nth-child(5){transition-delay:.24s}
  html.v-armed .v-reveal-stagger > .is-in:nth-child(n+6){transition-delay:.3s}
}
@media print{
  .v-reveal,.v-reveal-stagger > *{animation: none!important;transition: none!important;opacity:1!important;transform:none!important}
}

/* ---- reduced-motion: snap every animated data element to its final state ---- */
@media (prefers-reduced-motion: reduce){
  .v-hbar-fill,.v-prog-fill,.v-waffle-cell,.v-bar,.v-bar-seg,.v-line-dot{transition: none!important}
  .v-statgrid-cell,.v-statgrid-ico,.v-compare-col,.v-stat-spot,.v-tl-dot,.v-imgframe.zoom img{transition: none!important}
  .v-pstep-num,.v-check-mark,.v-compare-ico,.v-stat-ico{transition: none!important}
}

/* ---------- SHOWPIECES ---------- */
.v-statcard{position:relative;background:var(--surface-card);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;box-shadow:var(--shadow-xs);transition: transform var(--dur-hover) var(--ease-standard),box-shadow var(--dur-hover) var(--ease-standard),border-color var(--dur-hover) var(--ease-standard)}
.v-statcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--line-mint)}
.v-statcard-k{font-family:var(--f-caps);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.v-statcard-n{font-family:var(--f-display);font-weight:800;font-size:2rem;letter-spacing:-.03em;color:var(--text-strong);margin-top:8px;line-height:1}
.v-statcard-delta{display:inline-flex;align-items:center;white-space:nowrap;gap:4px;font-variant-numeric:tabular-nums;font-size:var(--fs-micro);font-weight:700;color:var(--forest-700);background:var(--mint-100);border-radius:var(--r-pill);padding:3px 10px;margin-top:12px}
.v-statcard-delta.down{color:var(--danger-ink);background:var(--danger-soft)}
.v-statcard-spark{position:absolute;right:20px;bottom:20px;color:var(--forest)}
.v-cta-card{position:relative;overflow:hidden;background:var(--grad-deep);border-radius:var(--r-xl);padding:30px 32px;color:#fff;box-shadow:0 0 70px -28px rgba(95,232,177,.6),var(--shadow-lg)}
.v-cta-card::before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:var(--mint);filter:blur(80px);opacity:.24;top:-100px;right:-70px}
.v-cta-card-k{font-family:var(--f-caps);font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--mint);position:relative}
.v-cta-card-t{font-family:var(--f-display);font-weight:800;font-size:1.5rem;letter-spacing:-.025em;line-height:1.15;margin:10px 0 8px;position:relative}
.v-cta-card-p{color:rgba(255,255,255,.75);font-size:.9rem;line-height:1.55;margin:0 0 18px;max-width:38em;position:relative}
.v-cta-card .btn{position:relative}
.v-cta-card .btn-secondary{box-shadow:0 0 30px -6px rgba(95,232,177,.7)}
.v-testimonial-spot{position:relative;background:linear-gradient(160deg,var(--mint-50) 0%,var(--surface-card) 60%);border:1.5px solid var(--line-mint);border-radius:var(--r-xl);padding:28px 30px}
.v-testimonial-mark{font-family:var(--f-display);font-size:3.4rem;line-height:.6;color:var(--mint);display:block;margin-bottom:14px}
.v-testimonial-q{font-family:var(--f-display);font-weight:500;font-size:1.18rem;line-height:1.45;letter-spacing:-.015em;color:var(--text-strong);margin:0 0 18px}
.v-testimonial-by{display:flex;align-items:center;gap:12px}
.v-testimonial-by b{display:block;font-size:.9rem;color:var(--text-strong)}
.v-testimonial-by small{display:block;font-size:.76rem;color:var(--ink-faint);margin-top:2px}
.v-feature-tile{position:relative;background:var(--surface-card);border:1px solid var(--line);border-radius:var(--r);padding:22px;overflow:hidden;transition: transform var(--dur-hover) var(--ease-standard),box-shadow var(--dur-hover) var(--ease-standard),border-color var(--dur-hover) var(--ease-standard)}
.v-feature-tile::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-primary);opacity:0;transition: opacity var(--dur-hover) var(--ease-standard)}
.v-feature-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--line-mint)}
.v-feature-tile:hover::before{opacity:1}
.v-feature-tile .v-ft-title{font-weight:700;font-size:.98rem;color:var(--text-strong);margin:14px 0 6px}
.v-feature-tile .v-ft-text{font-size:.85rem;line-height:1.55;color:var(--ink-soft);margin:0}
@media (prefers-reduced-motion: reduce){.v-statcard:hover,.v-feature-tile:hover{transform:none}}


/* ============================================================
   PRESS STATES — stat cards, tiles, cells and data marks
   Hover is not feedback on a touch screen, and a control that only
   responds to hover feels dead under a finger. Every interactive
   surface here answers a press with the same vocabulary the buttons
   use: small controls sink (translateY(1px) scale(.97)), lifted
   cards press back through their lift, and data cells dip in place.
   Presses are instant by design — no transition — so the response
   lands on touch-down rather than easing in after it.
   ============================================================ */
.v-statcard:active,.v-feature-tile:active,.v-stat-spot:active,.v-statgrid-cell:active{transform:translateY(-2px) scale(.995)}
.v-compare-col:not(.featured):active{transform:translateY(-1px) scale(.995)}
.v-check-row:active,.v-compare-row:active,.v-pstep:active,.v-tl-item:active{transform:scale(.995)}
.v-waffle-cell:active{transform:scale(.86)}
.v-bar:active,.v-bar-seg:active{filter:brightness(.94) saturate(1.08)}
.v-line-dot:active{transform:scale(1.55)}
.v-hbar-row:active .v-hbar-fill{filter:brightness(.94) saturate(1.08)}