/* =============================================================
 * — "Prototype DNA"
 *
 * Lifts the visual language of the Evercred prototype-v2 app:
 * cool slate-gray neutrals, bright blue brand, status chips,
 * Geist mono accents, denser cards, more dashboard energy.
 *
 * Strategy: @import the Design A baseline, then override token
 * vars + the components that need a different look. The HTML is
 * unchanged across variants — only this file (and the swap of
 * the active <link>) differs.
 * ============================================================= */
@import url('/styles-a.css');

:root {
  /* === EVERCRED PALETTE — (slate + bright blue) === */
  --paper: #f8fafc;          /* slate-50 — primary background */
  --paper-2: #eef2f7;        /* slate-100 — alt section background */
  --paper-3: #e2e8f0;        /* slate-200 — card hover */
  --paper-card: #ffffff;     /* white — elevated cards */
  --ink: #0f172a;            /* slate-900 — primary text */
  --ink-2: #1e293b;          /* slate-800 — secondary text */
  --ink-3: #475569;          /* slate-600 — muted body */
  --ink-4: #94a3b8;          /* slate-400 — placeholder */
  --line: #e2e8f0;           /* slate-200 — borders */
  --line-2: #cbd5e1;         /* slate-300 — stronger borders */
  --brand: #3b82f6;          /* blue-500 — bright blue */
  --brand-d: #2563eb;        /* blue-600 — hover */
  --brand-soft: #dbeafe;     /* blue-100 — tint */
  --brand-ink: #1e3a8a;      /* blue-900 — deep accent */
  --blue: var(--brand); --blue-d: var(--brand-d); --blue-soft: var(--brand-soft); --blue-ink: var(--brand-ink);
  --green: #10b981; --green-d: #059669; --green-soft: #d1fae5;
  --amber: #f59e0b; --amber-soft: #fef3c7;
  --indigo: #6366f1;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow: 0 4px 14px -4px rgba(15, 23, 42, 0.12), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 20px 40px -12px rgba(15, 23, 42, 0.18), 0 8px 16px -8px rgba(15, 23, 42, 0.08);
  --shadow-brand: 0 10px 28px -8px rgba(59, 130, 246, 0.4);
  --shadow-blue: var(--shadow-brand);
}

/* Body — inherits Design A's typography (font-family Geist, font-size 17px,
   line-height 1.55, h1-h4 font-weight 400, tighter letter-spacing). Design A's
   thin-weight editorial type is preferred per Leah. Only the background +
   color come from 's slate palette via the token swap above. */
body {
  color: var(--ink);
  background: var(--paper);
}
.eyebrow { color: var(--brand); }

/* Buttons — bright blue primary, subtle blue ghost */
.btn { border-radius: 8px; font-weight: 500; }
.btn-primary {
  background: var(--brand);
  color: white;
  border-color: var(--brand);
  box-shadow: var(--shadow-brand);
}
.btn-primary:hover {
  background: var(--brand-d);
  border-color: var(--brand-d);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}
.btn-ghost {
  background: var(--paper-card);
  color: var(--ink);
  border: 1px solid var(--line-2);
}
.btn-ghost:hover { background: var(--paper-3); border-color: var(--ink-3); }

/* Nav — solid bottom border + subtle backdrop blur */
nav.top {
  background: rgba(248, 250, 252, 0.85);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line);
}
nav.top.scrolled { background: rgba(248, 250, 252, 0.95); }
nav.top ul li a { color: var(--ink-2); font-weight: 500; font-size: 14.5px; }
nav.top ul li a:hover { color: var(--brand); }
nav.top ul li a[aria-current="page"] { color: var(--brand); font-weight: 600; }
nav.top ul li a[aria-current="page"]::after { background: var(--brand); }

/* Hero — Hero background (dot grid + spotlight) + card stack on the right.
   The override !important flags from the Design A/B switching era have been
   simplified — these are now the only hero visual rules so default display
   is sufficient. */
.hero-visual { display: flex; }
.hero-bg { display: block; }
.hero {
  padding: 120px 0 80px;
  background:
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* ===== Hero interactive background =====
   Three layers:
     1. .hero-bg ::before   — dot grid (pure CSS background pattern)
     2. .hero-spotlight         — blue radial that follows the cursor
                                via --cursor-x/--cursor-y on .hero
     3. .hbb-flow <svg>        — four "data flow" lines from primary
                                sources (left edge) converging on
                                the card stack (right side). Each line
                                has an animated gradient stroke that
                                pulses inward, signaling verification. */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 1.5px 1.5px, rgba(15, 23, 42, 0.06) 1.5px, transparent 0);
  background-size: 28px 28px;
}
.hero-spotlight {
  position: absolute;
  left: var(--cursor-x, 50%);
  top: var(--cursor-y, 35%);
  width: 540px;
  height: 540px;
  margin-left: -270px;
  margin-top: -270px;
  background:
    radial-gradient(circle, rgba(59, 130, 246, 0.22) 0%, rgba(99, 102, 241, 0.08) 35%, transparent 70%);
  border-radius: 50%;
  filter: blur(20px);
  opacity: 0.85;
  transition: opacity 0.5s ease;
}
@media (prefers-reduced-motion: reduce) {
  .hero-spotlight { display: none; }
}
.hero .container { z-index: 2; }
.hero-visual { z-index: 3; }
.hero .container {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 2;
}
@media (max-width: 980px) { .hero .container { grid-template-columns: 1fr; gap: 40px; } }
/* Hero h1: keep left alignment (uses a 2-col grid hero), but inherit
   Design A's font-size so the headline reads at the same editorial scale. */
.hero h1 { text-align: left; }
.hero .lede { text-align: left; max-width: 56ch; }
.hero .hero-cta-row { justify-content: flex-start; }
.hero .hero-trust { text-align: left; color: var(--ink-3); }

/* Hero visual B — animated credential card stack.
   width: 100% + max-width + justify-self:end makes the stack take
   the full right-column width up to 440px, sitting flush against
   the column's right edge. Without explicit width the grid item
   collapses to its absolute children's intrinsic size (=0). */
.hero-visual {
  position: relative;
  width: 100%;
  max-width: 440px;
  height: 460px;
  pointer-events: none;
  justify-self: end;
}
@media (max-width: 980px) {
  .hero-visual { height: 380px; margin: 32px auto 0; max-width: 420px; justify-self: center; }
}
@media (max-width: 640px) {
  /* The dark "Verification queue" mini-card peeks from behind the
     wallet card on desktop. At mobile width it ends up mostly
     hidden behind the white card with only its right edge poking
     out — looks like a cutoff. Hide it on mobile and let the
     wallet card stand alone. */
  .hb-card-2 { display: none; }
  /* Wallet card uses the full visual column on mobile since there's
     no queue card behind it anymore. */
  .hb-card-1 { right: 0; }
  .hero-visual { height: 340px; }
}
.hb-card {
  position: absolute;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 22px 24px;
}
.hb-card-1 {
  top: 0;
  left: 0;
  right: 60px;
  z-index: 2;
  animation: hb-float-a 8s ease-in-out infinite;
}
.hb-card-2 {
  bottom: 0;
  right: 0;
  width: 64%;
  z-index: 1;
  background: linear-gradient(180deg, var(--ink) 0%, #1e293b 100%);
  color: #e2e8f0;
  border-color: #334155;
  animation: hb-float-b 9s ease-in-out infinite;
}
@keyframes hb-float-a {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes hb-float-b {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}
.hb-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.hb-avatar {
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--indigo) 100%);
  color: white; font-weight: 600; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.hb-name { font-weight: 600; font-size: 15px; color: var(--ink); line-height: 1.2; }
.hb-spec { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.hb-rows { display: flex; flex-direction: column; gap: 0; }
.hb-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
}
.hb-row:first-child { border-top: none; }
/* Long credential names wrap inside the card instead of pushing the status
   pill out of view. min-width:0 lets the flex item shrink below its
   intrinsic content width. */
.hb-cred { color: var(--ink-2); min-width: 0; flex: 1 1 auto; word-wrap: break-word; }
.hb-status { flex-shrink: 0; }
.hb-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
}
.hb-status::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.hb-status.verified { color: #047857; background: #d1fae5; }
/* "pending" / "in review" / "verifying" use the design-system processing
   token (info blue), NOT amber. Amber is reserved for warnings. */
.hb-status.pending  { color: #3b82f6; background: #dbeafe; }

.hb-mini-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.hb-mini-title { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: #94a3b8; font-weight: 500; }
.hb-mini-count { font-size: 12px; color: var(--brand); font-weight: 500; }
.hb-tasks { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: #cbd5e1; }
.hb-task { display: inline-flex; align-items: center; gap: 10px; padding: 4px 0; }
.hb-tdot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand);
  animation: hb-pulse 1.4s ease-in-out infinite; }
.hb-tdot.done { background: #10b981; animation: none; }
@keyframes hb-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}

/* Trust bar — denser, sharper */
.trust { background: var(--paper-card); border-top: 1px solid var(--line); }
.trust-label { color: var(--ink-3); }
.trust-badge { color: var(--ink-2); }
.trust-badge .badge-icon { color: var(--brand); }

/* Cards — tighter padding + sharper border + blue accent on hover */
.ts-card, .pp-section .pricing-summary-card, .wallet-card, .pricing-summary-card,
.benefit-card, .wp-card, .case-study .cs-rail, .channel-partner-card,
.entity-card, .founder-card, .free-preview-callout, .compare-line, .contact-cta {
  border-radius: 10px;
}
.benefit-card, .ts-card { background: var(--paper-card); border-color: var(--line); }
.benefit-card:hover, .ts-card:hover { border-color: var(--brand); box-shadow: var(--shadow-brand); transform: translateY(-2px); transition: all 0.18s ease; }

/* Tables — denser, blue header column for Evercred col */
.price-table, .compare-table, .workflow-table, .trust-table {
  border-radius: 10px;
}
.compare-table th.evercred-col, .workflow-table th.evercred-col {
  background: var(--brand);
  color: white;
}
.compare-table td.evercred-col, .workflow-table td.evercred-col {
  background: rgba(59, 130, 246, 0.06);
  color: var(--ink);
}
.price-table tr:hover td { background: rgba(59, 130, 246, 0.04); }

/* Status pills (on /trust) — vivid */
.status-pill.today    { color: #047857; background: #d1fae5; }
/* "In progress" uses the design-system processing token (info blue),
   NOT amber. Amber is reserved for warnings. */
.status-pill.progress { color: #3b82f6; background: #dbeafe; }
.status-pill.roadmap  { color: var(--ink-3); background: var(--paper-3); border: 1px solid var(--line); }

/* What-you-keep + data-ownership-card — slate-900 background */
.what-you-keep, .data-ownership-card { background: #0f172a; border-radius: 14px; }
.what-you-keep .eyebrow, .data-ownership-card .eyebrow { color: var(--brand); }
.what-you-keep p, .data-ownership-card p { color: #cbd5e1; }
.data-ownership-card .trust-pillar { background: rgba(59, 130, 246, 0.18); border-left-color: var(--brand); }

/* Pricing-hero — cleaner cool top section.
   Matches the home hero language: the same 28px dot grid + a soft
   blue spotlight that follows the cursor (--cursor-x/--cursor-y are set by
   the existing scripts.js rAF loop on .hero, so we mirror the binding to
   .pricing-hero here). Pure CSS, no JS changes needed for the grid; the
   spotlight gets a soft default position so it reads even before the user
   moves the mouse. */
.pricing-hero {
  position: relative;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
}
.pricing-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 1.5px 1.5px, rgba(15, 23, 42, 0.06) 1.5px, transparent 0);
  background-size: 28px 28px;
}
.pricing-hero::after {
  content: '';
  position: absolute;
  left: var(--cursor-x, 50%);
  top: var(--cursor-y, 40%);
  width: 540px;
  height: 540px;
  margin-left: -270px;
  margin-top: -270px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(59, 130, 246, 0.18) 0%, rgba(99, 102, 241, 0.06) 35%, transparent 70%);
  border-radius: 50%;
  filter: blur(20px);
}
.pricing-hero .container { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .pricing-hero::after { display: none; }
}

/* Two-column hero layout for inner pages that include a .hero-visual on
   the right (currently /physicians). Mirrors the home hero layout in
   . Falls back to single-column when no .hero-visual is present
   (most inner pages) because :has() targets only containers that have one. */
.pricing-hero .container:has(.hero-visual) {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 980px) {
  .pricing-hero .container:has(.hero-visual) { grid-template-columns: 1fr; gap: 40px; }
}
/* When the wallet card stands alone (no verification-queue card behind it),
   pull it flush to the right of its column. The home hero offsets it 60px
   to make room for the dark queue card; here we don't need that. */
.pricing-hero .hero-visual .hb-card-1 { right: 0; }

/* Centered inner-page hero — for pages without a hero-visual card
   (/pricing, /about, /trust). Caps content width and pulls everything to
   the optical center so the page reads balanced even without a right rail. */
.pricing-hero.centered .container { text-align: center; }
.pricing-hero.centered .hero-text { max-width: 880px; margin: 0 auto; }
.pricing-hero.centered h1 { margin-left: auto; margin-right: auto; }
.pricing-hero.centered .lede { margin-left: auto; margin-right: auto; }
.pricing-hero.centered .hero-cta-row { justify-content: center; }

/* Footer — dark slate with blue accents */
footer { background: #0f172a; }
footer h5 { color: var(--brand); }
footer a { color: #cbd5e1; }
footer a:hover { color: white; }
.footer-bottom { border-top-color: #1e293b; color: #94a3b8; }
.badge { background: #1e293b; color: #94a3b8; border-color: #334155; }

/* App screenshots — dashboard chrome (Hero treatment) */
.app-shots { background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%); border-top: 1px solid var(--line); }
.app-screenshot { box-shadow: var(--shadow-lg); border-color: var(--line-2); }
.asp-chrome {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  color: #cbd5e1;
  border-bottom-color: #334155;
}
.asp-chrome .asp-dot { background: #475569; }
.asp-chrome .asp-dot:nth-child(1) { background: #ef4444; }
.asp-chrome .asp-dot:nth-child(2) { background: #f59e0b; }
.asp-chrome .asp-dot:nth-child(3) { background: #10b981; }
.asp-chrome .asp-url { color: #94a3b8; }
.asp-body {
  background:
    linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(99, 102, 241, 0.04) 100%);
}
.asp-placeholder-label { color: var(--brand); }
.app-screenshot figcaption { background: var(--paper-card); color: var(--ink-2); font-weight: 500; }

/* FAQ — bordered card */
.faq-list { background: var(--paper-card); border: 1px solid var(--line); border-radius: 10px; padding: 0 24px; }