/* =====================================================================
   VeriSight site-wide premium layer (Stage 2)
   Scoped to body.vs-premium, loaded on all content pages EXCEPT the
   homepage (which keeps its dedicated home-premium.css dark-hero treatment).
   LIGHT-THEME ENHANCEMENT ONLY — never inverts the theme or restructures
   markup. Refines enterprise-clean.css: premium type, accent, buttons,
   cards, kicker chips, hero polish.
   Sharp Card System (CLAUDE.md v2.3.6): outer cards <=6px, hero frames <=8px,
   no 12px+ radii, no 50% circles on >40px containers.
   Pre-merge reviewed (4-lens): preserves the teal two-score accent card, the
   pulsing status-pill (left to base), buyer-chip 44px tap target, and uses a
   WCAG-AA accent-ink.
   ===================================================================== */

.vs-premium {
  --vs-accent: #4c84ff;
  --vs-accent-ink: #2459b4; /* WCAG AA on white/tints (links, kickers, badges) */
  --vs-accent-2: #1f9e6b;
  --vs-line: rgba(8, 19, 32, 0.1);
  --vs-r: 6px;
  --vs-rlg: 8px;
  --vs-shadow: 0 18px 40px -22px rgba(8, 19, 32, 0.26), 0 2px 6px -2px rgba(8, 19, 32, 0.07);
  --vs-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --vs-body: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-family: var(--vs-body);
}

/* ---------- type ---------- */
.vs-premium h1,
.vs-premium h2,
.vs-premium h3,
.vs-premium h4,
.vs-premium .cta-band h2 {
  font-family: var(--vs-display);
  letter-spacing: -0.02em;
}

/* ---------- eyebrow / kicker chips ---------- */
.vs-premium .admit-eyebrow,
.vs-premium .section-kicker {
  color: var(--vs-accent-ink);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.vs-premium .product-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(36, 89, 180, 0.1);
  color: var(--vs-accent-ink);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.vs-premium .surfaces-tag {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(36, 89, 180, 0.1);
  color: var(--vs-accent-ink);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ---------- buttons (matches home-premium / judge-approved homepage) ---------- */
.vs-premium .btn-primary {
  background: linear-gradient(180deg, #5a8dff, var(--vs-accent));
  color: #fff;
  border: 1px solid transparent;
  box-shadow:
    0 12px 30px -12px var(--vs-accent),
    0 1px 0 rgba(255, 255, 255, 0.45) inset;
  transition:
    transform 0.15s,
    box-shadow 0.2s;
}
.vs-premium .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 20px 40px -14px var(--vs-accent),
    0 1px 0 rgba(255, 255, 255, 0.45) inset;
}
.vs-premium .btn-secondary {
  border: 1px solid var(--vs-line);
  transition:
    transform 0.15s,
    box-shadow 0.2s,
    border-color 0.2s;
}
.vs-premium .btn-secondary:hover {
  transform: translateY(-2px);
  border-color: rgba(76, 132, 255, 0.45);
}
.vs-premium .btn-link,
.vs-premium .btn-link-arrow {
  color: var(--vs-accent-ink);
}

/* ---------- premium card polish (shadow/border/radius/hover; NOT bg/text) ---------
   Excludes .questions-card — base groups it with large 8px flat panels. */
.vs-premium .problem-card,
.vs-premium .review-card,
.vs-premium .step-box,
.vs-premium .analytics-card,
.vs-premium .trust-note,
.vs-premium .founder-card,
.vs-premium .surfaces-card {
  border: 1px solid var(--vs-line);
  border-radius: var(--vs-r);
  box-shadow: var(--vs-shadow);
  transition:
    transform 0.25s,
    box-shadow 0.25s,
    border-color 0.25s;
}
.vs-premium .problem-card:hover,
.vs-premium .review-card:hover,
.vs-premium .step-box:hover,
.vs-premium .analytics-card:hover,
.vs-premium .surfaces-card:hover {
  transform: translateY(-4px);
  border-color: rgba(76, 132, 255, 0.32);
  box-shadow: 0 26px 50px -26px rgba(8, 19, 32, 0.3);
}
/* preserve the deliberate teal "two-score" accent card identity */
.vs-premium .surfaces-card--accent {
  border-color: rgba(15, 118, 110, 0.32);
}

/* ---------- hero polish (light, both .pilot-hero and .admit-hero) ----------
   Status-pill intentionally NOT overridden — base ships a pulsing conversion
   signal + an amber "full" variant we must not break. */
.vs-premium .pilot-hero,
.vs-premium .admit-hero {
  background:
    radial-gradient(60% 60% at 85% 0%, rgba(76, 132, 255, 0.06), transparent 60%),
    linear-gradient(180deg, #fbfcfe, #ffffff 55%);
}
.vs-premium .buyer-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid var(--vs-line);
  background: #fff;
  transition:
    transform 0.15s,
    border-color 0.2s,
    box-shadow 0.2s;
}
.vs-premium .buyer-chip:hover {
  transform: translateY(-2px);
  border-color: rgba(76, 132, 255, 0.4);
  box-shadow: var(--vs-shadow);
}
.vs-premium .hero-trust-line a,
.vs-premium .admit-section a:not(.btn):not(.buyer-chip) {
  color: var(--vs-accent-ink);
}

/* refined frame for the real product screenshot on .admit-hero pages */
.vs-premium .report-image-card {
  border: 1px solid var(--vs-line);
  border-radius: var(--vs-rlg);
  box-shadow: var(--vs-shadow);
  overflow: hidden;
}
.vs-premium .report-image-card img {
  display: block;
  width: 100%;
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  .vs-premium * {
    transition: none !important;
  }
}