/* =============================================================
   Loyoly Benchmark — V2 layer
   Modern refresh: Hero B, number-rule + accent-line labels,
   refined KPI card, motion. Layered after app-styles.css.
   ============================================================= */

/* ── Nav: fix label wrap + compact-on-scroll ─────────────────── */
.bm-nav__tab-label, .bm-nav__tab-sub { white-space: nowrap; }
.bm-nav { transition: box-shadow 240ms ease; }
.bm-nav__inner { transition: padding-top 240ms ease, padding-bottom 240ms ease; }
.bm-nav.is-stuck { box-shadow: 0 2px 14px rgba(43,37,31,0.08); }
.bm-nav.is-stuck .bm-nav__inner { padding-top: 9px; padding-bottom: 9px; }
.bm-app[data-theme="dark"] .bm-nav.is-stuck { box-shadow: 0 2px 16px rgba(0,0,0,0.4); }

/* ── Modern eyebrow: short accent line, calmer tracking ──────── */
.bm-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  letter-spacing: 0.1em;
}
.bm-eyebrow::before {
  content: ""; width: 16px; height: 1.5px; flex-shrink: 0;
  background: var(--blue-primary); border-radius: 2px;
}
.bm-methodology .bm-eyebrow::before { background: var(--yellow-secondary); }
.bm-app[data-theme="dark"] .bm-eyebrow::before { background: var(--blue-secondary); }

/* ── Number-rule section header ──────────────────────────────── */
.bm-numhead { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.bm-numhead__n {
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  color: var(--blue-primary); font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em; flex-shrink: 0;
}
.bm-numhead__lbl { font-size: 13px; font-weight: 600; color: var(--fg-muted); flex-shrink: 0; }
.bm-numhead__rule { flex: 1; height: 1px; background: var(--border); }
.bm-app[data-theme="dark"] .bm-numhead__rule { background: rgba(255,255,255,0.12); }
.bm-app[data-theme="dark"] .bm-numhead__lbl { color: var(--pampas-300); }

/* ── Hero B: data-forward + wayfinding index ─────────────────── */
.bm-hero--index {
  display: grid; grid-template-columns: 1.35fr 0.9fr; gap: 48px;
  align-items: center; padding: 56px 0 44px; max-width: none;
}
@media (max-width: 920px) { .bm-hero--index { grid-template-columns: 1fr; gap: 30px; padding: 40px 0 32px; } }
.bm-hero__kicker { margin-bottom: 18px; white-space: nowrap; }
.bm-hero__index { display: flex; flex-direction: column; gap: 6px; }
.bm-hero__index-item {
  appearance: none; font-family: var(--font-body); color: inherit; text-align: left;
  display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg-raised); cursor: pointer;
  transition: border-color 170ms, transform 170ms cubic-bezier(.2,.8,.2,1), box-shadow 170ms;
}
.bm-hero__index-item:hover {
  border-color: var(--blue-primary); transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(43,37,31,0.08), 0 2px 6px rgba(43,37,31,0.05);
}
.bm-hero__index-num {
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  color: var(--fg-faint); font-variant-numeric: tabular-nums;
}
.bm-hero__index-t { font-size: 14px; font-weight: 600; color: var(--fg); display: block; }
.bm-hero__index-s { font-size: 12px; color: var(--fg-muted); margin-top: 1px; display: block; }
.bm-hero__index-arrow { color: var(--fg-faint); display: flex; transition: transform 170ms, color 170ms; }
.bm-hero__index-item:hover .bm-hero__index-arrow { transform: translateX(3px); color: var(--blue-primary); }
.bm-app[data-theme="dark"] .bm-hero__index-item { background: #1A1611; border-color: rgba(255,255,255,0.08); }
.bm-app[data-theme="dark"] .bm-hero__index-t { color: #fff; }
.bm-app[data-theme="dark"] .bm-hero__index-s { color: var(--pampas-300); }

/* ── Refined KPI card ────────────────────────────────────────── */
.bm-card__title { display: inline-flex; align-items: center; gap: 9px; }
.bm-card__ic {
  width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pampas-100); color: var(--pampas-800);
}
.bm-app[data-theme="dark"] .bm-card__ic { background: rgba(255,255,255,0.07); color: var(--pampas-200); }
/* quiet formula — replaces the loud yellow box */
.bm-card__formula-q {
  margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--border);
  display: flex; align-items: baseline; gap: 8px;
}
.bm-app[data-theme="dark"] .bm-card__formula-q { border-top-color: rgba(255,255,255,0.10); }
.bm-card__formula-q b {
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-faint); font-weight: 700; flex-shrink: 0;
}
.bm-card__formula-q code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; color: var(--fg-muted); line-height: 1.4; word-break: break-word;
}
.bm-app[data-theme="dark"] .bm-card__formula-q code { color: var(--pampas-300); }
.bm-app[data-density="compact"] .bm-card__formula-q code { font-size: 10px; }

/* ── Motion #4: view cross-fade (timer-driven, never gets stuck) ── */
.bm-viewfade {
  opacity: 0; transform: translateY(8px);
  transition: opacity 340ms cubic-bezier(.2,.8,.2,1), transform 340ms cubic-bezier(.2,.8,.2,1);
}
.bm-viewfade.is-in { opacity: 1; transform: none; }

/* ── Motion #3: ranking bar grow uses inline transition (set in JS) */

@media (prefers-reduced-motion: reduce) {
  .bm-viewfade { transition: none; opacity: 1; transform: none; }
  .bm-nav, .bm-nav__inner { transition: none; }
}

/* ── Insights section: "What the data says" (3 layouts) ──────── */
.bm-insights { margin-bottom: 24px; }
.bm-insights__head { margin-bottom: 16px; }

/* panel */
.bm-insights-panel {
  background: color-mix(in srgb, #10A370 7%, var(--bg-raised));
  border: 1px solid var(--border); border-left: 3px solid #10A370;
  padding: 16px 18px;
}
.bm-insights-panel p { font-size: 13px; color: var(--fg-muted); line-height: 1.65; }
.bm-app[data-theme="dark"] .bm-insights-panel { background: rgba(16,163,112,0.08); border-color: rgba(255,255,255,0.08); }
.bm-app[data-theme="dark"] .bm-insights-panel p { color: var(--pampas-300); }

/* split: leader vs laggard */
.bm-insights-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 820px) { .bm-insights-split { grid-template-columns: 1fr; } }
.bm-insight {
  background: var(--bg-raised); border: 1px solid var(--border);
  padding: 18px 20px; display: flex; flex-direction: column; gap: 12px;
  position: relative; overflow: hidden; border-radius: 2px;
}
.bm-app[data-theme="dark"] .bm-insight { background: #1A1611; border-color: rgba(255,255,255,0.08); }
.bm-insight::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.bm-insight--up::before { background: #10A370; }
.bm-insight--down::before { background: var(--pampas-400); }
.bm-insight__head { display: flex; align-items: center; gap: 12px; }
.bm-insight__icon {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.bm-insight--up .bm-insight__icon { background: color-mix(in srgb, #10A370 14%, transparent); color: #047C50; }
.bm-insight--down .bm-insight__icon { background: var(--pampas-100); color: var(--pampas-700); }
.bm-insight--down .bm-insight__icon svg { transform: rotate(180deg); }
.bm-app[data-theme="dark"] .bm-insight--up .bm-insight__icon { background: rgba(20,240,200,0.14); color: #4ED0AC; }
.bm-app[data-theme="dark"] .bm-insight--down .bm-insight__icon { background: rgba(255,255,255,0.07); color: var(--pampas-200); }
.bm-insight__meta { flex: 1; min-width: 0; }
.bm-insight__tag { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.bm-insight--up .bm-insight__tag { color: #047C50; }
.bm-insight--down .bm-insight__tag { color: var(--fg-faint); }
.bm-app[data-theme="dark"] .bm-insight--up .bm-insight__tag { color: #4ED0AC; }
.bm-insight__sector {
  display: flex; align-items: center; gap: 7px; margin-top: 3px;
  font-family: var(--font-display); font-weight: 500; font-size: 16px;
  letter-spacing: -0.01em; color: var(--fg);
}
.bm-app[data-theme="dark"] .bm-insight__sector { color: #fff; }
.bm-insight__val {
  font-family: var(--font-display); font-weight: 600; font-size: 22px;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--fg); flex-shrink: 0;
}
.bm-app[data-theme="dark"] .bm-insight__val { color: #fff; }
.bm-insight__body { font-size: 13px; line-height: 1.6; color: var(--fg-muted); margin: 0; }
.bm-app[data-theme="dark"] .bm-insight__body { color: var(--pampas-300); }

/* editorial */
.bm-insights-ed { border-left: 3px solid #10A370; padding: 2px 0 2px 22px; }
.bm-insights-ed__pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.bm-ipill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.bm-ipill b { font-variant-numeric: tabular-nums; }
.bm-ipill--up { background: color-mix(in srgb, #10A370 12%, transparent); color: #047C50; }
.bm-ipill--down { background: var(--pampas-100); color: var(--pampas-800); }
.bm-ipill--down svg { transform: rotate(180deg); }
.bm-app[data-theme="dark"] .bm-ipill--up { background: rgba(20,240,200,0.14); color: #4ED0AC; }
.bm-app[data-theme="dark"] .bm-ipill--down { background: rgba(255,255,255,0.07); color: var(--pampas-200); }
.bm-insights-ed p { font-size: 15px; line-height: 1.7; color: var(--fg); max-width: 76ch; }
.bm-insights-ed p:not(:first-of-type) { color: var(--fg-muted); }
.bm-app[data-theme="dark"] .bm-insights-ed p { color: var(--pampas-200); }

/* ── Hover micro-interactions (picks 2–7) ────────────────────── */

/* 2 · KPI icon tile fills + tilts when its card is hovered */
.bm-card__ic {
  transition: background 220ms cubic-bezier(.2,.8,.2,1), color 220ms, transform 260ms cubic-bezier(.2,.8,.2,1);
}
.bm-card:hover .bm-card__ic { background: var(--blue-primary); color: #fff; transform: rotate(-8deg) scale(1.08); }

/* 3 · Rail items grow a left accent bar + nudge the icon */
.bm-rail__btn { position: relative; }
.bm-rail__btn::before {
  content: ""; position: absolute; left: 0; top: 50%; height: 0; width: 3px;
  background: var(--blue-primary); transform: translateY(-50%); border-radius: 2px;
  transition: height 220ms cubic-bezier(.2,.8,.2,1);
}
.bm-rail__btn:hover::before { height: 62%; }
.bm-rail__btn[aria-current="true"]::before { height: 0; }
.bm-rail__btn svg { transition: transform 220ms cubic-bezier(.2,.8,.2,1); }
.bm-rail__btn:hover svg { transform: translateX(3px); }

/* 4 · Ranking bar live emphasis (thicken + brighten + drifting stripes) */
.bm-compare__bar-fill { transform-origin: center; }
.bm-compare__bar-fill::after {
  content: ""; position: absolute; inset: 0; border-radius: 999px; pointer-events: none;
  background-image: linear-gradient(115deg, rgba(255,255,255,0.28) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.28) 50%, rgba(255,255,255,0.28) 75%, transparent 75%);
  background-size: 16px 16px; background-position: 0 0; opacity: 0; transition: opacity 200ms;
}
.bm-compare__bar-wrap:hover .bm-compare__bar-fill { transform: scaleY(1.35); filter: brightness(1.06) saturate(1.12); }
.bm-compare__bar-wrap:hover .bm-compare__bar-fill::after { opacity: 1; animation: bmStripe 0.7s linear infinite; }
@keyframes bmStripe { to { background-position: 32px 0; } }
.bm-compare__value-num { transition: transform 200ms cubic-bezier(.2,.8,.2,1), color 200ms; }
.bm-compare__row:hover .bm-compare__value-num { transform: scale(1.1); color: var(--blue-primary); }
.bm-app[data-theme="dark"] .bm-compare__row:hover .bm-compare__value-num { color: var(--blue-secondary); }

/* 5 · Client logos bloom to full colour + zoom */
.bm-clients__logo { transition: filter 220ms, opacity 220ms, transform 320ms cubic-bezier(.2,.8,.2,1); }
.bm-clients__item:hover .bm-clients__logo { filter: none; transform: scale(1.1); }
.bm-app[data-theme="dark"] .bm-clients__item:hover .bm-clients__logo { filter: grayscale(0) brightness(1.6) contrast(0.9); transform: scale(1.1); }

/* 6 · Primary button shine sweep + arrow slide */
.bm-btn--primary { position: relative; overflow: hidden; }
.bm-btn--primary::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 35%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-18deg); transition: left 600ms cubic-bezier(.2,.8,.2,1);
}
.bm-btn--primary:hover::after { left: 130%; }
.bm-btn--primary svg { transition: transform 200ms cubic-bezier(.2,.8,.2,1); position: relative; }
.bm-btn--primary:hover svg { transform: translateX(3px); }

/* 7 · Tip card lift + number chip pop */
.bm-tip { transition: transform 240ms cubic-bezier(.2,.8,.2,1), box-shadow 240ms, border-color 200ms; }
.bm-tip:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(43,37,31,0.10); }
.bm-app[data-theme="dark"] .bm-tip:hover { box-shadow: 0 12px 26px rgba(0,0,0,0.34); }
.bm-tip__num { transition: transform 280ms cubic-bezier(.2,.8,.2,1); }
.bm-tip:hover .bm-tip__num { transform: scale(1.14) rotate(-6deg); }

@media (prefers-reduced-motion: reduce) {
  .bm-card:hover .bm-card__ic,
  .bm-compare__bar-wrap:hover .bm-compare__bar-fill,
  .bm-compare__row:hover .bm-compare__value-num,
  .bm-clients__item:hover .bm-clients__logo,
  .bm-tip:hover, .bm-tip:hover .bm-tip__num,
  .bm-btn--primary:hover svg { transform: none; }
  .bm-compare__bar-wrap:hover .bm-compare__bar-fill::after { animation: none; }
  .bm-btn--primary::after { display: none; }
}

/* ── Print / PDF export ───────────────────────────────────────── */
@media print {
  @page { margin: 18mm 16mm; size: A4 portrait; }

  /* hide UI chrome — NOT .bm-viewfade (that's the content wrapper!) */
  .bm-nav, .bm-footer, .bm-actionbar, .bm-banner,
  .bm-panel-overlay, .bm-panel, .bm-toast,
  .bm-hero__index, .twk-panel { display: none !important; }

  /* ensure content wrapper is fully visible */
  .bm-viewfade { opacity: 1 !important; transform: none !important; transition: none !important; }

  /* reset backgrounds + colors */
  body, .bm-app, .bm-main, .bm-container { background: #fff !important; color: #000 !important; }
  .bm-app[data-theme="dark"] { background: #fff !important; color: #000 !important; }
  .bm-container { max-width: 100% !important; padding: 0 !important; }

  /* preserve bar + accent colors in print */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  /* cards */
  .bm-card { border: 1px solid #ddd !important; break-inside: avoid; box-shadow: none !important; }
  .bm-kpi-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; }

  /* hide sidebars, show full-width content */
  .bm-rail, .bm-kpiv__rail { display: none !important; }
  .bm-industry { display: block !important; }
  .bm-kpiv { display: block !important; }

  /* insights + tips */
  .bm-insights-split { grid-template-columns: 1fr 1fr !important; }
  .bm-tips { grid-template-columns: repeat(3, 1fr) !important; }

  /* page breaks */
  .bm-iv__cat, .bm-compare { break-inside: avoid; }

  /* small print credit */
  .bm-container > :last-child::after {
    content: "Source: Loyoly Loyalty Benchmark 2026 — loyoly.io";
    display: block; margin-top: 24px; font-size: 10px; color: #aaa;
    border-top: 1px solid #eee; padding-top: 10px;
  }
}

/* =========================================================
   MOBILE — RESPONSIVE FIXES
   ========================================================= */

/* Prevent any overflowing child from creating horizontal scroll */
html, body { overflow-x: hidden; }

/* ── Critical: grid/flex children must shrink to fit tracks ─ */
/* Without min-width:0, grid cells auto-expand to content width */
@media (max-width: 900px) {
  .bm-industry, .bm-kpiv { overflow: hidden; }
  .bm-industry > *, .bm-kpiv > * { min-width: 0; }
  .bm-iv__intro > * { min-width: 0; }
  .bm-kpi-hero > * { min-width: 0; }
}
@media (max-width: 640px) {
  .bm-kpi-grid > * { min-width: 0; }
  .bm-entries > * { min-width: 0; }
}

/* ── Nav: 2-row layout on mobile (≤ 640px) ───────────────── */
@media (max-width: 640px) {
  .bm-nav__inner {
    flex-wrap: wrap;
    padding: 8px 16px 0;
    gap: 0;
    row-gap: 0;
  }
  .bm-nav.is-stuck .bm-nav__inner { padding-top: 6px; }
  /* row 1: logo stretches, lang switcher sits right */
  .bm-nav__logo { flex: 1; min-width: 0; }
  .bm-nav__title { display: none; }
  .bm-nav__spacer, .bm-nav__updated { display: none; }
  /* lang switcher: small margin below before tabs row */
  .bm-langswitch { flex-shrink: 0; margin-bottom: 4px; }
  .bm-langswitch__cur { display: none; }
  .bm-langswitch__btn { padding: 4px 7px; }
  /* row 2: tabs span full width */
  .bm-nav__tabs {
    order: 10;
    width: 100%;
    margin-left: 0;
    margin-top: 0;
    padding: 5px 0 6px;
    border-top: 1px solid var(--border);
    gap: 2px;
  }
  .bm-nav__tab { flex: 1; justify-content: center; align-items: center; padding: 6px 4px; }
  .bm-nav__tab-sub { display: none; }
}
.bm-app[data-theme="dark"] .bm-nav__tabs { border-top-color: rgba(255,255,255,0.08); }

/* ── Containers (≤ 640px) ─────────────────────────────────── */
@media (max-width: 640px) {
  .bm-container { padding-left: 16px; padding-right: 16px; }
  .bm-footer__inner { padding-left: 16px; padding-right: 16px; }
}

/* ── Actionbar: stack buttons below title on mobile ─────── */
@media (max-width: 640px) {
  .bm-actionbar { flex-direction: column; align-items: flex-start; gap: 12px; padding-bottom: 4px; }
}

/* ── Hero (≤ 720px) ───────────────────────────────────────── */
@media (max-width: 720px) {
  .bm-hero { grid-template-columns: 1fr; gap: 24px; padding: 36px 0 24px; }
  .bm-hero__kicker { white-space: normal; }
}

/* ── Entry CTAs (≤ 560px) ─────────────────────────────────── */
@media (max-width: 560px) {
  .bm-entries { grid-template-columns: 1fr; }
}

/* ── Banner (≤ 640px) ─────────────────────────────────────── */
@media (max-width: 640px) {
  .bm-banner { grid-template-columns: 1fr; padding: 28px 20px; }
  .bm-banner__cta { justify-self: start; }
  .bm-banner h2 { font-size: 24px; }
}

/* ── Side rails: remove sticky on collapsed layout ──────── */
@media (max-width: 900px) {
  .bm-rail { position: static; top: auto; align-self: auto; }
}

/* ── Side rails: 2-column grid on phones ─────────────────── */
@media (max-width: 640px) {
  .bm-industry, .bm-kpiv { padding-top: 16px; }
  .bm-rail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: visible;
    padding: 6px;
    gap: 4px;
    margin-bottom: 8px;
    border-radius: 10px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .bm-rail__btn {
    width: 100%;
    padding: 10px 12px;
    justify-content: flex-start;
    white-space: normal;
  }
  .bm-rail__group { display: none; }
}

/* ── KPI hero panel (≤ 640px) ────────────────────────────── */
@media (max-width: 640px) {
  .bm-kpi-hero { grid-template-columns: 1fr; padding: 20px; }
  .bm-kpi-hero__hero-num {
    border-left: none; padding-left: 0;
    border-top: 1px solid var(--border); padding-top: 20px;
    align-items: flex-start;
  }
}

/* ── Compare chart (≤ 560px) ─────────────────────────────── */
@media (max-width: 560px) {
  .bm-compare { padding: 16px; }
  .bm-compare__row { grid-template-columns: 90px 1fr 68px; gap: 8px; }
  .bm-compare__name { font-size: 12px; }
  .bm-compare__value-num { font-size: 12px; }
  .bm-compare__axis { padding-left: 98px; padding-right: 76px; margin-left: 8px; margin-right: 8px; }
}

/* ── Footer (≤ 560px) ─────────────────────────────────────── */
@media (max-width: 560px) {
  .bm-footer__inner { flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 20px; padding-bottom: 20px; }
}