/* ================================================================
   MYROPAY — REDESIGN LAYER v1
   Sitewide editorial uplift, layered on top of main.css/enhance.css.
   Reuses existing tokens (--brand, --gray-*, --font-display, etc.)
   so every page that already includes stats-bar / .label / .btn-*
   automatically inherits the new look — no markup changes required.
   New opt-in components (fact strip, FAQ, sticky showcase, dot
   buttons) are additive and only appear where used.
   ================================================================ */

/* ── 1. Bolder "fact" stat typography — applies to every existing
        .stats-bar on every page automatically ─────────────────── */
.stats-bar-item {
  position: relative;
  transition: background var(--t2) var(--ease);
}
.stats-bar-item::before {
  content: '';
  position: absolute; top: 0; left: 0; width: 0; height: 3px;
  background: var(--brand);
  transition: width .5s var(--ease-out);
}
.stats-bar-item:hover { background: var(--bg-soft); }
.stats-bar-item:hover::before { width: 100%; }

.stat-number {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.2vw, 64px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 0.95 !important;
  color: var(--gray-9);
  display: block;
}
.stat-label {
  font-size: 13px !important;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 700 !important;
  color: var(--gray-4) !important;
  margin-top: 10px !important;
}

/* ── 2. Section eyebrow — underline-highlight label, Consora-style.
        Opt-in class, use instead of / alongside .label ──────────── */
.eyebrow {
  position: relative;
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  color: var(--gray-9);
  margin-bottom: 14px;
  z-index: 1;
}
.eyebrow::before {
  content: '';
  position: absolute; left: -2px; right: -2px; bottom: 2px; height: 8px;
  background: var(--brand-pale);
  z-index: -1;
}
.eyebrow.on-dark { color: #fff; }
.eyebrow.on-dark::before { background: rgba(255,255,255,.18); }

/* ── 3. Dot-morph CTA button — circular icon capsule that expands
        on hover. Opt-in via .btn-dot (pairs with .btn-dot-circle) ── */
.btn-dot {
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--brand); color: #fff;
  border-radius: var(--r-full);
  padding: 6px 8px 6px 26px;
  font-family: var(--font-body); font-weight: 700; font-size: 15px;
  box-shadow: 0 2px 14px rgba(124,58,237,.35);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
  cursor: pointer; border: none; -webkit-user-select: none;
}
.btn-dot:hover { background: var(--brand-mid); box-shadow: 0 8px 28px rgba(124,58,237,.45); transform: translateY(-2px); color: #fff; }
.btn-dot .btn-dot-circle {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  transition: background .3s var(--ease), transform .3s var(--ease);
  overflow: hidden;
}
.btn-dot .btn-dot-circle svg { width: 15px; height: 15px; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.btn-dot:hover .btn-dot-circle { background: #fff; }
.btn-dot:hover .btn-dot-circle svg { transform: translate(2px,-2px); color: var(--brand); }
.btn-dot.white { background: #fff; color: var(--brand); }
.btn-dot.white .btn-dot-circle { background: var(--brand-pale); color: var(--brand); }
.btn-dot.white:hover { background: var(--brand-pale); }
.btn-dot.white:hover .btn-dot-circle { background: var(--brand); color: #fff; }
.btn-dot.white:hover .btn-dot-circle svg { color: #fff; }
.btn-dot.biz { background: var(--biz, #2563EB); color: #fff; box-shadow: 0 2px 14px rgba(37,99,235,.35); }
.btn-dot.biz:hover { background: var(--biz-dark, #1D4ED8); box-shadow: 0 8px 28px rgba(37,99,235,.45); }

/* Subtle shine sweep on the existing primary buttons — sitewide,
   no markup change, purely decorative on hover. */
.btn-primary, .btn-white { position: relative; overflow: hidden; }
.btn-primary::after, .btn-white::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 35%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg); transition: left .65s var(--ease); pointer-events: none;
}
.btn-primary:hover::after, .btn-white:hover::after { left: 130%; }

/* ── 4. FAQ accordion — native <details>/<summary>, no JS needed ── */
.faq-list { max-width: 780px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 26px 2px;
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  color: var(--gray-9); letter-spacing: -0.01em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; font-size: 24px; font-weight: 400; line-height: 1; color: var(--brand);
  flex-shrink: 0; transition: transform .3s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-a { padding: 0 30px 26px 2px; color: var(--gray-6); line-height: 1.75; font-size: 15px; max-width: 660px; }

/* ── 5. Sticky-pinned showcase — Consora's pinned service list,
        recolored. Two columns → stacks on mobile ─────────────────── */
.showcase-wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: start; }
.showcase-sticky { position: sticky; top: 110px; }
.showcase-row {
  display: grid; grid-template-columns: 44px 1fr; gap: 22px;
  padding: 34px 0; border-top: 1px solid var(--border);
}
.showcase-list .showcase-row:last-child { border-bottom: 1px solid var(--border); }
.showcase-num { font-family: var(--font-mono); font-size: 13px; color: var(--gray-4); padding-top: 5px; }
.showcase-row h3 { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--gray-9); margin-bottom: 8px; letter-spacing: -0.02em; }
.showcase-row p { color: var(--gray-6); font-size: 15px; line-height: 1.7; }
@media (max-width: 900px) {
  .showcase-wrap { grid-template-columns: 1fr; gap: 32px; }
  .showcase-sticky { position: static; }
}

/* ── 6. Card polish — slightly more editorial depth on hover ──── */
.card-feature:hover { transform: translateY(-5px); }

/* ── 7. Big pull-number / oversized statistic line (Consora's
        96px "fact" numerals) for standalone editorial callouts ──── */
.pull-number {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(56px, 9vw, 120px); line-height: .85;
  letter-spacing: -0.04em; color: var(--gray-9);
}
.pull-number .accent { color: var(--brand); }

@media (max-width: 640px) {
  .btn-dot { padding: 5px 6px 5px 20px; font-size: 14px; gap: 10px; }
  .btn-dot .btn-dot-circle { width: 34px; height: 34px; }
}