/* ============================================================
   Breezeway Home — additions on top of marketing.css.
   Bracket pill, sticky scroll, pain, methodology, filters,
   stat strip, Senja slot, price tiles, guarantee ribbon,
   FAQ accordion, Bad Day Detector widget.
   ============================================================ */

/* ---------- Bracket transition ---------- */
.bw-bracket-pane {
  transition: opacity 0.22s var(--ease-out);
}
.bw-bracket-pane.swapping { opacity: 0; }

/* ---------- Floating bracket selector pill ---------- */
.bw-pill-wrap {
  position: fixed; left: 50%; bottom: 22px;
  transform: translateX(-50%);
  z-index: 60; pointer-events: none;
}
.bw-pill {
  pointer-events: auto;
  background: #0B1B3D;
  color: #fff;
  border-radius: 9999px;
  padding: 5px;
  display: inline-flex; gap: 4px;
  box-shadow:
    0 18px 36px -10px rgba(11,27,61,0.45),
    0 6px 12px -4px rgba(11,27,61,0.30),
    0 0 0 1px rgba(255,255,255,0.05) inset;
  position: relative;
  border: 1px solid rgba(255,255,255,0.06);
}
.bw-pill-eyebrow {
  position: absolute; left: 50%; bottom: calc(100% + 10px);
  transform: translateX(-50%);
  font: 700 10px/1 var(--font-sans);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.92); white-space: nowrap;
  padding: 6px 12px; border-radius: 9999px;
  background: rgba(11,27,61,0.78);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 8px 20px -8px rgba(11,27,61,0.45);
}
.bw-pill-seg {
  position: relative;
  padding: 12px 22px;
  border-radius: 9999px;
  font: 600 13px/1 var(--font-sans);
  letter-spacing: -0.005em;
  background: transparent; color: rgba(255,255,255,0.62);
  border: 0; cursor: pointer;
  transition: color 0.18s var(--ease-out);
  white-space: nowrap;
}
.bw-pill-seg:hover { color: rgba(255,255,255,0.9); }
.bw-pill-seg.on   { color: #0B1B3D; font-weight: 700; }
.bw-pill-thumb {
  position: absolute; top: 5px; bottom: 5px;
  background: #fff;
  border-radius: 9999px;
  transition: left 0.32s var(--ease-out), width 0.32s var(--ease-out);
  box-shadow: 0 4px 8px -4px rgba(0,0,0,0.4);
  z-index: 0;
}
.bw-pill-seg span { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; }
.bw-pill-seg .dot {
  width: 6px; height: 6px; border-radius: 999px; background: currentColor; opacity: 0.5;
}
.bw-pill-seg.on .dot { background: var(--good-500); opacity: 1; }

/* mobile: collapsed chip + drawer */
.bw-pill-chip {
  pointer-events: auto;
  display: none;
  background: #0B1B3D; color: #fff;
  padding: 12px 18px; border-radius: 9999px;
  font: 600 13px/1 var(--font-sans);
  align-items: center; gap: 10px;
  box-shadow: 0 14px 30px -10px rgba(11,27,61,0.4);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
}
.bw-pill-chip svg { width: 14px; height: 14px; }
.bw-pill-drawer {
  pointer-events: auto;
  display: none;
  position: fixed; left: 12px; right: 12px; bottom: 12px;
  background: #fff; border-radius: 18px;
  padding: 16px;
  box-shadow: 0 22px 60px -10px rgba(11,27,61,0.45);
  z-index: 61;
}
.bw-pill-drawer h4 {
  font: 700 11px/1 var(--font-sans); text-transform: uppercase; letter-spacing: 0.18em;
  color: #6B7280; margin: 0 0 14px;
}
.bw-pill-drawer button {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; padding: 14px 16px;
  background: #FBF9F4; border: 1px solid rgba(11,27,61,0.08);
  border-radius: 12px; margin-bottom: 8px;
  font: 600 14px/1 var(--font-sans); color: #0B1B3D;
  cursor: pointer; transition: all 0.16s var(--ease-out);
}
.bw-pill-drawer button:hover { background: #fff; border-color: rgba(11,27,61,0.18); }
.bw-pill-drawer button.on { background: #0B1B3D; color: #fff; border-color: #0B1B3D; }
.bw-pill-drawer button .meta { font: 500 12px/1 var(--font-sans); opacity: 0.7; }

@media (max-width: 760px) {
  .bw-pill { display: none; }
  .bw-pill-eyebrow { display: none; }
  .bw-pill-chip { display: inline-flex; }
}

/* ---------- Hero adjustments for bracket use ---------- */
/* Extend the hero gradient up past the floating navbar so the
   colored wash starts at the very top of the page, not below the
   nav pill. Negative margin pulls the section up; matching extra
   padding-top keeps the headline in the same visual position. */
.mk-hero {
  margin-top: -120px;
  padding-top: 176px !important;
}

/* Headline sizing tuned so the longest of three rotating variants
   (e.g. "Stop refreshing Meta Ads Manager at midnight hoping the
   numbers change.") still fits in ~3 lines above the fold at a
   ~1100px viewport. Smaller than the legacy 76px because we have
   to budget for the longest variant, not the shortest. */
.bw-hero-headline {
  font-size: inherit;
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: #0B1B3D;
  margin: 0;
}

/* ---------- Rotating headline slot ---------- */
.bw-hero-rotator {
  position: relative;
  /* Set font-size on the slot so all em-based dimensions resolve
     to the headline's actual size (not the inherited 16px base). */
  font: 900 clamp(38px, 4.2vw, 56px)/1.05 var(--font-sans);
  letter-spacing: -0.035em;
  color: #0B1B3D;
  /* Height is driven by JS to match the active variant's actual
     content height — see hero.jsx. min-height is a guardrail only:
     keeps the slot from collapsing to 0 on the first paint (before
     the layout-effect runs) so the page doesn't visibly jump. */
  min-height: 1.05em;
  transition: height 0.42s var(--ease-out);
}
.bw-hero-rotator .bw-hero-headline {
  /* Inactive variants overlay the active one (absolute, faded out).
     The active variant flips to position: relative below so it sits
     in normal flow and drives the parent slot's natural height. */
  position: absolute; inset: 0;
  font: inherit;
  letter-spacing: inherit;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.5s var(--ease-out),
    transform 0.5s var(--ease-out),
    filter 0.5s var(--ease-out);
  filter: blur(2px);
  pointer-events: none;
}
.bw-hero-rotator .bw-hero-headline.is-active {
  position: relative;
  inset: auto;
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  pointer-events: auto;
}
/* Outgoing slides exit upward & fade — gives the swap a clear direction */
.bw-hero-rotator .bw-hero-headline.is-prev:not(.is-active) {
  transform: translateY(-14px);
}

/* Progress dots — fill bars that drain over the rotate interval.
   Rendered as <button>s: click to jump to a slide (pins it). */
.bw-hero-rotator-dots {
  position: absolute;
  bottom: -22px; left: 0;
  display: flex; gap: 8px;
  font-size: 16px; /* anchor px-sized children regardless of slot font-size */
}
.bw-hero-rotator-dots span,
.bw-hero-rotator-dots button {
  width: 34px; height: 3px; border-radius: 2px;
  background: rgba(11,27,61,0.14);
  position: relative; overflow: hidden;
  border: 0; padding: 0; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  display: block;
}
.bw-hero-rotator-dots button:hover { background: rgba(11,27,61,0.28); }
.bw-hero-rotator-dots button:focus-visible {
  outline: 2px solid #3490F0; outline-offset: 3px;
}
.bw-hero-rotator-dots span.on::after,
.bw-hero-rotator-dots button.on::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, #3490F0, #5660F0);
  transform-origin: left center;
  animation: bwRotatorFill linear forwards;
}
/* When pinned (no auto-rotate), the active dot reads as solid fill */
.bw-hero-rotator-dots button.on { background: rgba(11,27,61,0.14); }
@keyframes bwRotatorFill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Subhead slot — height driven by JS to match the active subhead's
   real content height; transition keeps the swap fluid. */
.bw-hero-subhead-slot {
  position: relative;
  /* Sits just below the rotator's progress dots (which extend ~10px
     past the rotator's box). Tight, consistent spacing regardless
     of how tall the active headline ends up. */
  margin-top: 32px;
  max-width: 50ch;
  transition: height 0.42s var(--ease-out);
}
.bw-hero-subhead {
  position: absolute; inset: 0;
  margin: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  pointer-events: none;
}
.bw-hero-subhead.is-active {
  position: relative;
  inset: auto;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.bw-hero-headline .punch {
  position: relative; display: inline;
  /* keep highlight backgrounds intact across line breaks */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.bw-hero-headline.danger .punch {
  background: linear-gradient(90deg, #DC2626, #B91C1C);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Yellow marker underline that survives line breaks — inline span with a
   background-image gradient at the bottom 28% acts as a highlighter
   stripe under every fragment. */
.bw-hero-headline.calm .punch {
  background-image: linear-gradient(180deg, transparent 0, transparent 70%, rgba(250,204,21,0.85) 70%, rgba(250,204,21,0.85) 92%, transparent 92%);
  padding: 0 2px;
}
.bw-hero-headline.calm .punch::after { content: none; }
.bw-hero-headline.audit .punch {
  text-decoration-line: underline;
  text-decoration-color: #DC2626;
  text-decoration-thickness: 5px;
  text-underline-offset: 6px;
}

/* ---------- Pain block ---------- */
.bw-pain { background: #F4F1EA; position: relative; }
.bw-pain::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(11,27,61,0.06) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  pointer-events: none;
}
.bw-pain-headline {
  font: 800 44px/1.08 var(--font-sans);
  letter-spacing: -0.025em; color: #0B1B3D;
  max-width: 22ch; margin: 0 0 56px;
  text-wrap: balance;
}
.bw-pain-list {
  display: grid; grid-template-columns: 1fr; gap: 22px;
  counter-reset: pain;
}
.bw-pain-item {
  background: #fff; border: 1px solid rgba(11,27,61,0.08);
  border-radius: 16px; padding: 26px 28px 26px 84px;
  position: relative;
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}
.bw-pain-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -18px rgba(11,27,61,0.18);
}
.bw-pain-item::before {
  counter-increment: pain;
  content: counter(pain, decimal-leading-zero);
  position: absolute; left: 24px; top: 24px;
  font: 900 26px/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: #DC2626; letter-spacing: -0.02em;
  background: linear-gradient(180deg, #DC2626 0%, #991B1B 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bw-pain-item .punch {
  font: 700 18px/1.35 var(--font-sans); color: #0B1B3D;
  letter-spacing: -0.012em; margin: 0 0 6px;
}
.bw-pain-item .body {
  font: 500 15px/1.55 var(--font-sans); color: #4B5563;
  margin: 0;
}
.bw-pain-closer {
  margin: 56px auto 0; max-width: 30ch; text-align: center;
  font: 800 28px/1.25 var(--font-sans); letter-spacing: -0.02em; color: #0B1B3D;
}
.bw-pain-closer b {
  background: linear-gradient(120deg, #3490F0, #5660F0);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

/* ---------- Methodology block ---------- */
.bw-method-intro {
  max-width: 760px;
  margin: 0 0 56px;
}
.bw-method-body p {
  font: 500 17px/1.6 var(--font-sans); color: #4B5563;
  margin: 0 0 16px; max-width: 60ch;
}
.bw-method-body p b { color: #0B1B3D; font-weight: 700; }
.bw-method-kicker {
  margin-top: 12px;
  display: inline-flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
  padding: 14px 20px;
  background: #0B1B3D; color: #fff;
  border-radius: 12px;
  font: 700 15px/1.4 var(--font-sans); letter-spacing: -0.01em;
  max-width: 100%;
}
.bw-method-kicker .price {
  font-size: 22px; font-weight: 900;
  background: linear-gradient(120deg, #7CC4FA, #3490F0);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---- Bento of features ---- */
.bw-bento-header {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 24px;
}
.bw-bento-header .eyebrow {
  font: 700 11px/1 var(--font-sans); letter-spacing: 0.18em;
  text-transform: uppercase; color: #6B7280;
}
.bw-bento-header h3 {
  font: 800 22px/1.25 var(--font-sans); letter-spacing: -0.015em;
  color: #0B1B3D; margin: 0;
}
.bw-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 320px 320px;
  gap: 16px;
}
.bw-bento-cell { min-width: 0; }
.bw-bento-card {
  --accent: #3490F0;
  background: #fff; border: 1px solid rgba(11,27,61,0.08);
  border-radius: 18px;
  height: 100%;
  padding: 14px;
  display: flex; flex-direction: column;
  gap: 14px;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
  position: relative; overflow: hidden;
}
.bw-bento-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--accent); opacity: 0;
  transition: opacity 0.2s var(--ease-out);
}
.bw-bento-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklch, var(--accent) 40%, rgba(11,27,61,0.08));
  box-shadow: 0 22px 40px -24px rgba(11,27,61,0.22);
}
.bw-bento-card:hover::before { opacity: 0.55; }

.bw-bento-shot {
  flex: 1;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  /* Subtle tinted plate so the image-slot's empty state reads as
     intentional and the card has visual weight even before a screenshot
     is dropped in. */
  background:
    radial-gradient(60% 80% at 30% 20%, color-mix(in oklch, var(--accent) 18%, transparent) 0%, transparent 70%),
    color-mix(in oklch, var(--accent) 6%, #F4F1EA);
  min-height: 0;
}
.bw-bento-shot image-slot {
  --is-bg: transparent; /* let our plate show through the slot's empty state */
}
/* The image-slot's own empty state can be a bit loud; pin a quieter
   "Drop screenshot" caption that the slot's text sits on top of. */
.bw-bento-card .bw-bento-shot::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 60%, rgba(11,27,61,0.05) 100%);
  border-radius: 12px;
}

.bw-bento-meta {
  display: grid; grid-template-columns: 36px 1fr; gap: 12px;
  align-items: start;
  padding: 4px 8px 8px;
}
.bw-bento-mark {
  width: 36px; height: 36px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  color: var(--accent);
  flex-shrink: 0;
}
.bw-bento-mark .bw-behavior-mark {
  width: auto; height: auto; background: none; color: inherit;
  display: inline-flex; align-items: center; justify-content: center;
}
.bw-bento-mark svg { width: 18px; height: 18px; }
.bw-bento-text { min-width: 0; }
.bw-bento-text h4 {
  margin: 0 0 4px;
  font: 800 15px/1.2 var(--font-sans);
  letter-spacing: -0.01em; color: #0B1B3D;
}
.bw-bento-text p {
  margin: 0;
  font: 500 13px/1.5 var(--font-sans); color: #4B5563;
  text-wrap: pretty;
}

/* Hero card — taller image, slightly bigger title */
.bw-bento-card.hero {
  padding: 18px;
  gap: 18px;
}
.bw-bento-card.hero .bw-bento-shot { border-radius: 14px; }
.bw-bento-card.hero .bw-bento-text h4 { font-size: 22px; letter-spacing: -0.02em; }
.bw-bento-card.hero .bw-bento-text p { font-size: 14px; }
.bw-bento-card.hero .bw-bento-mark { width: 44px; height: 44px; border-radius: 12px; }
.bw-bento-card.hero .bw-bento-mark svg { width: 22px; height: 22px; }
.bw-bento-card.hero .bw-bento-meta { grid-template-columns: 44px 1fr; padding: 4px 10px 10px; }

/* Counts: tweak row heights for visual rhythm */
.bw-bento-3 { grid-template-rows: 280px 280px; }
.bw-bento-4 { grid-template-rows: 300px 300px; }
.bw-bento-5 { grid-template-rows: 300px 300px; }

@media (max-width: 1100px) {
  .bw-bento { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; }
  .bw-bento-cell { grid-area: auto !important; min-height: 320px; }
  .bw-bento-cell:first-child { grid-column: 1 / -1; min-height: 360px; }
}
@media (max-width: 720px) {
  .bw-bento { grid-template-columns: 1fr; }
  .bw-bento-cell, .bw-bento-cell:first-child { grid-column: 1 / -1; min-height: 320px; }
}

/* ---------- Pinned-scroll Walkthrough ---------- */
.bw-walk {
  background: #FBF9F4;
}
/* Tall outer container — drives total scroll distance for the locked section. */
.bw-walk-track {
  position: relative;
  height: calc(var(--walk-step-h, 78vh) * var(--step-count, 4) + 100vh);
}
/* Mobile/tablet segmented progress — hidden on desktop (the per-step
   left rail serves that role there). Shown via mobile.css re-pin block. */
.bw-walk-progress { display: none; }

/* Pinned shell — the actual visible layout. Locks while the track is in view. */
.bw-walk-pin {
  position: sticky;
  top: 80px;
  height: calc(100vh - 120px);
  max-height: 760px;
  display: grid; grid-template-columns: 380px 1fr;
  /* Force the single grid row to the pin's own height — otherwise a tall
     steps column would stretch the row and push the stage past the viewport. */
  grid-template-rows: 100%;
  gap: 56px;
  align-items: stretch;
}
.bw-walk-steps {
  display: flex; flex-direction: column; gap: 0;
  align-self: center;
}
.bw-walk-step {
  padding: 24px 0 24px 22px;
  border-top: 1px solid rgba(11,27,61,0.08);
  cursor: pointer;
  position: relative;
}
.bw-walk-step:first-child { border-top: 0; }
/* Rail track — faint baseline running down the left edge of each step. */
.bw-walk-step::before {
  content: ""; position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px; border-radius: 4px;
  background: rgba(11,27,61,0.08);
}
/* Rail fill — height driven by --step-progress (0 → 1). */
.bw-walk-step::after {
  content: ""; position: absolute;
  left: 0; top: 14px; width: 3px;
  height: calc((100% - 28px) * var(--step-progress, 0));
  background: linear-gradient(180deg, #3490F0, #5660F0);
  border-radius: 4px;
  transition: height 0.08s linear;
}
.bw-walk-step .step-num {
  font: 700 13px/1.35 var(--font-sans); color: #4B5563;
  letter-spacing: -0.005em;
  text-wrap: balance;
  transition: color 0.2s var(--ease-out);
}
.bw-walk-step .step-sub { display: none; }
.bw-walk-step .step-title {
  font: 800 24px/1.2 var(--font-sans); color: #0B1B3D;
  letter-spacing: -0.02em; margin: 10px 0 8px;
  transition: color 0.2s var(--ease-out);
  text-wrap: balance;
}
.bw-walk-step .step-body {
  font: 500 14px/1.55 var(--font-sans); color: #4B5563;
  margin: 0; max-width: 38ch;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.3s var(--ease-out),
    margin-top 0.25s var(--ease-out),
    opacity 0.2s var(--ease-out);
}
.bw-walk-step.active .step-body {
  max-height: 220px;
  margin-top: 10px;
  opacity: 1;
}
.bw-walk-step.active .step-num { color: #0B1B3D; }
.bw-walk-step.active .step-title { color: #0B1B3D; }
.bw-walk-step:not(.active):not(.done) .step-title { color: rgba(11,27,61,0.55); }
.bw-walk-step.done .step-num { color: rgba(52,144,240,0.7); }

.bw-walk-stage {
  position: relative;
  height: 100%;
  border-radius: 22px;
  background: #111827;
  border: 1px solid #1F2937;
  padding: 16px;
  box-shadow:
    0 40px 80px -30px rgba(11,27,61,0.4),
    0 18px 40px -20px rgba(11,27,61,0.22);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.bw-walk-stage .chrome {
  display: flex; gap: 6px; padding: 0 4px 12px;
}
.bw-walk-stage .chrome span {
  width: 11px; height: 11px; border-radius: 999px; background: #374151;
}
.bw-walk-stage .chrome span:first-child { background: #EF4444; }
.bw-walk-stage .chrome span:nth-child(2) { background: #FACC15; }
.bw-walk-stage .chrome span:nth-child(3) { background: #22C55E; }
.bw-walk-stage .frame {
  flex: 1;
  background: #1F2937; border-radius: 10px; overflow: hidden;
  position: relative;
}
.bw-walk-mock {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 0.4s var(--ease-out);
}
.bw-walk-mock.active { opacity: 1; }

/* In-step alt callout — full-screen overlay that takes over the demo
   frame in the second half of each step. Slides in over the main mock
   with a slight scale + fade. */
.bw-walk-mock-alt {
  position: absolute;
  inset: 0;
  background: #1F2937;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.98);
  transition:
    opacity 0.32s var(--ease-out),
    transform 0.4s var(--ease-out);
  pointer-events: none;
  z-index: 2;
}
.bw-walk-mock-alt.show {
  opacity: 1;
  transform: scale(1);
}

/* ---------- For You / Not For You filter pair ---------- */
.bw-filter-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.bw-filter-card {
  background: #fff; border-radius: 18px;
  padding: 32px 32px 34px;
  border: 1px solid rgba(11,27,61,0.08);
  position: relative;
}
.bw-filter-card.no {
  background: #FBF9F4;
  border-color: rgba(180,83,9,0.18);
}
.bw-filter-card h3 {
  font: 800 24px/1.2 var(--font-sans); letter-spacing: -0.02em;
  color: #0B1B3D; margin: 0 0 22px;
}
.bw-filter-card .icn {
  width: 40px; height: 40px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.bw-filter-card.yes .icn { background: rgba(34,197,94,0.16); color: var(--good-600); }
.bw-filter-card.no .icn  { background: rgba(180,83,9,0.16); color: #B45309; }
.bw-filter-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.bw-filter-card li {
  font: 500 15px/1.5 var(--font-sans); color: #1F2937;
  display: flex; gap: 12px; align-items: flex-start;
}
.bw-filter-card.yes li::before {
  content: ""; flex-shrink: 0;
  width: 18px; height: 18px; border-radius: 50%; margin-top: 2px;
  background: var(--good-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='3.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/12px no-repeat;
}
.bw-filter-card.no li::before {
  content: ""; flex-shrink: 0;
  width: 18px; height: 18px; border-radius: 50%; margin-top: 2px;
  background: #B45309 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='3.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 6l12 12M6 18L18 6'/%3E%3C/svg%3E") center/12px no-repeat;
}
.bw-filter-card.no li { color: #4B5563; }

/* ---------- Differentiator (bracket-aware) ---------- */
.bw-diff {
  background:
    radial-gradient(60% 60% at 100% 0%, rgba(124,196,250,0.10) 0%, transparent 60%),
    radial-gradient(50% 60% at 0% 100%, rgba(86,96,240,0.08) 0%, transparent 60%),
    #FBF9F4;
}
.bw-diff-headline {
  font: 900 56px/1.0 var(--font-sans);
  letter-spacing: -0.03em; color: #0B1B3D;
  max-width: 22ch; margin: 0 0 16px;
}
.bw-diff-headline .punch {
  background: linear-gradient(120deg, #3490F0, #5660F0);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bw-diff-body { display: flex; flex-direction: column; gap: 14px; max-width: 56ch; margin: 0 0 48px; }
.bw-diff-body p { font: 500 17px/1.6 var(--font-sans); color: #4B5563; margin: 0; }
.bw-diff-body p b { color: #0B1B3D; font-weight: 700; }

.bw-diff-table {
  background: #fff; border: 1px solid rgba(11,27,61,0.1); border-radius: 20px;
  overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr;
}
.bw-diff-table .col {
  padding: 32px 32px 36px;
}
.bw-diff-table .col.left {
  background: #FBF9F4;
  border-right: 1px dashed rgba(11,27,61,0.18);
}
.bw-diff-table .head {
  font: 800 11px/1 var(--font-sans); letter-spacing: 0.16em;
  text-transform: uppercase; margin: 0 0 22px;
}
.bw-diff-table .col.left .head { color: #B45309; }
.bw-diff-table .col.right .head { color: #15803D; }
.bw-diff-table .row {
  display: flex; gap: 10px; align-items: flex-start;
  font: 500 15px/1.45 var(--font-sans); color: #1F2937;
  padding: 12px 0;
}
.bw-diff-table .row + .row { border-top: 1px dashed rgba(11,27,61,0.10); }
.bw-diff-table .col.left .row::before {
  content: "✗"; color: #B45309; font-weight: 800; flex-shrink: 0;
}
.bw-diff-table .col.right .row::before {
  content: "✓"; color: #15803D; font-weight: 800; flex-shrink: 0;
}

/* C bracket — three-column comparison instead of two */
.bw-diff-c {
  background: #fff; border: 1px solid rgba(11,27,61,0.1); border-radius: 20px;
  overflow: hidden;
  display: grid; grid-template-columns: 160px 1fr 1fr 1fr;
}
.bw-diff-c .cell {
  padding: 22px 24px;
  font: 500 14px/1.45 var(--font-sans); color: #1F2937;
  border-top: 1px solid rgba(11,27,61,0.08);
  border-left: 1px dashed rgba(11,27,61,0.08);
  display: flex; align-items: center;
}
.bw-diff-c .cell:nth-child(-n+4) { border-top: 0; }
.bw-diff-c .cell:nth-child(4n+1) { border-left: 0; background: #FBF9F4; }
.bw-diff-c .cell.label {
  font: 700 11px/1.4 var(--font-sans); letter-spacing: 0.14em;
  text-transform: uppercase; color: #6B7280; background: #FBF9F4;
}
.bw-diff-c .cell.name {
  font: 800 16px/1 var(--font-sans); color: #0B1B3D; letter-spacing: -0.01em;
}
.bw-diff-c .col-bw { background: rgba(124,196,250,0.10); }
.bw-diff-c .col-bw.name { background: #0B1B3D; color: #fff; }

/* ---------- Stat strip (universal) ---------- */
/* ---------- Pricing Selector ---------- */
.bw-pricing-selector {
  padding: 96px 0;
  background: #FBF9F4;
  border-top: 1px dashed rgba(11,27,61,0.15);
  border-bottom: 1px dashed rgba(11,27,61,0.15);
}
.bw-pricing-header { text-align: center; margin-bottom: 48px; }
.bw-period-toggle {
  display: flex;
  background: rgba(11,27,61,0.06);
  border-radius: 12px;
  padding: 4px;
  gap: 2px;
  width: fit-content;
  margin: 0 auto 48px;
}
.bw-period-btn {
  padding: 10px 22px;
  border: none;
  background: transparent;
  border-radius: 9px;
  font: 600 14px/1 var(--font-sans);
  color: #6B7280;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}
.bw-period-btn.active {
  background: #fff;
  color: #0B1B3D;
  box-shadow: 0 2px 8px -2px rgba(11,27,61,0.15);
}
.bw-price-billed {
  font: 500 12px/1 var(--font-sans);
  color: #94A3B8;
  margin: 6px 0 0;
}
.bw-price-footnote {
  font: 500 11px/1.4 var(--font-sans);
  color: #94A3B8;
  margin: 12px 0 0;
  text-align: center;
}
.bw-enterprise-card-wrap { max-width: 440px; margin: 0 auto; }
@media (max-width: 768px) {
  .bw-pricing-selector { padding: 64px 0; }
  .bw-period-toggle { flex-direction: column; width: 100%; }
  .bw-period-btn { text-align: center; }
  .mk-price-grid { grid-template-columns: 1fr; }
}

/* ---------- Stat strip (kept for reference, replaced by PricingSelector) ---------- */
.bw-stat-strip {
  background: #FBF9F4;
  border-top: 1px dashed rgba(11,27,61,0.15);
  border-bottom: 1px dashed rgba(11,27,61,0.15);
  padding: 64px 0;
}
.bw-stat-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
}
.bw-stat {
  text-align: left;
}
.bw-stat .n {
  font: 900 64px/1 var(--font-sans);
  letter-spacing: -0.04em; color: #0B1B3D;
  font-variant-numeric: tabular-nums;
}
.bw-stat .l {
  font: 500 14px/1.4 var(--font-sans); color: #4B5563;
  margin-top: 12px; max-width: 18ch;
}

/* ---------- Testimonials (Senja slot) ---------- */
.bw-testimonials {
  background: #fff;
}
.bw-testimonials h2 {
  font: 800 42px/1.1 var(--font-sans); letter-spacing: -0.025em;
  color: #0B1B3D; max-width: 22ch; margin: 0 0 40px;
  text-wrap: balance;
}
.bw-senja-slot {
  border: 1.5px dashed rgba(11,27,61,0.18);
  border-radius: 18px;
  padding: 56px 48px;
  background: #FBF9F4;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.bw-senja-slot .badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(124,196,250,0.16); color: #1E40AF;
  padding: 6px 14px; border-radius: 999px;
  font: 700 11px/1 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase;
}
.bw-senja-slot h3 {
  font: 700 24px/1.2 var(--font-sans); letter-spacing: -0.02em;
  color: #0B1B3D; margin: 0;
}
.bw-senja-slot p { font: 500 15px/1.55 var(--font-sans); color: #4B5563; margin: 0; max-width: 56ch; }
.bw-senja-grid {
  margin-top: 28px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  width: 100%;
}
.bw-senja-card {
  background: #fff; border-radius: 14px; padding: 24px; text-align: left;
  border: 1px solid rgba(11,27,61,0.08);
}
.bw-senja-card .stars { color: #FACC15; font-size: 16px; letter-spacing: 2px; margin-bottom: 12px; }
.bw-senja-card p {
  font: 500 14px/1.55 var(--font-sans); color: #1F2937; margin: 0 0 16px;
  text-align: left;
}
.bw-senja-card .who {
  display: flex; align-items: center; gap: 10px;
  font: 600 12px/1.3 var(--font-sans); color: #0B1B3D;
}
.bw-senja-card .ava {
  width: 32px; height: 32px; border-radius: 999px; background: #93C5FD;
  display: inline-flex; align-items: center; justify-content: center;
  color: #0B1B3D; font: 800 12px/1 var(--font-sans); flex-shrink: 0;
}
.bw-senja-card .meta {
  font: 500 11px/1.2 var(--font-sans); color: #4B5563;
}
.bw-senja-card .tag {
  font: 700 10px/1 var(--font-sans); letter-spacing: 0.12em;
  text-transform: uppercase; color: #15803D;
  background: rgba(34,197,94,0.16); padding: 4px 8px; border-radius: 4px;
  margin-left: auto; flex-shrink: 0;
}

/* ---------- Price Anchor + Guarantee ---------- */
.bw-price {
  background: #FBF9F4;
}
.bw-price-grid {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: stretch;
}
.bw-price-anchor {
  background: #fff; border: 1px solid rgba(11,27,61,0.1);
  border-radius: 20px; padding: 40px;
  display: flex; flex-direction: column;
}
.bw-price-anchor .eyebrow {
  font: 700 11px/1 var(--font-sans); letter-spacing: 0.18em;
  text-transform: uppercase; color: #6B7280; margin: 0 0 18px;
}
.bw-price-anchor h2 {
  font: 800 32px/1.15 var(--font-sans); letter-spacing: -0.025em;
  color: #0B1B3D; margin: 0 0 22px; text-wrap: balance;
}
.bw-price-anchor .body { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.bw-price-anchor .body p { font: 500 15px/1.6 var(--font-sans); color: #4B5563; margin: 0; }
.bw-price-tiles {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-top: auto;
}
.bw-price-tile {
  background: #FBF9F4; border: 1px solid rgba(11,27,61,0.08);
  border-radius: 14px; padding: 20px 18px;
  transition: all 0.2s var(--ease-out);
}
.bw-price-tile .l {
  font: 600 11px/1 var(--font-sans); letter-spacing: 0.12em;
  text-transform: uppercase; color: #6B7280; margin: 0 0 12px;
}
.bw-price-tile .v {
  font: 900 32px/1 var(--font-sans); letter-spacing: -0.03em;
  color: #0B1B3D; font-variant-numeric: tabular-nums;
}
.bw-price-tile .v small { font: 600 14px/1 var(--font-sans); color: #6B7280; margin-left: 2px; font-variant-numeric: tabular-nums; }
.bw-price-tile .s {
  font: 500 12px/1 var(--font-sans); color: #4B5563; margin-top: 8px;
}
.bw-price-tile.hl {
  background: #0B1B3D; border-color: #0B1B3D; color: #fff;
  transform: translateY(-4px);
  box-shadow: 0 20px 36px -16px rgba(11,27,61,0.4);
}
.bw-price-tile.hl .l { color: #93C5FD; }
.bw-price-tile.hl .v {
  background: linear-gradient(120deg, #7CC4FA, #fff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bw-price-tile.hl .v small { color: #93C5FD; }
.bw-price-tile.hl .s { color: #CBD5E1; }

/* Guarantee ribbon */
.bw-guarantee {
  background: linear-gradient(160deg, #0B1B3D 0%, #061030 100%);
  color: #fff; border-radius: 20px; padding: 40px;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}
.bw-guarantee::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(50% 60% at 80% 20%, rgba(124,196,250,0.18) 0%, transparent 60%),
    radial-gradient(50% 60% at 20% 80%, rgba(86,96,240,0.18) 0%, transparent 60%);
  pointer-events: none;
}
.bw-guarantee > * { position: relative; }
.bw-guarantee .eyebrow {
  font: 800 11px/1 var(--font-sans); letter-spacing: 0.24em;
  text-transform: uppercase; color: #FDE047; margin: 0 0 18px;
  display: inline-flex; align-items: center; gap: 10px;
}
.bw-guarantee .eyebrow .badge {
  background: rgba(253,224,71,0.15);
  padding: 6px 10px; border-radius: 6px;
  letter-spacing: 0.18em;
}
.bw-guarantee h3 {
  font: 800 28px/1.15 var(--font-sans); letter-spacing: -0.025em;
  color: #fff; margin: 0 0 18px;
}
.bw-guarantee .body { display: flex; flex-direction: column; gap: 12px; }
.bw-guarantee .body p {
  font: 500 15px/1.6 var(--font-sans); color: #CBD5E1; margin: 0;
}
.bw-guarantee .body p b { color: #fff; font-weight: 700; }
.bw-guarantee .cta {
  margin-top: 26px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; background: #fff; color: #0B1B3D;
  border-radius: 9999px; text-decoration: none;
  font: 700 14px/1 var(--font-sans);
  white-space: nowrap;
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
  align-self: flex-start;
}
.bw-guarantee .cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -8px rgba(124,196,250,0.45);
}

/* ---------- FAQ accordion ---------- */
.bw-faq {
  background: #fff;
}
.bw-faq h2 {
  font: 800 40px/1.1 var(--font-sans); letter-spacing: -0.025em;
  color: #0B1B3D; margin: 0 0 36px;
}
.bw-faq-list { display: flex; flex-direction: column; gap: 8px; max-width: 820px; margin: 0 auto; }
.bw-faq-item {
  border-bottom: 1px solid rgba(11,27,61,0.1);
}
.bw-faq-item summary {
  list-style: none; cursor: pointer;
  padding: 22px 0;
  display: flex; justify-content: space-between; align-items: center;
  font: 700 18px/1.3 var(--font-sans); color: #0B1B3D;
  letter-spacing: -0.012em;
  user-select: none;
  transition: color 0.18s var(--ease-out);
}
.bw-faq-item summary:hover { color: #3490F0; }
.bw-faq-item summary::-webkit-details-marker { display: none; }
.bw-faq-item summary::after {
  content: ""; width: 14px; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1B3D' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  flex-shrink: 0; margin-left: 18px;
  transition: transform 0.25s var(--ease-out);
}
.bw-faq-item[open] summary::after { transform: rotate(180deg); }
.bw-faq-item .answer {
  padding: 0 36px 22px 0;
  font: 500 15px/1.6 var(--font-sans); color: #4B5563;
  max-width: 64ch;
}

/* ---------- Final CTA (override the base mk-final headline copy) ---------- */
.bw-final-cta {
  text-align: center; padding: 120px 24px;
  background:
    radial-gradient(60% 80% at 50% 50%, rgba(124,196,250,0.14) 0%, transparent 70%),
    #FBF9F4;
  border-top: 1px dashed rgba(11,27,61,0.15);
  border-bottom: 1px dashed rgba(11,27,61,0.15);
  position: relative; overflow: hidden;
}
.bw-final-cta h2 {
  font: 900 80px/0.95 var(--font-sans); letter-spacing: -0.045em;
  color: #0B1B3D; margin: 0 auto 18px; max-width: 16ch;
  text-wrap: balance;
}
.bw-final-cta .sub {
  font: 500 19px/1.5 var(--font-sans); color: #4B5563; max-width: 50ch;
  margin: 0 auto 36px;
}
.bw-final-cta .ctabtn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 22px 38px; border-radius: 9999px;
  background: #0B1B3D; color: #fff;
  font: 700 17px/1 var(--font-sans); text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 14px 32px -10px rgba(11,27,61,0.45);
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}
.bw-final-cta .ctabtn:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 40px -10px rgba(11,27,61,0.6);
}
.bw-final-cta .ctasub {
  margin-top: 18px; font: 500 13px/1.4 var(--font-sans); color: #4B5563;
}

/* ---------- Bad Day Detector free widget ---------- */
.bw-bdd {
  background: #0B1B3D; color: #fff;
  border-radius: 22px; padding: 40px 40px 36px;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px;
  align-items: center;
  position: relative; overflow: hidden;
}
.bw-bdd::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(50% 60% at 0% 100%, rgba(124,196,250,0.18) 0%, transparent 60%),
    radial-gradient(40% 50% at 100% 0%, rgba(252,211,77,0.10) 0%, transparent 60%);
  pointer-events: none;
}
.bw-bdd > * { position: relative; }
.bw-bdd .eyebrow {
  font: 800 11px/1 var(--font-sans); letter-spacing: 0.22em;
  text-transform: uppercase; color: #93C5FD; margin: 0 0 18px;
  display: inline-flex; align-items: center; gap: 10px;
}
.bw-bdd .eyebrow .badge {
  background: rgba(124,196,250,0.18); color: #BFDBFE;
  padding: 5px 10px; border-radius: 6px;
}
.bw-bdd h3 {
  font: 800 30px/1.15 var(--font-sans); letter-spacing: -0.025em;
  color: #fff; margin: 0 0 14px; max-width: 22ch;
  text-wrap: balance;
}
.bw-bdd p {
  font: 500 15px/1.6 var(--font-sans); color: #CBD5E1; margin: 0 0 24px;
  max-width: 48ch;
}
/* (Removed: legacy .bw-bdd-form / .bw-bdd-report / .bw-bdd-row styles —
   the old email-report widget. The live BadDayWidget uses the scatter +
   weather cards (.bw-bdd-visual / .bw-bdd-cards) below.) */

/* ---------- Hero — bracket-aware tweaks ---------- */
.bw-hero-cta {
  display: flex; gap: 12px; margin-top: 36px; align-items: center;
}
.bw-hero-micro {
  margin-top: 14px;
  font: 500 13px/1.4 var(--font-sans); color: #4B5563;
}
.bw-hero-micro b { color: #0B1B3D; font-weight: 700; }

/* ---------- Section spacing tighter for bracket panes ---------- */
.bw-section { padding: 96px 0; position: relative; }
.bw-section.sm { padding: 64px 0; }
.bw-section h2.eyebrow-title {
  font: 800 11px/1 var(--font-sans); letter-spacing: 0.18em;
  text-transform: uppercase; color: #6B7280; margin: 0 0 18px;
}

/* ---------- Mobile responsive ---------- */
@media (max-width: 1100px) {
  .bw-walk-pin { grid-template-columns: 320px 1fr; gap: 36px; }
  .bw-diff-c { grid-template-columns: 140px 1fr 1fr 1fr; }
  /* Stack hero earlier so the 80px headline doesn't get squeezed against the product shot */
  .mk-hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .bw-hero-rotator { font-size: 52px; }
  .mk-h1 { font-size: 64px; }
}
@media (max-width: 880px) {
  .bw-hero-rotator { font-size: 42px; }
  .bw-pain-headline { font-size: 32px; }
  .bw-diff-headline { font-size: 40px; }
  .bw-final-cta h2 { font-size: 54px; }
  .mk-h2 { font-size: 40px; }
  .mk-h1 { font-size: 56px; }
  .mk-hero-inner { grid-template-columns: 1fr; gap: 36px; }
  .mk-hero-stats { gap: 18px; flex-wrap: wrap; }
  .mk-hero-stats .stat { min-width: 130px; }
  .bw-filter-grid { grid-template-columns: 1fr; }
  .bw-walk-track { height: auto; }
  .bw-walk-pin {
    position: relative; top: 0; height: auto; max-height: none;
    grid-template-columns: 1fr; gap: 24px;
  }
  .bw-walk-stage { position: relative; top: 0; height: 360px; max-width: 418px; margin: 0 auto; }
  .bw-price-grid { grid-template-columns: 1fr; }
  .bw-bdd { grid-template-columns: 1fr; gap: 28px; padding: 28px; }
  .bw-stat-row { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  .bw-stat .n { font-size: 48px; }
  .bw-diff-table { grid-template-columns: 1fr; }
  .bw-diff-table .col.left { border-right: 0; border-bottom: 1px dashed rgba(11,27,61,0.18); }
  .bw-diff-c { grid-template-columns: 1fr; }
  .bw-diff-c .cell { border-left: 0 !important; border-top: 1px dashed rgba(11,27,61,0.08); }
  .bw-senja-grid { grid-template-columns: 1fr; }
  .bw-price-tiles { grid-template-columns: 1fr; }
}


/* ============================================================
   LIVE DEMO — replaces the old pain block for brackets a + b
   ============================================================ */

/* Lock body scroll while demo is fullscreen */
body.ld-locked { overflow: hidden; }

/* ---- Section frame (light-mode lead-in) ---- */
.ld-section {
  background: #F4F1EA;
  position: relative;
  padding: 96px 0 0;
  overflow: hidden;
  min-height: 100vh;
}
.ld-intro {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 48px;
}
.ld-headline {
  font: 800 48px/1.05 var(--font-sans);
  letter-spacing: -0.028em;
  color: #0B1B3D;
  margin: 18px 0 14px;
  text-wrap: balance;
}
.ld-headline em {
  font-style: normal;
  background: linear-gradient(120deg, #3490F0, #5660F0);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.ld-sub {
  font: 500 17px/1.55 var(--font-sans); color: #4B5563;
  max-width: 56ch; margin: 0 auto;
}
.ld-sub b { color: #0B1B3D; }

/* ---- Stage wrap — the curved card that zooms to fullscreen ---- */
.ld-stage-wrap {
  margin: 0 auto;
  width: min(1320px, 92vw);
  height: min(720px, 70vh);
  transition: all 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Before zoom, the dashboard is a poster — no clicks, no hovers,
   no horizontal scroll wheel surprises. */
.ld-stage-wrap:not(.zoomed) { pointer-events: none; }
.ld-stage-wrap.zoomed {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  z-index: 80;
  background: #0B1B3D;
}
.ld-stage-wrap.exiting { pointer-events: none; }

/* ---- Idle / inactive stage ----
   When the demo isn't running, the dashboard reads as a dimmed poster
   with a Start-demo button overlaid. */
.ld-stage-wrap.inactive .ld-stage-body {
  filter: grayscale(0.85) brightness(0.62);
  transition: filter 0.4s ease;
}
.ld-start-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 17, 33, 0.55);
  backdrop-filter: blur(1.5px);
  z-index: 20;
  border-radius: inherit;
  /* parent .ld-stage-wrap:not(.zoomed) is pointer-events:none — re-enable here */
  pointer-events: auto;
}
.ld-start-btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 24px 14px 16px;
  border: none; cursor: pointer;
  border-radius: 999px;
  color: #fff;
  background: #0B1B3D;
  box-shadow: 0 14px 40px rgba(8, 17, 33, 0.5), 0 0 0 1px rgba(255,255,255,0.08) inset;
  transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1),
              background 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ld-start-btn:hover { transform: translateY(-2px); background: #0F2452; }
.ld-start-btn:active { transform: translateY(0); }
.ld-start-btn:focus-visible {
  outline: none;
  box-shadow: 0 14px 40px rgba(8, 17, 33, 0.5), 0 0 0 3px rgba(52, 144, 240, 0.55);
}
.ld-start-btn .ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 50%;
  background: rgba(52, 144, 240, 0.9);
}
.ld-start-btn .ic svg { margin-left: 2px; } /* optical-center the play triangle */
.ld-start-btn .label { display: flex; flex-direction: column; gap: 3px; text-align: left; }
.ld-start-btn .label .top { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.ld-start-btn .label .bot {
  font-weight: 500; font-size: 11px;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: #94A3B8;
}
@media (max-width: 640px) {
  .ld-start-btn { padding: 11px 16px 11px 12px; gap: 10px; }
  .ld-start-btn .ic { width: 28px; height: 28px; }
  .ld-start-btn .label .bot { display: none; }
}

/* ---- Restart FAB ----
   Floating bottom-right button shown after the user has scrolled past
   an exited demo. Navy pill that matches the marketing footer/testimonial
   blocks so it reads as Breezeway-native, not a generic chat widget. */
.ld-restart-fab {
  position: fixed;
  right: clamp(16px, 2.4vw, 32px);
  bottom: clamp(16px, 2.4vw, 32px);
  z-index: 70;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 18px 12px 14px;
  background: #0B1B3D;
  color: #fff;
  border: 1px solid rgba(124, 196, 250, 0.35);
  border-radius: 999px;
  font: 600 14px/1 var(--font-sans);
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow:
    0 18px 40px -12px rgba(11, 27, 61, 0.55),
    0 6px 16px -6px rgba(11, 27, 61, 0.35),
    0 0 0 0 rgba(52, 144, 240, 0.45);
  transform: translateY(0);
  animation: ld-fab-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1),
              background 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ld-restart-fab:hover {
  transform: translateY(-2px);
  background: #0F2452;
  box-shadow:
    0 22px 48px -12px rgba(11, 27, 61, 0.6),
    0 8px 20px -6px rgba(11, 27, 61, 0.4),
    0 0 0 6px rgba(52, 144, 240, 0.18);
}
.ld-restart-fab:active { transform: translateY(0); }
.ld-restart-fab:focus-visible {
  outline: none;
  box-shadow:
    0 18px 40px -12px rgba(11, 27, 61, 0.55),
    0 0 0 3px rgba(52, 144, 240, 0.55);
}
.ld-restart-fab .ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 999px;
  background: linear-gradient(135deg, #3490F0 0%, #5660F0 100%);
  color: #fff;
  flex-shrink: 0;
}
.ld-restart-fab .ic svg { margin-left: 2px; } /* optical center the play triangle */
.ld-restart-fab .label {
  display: flex; flex-direction: column; gap: 3px;
  text-align: left;
}
.ld-restart-fab .label .top {
  font-weight: 700; font-size: 14px; letter-spacing: -0.01em;
}
.ld-restart-fab .label .bot {
  font-weight: 500; font-size: 11px;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
@keyframes ld-fab-in {
  0%   { opacity: 0; transform: translateY(12px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0)    scale(1);    }
}
@media (max-width: 640px) {
  .ld-restart-fab { padding: 10px 14px 10px 12px; gap: 10px; }
  .ld-restart-fab .ic { width: 28px; height: 28px; }
  .ld-restart-fab .label .bot { display: none; }
}

.ld-stage {
  width: 100%; height: 100%;
  background: #0B1320;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 60px 120px -32px rgba(11, 27, 61, 0.4),
              0 24px 48px -16px rgba(11, 27, 61, 0.25);
  display: flex; flex-direction: column;
  position: relative;
  transition: border-radius 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.ld-stage-wrap.zoomed .ld-stage {
  border-radius: 0;
  box-shadow: none;
}

/* ---- Stage chrome ---- */
.ld-chrome {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px;
  background: #1F2937;
  border-bottom: 1px solid #374151;
  flex-shrink: 0;
}
.ld-chrome .lights { display: flex; gap: 6px; }
.ld-chrome .lights span {
  width: 11px; height: 11px; border-radius: 999px; background: #374151;
}
.ld-chrome .lights span:nth-child(1) { background: #EF4444; }
.ld-chrome .lights span:nth-child(2) { background: #FACC15; }
.ld-chrome .lights span:nth-child(3) { background: #22C55E; }
.ld-chrome .addr {
  flex: 1; max-width: 460px; margin: 0 auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 8px;
  background: #0B1320; color: #9CA3AF;
  font: 500 12px/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.ld-chrome .addr .path { color: #6B7280; }
.ld-chrome .skip-big {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff;
  color: #0B1B3D;
  border: 0;
  border-radius: 999px;
  padding: 9px 16px 9px 12px;
  font: 700 13px/1 var(--font-sans);
  letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow: 0 8px 20px -6px rgba(0,0,0,0.4),
              0 2px 6px -1px rgba(0,0,0,0.25);
  transition: transform 0.15s var(--ease-out), background 0.15s;
}
.ld-chrome .skip-big:hover {
  background: #F4F1EA;
  transform: translateY(-1px);
}
.ld-chrome .skip-big svg { color: #6B7280; }
.ld-chrome .skip-big .hint {
  margin-left: 6px;
  padding: 3px 7px;
  border-radius: 4px;
  background: #F4F1EA;
  color: #6B7280;
  font: 600 10px/1 var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Stage body */
.ld-stage-body {
  flex: 1; min-height: 0; overflow: hidden;
  padding: 22px 28px 18px;
  display: flex; flex-direction: column;
}

/* ============================================================
   Dashboard
   ============================================================ */
.ld-dash {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  gap: 14px;
  color: #E5E7EB; font-family: var(--font-sans);
}
.ld-dash-head {
  display: flex; justify-content: space-between; align-items: center;
  flex-shrink: 0;
}
.ld-dash-head .hl { display: flex; gap: 14px; align-items: center; }
.ld-dash-head .logo {
  display: inline-flex; gap: 3px;
  padding: 8px; border-radius: 10px; background: #1F2937;
}
.ld-dash-head .logo .bar { width: 4px; height: 18px; border-radius: 2px; display: block; }
.ld-dash-head h3 {
  margin: 0; font: 700 18px/1 var(--font-sans);
  letter-spacing: -0.01em; color: #fff;
}
.ld-dash-head h3 .muted { color: #9CA3AF; font-weight: 500; }
.ld-dash-head .sub {
  margin: 4px 0 0; font: 500 12px/1 var(--font-sans); color: #6B7280;
}
.ld-dash-head .hr { display: inline-flex; gap: 8px; }
.ld-dash-head .ghost {
  background: transparent; color: #9CA3AF;
  border: 1px solid #374151; border-radius: 6px;
  padding: 6px 12px;
  font: 500 12px/1 var(--font-sans); cursor: default;
}

/* tabs */
.ld-tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid #1F2937;
  flex-shrink: 0;
}
.ld-tabs .tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  font: 500 13px/1 var(--font-sans); color: #9CA3AF;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.ld-tabs .tab i {
  display: inline-flex; align-items: center; padding: 2px 6px;
  border-radius: 4px;
  background: rgba(52,144,240,0.18); color: #93C5FD;
  font: 600 10px/1 var(--font-sans); font-style: normal;
}
.ld-tabs .tab.active { color: #93C5FD; border-bottom-color: #3490F0; }

/* table */
.ld-table-wrap {
  flex: 1; min-height: 0;
  overflow: auto;
  border: 1px solid #1F2937; border-radius: 10px;
  background: #0F172A;
  scroll-behavior: smooth;
}
.ld-table {
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  table-layout: fixed;
}
.ld-table th {
  background: #1F2937; color: #9CA3AF;
  font: 600 11px/1.2 var(--font-sans);
  letter-spacing: 0.02em;
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid #111827;
  position: sticky; top: 0; z-index: 2;
  white-space: nowrap;
}
.ld-table th.num { text-align: right; }
.ld-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(31, 41, 55, 0.6);
  background: #0F172A;
  font: 500 13px/1.3 var(--font-sans);
  color: #E5E7EB;
  vertical-align: middle;
  position: relative;
  white-space: nowrap;
}
.ld-table tr:nth-child(even) td { background: #131c2d; }
.ld-table td.num { text-align: right; }

/* Row dim / spotlight — only past step 1. Steps 0 + 1 keep the
   table neutral so the BreezeScore column glow can do the work. */
.ld-row.is-bystander { transition: opacity 0.3s, filter 0.3s; }
.ld-dash.ld-active:not(.ld-step-0):not(.killed) .ld-row.is-bystander {
  opacity: 0.5; filter: saturate(0.85);
}
.ld-row.is-target { transition: background 0.3s; }
.ld-dash.ld-active:not(.ld-step-0):not(.killed) .ld-row.is-target td {
  background: #181321 !important;
  box-shadow: inset 2px 0 0 #EF4444;
}
.ld-dash.killed .ld-row.is-target { opacity: 0.5; }
.ld-dash.killed .ld-row.is-target td {
  background: #0F172A !important;
  box-shadow: none;
}
.ld-dash.killed .ld-row.is-target .name { text-decoration: line-through; color: #6B7280; }

/* Name cell */
.ld-table .td-name {
  font: 500 13px/1.2 var(--font-sans);
  color: #F3F4F6;
}
.ld-table .td-name .name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: inline-block; max-width: 200px; vertical-align: middle;
}
.ld-table .td-name .chart-mark {
  display: inline-flex; padding: 4px; margin-left: 8px;
  border-radius: 4px; background: rgba(168, 85, 247, 0.14);
  vertical-align: middle;
}

/* BreezeScore pill (matches the production red/amber/green) */
.ld-score {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 64px; padding: 5px 14px;
  border-radius: 6px;
  font: 600 13px/1.2 var(--font-sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s;
}
.ld-score.green {
  background: rgba(22, 163, 74, 0.45);
  color: #DCFCE7;
  border: 1px solid rgba(34, 197, 94, 0.4);
}
.ld-score.amber {
  background: rgba(202, 138, 4, 0.42);
  color: #FEF3C7;
  border: 1px solid rgba(234, 179, 8, 0.42);
}
.ld-score.red {
  background: rgba(220, 38, 38, 0.48);
  color: #FECACA;
  border: 1px solid rgba(248, 113, 113, 0.55);
}
/* Step 0 + Step 1: every score pulses a subtle glow.
   The `.glow` class is applied by JSX whenever step <= 1, so we don't
   need to gate this selector on a specific .ld-step-N class. */
.ld-dash.ld-active .ld-score.glow {
  animation: ld-glow 1.6s ease-in-out infinite;
}
.ld-dash.ld-active .ld-score.red.glow {
  animation: ld-glow-red 1.4s ease-in-out infinite;
}
@keyframes ld-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  50%      { box-shadow: 0 0 0 4px rgba(255,255,255,0.06); }
}
@keyframes ld-glow-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248,113,113,0.0); }
  50%      { box-shadow: 0 0 0 6px rgba(248,113,113,0.35); }
}

/* Green/red pill-num used on CPA / ROAS / CPC */
.pill-num {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  font: 600 13px/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
  background: rgba(31, 41, 55, 0.6);
  color: #E5E7EB;
  border: 1px solid rgba(75, 85, 99, 0.45);
}
.pill-num .dot {
  width: 7px; height: 7px; border-radius: 999px; background: #22C55E;
}
.pill-num.pn-good { color: #DCFCE7; background: rgba(22, 163, 74, 0.18); border-color: rgba(34, 197, 94, 0.28); }
.pill-num.pn-good .dot { background: #22C55E; }
.pill-num.pn-bad  { color: #FECACA; background: rgba(220, 38, 38, 0.22); border-color: rgba(248, 113, 113, 0.40); }
.pill-num.pn-bad  .dot { background: #EF4444; }
.pill-num.pn-amber { color: #FEF3C7; background: rgba(202, 138, 4, 0.22); border-color: rgba(234, 179, 8, 0.4); }
.pill-num.pn-amber .dot { background: #FACC15; }
.pill-num .alert-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  background: #DC2626; color: #fff;
  font: 700 9px/1 var(--font-sans);
}

/* Mini-bars (CPC trend cell) */
.ld-mini-bars {
  display: inline-flex; align-items: flex-end; gap: 3px;
  height: 24px;
}
.ld-mini-bars .bar {
  width: 6px; border-radius: 1px; display: inline-block;
}
.ld-mini-bars .dash {
  margin-left: 6px; font: 600 12px/1 var(--font-sans);
  color: #4B5563; align-self: center;
}

/* Clickable + pulse */
.clickable {
  cursor: pointer;
  position: relative;
  transition: transform 0.18s var(--ease-out);
}
.clickable:hover { transform: scale(1.06); }
.clickable.target-pulse::after {
  content: ""; position: absolute; inset: -6px;
  border-radius: 12px;
  border: 2px solid #FCA5A5;
  animation: ld-pulse 1.2s ease-out infinite;
  pointer-events: none;
}
@keyframes ld-pulse {
  0%   { transform: scale(0.94); opacity: 1; }
  100% { transform: scale(1.20); opacity: 0; }
}

/* Toggle */
.ld-toggle {
  width: 34px; height: 20px; border-radius: 999px;
  background: #22C55E;
  position: relative; display: inline-block;
  transition: background 0.2s;
}
.ld-toggle i {
  position: absolute; top: 2px; left: 16px;
  width: 16px; height: 16px; border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  transition: left 0.2s;
}
.ld-toggle.off { background: #4B5563; }
.ld-toggle.off i { left: 2px; }

/* Footer totals */
.ld-foot {
  flex-shrink: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  background: #1F2937;
  border-radius: 8px;
  font: 500 12px/1 var(--font-sans); color: #9CA3AF;
}
.ld-foot .totals {
  display: inline-flex; gap: 24px;
  color: #E5E7EB;
  font-variant-numeric: tabular-nums;
}
.ld-foot .totals b { color: #9CA3AF; font-weight: 500; margin-right: 6px; }

/* ============================================================
   Floating coach callout — dynamically positioned by the orchestrator
   ============================================================ */
.ld-callout {
  position: absolute;
  z-index: 30;
  pointer-events: auto;
  animation: ld-callout-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  width: 320px;
}
@keyframes ld-callout-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ld-callout .bubble {
  background: #fff; color: #0B1B3D;
  padding: 16px 18px;
  border-radius: 14px;
  box-shadow: 0 24px 48px -12px rgba(0,0,0,0.5),
              0 8px 16px -6px rgba(0,0,0,0.25);
  position: relative;
}
.ld-callout .bubble .badge {
  display: inline-block;
  background: linear-gradient(120deg, #3490F0, #5660F0);
  color: #fff;
  padding: 3px 9px; border-radius: 999px;
  font: 700 9px/1 var(--font-sans); letter-spacing: 0.1em;
  margin-bottom: 10px;
}
.ld-callout .bubble .line {
  margin: 0 0 6px;
  font: 700 15px/1.4 var(--font-sans);
  letter-spacing: -0.005em;
}
.ld-callout .bubble .sub {
  margin: 0;
  font: 500 12px/1.5 var(--font-sans);
  color: #4B5563;
}
.ld-callout .arm {
  position: absolute;
  width: 14px; height: 14px;
  background: #fff;
  transform: rotate(45deg);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.04);
  z-index: 1;
}
/* Arm on TOP (callout below target, arm pointing up) */
.ld-callout.side-top .arm { top: -6px; }
/* Arm on LEFT (callout right of target, arm pointing left) */
.ld-callout.side-right .arm { left: -6px; top: 28px; }

/* Next button shared style */
.next-btn {
  margin-top: 12px;
  background: linear-gradient(120deg, #3490F0, #5660F0);
  color: #fff;
  border: 0; border-radius: 8px;
  padding: 8px 14px;
  font: 700 12px/1 var(--font-sans);
  letter-spacing: 0.04em; text-transform: uppercase;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform 0.18s, filter 0.18s, box-shadow 0.18s;
  box-shadow: 0 8px 20px -6px rgba(52,144,240,0.45);
}
.next-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }

/* Bigger Next pill used inside the trend modal */
.next-btn.next-btn-lg {
  padding: 14px 22px;
  font: 800 14px/1 var(--font-sans);
  letter-spacing: 0.06em;
  border-radius: 12px;
  box-shadow: 0 14px 32px -6px rgba(52,144,240,0.55),
              0 0 0 4px rgba(124,196,250,0.18);
  animation: nextPulse 1.8s ease-in-out infinite;
}
@keyframes nextPulse {
  0%, 100% { box-shadow: 0 14px 32px -6px rgba(52,144,240,0.55), 0 0 0 4px rgba(124,196,250,0.18); }
  50%      { box-shadow: 0 14px 32px -6px rgba(52,144,240,0.65), 0 0 0 10px rgba(124,196,250,0.06); }
}
/* ============================================================
   CPC recommendation popover (stage-level overlay)
   ============================================================ */
.ld-cpc-pop-host {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 25;
}
.ld-cpc-pop {
  position: absolute;
  top: 38%;
  right: 8%;
  transform: translateY(-50%);
  width: 360px;
  background: #1F2937;
  border: 1px solid #374151;
  border-radius: 14px;
  overflow: hidden;
  pointer-events: auto;
  box-shadow: 0 36px 64px -12px rgba(0,0,0,0.55),
              0 14px 28px -8px rgba(0,0,0,0.4);
  animation: ld-cpc-pop-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
  text-align: left;
  font-family: var(--font-sans);
}
@keyframes ld-cpc-pop-in {
  from { opacity: 0; transform: translate(12px, calc(-50% + 4px)); }
  to   { opacity: 1; transform: translate(0, -50%); }
}
.ld-cpc-pop header {
  background: rgba(220, 38, 38, 0.40);
  color: #FECACA;
  padding: 14px 18px;
  font: 700 16px/1.2 var(--font-sans);
  letter-spacing: -0.005em;
  border-bottom: 1px solid rgba(248, 113, 113, 0.2);
}
.ld-cpc-pop .body {
  padding: 16px 18px 4px;
  color: #E5E7EB;
  font: 500 13px/1.55 var(--font-sans);
}
.ld-cpc-pop .body p {
  margin: 0 0 12px;
}
.ld-cpc-pop .body .protip {
  color: #93C5FD;
}
.ld-cpc-pop .body .protip b { color: #BFDBFE; }
.ld-cpc-pop .footer {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid #374151;
  background: rgba(0,0,0,0.18);
}
.ld-cpc-pop .footer .hint {
  font: 600 10px/1 var(--font-sans);
  letter-spacing: 0.10em;
  color: #6B7280;
}

/* ============================================================
   TrendModal — large CPC chart
   ============================================================ */
.ld-modal-back {
  position: absolute; inset: 0;
  background: rgba(11, 19, 32, 0.72);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
  animation: ld-win-in 0.3s ease-out both;
  padding: 24px;
}
.ld-modal {
  width: min(880px, 96%);
  background: #0F172A;
  border: 1px solid #1F2937;
  border-radius: 18px;
  padding: 24px 28px 20px;
  position: relative;
  box-shadow: 0 50px 100px -16px rgba(0,0,0,0.55);
  animation: ld-card-pop 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  color: #E5E7EB;
  font-family: var(--font-sans);
}
.ld-modal .close {
  position: absolute; top: 14px; right: 14px;
  background: transparent; border: 0;
  color: #9CA3AF; cursor: pointer;
  font-size: 24px; line-height: 1;
  width: 32px; height: 32px; border-radius: 8px;
  transition: background 0.15s;
}
.ld-modal .close:hover { background: #1F2937; color: #fff; }

.ld-modal > header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
  padding-right: 36px;
}
.ld-modal > header h3 {
  margin: 0;
  font: 700 22px/1.2 var(--font-sans);
  color: #fff;
  letter-spacing: -0.015em;
}
.ld-modal > header .sub {
  margin: 4px 0 0;
  font: 500 12px/1 var(--font-sans);
  color: #6B7280;
}
.ld-modal > header .rangepill {
  background: #1F2937;
  border: 1px solid #374151;
  color: #9CA3AF;
  padding: 6px 12px; border-radius: 6px;
  font: 500 12px/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.ld-modal .metricrow {
  display: inline-flex; align-items: baseline; gap: 12px;
  margin-bottom: 4px;
}
.ld-modal .metric-label { color: #6B7280; font: 500 13px/1 var(--font-sans); }
.ld-modal .metric-name {
  color: #fff;
  font: 800 24px/1 var(--font-sans);
  letter-spacing: -0.02em;
}
.ld-modal .metric-note {
  color: #FCA5A5;
  font: 600 11px/1 var(--font-sans);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.ld-modal .chart-host {
  background: #131c2d;
  border-radius: 12px;
  padding: 12px;
  margin: 12px 0 16px;
}
.bigchart { width: 100%; height: 280px; display: block; }
@keyframes ld-bar-grow {
  from { transform: scaleY(0); transform-origin: bottom; }
  to   { transform: scaleY(1); transform-origin: bottom; }
}
@keyframes ld-line-draw {
  from { stroke-dasharray: 2000; stroke-dashoffset: 2000; }
  to   { stroke-dasharray: 2000; stroke-dashoffset: 0; }
}

/* Coach msg inside the modal */
.ld-modal-coach {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px;
  background: #1F2937;
  border: 1px solid #374151;
  border-radius: 12px;
  padding: 14px 18px;
}
.ld-modal-coach .msg { display: flex; flex-direction: column; gap: 6px; }
.ld-modal-coach .badge {
  align-self: flex-start;
  background: linear-gradient(120deg, #3490F0, #5660F0);
  color: #fff;
  padding: 3px 9px; border-radius: 999px;
  font: 700 9px/1 var(--font-sans); letter-spacing: 0.1em;
}
.ld-modal-coach p {
  margin: 0;
  font: 600 14px/1.4 var(--font-sans);
  color: #fff;
  letter-spacing: -0.005em;
}

/* ============================================================
   Win overlay
   ============================================================ */
.ld-win {
  position: absolute; inset: 0;
  background: rgba(11, 19, 32, 0.78);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  z-index: 60;
  animation: ld-win-in 0.4s ease-out both;
}
@keyframes ld-win-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.ld-win .card {
  background: linear-gradient(180deg, #0F172A, #111827);
  border: 1px solid #1F2937;
  border-radius: 18px;
  padding: 36px 48px;
  text-align: center;
  box-shadow: 0 40px 80px -12px rgba(0,0,0,0.5);
  position: relative;
  z-index: 2;
  max-width: 90%;
  animation: ld-card-pop 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}
@keyframes ld-card-pop {
  from { opacity: 0; transform: scale(0.85) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.ld-win .eyebrow {
  display: inline-block;
  font: 700 10px/1 var(--font-sans);
  letter-spacing: 0.14em;
  color: #FCA5A5;
  background: rgba(220, 38, 38, 0.18);
  padding: 5px 12px; border-radius: 999px;
  margin-bottom: 18px;
}
.ld-win .amount {
  font: 900 92px/1 var(--font-sans);
  letter-spacing: -0.04em;
  background: linear-gradient(120deg, #34D399, #86EFAC, #7CC4FA);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}
.ld-win .line {
  font: 600 20px/1.3 var(--font-sans);
  color: #fff;
  margin: 0 0 12px;
  letter-spacing: -0.012em;
}
.ld-win .math {
  margin: 0;
  font: 500 13px/1.5 var(--font-sans);
  color: #94A3B8;
}
.ld-win .confetti {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.ld-win .confetti .bit {
  position: absolute; top: -20px;
  border-radius: 2px;
  animation-name: ld-confetti-fall;
  animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
  animation-iteration-count: 1;
}
@keyframes ld-confetti-fall {
  0%   { transform: translateY(-40px) rotate(0deg);    opacity: 1; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* ============================================================
   Placeholder for bracket c
   ============================================================ */
.ld-placeholder-section { background: #F4F1EA; }
.ld-placeholder {
  max-width: 720px; margin: 0 auto;
  text-align: center;
  background: #fff;
  border: 1.5px dashed rgba(11, 27, 61, 0.18);
  border-radius: 20px;
  padding: 56px 48px;
}
.ld-placeholder .eyebrow {
  display: inline-block;
  font: 700 11px/1 var(--font-sans);
  letter-spacing: 0.16em;
  background: linear-gradient(120deg, #3490F0, #5660F0);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  margin-bottom: 16px;
}
.ld-placeholder h2 {
  margin: 0 0 12px;
  font: 800 32px/1.2 var(--font-sans);
  letter-spacing: -0.022em; color: #0B1B3D;
}
.ld-placeholder p {
  margin: 0; font: 500 16px/1.55 var(--font-sans); color: #4B5563;
}

/* Responsive */
@media (max-width: 1100px) {
  .ld-headline { font-size: 38px; }
  .ld-stage-wrap { width: 96vw; height: 64vh; }
}
@media (max-width: 880px) {
  .ld-headline { font-size: 32px; }
  .ld-stage-body { padding: 14px; }
  .ld-callout { max-width: 260px; }
  .ld-callout .bubble .line { font-size: 14px; }
  .ld-win .amount { font-size: 60px; }
  .ld-cpc-pop { width: 280px; }
}

/* ============================================================
   META COMPARE — light, plain, no signals
   ============================================================ */
.meta-section {
  background: #F0F2F5;
  padding: 80px 0 96px;
}
.meta-intro {
  text-align: center; max-width: 800px; margin: 0 auto 48px;
}
.meta-eyebrow {
  display: inline-block;
  font: 700 11px/1 var(--font-sans);
  letter-spacing: 0.18em;
  color: #65676B;
  padding: 6px 12px; border-radius: 999px;
  background: #E4E6EB;
  margin-bottom: 18px;
}
.meta-headline {
  margin: 0 0 14px;
  font: 800 42px/1.1 var(--font-sans);
  letter-spacing: -0.028em;
  color: #1C1E21;
  text-wrap: balance;
}
.meta-sub {
  margin: 0 auto;
  font: 500 16px/1.6 var(--font-sans); color: #4B4F56;
  max-width: 64ch;
}
.meta-sub b { color: #1C1E21; }

.meta-frame {
  max-width: 1320px; margin: 0 auto;
  background: #fff;
  border: 1px solid #DADDE1;
  border-radius: 10px;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.12);
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, var(--font-sans);
  color: #1C1E21;
}

/* topbar */
.meta-topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 8px 16px;
  background: #0064E0;
  color: #fff;
}
.meta-topbar .left { display: flex; align-items: center; gap: 12px; }
.meta-topbar .bizpill {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.16); color: #fff;
  padding: 6px 10px; border-radius: 6px;
  font: 600 13px/1 var(--font-sans);
}
.meta-topbar .bizpill .dot {
  width: 6px; height: 6px; border-radius: 999px; background: #4ADE80;
}
.meta-topbar .search {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.18);
  padding: 7px 12px; border-radius: 999px;
  width: 280px;
}
.meta-topbar .search input {
  background: transparent; border: 0; outline: 0; color: #fff;
  font: 500 13px/1 var(--font-sans); width: 100%;
}
.meta-topbar .search input::placeholder { color: rgba(255,255,255,0.7); }
.meta-topbar .right {
  margin-left: auto; display: inline-flex; align-items: center; gap: 10px;
}
.meta-topbar .iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 999px;
  background: rgba(255,255,255,0.14);
  font: 700 12px/1 var(--font-sans); color: #fff;
}
.meta-topbar .avatar {
  width: 28px; height: 28px; border-radius: 999px;
  background: #1877F2; border: 2px solid #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 11px/1 var(--font-sans); color: #fff;
}

/* subnav */
.meta-subnav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid #DADDE1;
  background: #fff;
}
.meta-subnav .left { display: flex; align-items: center; gap: 18px; }
.meta-subnav .back {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 0; color: #1877F2;
  font: 600 13px/1 var(--font-sans); cursor: default;
}
.meta-subnav .sub-tab {
  font: 500 13px/1 var(--font-sans); color: #65676B;
  padding: 6px 4px;
  border-bottom: 2px solid transparent;
}
.meta-subnav .sub-tab i {
  margin-left: 6px;
  font: 500 11px/1 var(--font-sans); color: #8A8D91;
  font-style: normal;
}
.meta-subnav .sub-tab.active { color: #1877F2; border-bottom-color: #1877F2; padding-bottom: 8px; margin-bottom: -10px; }

.meta-subnav .right { display: inline-flex; gap: 8px; }

/* g-btns (ghost utility) */
.g-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid #CED0D4;
  color: #1C1E21;
  font: 500 12px/1 var(--font-sans);
  padding: 6px 10px; border-radius: 6px;
  cursor: default;
}
.g-btn.ghost { background: transparent; border-color: transparent; color: #1877F2; }
.g-btn:hover { background: #F2F3F5; }

/* filters bar */
.meta-filters {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid #DADDE1;
  background: #F7F8FA;
}
.meta-filters .left { display: inline-flex; gap: 8px; }
.meta-filters .right { display: inline-flex; gap: 8px; align-items: center; }
.meta-filters .create {
  background: #1877F2; color: #fff;
  border: 0; border-radius: 6px;
  padding: 7px 12px;
  font: 600 13px/1 var(--font-sans);
  display: inline-flex; align-items: center; gap: 6px;
  cursor: default;
}
.meta-filters .create .plus { font-size: 16px; font-weight: 700; line-height: 1; }
.meta-filters .cols-label {
  font: 500 12px/1 var(--font-sans); color: #65676B;
}
.meta-filters .cols-label b { color: #1C1E21; }

/* the table */
.meta-tablewrap { overflow-x: auto; }
.meta-table {
  width: 100%; border-collapse: collapse;
  font: 500 12px/1.35 var(--font-sans);
  color: #1C1E21;
  font-variant-numeric: tabular-nums;
}
.meta-table thead th {
  background: #F7F8FA;
  color: #65676B;
  font: 600 11px/1.2 var(--font-sans);
  padding: 9px 10px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid #DADDE1;
  vertical-align: bottom;
}
/* Sortable header: label + neutral up/down arrows + caret dropdown */
.meta-table thead th.sortable .hd {
  display: inline-flex; align-items: center; gap: 6px;
}
.meta-table thead th.num.sortable { text-align: right; }
.meta-table thead th.num.sortable .hd {
  justify-content: flex-end; width: 100%;
}
.meta-table thead th .arrows {
  font: 700 11px/1 var(--font-sans);
  color: #BCC0C4;
  letter-spacing: -0.5px;
}
.meta-table thead th .arrows .single { color: #1877F2; }
.meta-table thead th .caret {
  font-size: 10px; color: #8A8D91;
  opacity: 0.6;
}
.meta-table thead th.blue .lbl { color: #1877F2; }
.meta-table thead th.blue .arrows { color: #1877F2; }
.meta-table thead th .lbl {
  display: inline-block;
  max-width: 130px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.meta-table th.num { text-align: right; }
.meta-table th.cb,
.meta-table th.onoff { white-space: nowrap; }
.meta-table tbody td {
  padding: 12px 10px;
  border-bottom: 1px solid #E4E6EB;
  vertical-align: middle;
  color: #1C1E21;
  white-space: nowrap;
}
.meta-table td.num { text-align: right; }
.meta-table tbody tr:hover td { background: #F7F8FA; }
.meta-table tbody tr.totals td {
  background: #F7F8FA;
  border-top: 1px solid #DADDE1;
  font-weight: 500;
}
.meta-table .muted { color: #65676B; }
.meta-table .sub { font: 500 10px/1 var(--font-sans); color: #8A8D91; margin-top: 3px; }
.meta-table .lk { color: #1877F2; }

.meta-table .meta-cb {
  display: inline-block; width: 14px; height: 14px;
  border: 1.5px solid #B0B3B8; border-radius: 3px;
  vertical-align: middle;
}
.meta-table .meta-toggle {
  width: 28px; height: 16px; border-radius: 999px;
  background: #42B72A; position: relative; display: inline-block;
}
.meta-table .meta-toggle i {
  position: absolute; top: 2px; left: 14px;
  width: 12px; height: 12px; border-radius: 999px; background: #fff;
}
.meta-table .td-name { color: #1877F2; font-weight: 600; }
.meta-table .td-name .dot {
  display: inline-block; width: 7px; height: 7px;
  border-radius: 999px; background: #42B72A; margin-right: 6px;
  vertical-align: middle;
}
.meta-table .active-dot {
  display: inline-block; width: 6px; height: 6px;
  border-radius: 999px; background: #42B72A; margin-right: 5px;
  vertical-align: middle;
}
.meta-table .kebab {
  display: inline-block;
  color: #65676B;
  font: 700 18px/1 var(--font-sans);
  letter-spacing: 1px;
  padding: 2px 6px;
}

.meta-pager {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background: #fff; border-top: 1px solid #DADDE1;
  font: 500 12px/1 var(--font-sans); color: #65676B;
}
.meta-pager .right { display: inline-flex; gap: 4px; }

/* after-block — the punchline */
.meta-after {
  max-width: 720px; margin: 36px auto 0; text-align: center;
}
.meta-after p {
  margin: 0 0 6px;
  font: 700 22px/1.3 var(--font-sans);
  letter-spacing: -0.018em;
  color: #0B1B3D;
}
.meta-after .quiet {
  font: 500 15px/1.55 var(--font-sans);
  color: #65676B;
  font-weight: 500;
}

/* Responsive nudges */
@media (max-width: 880px) {
  .ld-headline { font-size: 34px; }
  .ld-stage-wrap { height: 70vh; }
  .ld-stage-body { padding: 14px; }
  .meta-headline { font-size: 30px; }
  .ld-callout .bubble { max-width: 220px; padding: 10px 14px; }
  .ld-callout .bubble p { font-size: 13px; }
  .ld-win .amount { font-size: 56px; }
}


/* ============================================================
   MOBILE LIVE DEMO (`.ldm-*`)
   In-flow, no scroll lock, no zoom-takeover. Vertical card flow
   that walks through the same 4 steps the desktop demo does.
   Active only via the JS branch in live-demo.jsx — the desktop
   demo is hidden entirely on phones.
   ============================================================ */

.ldm-section {
  background: #F4F1EA;
  padding: 64px 0 56px;
  position: relative;
  overflow: hidden;
}
.ldm-section .ld-intro {
  text-align: center;
  padding: 0 18px;
  margin-bottom: 28px;
}
.ldm-section .ld-headline {
  font: 800 28px/1.08 var(--font-sans);
  letter-spacing: -0.025em;
  color: var(--brand-navy, #0B1B3D);
  margin: 12px 0 12px;
}
.ldm-section .ld-headline em {
  font-style: normal;
  background: linear-gradient(180deg, transparent 0 60%, rgba(250, 204, 21, 0.85) 60% 92%, transparent 92%);
  -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: currentColor; color: inherit;
  padding: 0 3px;
}
.ldm-section .ld-sub {
  font: 500 15px/1.5 var(--font-sans);
  color: #4B5563;
  margin: 0;
}

/* ---- Outer frame (looks like a mini browser/dashboard) ---- */
.ldm-frame {
  margin: 0 14px;
  background: #0B1320;
  border-radius: 22px;
  overflow: hidden;
  box-shadow:
    0 32px 64px -24px rgba(11, 27, 61, 0.5),
    0 12px 24px -12px rgba(11, 27, 61, 0.3);
  position: relative;
}

.ldm-chrome {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: #1F2937;
  border-bottom: 1px solid #374151;
}
.ldm-chrome .lights { display: flex; gap: 5px; }
.ldm-chrome .lights span {
  width: 9px; height: 9px; border-radius: 999px; background: #4B5563;
}
.ldm-chrome .lights span:nth-child(1) { background: #EF4444; }
.ldm-chrome .lights span:nth-child(2) { background: #F59E0B; }
.ldm-chrome .lights span:nth-child(3) { background: #10B981; }
.ldm-chrome .addr {
  font: 600 11px/1 var(--font-sans);
  color: #9CA3AF;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: #111827; border: 1px solid #374151; border-radius: 999px;
}
.ldm-chrome .addr svg { color: #6B7280; }

.ldm-dash-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid #1F2937;
}
.ldm-dash-head .logo {
  display: flex; flex-direction: column; gap: 2px;
  width: 18px;
}
.ldm-dash-head .logo span {
  display: block;
  height: 3px; border-radius: 999px;
}
.ldm-dash-head .logo span:nth-child(1) { width: 12px; }
.ldm-dash-head .logo span:nth-child(2) { width: 18px; }
.ldm-dash-head .logo span:nth-child(3) { width: 10px; }
.ldm-dash-head .title {
  font: 700 14px/1.2 var(--font-sans);
  color: #F9FAFB;
}
.ldm-dash-head .sub {
  font: 500 11px/1.3 var(--font-sans);
  color: #9CA3AF;
  margin-top: 2px;
}
.ldm-dash-head .live {
  margin-left: auto;
  font: 700 10px/1 var(--font-sans);
  letter-spacing: 0.08em;
  color: #86EFAC;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px;
  border: 1px solid rgba(134, 239, 172, 0.25);
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.08);
}
.ldm-dash-head .live i {
  width: 5px; height: 5px; border-radius: 999px; background: #22C55E;
  animation: ldm-pulse-dot 1.6s ease-in-out infinite;
}
@keyframes ldm-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.85); }
}

/* ---- Mini ad-set rows above the focused card ---- */
.ldm-others {
  padding: 8px 12px 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.ldm-mini-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  background: #1F2937;
  border: 1px solid rgba(55, 65, 81, 0.6);
  border-radius: 8px;
  font: 500 12px/1 var(--font-sans);
  color: #D1D5DB;
}
.ldm-mini-row .name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
}
.ldm-mini-row .cpa {
  font-feature-settings: 'tnum';
  font-size: 12px;
  color: #9CA3AF;
}
.ldm-others-more {
  text-align: center;
  font: 600 10px/1 var(--font-sans);
  letter-spacing: 0.08em;
  color: #6B7280;
  padding: 6px 0 2px;
  text-transform: uppercase;
}

/* ---- Focused loser card ---- */
.ldm-card {
  margin: 4px 12px 14px;
  padding: 16px;
  background: linear-gradient(180deg, rgba(127, 29, 29, 0.18) 0%, rgba(11, 19, 32, 0) 60%), #111827;
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 14px;
  position: relative;
  transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 250ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ldm-card.killed {
  opacity: 0.55;
  border-color: rgba(75, 85, 99, 0.4);
  background: #111827;
}
.ldm-card.killed::after {
  content: 'PAUSED IN META';
  position: absolute; inset: auto 0 auto 0;
  top: 50%; transform: translateY(-50%);
  text-align: center;
  font: 800 13px/1 var(--font-sans);
  letter-spacing: 0.14em;
  color: #F9FAFB;
  background: rgba(11, 19, 32, 0.85);
  padding: 12px 0;
  border-top: 1px solid #374151;
  border-bottom: 1px solid #374151;
  pointer-events: none;
}

.ldm-card-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 10px/1 var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FCA5A5;
  padding: 5px 9px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.28);
  border-radius: 999px;
}
.ldm-card-eyebrow .dot {
  width: 5px; height: 5px; border-radius: 999px; background: #EF4444;
  animation: ldm-pulse-dot 1.6s ease-in-out infinite;
}
.ldm-card-name {
  font: 700 16px/1.25 var(--font-sans);
  color: #F9FAFB;
  margin: 12px 0 14px;
  letter-spacing: -0.01em;
}

.ldm-card-hero {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  background: #0B1320;
  border: 1px solid #1F2937;
  border-radius: 12px;
  margin-bottom: 14px;
}
.ldm-card-hero .ld-score {
  font: 800 22px/1 var(--font-sans);
  padding: 14px 16px;
  min-width: 78px;
  text-align: center;
  border-radius: 10px;
  flex-shrink: 0;
  border: 1px solid transparent;
}
.ldm-card-hero-meta .label {
  font: 700 11px/1 var(--font-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9CA3AF;
  margin-bottom: 4px;
}
.ldm-card-hero-meta .note {
  font: 500 13px/1.4 var(--font-sans);
  color: #E5E7EB;
}

/* 2-col stat grid */
.ldm-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.ldm-stats .stat {
  padding: 10px 12px;
  background: #0B1320;
  border: 1px solid #1F2937;
  border-radius: 10px;
}
.ldm-stats .stat .k {
  display: block;
  font: 600 10px/1 var(--font-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6B7280;
  margin-bottom: 6px;
}
.ldm-stats .stat .v {
  font: 700 16px/1 var(--font-sans);
  color: #F9FAFB;
  font-feature-settings: 'tnum';
  display: inline-flex; align-items: center; gap: 6px;
}
.ldm-stats .stat .v .dot {
  width: 7px; height: 7px; border-radius: 999px;
}
.ldm-stats .stat .v.pn-bad   { color: #FCA5A5; }
.ldm-stats .stat .v.pn-bad   .dot { background: #EF4444; }
.ldm-stats .stat .v.pn-good  { color: #86EFAC; }
.ldm-stats .stat .v.pn-good  .dot { background: #22C55E; }
.ldm-stats .stat .v.pn-amber { color: #FDE68A; }
.ldm-stats .stat .v.pn-amber .dot { background: #F59E0B; }

/* CPC & trend interactive blocks */
.ldm-cpc, .ldm-trend {
  width: 100%;
  text-align: left;
  display: block;
  padding: 12px 14px;
  background: #0B1320;
  border: 1px solid #1F2937;
  border-radius: 10px;
  margin-bottom: 8px;
  color: inherit;
  font-family: inherit;
  cursor: default;
  transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
              background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ldm-cpc.clickable, .ldm-trend.clickable {
  cursor: pointer;
  border-color: rgba(239, 68, 68, 0.6);
  background: rgba(127, 29, 29, 0.18);
}
.ldm-cpc.clickable:active, .ldm-trend.clickable:active {
  transform: scale(0.99);
}
.ldm-cpc .row, .ldm-trend .row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.ldm-cpc .row .k, .ldm-trend .row .k {
  font: 600 11px/1 var(--font-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9CA3AF;
}
.ldm-cpc .row .v {
  font: 800 18px/1 var(--font-sans);
  font-feature-settings: 'tnum';
  display: inline-flex; align-items: center; gap: 6px;
}
.ldm-cpc .row .v.pn-bad { color: #FCA5A5; }
.ldm-cpc .row .v .alert-dot {
  width: 16px; height: 16px;
  background: #EF4444; color: #fff;
  border-radius: 999px;
  font: 800 10px/16px var(--font-sans);
  text-align: center;
}
.ldm-cpc .compare {
  font: 500 12px/1.4 var(--font-sans);
  color: #9CA3AF;
}
.ldm-trend .row .v.warn { color: #FCA5A5; font-weight: 700; font-size: 12px; }
.ldm-trend-strip {
  display: flex; align-items: flex-end; gap: 3px;
  height: 34px;
  margin-top: 4px;
}
.ldm-trend-strip .b {
  flex: 1;
  border-radius: 2px;
  min-height: 4px;
}

/* Pulse glow used on the active target */
.ldm-cpc.target-pulse, .ldm-trend.target-pulse {
  animation: ldm-target-glow 1.8s ease-in-out infinite;
}
@keyframes ldm-target-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
  50%      { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.18); }
}

/* Toggle row */
.ldm-toggle-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  background: #0B1320;
  border: 1px solid #1F2937;
  border-radius: 10px;
  margin-top: 4px;
}
.ldm-toggle-label .k {
  display: block;
  font: 600 10px/1 var(--font-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6B7280;
  margin-bottom: 5px;
}
.ldm-toggle-label .v {
  font: 800 13px/1 var(--font-sans);
  letter-spacing: 0.06em;
}
.ldm-toggle-label .v.on  { color: #86EFAC; }
.ldm-toggle-label .v.off { color: #9CA3AF; }
.ldm-toggle-row .ld-toggle {
  margin-left: auto;
  /* The base `.ld-toggle` styling from home.css handles the switch chrome */
}

/* ---- Coach panel ---- */
.ldm-coach {
  margin: 0 12px 14px;
  padding: 14px 16px;
  background: #1F2937;
  border: 1px solid #374151;
  border-radius: 12px;
  animation: ldm-coach-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes ldm-coach-in {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0);   }
}
.ldm-coach .badge {
  display: inline-block;
  font: 800 9px/1 var(--font-sans);
  letter-spacing: 0.14em;
  color: #7CC4FA;
  padding: 4px 8px;
  background: rgba(52, 144, 240, 0.15);
  border-radius: 4px;
  margin-bottom: 10px;
}
.ldm-coach .line {
  font: 700 16px/1.3 var(--font-sans);
  color: #F9FAFB;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.ldm-coach .sub {
  font: 500 13px/1.45 var(--font-sans);
  color: #9CA3AF;
  margin: 0 0 14px;
}
.ldm-coach .prompt {
  text-align: center;
  font: 700 12px/1 var(--font-sans);
  letter-spacing: 0.06em;
  color: #FCA5A5;
  padding: 11px 14px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px dashed rgba(239, 68, 68, 0.4);
  border-radius: 8px;
}
.next-btn-block {
  width: 100%;
  justify-content: center;
}

/* Tablet — the in-flow mobile demo now also serves touch tablets up to
   1024px. Cap the frame so it reads as a device, not a full-width slab.
   (No .ldm-* elements exist on true desktop, so this is tablet-only.) */
@media (min-width: 761px) {
  .ldm-frame { max-width: 600px; margin-left: auto; margin-right: auto; }
  .ldm-section .ld-intro { max-width: 660px; margin-left: auto; margin-right: auto; }
  .ldm-section .ld-headline { font-size: 32px; }
  .ldm-others { padding-left: 16px; padding-right: 16px; }
}

/* Docked coach — fixed to the bottom of the viewport while the demo runs.
   The card scrolls behind it; the active target is auto-scrolled into the
   clear band above it. This is what kills the read-here / tap-there bounce. */
.ldm-coach-dock {
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  margin: 0 auto;
  max-width: 540px;
  z-index: 120;
  box-shadow:
    0 20px 44px -12px rgba(11, 19, 32, 0.72),
    0 0 0 1px rgba(124, 196, 250, 0.10);
  animation: ldm-coach-dock-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes ldm-coach-dock-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ldm-coach-dock .line { font-size: 15px; }
.ldm-coach-dock .sub { margin-bottom: 12px; }
@media (prefers-reduced-motion: reduce) {
  .ldm-coach-dock { animation: none; }
}

/* The kill toggle is a small switch; on touch it needs a ≥44px hit area.
   Extend the tappable region with a transparent overlay so the control
   stays visually compact but is comfortable to flip with a thumb. */
.ldm-toggle-row .ld-toggle { position: relative; }
.ldm-toggle-row .ld-toggle::after {
  content: "";
  position: absolute;
  inset: -14px -16px;
}

/* ---- Bottom sheet (CPC recommendation, Trend chart) ---- */
.ldm-sheet-back {
  position: fixed; inset: 0;
  background: rgba(11, 19, 32, 0.7);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: flex; align-items: flex-end; justify-content: center;
  animation: ldm-back-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes ldm-back-in { from { opacity: 0; } to { opacity: 1; } }
.ldm-sheet {
  width: 100%;
  max-width: 480px;
  background: #111827;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  border: 1px solid #374151;
  border-bottom: 0;
  display: flex; flex-direction: column;
  max-height: 86vh;
  overflow: hidden;
  animation: ldm-sheet-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes ldm-sheet-in {
  from { transform: translateY(100%); }
  to   { transform: translateY(0);    }
}
.ldm-sheet > header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  background: #7F1D1D;
  border-bottom: 1px solid #991B1B;
  flex-shrink: 0;
}
.ldm-sheet > header .t {
  font: 700 14px/1.2 var(--font-sans);
  color: #FEE2E2;
  flex: 1;
}
.ldm-sheet > header .close {
  background: transparent; border: 0; cursor: pointer;
  color: #FECACA;
  font: 700 22px/1 var(--font-sans);
  padding: 0 4px;
  line-height: 1;
}
.ldm-sheet .body {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
}
.ldm-sheet .body p {
  font: 500 14px/1.55 var(--font-sans);
  color: #E5E7EB;
  margin: 0 0 12px;
}
.ldm-sheet .body .protip {
  background: rgba(52, 144, 240, 0.1);
  border: 1px solid rgba(52, 144, 240, 0.25);
  border-radius: 8px;
  padding: 12px 14px;
  color: #DBEAFE;
  font-size: 13px;
}
.ldm-sheet .body .protip b { color: #BFDBFE; }
.ldm-sheet > footer {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px;
  background: #0B1320;
  border-top: 1px solid #1F2937;
}
.ldm-sheet > footer .hint {
  font: 600 11px/1.3 var(--font-sans);
  color: #6B7280;
  letter-spacing: 0.04em;
}
/* Trend sheet specifics */
.ldm-sheet-trend .body .meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
  font: 500 12px/1 var(--font-sans);
  color: #9CA3AF;
}
.ldm-sheet-trend .body .meta b {
  color: #F9FAFB; font-size: 18px; font-weight: 800;
  margin-right: 4px; font-feature-settings: 'tnum';
}
.ldm-sheet-trend .body .meta .warn { color: #FCA5A5; font-weight: 700; }
.ldm-sheet-trend .body .caption {
  font: 500 12px/1.5 var(--font-sans);
  color: #9CA3AF;
  margin: 14px 0 0;
}
.ldm-bigchart {
  width: 100%;
  height: 180px;
  display: block;
  background: transparent;
  border: 1px solid #1F2937;
  border-radius: 8px;
  padding: 4px;
}

/* ---- Win state ---- */
.ldm-win {
  position: relative;
  margin: 0 12px 16px;
  padding: 22px 18px 18px;
  background: linear-gradient(180deg, #052E16 0%, #14532D 100%);
  border: 1px solid rgba(134, 239, 172, 0.3);
  border-radius: 16px;
  overflow: hidden;
  animation: ldm-coach-in 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ldm-win .confetti {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.ldm-win .confetti .bit {
  position: absolute;
  top: -12px;
  border-radius: 1px;
  animation: ldm-confetti linear forwards;
}
@keyframes ldm-confetti {
  to { transform: translateY(280px) rotate(720deg); opacity: 0; }
}
.ldm-win .card {
  position: relative;
  text-align: center;
}
.ldm-win .eyebrow {
  display: inline-block;
  font: 800 9px/1 var(--font-sans);
  letter-spacing: 0.14em;
  color: #86EFAC;
  padding: 5px 9px;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(134, 239, 172, 0.3);
  border-radius: 4px;
  margin-bottom: 14px;
}
.ldm-win .amount {
  font: 800 56px/1 var(--font-sans);
  letter-spacing: -0.04em;
  color: #FFFFFF;
  font-feature-settings: 'tnum';
  margin: 4px 0 6px;
}
.ldm-win .line {
  font: 600 15px/1.3 var(--font-sans);
  color: #DCFCE7;
  margin: 0 0 4px;
}
.ldm-win .math {
  font: 500 12px/1.4 var(--font-sans);
  color: rgba(220, 252, 231, 0.7);
  margin: 0;
}
.ldm-win .actions {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 16px;
}
.ldm-win-primary, .ldm-win-secondary {
  cursor: pointer;
  font: 700 14px/1 var(--font-sans);
  padding: 13px 18px;
  border-radius: 8px;
  border: 1px solid transparent;
}
.ldm-win-primary {
  background: #FFFFFF;
  color: #052E16;
}
.ldm-win-secondary {
  background: transparent;
  color: #DCFCE7;
  border-color: rgba(134, 239, 172, 0.4);
}

.ldm-done {
  padding: 0 12px 16px;
  display: flex; justify-content: center;
}
.ldm-restart-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 16px;
  background: transparent;
  border: 1px solid #374151;
  border-radius: 999px;
  font: 600 13px/1 var(--font-sans);
  color: #9CA3AF;
  cursor: pointer;
  transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
              color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ldm-restart-btn:hover {
  background: #1F2937;
  color: #F9FAFB;
  border-color: #4B5563;
}
.ldm-restart-btn .ic {
  width: 22px; height: 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #3490F0, #5660F0);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}

/* The desktop `.ld-section` (zoom-takeover demo) and the inline mobile
   demo must never both render. The JS branch handles which one mounts
   based on viewport, so no `display: none` is needed here — but if a
   stale build ever leaves both in the tree, prefer the mobile one. */

/* ============================================================
   Small-phone refinements
   ============================================================ */
@media (max-width: 380px) {
  .ldm-section .ld-headline { font-size: 24px; }
  .ldm-section .ld-sub { font-size: 14px; }
  .ldm-card { margin: 4px 10px 14px; padding: 14px; }
  .ldm-coach { margin: 0 10px 12px; padding: 12px 14px; }
  .ldm-win  { margin: 0 10px 14px; padding: 20px 16px 16px; }
  .ldm-card-hero .ld-score { font-size: 20px; min-width: 70px; padding: 12px 14px; }
  .ldm-win .amount { font-size: 48px; }
  .ldm-stats .stat .v { font-size: 15px; }
  .ldm-cpc .row .v { font-size: 16px; }
}

/* ============================================================
   2026-06 HANDOFF ADDITIONS
   ============================================================ */

/* ---------- Demo stage side label ("WITH BREEZEWAY") ---------- */
.ld-side-label {
  position: absolute;
  top: -13px; left: 26px;
  z-index: 30;
  background: #16A34A; color: #F0FDF4;
  font: 800 10.5px/1 var(--font-sans);
  letter-spacing: 0.2em;
  padding: 7px 12px 6px;
  border-radius: 6px;
  box-shadow: 0 6px 16px -4px rgba(22,163,74,0.45);
}

/* ---------- Live-demo static fallback (reduced motion) ---------- */
.ld-static-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 28px;
}
.ld-static-step {
  background: #fff;
  border: 1px solid rgba(11,27,61,0.10);
  border-radius: 14px;
  padding: 18px 18px 16px;
}
.ld-static-step .badge {
  display: inline-block;
  font: 800 9.5px/1 var(--font-sans); letter-spacing: 0.16em;
  color: #1D4ED8; background: rgba(52,144,240,0.12);
  padding: 5px 8px; border-radius: 5px;
  margin-bottom: 10px;
}
.ld-static-step .line {
  margin: 0 0 6px;
  font: 700 14.5px/1.35 var(--font-sans); color: #0B1B3D;
}
.ld-static-step .sub {
  margin: 0;
  font: 500 12.5px/1.5 var(--font-sans); color: #4B5563;
}
@media (max-width: 900px) {
  .ld-static-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .ld-static-steps { grid-template-columns: 1fr; }
}

/* ---------- Win overlay payoff line ---------- */
.ld-win .card .payoff,
.ldm-win .card .payoff {
  margin: 14px 0 0;
  font: 500 14px/1.5 var(--font-sans);
  color: #CBD5E1;
}
.ld-win .card .payoff b,
.ldm-win .card .payoff b { color: #fff; }

/* ---------- Mobile demo: CPA/ROAS stat highlight (step 2) ---------- */
.ldm-stats .stat.target-pulse {
  border-radius: 10px;
  animation: ldm-target-glow 1.8s ease-in-out infinite;
}
/* CPC block is context-only now (not a button) */
.ldm-cpc { text-align: left; width: 100%; }

/* ---------- Differentiator closing line ---------- */
.bw-diff-closing {
  margin: 28px auto 0;
  max-width: 62ch;
  text-align: center;
  font: 600 16px/1.6 var(--font-sans);
  color: #1F2937;
  text-wrap: pretty;
}

/* ---------- Featured case study (Conner / Ember and Root) ---------- */
.bw-case {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 48px;
  align-items: start;
  margin-top: 44px;
  padding: 40px;
  background: #0B1B3D;
  border-radius: 22px;
  color: #fff;
}
.bw-case-copy h3 {
  margin: 0 0 14px;
  font: 800 26px/1.2 var(--font-sans);
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}
.bw-case-copy .body {
  margin: 0 0 22px;
  font: 500 15px/1.65 var(--font-sans);
  color: #CBD5E1;
}
.bw-case-quote {
  margin: 0;
  border-left: 3px solid #7CC4FA;
  padding: 4px 0 4px 18px;
}
.bw-case-quote p {
  margin: 0 0 14px;
  font: 500 14px/1.65 var(--font-sans);
  color: #E5E7EB;
}
.bw-case-quote footer {
  display: flex; align-items: baseline; gap: 10px;
  font: 500 13px/1 var(--font-sans); color: #94A3B8;
}
.bw-case-quote footer b { color: #fff; font-weight: 700; }
.bw-case-visual { margin: 0; }
.bw-case-visual image-slot {
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,0.05);
  height: 340px;
}
@media (max-width: 860px) {
  .bw-case-visual image-slot { height: 240px; }
}
.bw-case-visual figcaption {
  margin-top: 12px;
  font: 500 12px/1.55 var(--font-sans);
  color: #94A3B8;
}
@media (max-width: 860px) {
  .bw-case { grid-template-columns: 1fr; gap: 28px; padding: 26px; }
}

/* ---------- Bad Day Detector — scatter + weather day cards ---------- */
.bw-bdd-cta { margin-top: 4px; }
.bw-bdd-visual {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(124,196,250,0.18);
  border-radius: 16px;
  padding: 18px 18px 16px;
  display: flex; flex-direction: column; gap: 12px;
  min-width: 0;
}
.bw-bdd-visual .head {
  font: 700 10.5px/1.35 var(--font-sans); letter-spacing: 0.14em;
  text-transform: uppercase; color: #93C5FD;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.bw-bdd-visual .head .live {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 11px/1 var(--font-sans); color: #86EFAC;
  text-transform: uppercase; letter-spacing: 0.12em;
  flex-shrink: 0;
}
.bw-bdd-visual .head .live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22C55E;
  box-shadow: 0 0 0 4px rgba(34,197,94,0.25);
}
.bw-bdd-scatter { width: 100%; height: auto; display: block; }
.bw-bdd-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.bw-bdd-card {
  border-radius: 12px;
  padding: 12px 12px 11px;
  display: flex; flex-direction: column; gap: 4px;
  border: 1px solid transparent;
}
.bw-bdd-card .icn { display: block; margin-bottom: 2px; }
.bw-bdd-card .status {
  font: 800 12px/1 var(--font-sans); letter-spacing: 0.14em;
}
.bw-bdd-card .date {
  font: 600 10.5px/1 var(--font-sans); letter-spacing: 0.04em;
  color: #94A3B8; text-transform: uppercase;
}
.bw-bdd-card .note {
  margin-top: 4px;
  font: 500 10.5px/1.4 var(--font-sans); color: #94A3B8;
}
.bw-bdd-card.normal {
  background: rgba(52,144,240,0.12);
  border-color: rgba(124,196,250,0.28);
  color: #7CC4FA;
}
.bw-bdd-card.normal .status { color: #BFDBFE; }
.bw-bdd-card.bad {
  background: rgba(245,158,11,0.12);
  border-color: rgba(245,158,11,0.30);
  color: #FCD34D;
}
.bw-bdd-card.bad .status { color: #FDE68A; }
.bw-bdd-card.verybad {
  background: rgba(239,68,68,0.13);
  border-color: rgba(239,68,68,0.32);
  color: #FCA5A5;
}
.bw-bdd-card.verybad .status { color: #FECACA; }
@media (max-width: 540px) {
  .bw-bdd-cards { grid-template-columns: 1fr; }
}