/* colors_and_type.css */
/* ============================================================
   Breezeway Design System — Tokens
   Color is functional, not decorative.
   Green = good/scale  Yellow = caution  Red = problem/kill
   Blue = neutral data  Brand-blue trio = logo only
   ============================================================ */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/Inter-VariableFont.ttf") format("truetype-variations"),
         url("fonts/Inter-VariableFont.ttf") format("truetype");
}
@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/Inter-VariableFont.ttf") format("truetype-variations"),
         url("fonts/Inter-VariableFont.ttf") format("truetype");
}

:root {
    /* ---------- Brand (logo only — do not decorate) ---------- */
    --brand-navy:        #0B1B3D;  /* deep navy used on white wordmark bg */
    --brand-navy-deep:   #061030;  /* keyart bg variant */
    --brand-blue-sky:    #7CC4FA;  /* top bar of triple-bar mark */
    --brand-blue:        #3490F0;  /* middle bar */
    --brand-blue-iris:   #5660F0;  /* bottom bar */

    /* ---------- Dark UI surfaces (the app) ----------
       Mirrors Tailwind gray scale used in the codebase. */
    --bg-base:           #111827;  /* gray-900  body */
    --bg-elev-1:         #1F2937;  /* gray-800  nav, cards */
    --bg-elev-2:         #252F3E;  /* gray-775  alt row, weekend */
    --bg-elev-3:         #2B3544;  /* gray-750  business switcher */
    --bg-elev-4:         #313B4B;  /* gray-725  hover row */
    --bg-elev-5:         #374151;  /* gray-700  borders, hover surface */

    --border-subtle:     #374151;  /* gray-700 */
    --border-default:    #4B5563;  /* gray-600 */
    --border-strong:     #6B7280;  /* gray-500 — scrollbar */

    /* ---------- Foreground (dark mode) ---------- */
    --fg-1:              #FFFFFF;  /* primary white */
    --fg-2:              #F3F4F6;  /* gray-100 row text */
    --fg-3:              #D1D5DB;  /* gray-300 body */
    --fg-4:              #9CA3AF;  /* gray-400 muted / labels */
    --fg-5:              #6B7280;  /* gray-500 placeholder */

    /* ---------- Light surfaces (marketing & Bad Day Detector) ---------- */
    --lt-bg:             #FFFFFF;
    --lt-bg-soft:        #F9FAFB;  /* gray-50 */
    --lt-bg-mute:        #F3F4F6;  /* gray-100 */
    --lt-border:         #E5E7EB;  /* gray-200 */
    --lt-fg-1:           #0B1B3D;  /* brand navy used as primary ink */
    --lt-fg-2:           #1F2937;  /* gray-800 */
    --lt-fg-3:           #4B5563;  /* gray-600 body */
    --lt-fg-4:           #6B7280;  /* gray-500 muted */

    /* ---------- Semantic — these carry meaning ---------- */
    /* Green = good / scale */
    --good-50:           #F0FDF4;
    --good-100:          #DCFCE7;
    --good-300:          #86EFAC;
    --good-500:          #22C55E;
    --good-600:          #16A34A;
    --good-700:          #15803D;
    --good-900:          #14532D;
    /* Yellow / amber = caution */
    --warn-50:           #FEFCE8;
    --warn-100:          #FEF9C3;
    --warn-300:          #FDE047;
    --warn-400:          #FACC15;
    --warn-500:          #EAB308;
    --warn-700:          #A16207;
    --warn-900:          #713F12;
    /* Red = problem / kill */
    --bad-50:            #FEF2F2;
    --bad-100:           #FEE2E2;
    --bad-300:           #FCA5A5;
    --bad-500:           #EF4444;
    --bad-600:           #DC2626;
    --bad-700:           #B91C1C;
    --bad-900:           #7F1D1D;
    /* Blue = neutral data */
    --data-50:           #EFF6FF;
    --data-100:          #DBEAFE;
    --data-300:          #93C5FD;
    --data-500:          #3B82F6;
    --data-600:          #2563EB;

    /* Purple→pink = benchmark / BreezeBrain custom target.
       Official accent: reserved EXCLUSIVELY for "your goal vs. actual"
       annotations (bento goal row, demo trend overlay + chart marks).
       Never used for status — status is always green/amber/red. */
    --benchmark-300:     #C4B5FD;  /* violet-300 — trend overlay line on dark */
    --benchmark-400:     #A855F7;  /* purple-500 — chart-mark icon on dark */
    --benchmark-500:     #8B5CF6;  /* violet-500 — gradient start */
    --benchmark-600:     #EC4899;  /* pink-500 — gradient end */
    --benchmark-700:     #6D28D9;  /* violet-700 — annotation ink on light tint */
    --benchmark-grad:    linear-gradient(120deg, #8B5CF6 0%, #EC4899 100%);
    --data-700:          #1D4ED8;
    --data-900:          #1E3A8A;

    /* BreezeScore badges — exact tints used in the app */
    --score-green-bg:    rgba(34, 197, 94, 0.50);   /* green-500/50 */
    --score-green-fg:    #F0FDF4;
    --score-amber-bg:    rgba(253, 224, 71, 0.60);  /* yellow-300/60 */
    --score-amber-fg:    #1F2937;
    --score-red-bg:      rgba(239, 68, 68, 0.50);   /* red-500/50 */
    --score-red-fg:      #FEF2F2;
    --score-null-bg:     #374151;                    /* gray-700 */
    --score-null-fg:     #9CA3AF;

    /* Trend chips */
    --trend-up-soft:     rgba(34, 197, 94, 0.30);
    --trend-up-strong:   rgba(34, 197, 94, 0.50);
    --trend-down-soft:   rgba(239, 68, 68, 0.30);
    --trend-down-strong: rgba(239, 68, 68, 0.50);

    /* ---------- Type ---------- */
    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --font-mono: "Courier New", ui-monospace, SFMono-Regular, Menlo, Monaco,
                 Consolas, "Liberation Mono", monospace;
    --font-num:  "Inter", ui-sans-serif, system-ui, sans-serif;
    /* tabular numerals for any number that should align in a column */

    /* Scale — used across product + marketing.
       Marketing headlines lean heavier (800–900); product headers lean 600. */
    --fs-xxs:   10px;   /* labels in dense tables */
    --fs-xs:    12px;   /* meta, small labels */
    --fs-sm:    14px;   /* secondary body, dense UI */
    --fs-base:  16px;   /* body */
    --fs-lg:    18px;
    --fs-xl:    20px;
    --fs-2xl:   24px;   /* card titles */
    --fs-3xl:   30px;   /* page H1 in app */
    --fs-4xl:   36px;
    --fs-5xl:   48px;   /* marketing H2 */
    --fs-6xl:   60px;
    --fs-7xl:   72px;   /* marketing hero */
    --fs-8xl:   96px;   /* the big number — "$4.2M+/mo" */

    --lh-tight:  1.05;
    --lh-snug:   1.2;
    --lh-normal: 1.5;
    --lh-loose:  1.75;

    --ls-hero:   -0.035em;  /* tight hero tracking */
    --ls-tight:  -0.02em;
    --ls-normal: -0.011em;  /* Inter looks best slightly negative */
    --ls-eyebrow: 0.08em;   /* uppercase eyebrow labels */

    /* ---------- Spacing scale (Tailwind-compatible) ---------- */
    --space-0:  0;
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    /* ---------- Radius ---------- */
    --r-sm:   4px;    /* rounded-sm — trend chips */
    --r-md:   6px;    /* rounded-md — score pill, sidenav item */
    --r-lg:   8px;    /* rounded-lg — buttons, inputs, alerts */
    --r-xl:   12px;
    --r-2xl:  16px;
    --r-full: 9999px; /* status dot, badge, avatar */

    /* ---------- Shadow ---------- */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.20);
    --shadow:    0 4px 6px -1px rgb(0 0 0 / 0.35), 0 2px 4px -2px rgb(0 0 0 / 0.30);
    --shadow-lg: 0 10px 25px -3px rgb(0 0 0 / 0.40), 0 4px 10px -4px rgb(0 0 0 / 0.30);
    /* Marketing (light) shadow */
    --shadow-lt: 0 8px 24px -10px rgb(11 27 61 / 0.18), 0 1px 2px rgb(11 27 61 / 0.06);

    /* ---------- Motion ---------- */
    --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in:  cubic-bezier(0.4, 0, 1, 1);
    --dur-1:    120ms;
    --dur-2:    180ms;  /* default ui transitions */
    --dur-3:    250ms;  /* sidebar collapse */
    --dur-4:    400ms;
}

/* ============================================================
   Semantic typography (use these in components)
   ============================================================ */
html { font-family: var(--font-sans); }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.bw-eyebrow {
    font: 600 var(--fs-xs)/1.2 var(--font-sans);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--fg-4);
}
.bw-h1 {
    font: 800 var(--fs-5xl)/var(--lh-tight) var(--font-sans);
    letter-spacing: var(--ls-hero);
    color: var(--fg-1);
}
.bw-h2 {
    font: 700 var(--fs-3xl)/var(--lh-snug) var(--font-sans);
    letter-spacing: var(--ls-tight);
    color: var(--fg-1);
}
.bw-h3 {
    font: 600 var(--fs-xl)/var(--lh-snug) var(--font-sans);
    letter-spacing: var(--ls-normal);
    color: var(--fg-1);
}
.bw-h4 {
    font: 600 var(--fs-base)/var(--lh-snug) var(--font-sans);
    color: var(--fg-1);
}
.bw-body {
    font: 400 var(--fs-base)/var(--lh-normal) var(--font-sans);
    color: var(--fg-3);
}
.bw-body-sm {
    font: 400 var(--fs-sm)/var(--lh-normal) var(--font-sans);
    color: var(--fg-3);
}
.bw-label {
    font: 500 var(--fs-xs)/1.3 var(--font-sans);
    color: var(--fg-4);
}
.bw-num-hero {
    font: 800 var(--fs-7xl)/0.95 var(--font-sans);
    letter-spacing: var(--ls-hero);
    font-variant-numeric: tabular-nums;
    color: var(--fg-1);
}
.bw-num {
    font: 600 var(--fs-2xl)/1.1 var(--font-sans);
    letter-spacing: var(--ls-tight);
    font-variant-numeric: tabular-nums;
    color: var(--fg-1);
}
.bw-mono {
    font: 400 var(--fs-sm)/var(--lh-normal) var(--font-mono);
    color: var(--fg-3);
}

/* marketing.css */
/* Marketing site UI Kit — Breezeway light mode, with personality */
@import url("colors_and_type.css");

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: #FBF9F4; /* warm off-white — the coach's whiteboard, not lifeless gray */
  color: var(--lt-fg-1); font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* ---------- Layout ---------- */
.mk-container { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.mk-section { padding: 80px 0; position: relative; }
.mk-section.sm { padding: 64px 0; }
.mk-section.navy { background: #0B1B3D; color: #fff; }
.mk-section.navy .mk-eyebrow { color: #93C5FD; }
.mk-section.navy .mk-h2, .mk-section.navy .mk-h3 { color: #fff; }
.mk-section.navy .mk-lead { color: #CBD5E1; }
.mk-section.cream { background: #FBF9F4; }

/* ---------- Brand-blue gradient text helper ---------- */
.mk-grad {
  background: linear-gradient(120deg, #7CC4FA 0%, #3490F0 50%, #5660F0 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.mk-grad-light {
  background: linear-gradient(180deg, #FFFFFF 0%, #93C5FD 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- Type ---------- */
.mk-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 12px/1 var(--font-sans); color: #0B1B3D;
  text-transform: uppercase; letter-spacing: 0.18em; margin: 0;
}
.mk-eyebrow .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--good-500); box-shadow: 0 0 0 4px rgba(34,197,94,0.18); }
.mk-eyebrow .bars { display: inline-flex; flex-direction: column; gap: 2px; }
.mk-eyebrow .bars span { display: block; height: 2px; border-radius: 1px; }

.mk-h1 { font: 900 76px/0.95 var(--font-sans); letter-spacing: -0.04em; color: #0B1B3D; margin: 0; }
.mk-h2 { font: 900 56px/1 var(--font-sans); letter-spacing: -0.03em; color: #0B1B3D; margin: 0 0 16px; }
.mk-h3 { font: 800 28px/1.15 var(--font-sans); letter-spacing: -0.025em; color: #0B1B3D; margin: 0 0 10px; }
.mk-lead { font: 400 21px/1.5 var(--font-sans); color: #4B5563; margin: 0; max-width: 56ch; }
.mk-lead b { color: #0B1B3D; font-weight: 700; }
.mk-body { font: 400 16px/1.6 var(--font-sans); color: #4B5563; }

/* ---------- Buttons ---------- */
.mk-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 24px; border-radius: 999px;
  font: 700 15px/1 var(--font-sans); letter-spacing: -0.005em;
  border: 1px solid transparent; cursor: pointer;
  transition: transform 0.18s var(--ease-out), background 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
  text-decoration: none; white-space: nowrap;
}
.mk-btn:hover { transform: translateY(-2px); }
.mk-btn:active { transform: translateY(0); }
.mk-btn-primary { background: #0B1B3D; color: #fff; box-shadow: 0 6px 0 -2px rgba(11,27,61,0.15); }
.mk-btn-primary:hover { background: #1F2937; box-shadow: 0 10px 24px -8px rgba(11,27,61,0.4); }
.mk-btn-secondary { background: #fff; color: #0B1B3D; border-color: #0B1B3D; }
.mk-btn-secondary:hover { background: #0B1B3D; color: #fff; }
.mk-btn-ghost { background: transparent; color: #0B1B3D; }
.mk-btn-ghost:hover { background: rgba(11,27,61,0.06); }
.mk-btn-inverse { background: #fff; color: #0B1B3D; box-shadow: 0 6px 0 -2px rgba(255,255,255,0.15); }
.mk-btn-inverse:hover { background: #F0F4FF; box-shadow: 0 10px 24px -8px rgba(0,0,0,0.25); }
.mk-btn-sm { padding: 10px 16px; font-size: 13px; }
.mk-btn svg { width: 16px; height: 16px; }

/* ---------- Shared keyboard focus ring ----------
   Every link/button/control gets a consistent visible ring; bespoke rings
   (hero dots, tier pill, restart FAB) override via higher specificity. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
[role="tab"]:focus-visible {
  outline: 2px solid #3490F0;
  outline-offset: 3px;
}
/* Dark navy surfaces — use the sky blue so the ring stays visible */
.mk-footer a:focus-visible,
.bw-bdd a:focus-visible,
.bw-bdd button:focus-visible,
.bw-bdd input:focus-visible,
.bw-guarantee a:focus-visible {
  outline-color: #7CC4FA;
}

/* ---------- Navbar ---------- */
.mk-nav {
  position: sticky; top: 14px; z-index: 30;
  background: rgba(255,255,255,0.85); backdrop-filter: blur(14px);
  border: 1px solid rgba(11,27,61,0.08);
  border-radius: 9999px;
  max-width: 1100px; margin: 14px auto 0;
  box-shadow: 0 10px 30px -16px rgba(11,27,61,0.18);
}
.mk-nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 12px 22px; }
.mk-nav-left { display: flex; align-items: center; gap: 36px; }
.mk-nav-links { display: flex; gap: 24px; }
.mk-nav-links a {
  font: 500 14px/1 var(--font-sans); color: #4B5563; text-decoration: none;
  position: relative; padding: 6px 0;
  transition: color 0.18s;
}
.mk-nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: linear-gradient(90deg, #3490F0, #5660F0);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.25s var(--ease-out);
  border-radius: 2px;
}
.mk-nav-links a:hover { color: #0B1B3D; }
.mk-nav-links a:hover::after { transform: scaleX(1); }
.mk-nav-logo img { height: 22px; display: block; }

/* Scrolled state — toggled by HomeNavbar past 30px. Firms the pill up so it
   reads as a surface (not a wash) once content is moving underneath it. */
.mk-nav.solid {
  background: rgba(255,255,255,0.97);
  border-color: rgba(11,27,61,0.14);
  box-shadow: 0 16px 36px -16px rgba(11,27,61,0.30);
}

/* ---------- HERO ---------- */
.mk-hero { padding: 56px 0 64px; position: relative; overflow: hidden; }
.mk-hero-inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: start; }
.mk-hero-stack { padding-top: 20px; }
.mk-hero-stack { position: relative; }

/* big underline-marker accent under "knowing." */
.mk-marker-underline {
  position: relative; display: inline-block;
}
.mk-marker-underline:after {
  content: ""; position: absolute; left: -4px; right: -4px; bottom: -2px;
  height: 14px;
  background: linear-gradient(90deg, #FACC15 0%, #FACC15 80%, transparent 100%);
  border-radius: 4px;
  z-index: -1;
  transform: rotate(-1.2deg);
  opacity: 0.85;
}

.mk-hero-cta { display: flex; gap: 12px; margin-top: 36px; align-items: center; }
.mk-hero-tag { font: 500 13px/1.4 var(--font-sans); color: #4B5563; }
.mk-hero-tag b { color: #0B1B3D; font-weight: 600; }

.mk-hero-stats { display: flex; gap: 36px; margin-top: 48px; padding-top: 32px; border-top: 1px dashed rgba(11,27,61,0.15); }
.mk-hero-stats .stat { display: flex; flex-direction: column; }
.mk-hero-stats .num { font: 900 36px/1 var(--font-sans); letter-spacing: -0.03em; color: #0B1B3D; font-variant-numeric: tabular-nums; }
.mk-hero-stats .lbl { font: 500 12px/1.4 var(--font-sans); color: #4B5563; margin-top: 6px; max-width: 18ch; }

/* ---------- Tilted product preview frame ---------- */
.mk-screen-wrap {
  position: relative;
  transform: rotate(2deg);
  transition: transform 0.4s var(--ease-out);
}
.mk-screen-wrap:hover { transform: rotate(0deg) scale(1.02); }
.mk-screen {
  background: #111827; border-radius: 16px; border: 1px solid #1F2937;
  padding: 14px;
  box-shadow:
    0 40px 80px -30px rgba(11,27,61,0.45),
    0 18px 40px -20px rgba(11,27,61,0.25);
  position: relative;
}
.mk-screen .chrome { display: flex; gap: 6px; padding: 0 4px 10px; }
.mk-screen .chrome span { width: 11px; height: 11px; border-radius: 999px; background: #374151; }
.mk-screen .chrome span:first-child { background: #EF4444; }
.mk-screen .chrome span:nth-child(2) { background: #FACC15; }
.mk-screen .chrome span:nth-child(3) { background: #22C55E; }

/* Sticky-note annotation */
.mk-sticky {
  position: absolute; z-index: 3;
  background: #FEF08A;
  padding: 14px 16px;
  border-radius: 4px;
  box-shadow: 0 14px 28px -8px rgba(11,27,61,0.25), 0 4px 8px -4px rgba(11,27,61,0.12);
  font: 600 14px/1.3 var(--font-sans); color: #422006;
  max-width: 200px;
  transform: rotate(-3deg);
}
.mk-sticky b { font-weight: 800; }
.mk-sticky .meta { display: block; font: 500 11px/1 var(--font-sans); color: #713F12; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 8px; }

/* Hand-drawn marker arrow */
.mk-arrow { position: absolute; z-index: 2; pointer-events: none; }
.mk-arrow path { fill: none; stroke: #0B1B3D; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mk-arrow.warn path { stroke: #B45309; }

/* Floating triple-bar mark — decorative motif */
.mk-mark-float {
  position: absolute; opacity: 0.06; pointer-events: none; z-index: 0;
}

/* ---------- BreezeScore (light marketing context) ---------- */
.mk-score { display: inline-flex; justify-content: center; align-items: center; min-width: 46px; padding: 4px 10px; border-radius: 6px; font: 600 13px/1.2 var(--font-sans); font-variant-numeric: tabular-nums; }
.mk-score.green  { background: rgba(34,197,94,0.55); color: #052E16; }
.mk-score.amber  { background: rgba(253,224,71,0.75); color: #422006; }
.mk-score.red    { background: rgba(239,68,68,0.55); color: #450A0A; }

/* ---------- Logo marquee ---------- */
.mk-marquee {
  overflow: hidden; padding: 28px 0; position: relative;
  border-top: 1px dashed rgba(11,27,61,0.15);
  border-bottom: 1px dashed rgba(11,27,61,0.15);
  background: #FBF9F4;
}
.mk-marquee-eyebrow {
  text-align: center;
  font: 600 11px/1 var(--font-sans); color: #6B7280;
  text-transform: uppercase; letter-spacing: 0.18em;
  margin: 0 0 18px;
}
.mk-marquee-track {
  display: flex; gap: 64px; width: max-content;
  animation: mk-scroll 32s linear infinite;
}
@keyframes mk-scroll { to { transform: translateX(-50%); } }
.mk-marquee-track .logo { font: 800 24px/1 var(--font-sans); letter-spacing: -0.03em; color: #0B1B3D; opacity: 0.78; white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; }
.mk-marquee-track .logo.serif { font-family: Georgia, serif; font-style: italic; font-weight: 400; }
.mk-marquee-track .logo .dot { width: 6px; height: 6px; border-radius: 999px; background: #0B1B3D; opacity: 0.35; }

/* ---------- Bento feature grid ---------- */
.mk-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.mk-bento .card {
  background: #fff; border: 1px solid rgba(11,27,61,0.1); border-radius: 20px;
  padding: 32px; position: relative; overflow: hidden;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.mk-bento .card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(11,27,61,0.18); }
.mk-bento .card.wide { grid-column: span 4; }
.mk-bento .card.narrow { grid-column: span 2; }
.mk-bento .card.half { grid-column: span 3; }
.mk-bento .card.dark { background: #0B1B3D; color: #fff; border-color: #0B1B3D; }
.mk-bento .card.dark .mk-h3 { color: #fff; }
.mk-bento .card.dark .mk-body { color: #CBD5E1; }
.mk-bento .card.dark .mk-body b { color: #fff; }

.mk-bento .icn {
  width: 52px; height: 52px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
}
.mk-bento .icn svg { width: 24px; height: 24px; }

/* ---------- Big step numbers ---------- */
.mk-step-num {
  font: 900 160px/0.85 var(--font-sans);
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
  margin: 0 0 24px;
}

/* ---------- Comparison ---------- */
.mk-compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  background: #fff; border: 1px solid rgba(11,27,61,0.1); border-radius: 20px;
  overflow: hidden;
}
.mk-compare > div { padding: 36px 32px; }
.mk-compare .before { border-right: 1px dashed rgba(11,27,61,0.15); background: #FBF9F4; }
.mk-compare h4 { font: 800 14px/1 var(--font-sans); text-transform: uppercase; letter-spacing: 0.12em; margin: 0 0 22px; display: inline-flex; align-items: center; gap: 8px; }
.mk-compare .before h4 { color: #B45309; }
.mk-compare .after h4 { color: #15803D; }
.mk-compare ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.mk-compare li { font: 500 16px/1.4 var(--font-sans); color: #1F2937; display: flex; gap: 10px; align-items: flex-start; }
.mk-compare .before li:before { content: "✗"; color: #B45309; font-weight: 800; flex-shrink: 0; }
.mk-compare .after li:before  { content: "✓"; color: #15803D; font-weight: 800; flex-shrink: 0; }

/* ---------- Testimonial ---------- */
.mk-quote-mark {
  font: 900 200px/0.6 Georgia, serif; color: #3490F0; opacity: 0.4; display: block; margin: 0 0 -40px; user-select: none;
}
.mk-quote { font: 600 36px/1.25 var(--font-sans); letter-spacing: -0.025em; color: #fff; margin: 0; max-width: 22ch; }
.mk-quote-attribution { display: flex; align-items: center; gap: 14px; margin-top: 32px; }
.mk-quote-attribution .ava { width: 48px; height: 48px; border-radius: 999px; background: #7CC4FA; color: #0B1B3D; display: inline-flex; align-items: center; justify-content: center; font: 800 15px/1 var(--font-sans); }
.mk-quote-attribution .who { font: 700 15px/1.2 var(--font-sans); color: #fff; }
.mk-quote-attribution .biz { font: 500 13px/1.2 var(--font-sans); color: #93C5FD; margin-top: 4px; }

/* ---------- Pricing ---------- */
.mk-price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mk-price {
  background: #fff; border: 1px solid rgba(11,27,61,0.1); border-radius: 22px;
  padding: 36px; display: flex; flex-direction: column;
  transition: transform 0.2s var(--ease-out);
  position: relative;
}
.mk-price:hover { transform: translateY(-6px); }
.mk-price.featured { background: #0B1B3D; color: #fff; border-color: #0B1B3D; transform: scale(1.03); }
.mk-price.featured:hover { transform: scale(1.03) translateY(-6px); }
.mk-price.featured .name { color: #93C5FD; }
.mk-price.featured .desc, .mk-price.featured .offer, .mk-price.featured li { color: #CBD5E1; }
.mk-price.featured .badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%) rotate(-2deg);
  background: #FACC15; color: #422006; padding: 6px 14px;
  font: 800 11px/1 var(--font-sans); text-transform: uppercase; letter-spacing: 0.12em;
  border-radius: 6px; box-shadow: 0 6px 12px -4px rgba(11,27,61,0.3);
}
.mk-price .name { font: 700 12px/1 var(--font-sans); text-transform: uppercase; letter-spacing: 0.12em; color: #6B7280; margin-bottom: 16px; }
.mk-price .amt { font: 900 56px/1 var(--font-sans); letter-spacing: -0.035em; color: #0B1B3D; }
.mk-price.featured .amt { color: #fff; }
.mk-price .amt small { font: 600 14px/1 var(--font-sans); color: #6B7280; margin-left: 4px; }
.mk-price.featured .amt small { color: #93C5FD; }
.mk-price .desc { font: 500 14px/1.5 var(--font-sans); color: #4B5563; margin: 10px 0 10px; min-height: 44px; }
.mk-price .offer { font: 500 14px/1.5 var(--font-sans); color: #4B5563; margin: 0 0 28px; }
.mk-price ul { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 12px; }
.mk-price li { font: 500 14px/1.4 var(--font-sans); color: #1F2937; display: flex; gap: 10px; align-items: flex-start; }
.mk-price li svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--good-600); margin-top: 1px; }
.mk-price.featured li svg { color: #86EFAC; }

/* ---------- Final CTA ---------- */
.mk-final {
  text-align: center; padding: 140px 24px;
  background:
    radial-gradient(60% 80% at 50% 50%, rgba(124,196,250,0.10) 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;
}
.mk-final h2 { font: 900 96px/0.9 var(--font-sans); letter-spacing: -0.045em; color: #0B1B3D; margin: 0 auto 24px; max-width: 12ch; }

/* ---------- Footer ---------- */
.mk-footer { background: #0B1B3D; color: #CBD5E1; padding: 80px 0 40px; position: relative; overflow: hidden; }
.mk-footer-inner { position: relative; z-index: 2; }
.mk-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; }
.mk-footer h4 { font: 700 12px/1 var(--font-sans); text-transform: uppercase; letter-spacing: 0.12em; color: #fff; margin: 0 0 20px; }
.mk-footer a { display: block; font: 500 14px/2.2 var(--font-sans); color: #94A3B8; text-decoration: none; transition: color 0.18s; }
.mk-footer a:hover { color: #fff; }
.mk-footer .colophon { display: flex; justify-content: space-between; align-items: center; margin-top: 56px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.1); font: 500 13px/1 var(--font-sans); color: #94A3B8; }
.mk-footer .big-mark {
  position: absolute; right: -60px; bottom: -80px; width: 480px; height: auto; opacity: 0.08; z-index: 1;
}

/* home.css */
/* ============================================================
   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 em { font-style: normal; color: rgb(28, 158, 117); }
.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: italic 500 18px/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 { padding-top: 24px; }
  .bw-case-visual image-slot { height: 240px; width: 100%; max-width: 100%; }
}
.bw-case-visual figcaption {
  margin-top: 12px;
  font: 500 12px/1.55 var(--font-sans);
  color: #94A3B8;
}
.bw-case { grid-template-columns: 0.9fr 2fr; }
@media (max-width: 860px) {
  .bw-case { grid-template-columns: 1fr; gap: 28px; padding: 26px; }
  .bw-case-visual { width: 100%; }
}

/* ---------- 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; }
}

/* animations.css */
/* ============================================================
   Animations, scroll reveals, backgrounds — added on top of
   marketing.css. The brand stays disciplined; the page comes alive.
   ============================================================ */

/* ---------- Reveal-on-scroll — transform only, always visible ----------
   The element is always fully opaque so screenshots/print/no-JS render
   correctly. The reveal is a subtle 12px lift into place when scrolled in.
*/
.reveal {
  transform: translateY(16px);
  transition: transform 0.7s var(--ease-out);
  will-change: transform;
}
.reveal.in { transform: translateY(0); }

.reveal-stagger > * {
  transform: translateY(12px);
  opacity: 0.55;
  transition: transform 0.6s var(--ease-out), opacity 0.6s var(--ease-out);
}
.reveal-stagger.in > * { transform: translateY(0); opacity: 1; }
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0.00s; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 0.06s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 0.12s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 0.18s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 0.24s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 0.30s; }
.reveal-stagger.in > *:nth-child(7) { transition-delay: 0.36s; }
.reveal-stagger.in > *:nth-child(8) { transition-delay: 0.42s; }

/* ---------- Hero background: drifting dot grid + radial wash ---------- */
.mk-hero {
  background:
    radial-gradient(60% 80% at 12% 18%, rgba(124,196,250,0.20) 0%, transparent 60%),
    radial-gradient(50% 60% at 95% 70%, rgba(86,96,240,0.10) 0%, transparent 60%),
    #FBF9F4;
  position: relative;
}
.mk-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(11,27,61,0.10) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
  background-position: 0 0;
  mask-image: radial-gradient(80% 80% at 50% 50%, #000 40%, transparent 90%);
  -webkit-mask-image: radial-gradient(80% 80% at 50% 50%, #000 40%, transparent 90%);
  animation: dotDrift 26s linear infinite;
  z-index: 0;
  pointer-events: none;
}
.mk-hero > .mk-container { position: relative; z-index: 1; }
@keyframes dotDrift {
  0%   { background-position: 0 0; }
  100% { background-position: 88px 44px; }
}

/* ---------- Section dot grid wash (lighter) ---------- */
.mk-section.dotted::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(11,27,61,0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  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;
  z-index: 0;
}
.mk-section > .mk-container { position: relative; z-index: 1; }

/* ---------- Sticky notes: idle drift ---------- */
.mk-sticky { animation: stickyFloat 6s ease-in-out infinite; }
.mk-sticky:nth-child(2) { animation-delay: -3s; animation-duration: 7s; }
@keyframes stickyFloat {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50%      { transform: rotate(-1.5deg) translateY(-6px); }
}

/* ---------- Marker arrow: draw on entry ---------- */
.mk-arrow path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: drawArrow 1.4s var(--ease-out) 0.6s forwards;
}
.mk-arrow path:nth-child(2) { animation-delay: 1.6s; animation-duration: 0.5s; }
@keyframes drawArrow {
  to { stroke-dashoffset: 0; }
}

/* ---------- Pulsing eyebrow dot ---------- */
.mk-eyebrow .dot {
  animation: dotPulse 2.4s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(34,197,94,0.18); }
  50%      { box-shadow: 0 0 0 10px rgba(34,197,94,0); }
}

/* ---------- Hero CTA "magnetic" hover ---------- */
.mk-btn-primary { position: relative; overflow: hidden; }
.mk-btn-primary::after {
  content: ""; position: absolute; inset: 0; background:
    radial-gradient(60% 80% at var(--mx, 50%) var(--my, 50%), rgba(124,196,250,0.35) 0%, transparent 65%);
  opacity: 0; transition: opacity 0.3s var(--ease-out);
  pointer-events: none;
}
.mk-btn-primary:hover::after { opacity: 1; }

/* ---------- Marker underline: draw on reveal OR on hero load ---------- */
.mk-marker-underline::after {
  transform-origin: left center;
  transform: rotate(-1.2deg) scaleX(0);
  animation: drawMarker 1s var(--ease-out) 0.6s forwards;
}
.reveal.in .mk-marker-underline::after { transform: rotate(-1.2deg) scaleX(1); }
@keyframes drawMarker {
  to { transform: rotate(-1.2deg) scaleX(1); }
}

/* ---------- Gradient shimmer ---------- */
.mk-grad-shimmer {
  background: linear-gradient(110deg, #7CC4FA 0%, #3490F0 35%, #5660F0 60%, #3490F0 75%, #7CC4FA 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gradShimmer 8s ease-in-out infinite;
}
@keyframes gradShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ---------- Bento cards: cursor-tilt vibe (CSS only) ---------- */
.mk-bento .card {
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.mk-bento .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 50px -24px rgba(11,27,61,0.22);
  border-color: rgba(52,144,240,0.35);
}

/* ---------- Pricing featured card: subtle pulse glow ---------- */
.mk-price.featured {
  box-shadow: 0 0 0 1px #0B1B3D, 0 30px 60px -20px rgba(11,27,61,0.45);
  animation: priceGlow 5s ease-in-out infinite;
}
@keyframes priceGlow {
  0%, 100% { box-shadow: 0 0 0 1px #0B1B3D, 0 30px 60px -20px rgba(11,27,61,0.45), 0 0 0 0 rgba(124,196,250,0); }
  50%      { box-shadow: 0 0 0 1px #0B1B3D, 0 30px 60px -20px rgba(11,27,61,0.45), 0 0 80px -10px rgba(124,196,250,0.35); }
}

/* ---------- Testimonial navy: animated mesh ---------- */
.mk-section.navy { position: relative; overflow: hidden; }
.mk-section.navy::before {
  content: ""; position: absolute; inset: -10%;
  background:
    radial-gradient(40% 50% at 20% 30%, rgba(124,196,250,0.18) 0%, transparent 60%),
    radial-gradient(40% 50% at 80% 70%, rgba(86,96,240,0.16) 0%, transparent 60%),
    radial-gradient(30% 40% at 50% 100%, rgba(52,144,240,0.12) 0%, transparent 60%);
  animation: meshDrift 20s ease-in-out infinite;
  pointer-events: none;
}
@keyframes meshDrift {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(2%,-2%) scale(1.05); }
}

/* ---------- Live demo (in hero, inside <ProductPreview/>) ---------- */
.demo-row { transition: background 0.3s var(--ease-out); }
.demo-row.flash { animation: rowFlash 1.2s ease-out; }
@keyframes rowFlash {
  0%   { background: rgba(124,196,250,0.25); }
  100% { background: transparent; }
}

.demo-score-pill { transition: background 0.5s, color 0.5s, box-shadow 0.5s; }
.demo-score-pill.scoring {
  box-shadow: 0 0 0 0 rgba(124,196,250,0.5);
  animation: scoringPulse 1s ease-out infinite;
}
@keyframes scoringPulse {
  0%   { box-shadow: 0 0 0 0 rgba(124,196,250,0.55); }
  100% { box-shadow: 0 0 0 8px rgba(124,196,250, 0); }
}

/* ---------- Interactive coach card (replaces simple "kill" card) ---------- */
.coach-demo {
  display: flex; flex-direction: column; gap: 14px;
  background: linear-gradient(180deg, #0B1B3D 0%, #061030 100%);
  border-radius: 16px;
  padding: 22px;
  position: relative; overflow: hidden;
  color: #fff;
}
.coach-demo::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(50% 60% at 80% 20%, rgba(239,68,68,0.18) 0%, transparent 60%),
    radial-gradient(50% 60% at 20% 80%, rgba(86,96,240,0.18) 0%, transparent 60%);
  pointer-events: none;
}
.coach-demo > * { position: relative; }
.coach-demo .roi { font: 800 44px/1 var(--font-sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: #fff; transition: color 0.5s; }
.coach-demo .roi.killed { color: #FCA5A5; text-decoration: line-through; text-decoration-thickness: 3px; }
.coach-demo .roi.scaled { color: #86EFAC; }
.coach-demo .meta { font: 500 12px/1 var(--font-sans); color: #94A3B8; text-transform: uppercase; letter-spacing: 0.08em; }
.coach-demo .actions { display: flex; gap: 8px; margin-top: auto; }
.coach-demo .act {
  flex: 1; padding: 10px 12px; border-radius: 10px;
  font: 700 12px/1 var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase;
  border: 1px solid; cursor: pointer; transition: all 0.18s var(--ease-out);
}
.coach-demo .act.scale { background: var(--good-600); color: #fff; border-color: var(--good-600); }
.coach-demo .act.scale:hover { background: var(--good-700); transform: translateY(-2px); }
.coach-demo .act.kill { background: transparent; color: #FCA5A5; border-color: rgba(252,165,165,0.4); }
.coach-demo .act.kill:hover { background: var(--bad-700); color: #fff; border-color: var(--bad-700); transform: translateY(-2px); }
.coach-demo .verdict {
  font: 700 11px/1 var(--font-sans); text-transform: uppercase; letter-spacing: 0.12em;
  padding: 8px 12px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px; width: fit-content;
  transition: all 0.3s var(--ease-out);
}
.coach-demo .verdict.scaled { background: rgba(34,197,94,0.18); color: #86EFAC; }
.coach-demo .verdict.killed { background: rgba(239,68,68,0.18); color: #FCA5A5; }
.coach-demo .verdict.neutral { background: rgba(124,196,250,0.15); color: #93C5FD; }

/* ---------- Count-up number: gentle glow as it ticks ---------- */
.count-up { display: inline-block; font-variant-numeric: tabular-nums; }

/* ---------- Comparison strikethrough animation ---------- */
.mk-compare .before li { transition: opacity 0.3s; }
.reveal.in .mk-compare .before li { opacity: 0.55; }
.mk-compare .before:hover li { opacity: 1; }

/* ---------- Reduced motion: respect it ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; }
}

/* ---------- Billing toggle ---------- */
.mk-billing {
  display: inline-flex; background: #fff; border: 1px solid rgba(11,27,61,0.1);
  border-radius: 9999px; padding: 4px; gap: 4px;
}
.mk-billing-btn {
  padding: 10px 18px; border-radius: 9999px;
  font: 600 13px/1 var(--font-sans); color: #4B5563;
  background: transparent; border: 0; cursor: pointer;
  transition: all 0.18s var(--ease-out);
  display: inline-flex; align-items: center; gap: 8px;
}
.mk-billing-btn:hover { color: #0B1B3D; }
.mk-billing-btn.on { background: #0B1B3D; color: #fff; }
.mk-billing-btn .save {
  background: #FACC15; color: #422006;
  padding: 3px 7px; border-radius: 999px;
  font: 700 10px/1 var(--font-sans); text-transform: uppercase; letter-spacing: 0.08em;
}
.mk-billing-btn.on .save { background: #FDE047; }

/* ---------- Anatomy carousel ---------- */
.mk-anatomy { display: grid; grid-template-columns: 320px 1fr; gap: 36px; align-items: stretch; }
.mk-anatomy-tabs { display: flex; flex-direction: column; gap: 8px; }
.mk-anatomy-tab {
  text-align: left; padding: 18px 20px; border-radius: 14px;
  background: transparent; border: 1px solid transparent; cursor: pointer;
  transition: all 0.2s var(--ease-out);
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--font-sans);
}
.mk-anatomy-tab:hover { background: rgba(11,27,61,0.04); }
.mk-anatomy-tab.on { background: #fff; border-color: rgba(11,27,61,0.1); box-shadow: 0 12px 30px -16px rgba(11,27,61,0.18); }
.mk-anatomy-tab .num { font: 800 12px/1 var(--font-sans); color: #93C5FD; letter-spacing: 0.18em; text-transform: uppercase; }
.mk-anatomy-tab.on .num { color: #3490F0; }
.mk-anatomy-tab .title { font: 700 18px/1.2 var(--font-sans); letter-spacing: -0.015em; color: #0B1B3D; }
.mk-anatomy-tab .desc  { font: 500 13px/1.5 var(--font-sans); color: #6B7280; }
.mk-anatomy-stage {
  background: linear-gradient(180deg, #111827 0%, #0B1B3D 100%);
  border-radius: 20px; padding: 36px;
  position: relative; overflow: hidden;
  min-height: 380px;
  display: flex; flex-direction: column; gap: 18px;
  color: #fff;
}
.mk-anatomy-stage::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 60% at 80% 0%, rgba(124,196,250,0.18) 0%, transparent 60%),
    radial-gradient(60% 60% at 0% 100%, rgba(86,96,240,0.14) 0%, transparent 60%);
  pointer-events: none;
}
.mk-anatomy-stage > * { position: relative; }
.mk-anatomy-stage .head { font: 700 11px/1 var(--font-sans); text-transform: uppercase; letter-spacing: 0.18em; color: #93C5FD; }
.mk-anatomy-stage .big { font: 800 64px/1 var(--font-sans); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; color: #fff; }
.mk-anatomy-stage .big .unit { font-size: 28px; color: #93C5FD; margin-left: 6px; letter-spacing: -0.02em; }
.mk-anatomy-stage .deck { font: 500 16px/1.5 var(--font-sans); color: #CBD5E1; max-width: 36ch; }
.mk-anatomy-stage .deck b { color: #fff; }

/* ---------- Scroll progress bar ---------- */
.mk-scroll-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; z-index: 100;
  background: transparent;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out);
}
/* Hide while the live demo holds the fullscreen lock — a stray colored
   hairline over the immersive navy stage reads as a glitch. */
body.ld-locked .mk-scroll-progress { opacity: 0; }
.mk-scroll-progress > div {
  height: 100%;
  background: linear-gradient(90deg, #7CC4FA, #3490F0, #5660F0);
  width: 0;
  transition: width 0.06s linear;
  border-radius: 0 3px 3px 0;
}

/* ---------- Bento cursor-tilt (JS-driven, CSS-described) ---------- */
.mk-bento .card { transition: transform 0.18s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out); transform-style: preserve-3d; }
.mk-bento .card.tilting { transition: transform 0.06s linear, box-shadow 0.3s var(--ease-out); }

/* ---------- Bento card 3D tilt on cursor ---------- */
.mk-bento .card { perspective: 1000px; transform-style: preserve-3d; }

/* ---------- Hero CTA "magnetic" hover (extended) ---------- */
.mk-btn { will-change: transform; }

/* methodology-bento.css */
/* ============================================================
   Methodology Bento — 1-2-2 asymmetric layout
   - Dominant card left (60% width, full height)
   - 2x2 supporting cards on the right (40% width)
   - Stylized Breezeway product UI fragments inside each card.
   ============================================================ */

/* Section override — section already inherits .bw-section spacing */
.bw-mb {
  background: #FBF9F4;
}

/* --- Section header --- */
.bw-mb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 700 11px/1 var(--font-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8A94A6;
  margin: 0;
}
.bw-mb-eyebrow::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: #3B82F6;
  box-shadow: 0 0 0 4px rgba(59,130,246,0.16);
}
.bw-mb-h2 {
  font: 800 44px/1.08 var(--font-sans);
  letter-spacing: -0.025em;
  color: #0A1628;
  margin: 14px 0 24px;
  max-width: 22ch;
  text-wrap: balance;
}

/* --- Pricing pill --- */
.bw-mb-pricepill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #0A1628;
  color: #C9D4E5;
  padding: 14px 22px;
  border-radius: 9999px;
  font: 600 14px/1.3 var(--font-sans);
  letter-spacing: -0.005em;
  max-width: max-content;
  margin: 0 0 40px;
  box-shadow:
    0 18px 36px -16px rgba(11, 27, 61, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  position: relative;
}
.bw-mb-pricepill .live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #7CC4FA;
  box-shadow: 0 0 0 4px rgba(124, 196, 250, 0.18), 0 0 14px rgba(124, 196, 250, 0.6);
  flex-shrink: 0;
}
.bw-mb-pricepill .price {
  color: #7CC4FA;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* --- Full-width bento wrapper ---
   Breaks out of the marketing container so the bento can use the
   full viewport, with a generous cap on 4K monitors. */
.bw-mb-fullwidth {
  width: 100%;
  max-width: 1820px;
  margin: 0 auto;
  padding: 0 clamp(20px, 3vw, 48px);
  box-sizing: border-box;
}

/* --- Bento grid layout ---
   Explicit row heights cap the whole bento so the dominant card
   can't balloon when its visual has room to grow. 410px per support
   row × 2 + 16px gap = 836px total — enough headroom for the icon
   + headline + body + product fragment + "Powered by" label, even
   in the narrow support column. */
.bw-mb-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  grid-template-rows: minmax(640px, 836px);
  gap: 16px;
  align-items: stretch;
}
.bw-mb-supports {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  min-width: 0;
  min-height: 0;
}

/* --- Card base --- */
.bw-mb-card {
  --accent: #3B82F6;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  padding: 22px;
  display: flex; flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 0;
  min-height: 0;
}
.bw-mb-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -10px rgba(11, 27, 61, 0.16);
  border-color: rgba(0, 0, 0, 0.10);
}
.bw-mb-card.dominant {
  padding: 32px;
  gap: 18px;
}

/* Icon */
.bw-mb-icon {
  width: 32px; height: 32px;
  border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in oklch, var(--accent) 14%, #ffffff);
  color: var(--accent);
  flex-shrink: 0;
}
.bw-mb-icon svg { width: 16px; height: 16px; }

/* Text */
.bw-mb-card h3 {
  font: 800 20px/1.18 var(--font-sans);
  letter-spacing: -0.022em;
  color: #0A1628;
  margin: 0;
  text-wrap: balance;
}
.bw-mb-card.dominant h3 {
  font-size: 38px;
  line-height: 1.04;
  letter-spacing: -0.028em;
  max-width: 18ch;
}
.bw-mb-card .body {
  font: 500 13.5px/1.5 var(--font-sans);
  color: #3A4556;
  margin: 0;
  text-wrap: pretty;
  max-width: 26ch;
}
.bw-mb-card.dominant .body {
  font-size: 16px;
  line-height: 1.55;
  max-width: 44ch;
}

/* Visual slot — fills remaining card height, clipped if needed */
.bw-mb-visual {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 4px -2px 0;
  overflow: hidden;
}
.bw-mb-card.dominant .bw-mb-visual { margin: 8px -8px 0; align-items: stretch; overflow: visible; }

/* "Powered by" label */
.bw-mb-label {
  font: 700 11px/1 var(--font-sans);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #8A94A6;
  margin: 0;
}
.bw-mb-label b {
  color: #0A1628;
  font-weight: 700;
}

/* Group icon+text top, label bottom */
.bw-mb-card .top { display: flex; flex-direction: column; gap: 14px; }
.bw-mb-card.dominant .top { gap: 18px; }

/* --- Animations (subtle, respect reduced motion) --- */
@keyframes bw-mb-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@keyframes bw-mb-pulse-ring {
  0%   { box-shadow: 0 0 0 0   rgba(239, 68, 68, 0.50); }
  70%  { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0   rgba(239, 68, 68, 0); }
}
.bw-mb-pulse {
  animation: bw-mb-pulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  transform-origin: center;
}
.bw-mb-pulse-ring {
  position: relative;
  animation: bw-mb-pulse-ring 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  border-radius: 6px;
}

@keyframes bw-mb-tooltip-pop {
  0%   { opacity: 0; transform: scale(0.92) translateY(6px); }
  100% { opacity: 1; transform: scale(1)    translateY(0); }
}
.bw-mb-tooltip-pop { animation: bw-mb-tooltip-pop 0.42s cubic-bezier(0.4, 0, 0.2, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .bw-mb-pulse, .bw-mb-pulse-ring, .bw-mb-tooltip-pop { animation: none; }
  .bw-mb-card { transition: none; }
}

/* --- BreezeScore table (dominant card visual) --- */
.bw-bs-frame {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  background: #0F172A;
  border: 1px solid #1F2937;
  overflow: hidden;
  padding: 16px 18px 18px;
  color: #E5E7EB;
  font-family: var(--font-sans);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow:
    0 28px 56px -22px rgba(11, 27, 61, 0.40),
    0 0 0 1px rgba(124, 196, 250, 0.06) inset;
  position: relative;
}
/* Center the table vertically in tall plate */
.bw-bs-frame .bw-bs-tbody { margin-top: auto; margin-bottom: auto; }
.bw-bs-chrome {
  display: flex; align-items: center; gap: 10px;
  font: 600 10px/1 var(--font-sans);
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.bw-bs-chrome .dots { display: flex; gap: 5px; }
.bw-bs-chrome .dots span { width: 9px; height: 9px; border-radius: 50%; }
.bw-bs-chrome .dots span:nth-child(1) { background: #EF4444; }
.bw-bs-chrome .dots span:nth-child(2) { background: #F59E0B; }
.bw-bs-chrome .dots span:nth-child(3) { background: #10B981; }
.bw-bs-chrome .meta { margin-left: auto; color: #6B7280; text-transform: none; letter-spacing: 0; font-weight: 500; }

.bw-bs-thead {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) 88px 60px 70px 60px;
  gap: 12px;
  padding: 10px 6px 10px;
  border-bottom: 1px solid rgba(75, 85, 99, 0.35);
  font: 600 9.5px/1 var(--font-sans);
  color: #6B7280;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.bw-bs-thead .num { text-align: right; }
.bw-bs-tbody {
  display: flex; flex-direction: column;
  gap: 6px;
  padding-top: 4px;
}
.bw-bs-row {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) 88px 60px 70px 60px;
  gap: 12px;
  padding: 10px 6px;
  align-items: center;
  font: 500 12px/1.2 var(--font-sans);
  color: #E5E7EB;
  border-radius: 6px;
  position: relative;
}
.bw-bs-row.kill {
  background: rgba(239, 68, 68, 0.08);
  box-shadow: inset 2px 0 0 #EF4444;
}
.bw-bs-row .name {
  font: 500 12px/1.2 var(--font-sans);
  color: #F3F4F6;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bw-bs-row .name .sub {
  display: block;
  font: 500 9.5px/1 var(--font-sans);
  color: #6B7280;
  margin-top: 4px;
  letter-spacing: 0.02em;
}
.bw-bs-row .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* BreezeScore pill */
.bw-bs-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 6px;
  min-width: 70px;
  font: 800 12px/1 var(--font-sans);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  position: relative;
}
.bw-bs-pill.red    { background: rgba(239, 68, 68, 0.20); color: #FCA5A5; }
.bw-bs-pill.amber  { background: rgba(245, 158, 11, 0.20); color: #FCD34D; }
.bw-bs-pill.green  { background: rgba(16, 185, 129, 0.22); color: #6EE7B7; }
.bw-bs-pill .pdot {
  width: 5px; height: 5px; border-radius: 50%;
}
.bw-bs-pill.red .pdot   { background: #EF4444; }
.bw-bs-pill.amber .pdot { background: #F59E0B; }
.bw-bs-pill.green .pdot { background: #10B981; }

/* Sparkline */
.bw-bs-spark {
  display: inline-flex; align-items: flex-end; gap: 2px; height: 18px;
}
.bw-bs-spark span {
  width: 3px; border-radius: 1px;
}

/* Annotation callout — chip floats outside the red row, line
   connects it to the row visually. Anchored relative to the
   ad-set row container so it stays aligned as the table tightens. */
.bw-bs-anno-wrap {
  position: absolute;
  pointer-events: none;
  right: 18px;
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 0;
  z-index: 2;
  animation: bw-mb-tooltip-pop 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
}
.bw-bs-anno {
  display: inline-flex; align-items: center; gap: 8px;
  background: #FFFFFF;
  color: #0A1628;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  font: 700 10.5px/1 var(--font-sans);
  letter-spacing: -0.005em;
  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  white-space: nowrap;
}
.bw-bs-anno::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #EF4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.22);
}

/* --- Card 2: Tooltip-in-action --- */
.bw-tt-stage {
  width: 100%;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 0 0;
}
.bw-tt-pop {
  position: relative;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 11px 13px;
  font: 500 12px/1.5 var(--font-sans);
  color: #3A4556;
  box-shadow: 0 18px 36px -14px rgba(11, 27, 61, 0.22),
              0 4px 10px -4px rgba(11, 27, 61, 0.10);
  max-width: 100%;
  width: 100%;
}
.bw-tt-pop .title {
  font: 800 12.5px/1.3 var(--font-sans);
  color: #0A1628;
  margin-bottom: 5px;
  letter-spacing: -0.005em;
}
.bw-tt-pop b { color: #EF4444; font-weight: 700; }
.bw-tt-arrow {
  position: absolute;
  bottom: -6px;
  left: 36px;
  width: 11px; height: 11px;
  background: #FFFFFF;
  border-right: 1px solid #E5E7EB;
  border-bottom: 1px solid #E5E7EB;
  transform: rotate(45deg);
}
.bw-tt-row {
  display: inline-flex; align-items: center; gap: 14px;
  background: #0F172A;
  color: #E5E7EB;
  padding: 10px 14px;
  border-radius: 8px;
  font: 600 13px/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
  align-self: flex-start;
  margin-left: 24px;
  box-shadow: 0 12px 24px -10px rgba(11, 27, 61, 0.35);
}
.bw-tt-row .lbl {
  font: 500 11px/1 var(--font-sans);
  color: #9CA3AF;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bw-tt-row .val {
  display: inline-flex; align-items: center; gap: 7px;
  color: #FCA5A5;
  font-weight: 800;
}
.bw-tt-row .val .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #EF4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.22);
}

/* --- Card 3: BreezeBrain custom benchmark --- */
.bw-bb-stage {
  width: 100%;
  background: #FFFFFF;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 16px 16px 14px;
  box-shadow: 0 10px 24px -12px rgba(11, 27, 61, 0.14);
  display: flex; flex-direction: column;
  gap: 8px;
  position: relative;
}
.bw-bb-row {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 8px 2px;
  font-variant-numeric: tabular-nums;
}
.bw-bb-row + .bw-bb-row {
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
}
.bw-bb-row .lbl {
  font: 600 11px/1 var(--font-sans);
  color: #8A94A6;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bw-bb-row .val {
  font: 800 22px/1 var(--font-sans);
  letter-spacing: -0.02em;
  color: #0A1628;
  display: inline-flex; align-items: center; gap: 7px;
}
.bw-bb-row.bad .val { color: #EF4444; }
.bw-bb-row.bad .val::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: #EF4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.20);
}
.bw-bb-row.goal .val {
  background: var(--benchmark-grad, linear-gradient(120deg, #8B5CF6 0%, #EC4899 100%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.bw-bb-anno {
  display: inline-flex; align-items: flex-start; gap: 8px;
  margin-top: 6px;
  padding: 6px 10px;
  background: linear-gradient(120deg, rgba(139, 92, 246, 0.10), rgba(236, 72, 153, 0.10));
  border: 1px solid rgba(139, 92, 246, 0.18);
  border-radius: 8px;
  font: 600 10.5px/1.35 var(--font-sans);
  color: var(--benchmark-700, #6D28D9);
  letter-spacing: -0.005em;
  white-space: normal;
}
.bw-bb-anno .star {
  width: 12px; height: 12px;
  margin-top: 1px;
  background: var(--benchmark-grad, linear-gradient(120deg, #8B5CF6 0%, #EC4899 100%));
  border-radius: 3px;
  flex-shrink: 0;
}

/* --- Card 4: CEO Dashboard --- */
.bw-ceo-stage {
  width: 100%;
  background: #0F172A;
  border: 1px solid #1F2937;
  border-radius: 12px;
  overflow: hidden;
  padding: 14px 14px 12px;
  color: #E5E7EB;
  font-family: var(--font-sans);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  position: relative;
  box-shadow: 0 18px 36px -16px rgba(11, 27, 61, 0.30);
}
.bw-ceo-head {
  display: flex; align-items: center; justify-content: space-between;
  font: 600 10px/1 var(--font-sans);
  color: #6B7280;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.bw-ceo-head .live {
  display: inline-flex; align-items: center; gap: 6px;
  color: #6EE7B7;
}
.bw-ceo-head .live::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22);
}
.bw-ceo-thead {
  display: grid;
  grid-template-columns: 54px 70px 1fr 56px;
  gap: 8px;
  padding: 6px 4px;
  border-bottom: 1px solid rgba(75, 85, 99, 0.30);
  font: 600 9px/1 var(--font-sans);
  color: #6B7280;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bw-ceo-thead .num { text-align: right; }
.bw-ceo-row {
  display: grid;
  grid-template-columns: 54px 70px 1fr 56px;
  gap: 8px;
  padding: 8px 4px;
  align-items: center;
  font: 500 11.5px/1.2 var(--font-sans);
  border-bottom: 1px solid rgba(75, 85, 99, 0.18);
  position: relative;
}
.bw-ceo-row:last-child { border-bottom: 0; }
.bw-ceo-row .date {
  color: #9CA3AF;
  font: 600 11px/1.1 var(--font-sans);
}
.bw-ceo-row .rev {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #F3F4F6;
}
.bw-ceo-row .rev .lift {
  display: inline-block;
  margin-left: 6px;
  background: rgba(16, 185, 129, 0.20);
  color: #6EE7B7;
  font: 800 10px/1 var(--font-sans);
  padding: 3px 6px;
  border-radius: 4px;
  letter-spacing: -0.01em;
}
.bw-ceo-row .note {
  font: 500 11px/1.3 var(--font-sans);
  color: #C9D4E5;
  display: inline-flex; align-items: center; gap: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bw-ceo-row .note::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: #7CC4FA;
  flex-shrink: 0;
}
.bw-ceo-row .roas {
  text-align: right;
  font: 700 11.5px/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: #6EE7B7;
}
/* Annotation arc connecting note (Tue) to lift (Wed) — SVG overlay */
.bw-ceo-arc {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* --- Card 5: Ad Launcher modal --- */
.bw-lc-stage {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 18px 36px -16px rgba(11, 27, 61, 0.20),
              0 4px 10px -4px rgba(11, 27, 61, 0.08);
  display: flex; flex-direction: column;
  gap: 8px;
  position: relative;
}
.bw-lc-thumb {
  width: 100%;
  aspect-ratio: 16/6;
  border-radius: 9px;
  background:
    linear-gradient(135deg, #FED7AA 0%, #FCA5A5 50%, #C7D2FE 100%);
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed rgba(0, 0, 0, 0.08);
}
.bw-lc-thumb .play {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.20);
}
.bw-lc-thumb .play::before {
  content: "";
  border-style: solid;
  border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent #0A1628;
  margin-left: 2px;
}
.bw-lc-thumb .badge {
  position: absolute;
  left: 8px; top: 8px;
  background: rgba(10, 22, 40, 0.78);
  color: #fff;
  font: 700 9px/1 var(--font-sans);
  letter-spacing: 0.10em;
  padding: 4px 7px;
  border-radius: 4px;
  text-transform: uppercase;
}
.bw-lc-fields {
  display: flex; flex-direction: column; gap: 6px;
}
.bw-lc-field {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px;
  background: #F4F6F9;
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 7px;
  font: 600 11.5px/1 var(--font-sans);
  color: #0A1628;
}
.bw-lc-field .lbl {
  font-weight: 500;
  color: #6B7280;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bw-lc-field .val {
  display: inline-flex; align-items: center; gap: 6px;
}
.bw-lc-field .val::after {
  content: "";
  border-style: solid;
  border-width: 4px 3px 0 3px;
  border-color: #9CA3AF transparent transparent transparent;
}
.bw-lc-launch {
  background: #10B981;
  color: #FFFFFF;
  font: 800 12.5px/1 var(--font-sans);
  letter-spacing: -0.005em;
  padding: 9px 14px;
  border-radius: 8px;
  border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  cursor: default;
  box-shadow: 0 8px 16px -6px rgba(16, 185, 129, 0.45),
              inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}
.bw-lc-launch::after {
  content: "";
  width: 0; height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent #FFFFFF;
}
.bw-lc-compare {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 2px;
  padding: 6px 10px;
  background: rgba(6, 182, 212, 0.08);
  border: 1px solid rgba(6, 182, 212, 0.20);
  border-radius: 999px;
  font: 600 10.5px/1.2 var(--font-sans);
  color: #0E7490;
  align-self: flex-start;
  max-width: 100%;
  letter-spacing: -0.005em;
}
.bw-lc-compare .a {
  text-decoration: line-through;
  color: #9CA3AF;
  text-decoration-color: #EF4444;
  text-decoration-thickness: 1.5px;
}
.bw-lc-compare .arrow {
  color: #9CA3AF;
  font-weight: 700;
}
.bw-lc-compare .b {
  color: #0E7490;
  font-weight: 800;
}

/* --- Responsive --- */
@media (max-width: 1100px) {
  .bw-mb-h2 { font-size: 38px; }
  .bw-mb-card.dominant h3 { font-size: 28px; }
  .bw-mb-grid { grid-template-rows: minmax(640px, 760px); }
}
@media (max-width: 960px) {
  .bw-mb-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .bw-mb-supports { grid-template-columns: repeat(4, 1fr); grid-template-rows: none; }
  .bw-mb-supports .bw-mb-card { min-height: 300px; }
  .bw-mb-card.dominant { min-height: 420px; }
}
@media (max-width: 880px) {
  .bw-mb-supports { grid-template-columns: 1fr 1fr; grid-template-rows: 300px 300px; }
  .bw-mb-card { padding: 20px; }
  .bw-mb-card.dominant { padding: 24px; min-height: 460px; }
  .bw-mb-card.dominant h3 { font-size: 26px; }
  .bw-mb-h2 { font-size: 32px; }
}
@media (max-width: 600px) {
  .bw-mb-supports { grid-template-columns: 1fr; grid-template-rows: none; }
  .bw-mb-supports .bw-mb-card { min-height: 280px; }
  .bw-mb-pricepill { font-size: 12.5px; padding: 12px 18px; }
  .bw-mb-pricepill .price { font-size: 13.5px; }
  .bw-bs-anno { font-size: 9.5px; padding: 5px 10px 5px 8px; }

  /* BreezeScore table (dominant visual): the 5-column grid (88+60+70+60px
     of fixed columns) overflows a phone-width card. Collapse to the three
     columns that carry the story — Ad set · BreezeScore · ROAS — and hide
     the Trend sparkline + Daily spend. */
  .bw-bs-thead,
  .bw-bs-row {
    grid-template-columns: minmax(0, 1fr) auto 56px;
    gap: 10px;
  }
  .bw-bs-thead > :nth-child(3),
  .bw-bs-thead > :nth-child(4),
  .bw-bs-row > :nth-child(3),
  .bw-bs-row > :nth-child(4) { display: none; }
  .bw-bs-pill { min-width: 58px; }
}

/* mobile.css */
/* ============================================================
   Breezeway Home — Mobile responsive overrides.
   Three tiers:
     - tablet  (max-width: 1000px) — minor layout adjustments
     - phone   (max-width: 760px)  — full mobile reflow
     - small   (max-width: 420px)  — extra-tight phones
   Loaded LAST so it can win specificity wars against home.css.
   ============================================================ */

/* Universal safety — never let any element create horizontal scroll.
   NOTE: `clip` (not `hidden`) — `overflow: hidden` would turn the element
   into a scroll container and break every `position: sticky` descendant. */
html, body { overflow-x: clip; max-width: 100%; }

/* ============================================================
   WALKTHROUGH — keep the pinned scroll effect on tablet + phone.
   Desktop is a 2-col pin (steps left, stage right). Below 1100px we
   reflow to a vertical pin driven by the SAME scroll-fraction JS:
     ┌──────────────┐  segmented progress (tap to jump)
     │   VISUAL      │  sticky stage — the product mock
     ├──────────────┤
     │ active step   │  only the current step's text, full-length
     └──────────────┘
   Visual + its caption are always co-visible, and the section locks
   (sticky) while you scroll through the four steps. This block sits
   before the ≤760 tier so phone-specific tweaks below still win.
   ============================================================ */
@media (max-width: 1100px) {
  .bw-walk-track {
    /* tall track = the scroll distance the JS maps to step progress */
    height: calc(82vh * var(--step-count, 4) + 64vh);
  }
  .bw-walk-pin {
    position: sticky;
    top: 70px;
    height: calc(100vh - 84px);
    height: calc(100svh - 84px);
    max-height: none;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(280px, 46vh) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
  }

  /* Segmented progress — replaces the per-step rail on small screens */
  .bw-walk-progress {
    display: grid;
    grid-row: 1;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 8px;
    align-items: center;
  }
  .bw-walk-progress .seg {
    appearance: none; -webkit-appearance: none;
    border: 0; background: transparent;
    padding: 18px 0; margin: 0; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .bw-walk-progress .seg .track {
    display: block; height: 4px; border-radius: 999px;
    background: rgba(11, 27, 61, 0.12);
    position: relative; overflow: hidden;
  }
  .bw-walk-progress .seg .fill {
    position: absolute; inset: 0;
    transform-origin: left;
    transform: scaleX(var(--seg-p, 0));
    background: linear-gradient(90deg, #3490F0, #5660F0);
    border-radius: 999px;
    transition: transform 0.1s linear;
  }

  /* Stage = the focused mobile card, pinned in the middle band.
     The browser-chrome dots are desktop-only screenshot dressing — drop
     them on mobile so the visual reads as a clean Apple-style card. */
  .bw-walk-stage {
    grid-row: 2;
    position: relative; top: 0;
    height: auto; min-height: 0; max-height: none;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 20px;
  }
  .bw-walk-stage .chrome { display: none; }
  .bw-walk-stage .frame {
    border-radius: 20px;
    background: linear-gradient(180deg, #161E2C 0%, #0F1521 100%);
    border: 1px solid rgba(75,85,99,0.42);
    box-shadow: 0 24px 48px -24px rgba(0,0,0,0.6);
  }

  /* Caption = ONLY the active step's text, directly under the visual */
  .bw-walk-steps {
    grid-row: 3;
    display: block;
    align-self: start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .bw-walk-mock { display: flex; }
  .bw-walk-step {
    display: none;
    padding: 4px 0 0; border: 0; cursor: default;
  }
  .bw-walk-step.active { display: block; }
  .bw-walk-step::before,
  .bw-walk-step::after { display: none; }
  .bw-walk-step .step-num { margin-bottom: 2px; }
  .bw-walk-step .step-title { margin: 4px 0 8px; }
  .bw-walk-step.active .step-body { max-height: none; margin-top: 6px; }
}

/* ============================================================
   TIER 1 — Tablet ( <= 1000px )
   ============================================================ */
@media (max-width: 1000px) {
  .mk-container { padding: 0 22px; }
  .mk-section { padding: 64px 0; }
  .mk-section.sm { padding: 48px 0; }
  .bw-section { padding: 72px 0; }

  /* Marketing bento → 2 columns */
  .mk-bento { grid-template-columns: repeat(2, 1fr); }
  .mk-bento .card.wide,
  .mk-bento .card.narrow,
  .mk-bento .card.half { grid-column: span 2; }

  /* Marketing pricing → 1 column at smaller widths handled below */
  .mk-price-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .mk-price.featured { transform: none; }
  .mk-price.featured:hover { transform: translateY(-6px); }

  /* Marketing comparison → stacked */
  .mk-compare { grid-template-columns: 1fr; }
  .mk-compare .before { border-right: 0; border-bottom: 1px dashed rgba(11,27,61,0.15); }

  /* Footer → 2 columns */
  .mk-footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }

  /* Step numbers — too big */
  .mk-step-num { font-size: 120px; }
}

/* ============================================================
   TIER 2 — Phone ( <= 760px )
   ============================================================ */
@media (max-width: 760px) {

  /* ---------- Container + section rhythm ---------- */
  .mk-container { padding: 0 16px; }
  .mk-section { padding: 56px 0; }
  .mk-section.sm { padding: 40px 0; }
  .bw-section { padding: 56px 0; }
  .bw-section.sm { padding: 40px 0; }

  /* ---------- Type ---------- */
  .mk-h1 { font-size: 44px; line-height: 1; letter-spacing: -0.03em; }
  .mk-h2 { font-size: 32px; line-height: 1.05; letter-spacing: -0.02em; }
  .mk-h3 { font-size: 22px; }
  .mk-lead { font-size: 17px; line-height: 1.5; }
  .mk-body { font-size: 15px; }
  .mk-final h2 { font-size: 48px; line-height: 0.98; max-width: 14ch; letter-spacing: -0.035em; }

  /* ---------- Navbar — collapse to logo + primary CTA only ---------- */
  .mk-nav {
    margin: 10px 12px 0;
    border-radius: 18px;
    max-width: none;
  }
  .mk-nav-inner { padding: 10px 12px; }
  .mk-nav-left { gap: 0; }
  .mk-nav-links { display: none; }
  .mk-nav-logo img { height: 18px; }
  .mk-nav .mk-btn-ghost { display: none; }
  .mk-nav .mk-btn-sm { padding: 8px 12px; font-size: 11px; min-height: 34px; }
  .mk-nav .mk-btn svg { width: 12px; height: 12px; }

  /* Tighten the hero pull-up so the headline doesn't hide under the nav */
  .mk-hero {
    margin-top: -60px;
    padding-top: 100px !important;
    padding-bottom: 40px !important;
  }

  /* ---------- Hero ---------- */
  .mk-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .mk-hero-inner > * { min-width: 0; }
  .mk-hero-stack { padding-top: 0; min-width: 0; }
  .mk-mark-float { display: none; }
  .bw-hero-rotator { font-size: 36px !important; }
  /* Long marketing eyebrow needs to wrap on phones */
  .mk-eyebrow { white-space: normal; max-width: 100%; }
  .mk-hero-cta, .bw-hero-cta { gap: 10px; margin-top: 24px; flex-direction: column; align-items: stretch; }
  .mk-hero-cta .mk-btn, .bw-hero-cta .mk-btn { width: 100%; justify-content: center; padding: 14px 18px; font-size: 14px; white-space: normal; text-align: center; }

  /* Hero stats — stack 2 across, tighter */
  .mk-hero-stats { gap: 14px 18px; padding-top: 24px; margin-top: 32px; flex-wrap: wrap; }
  .mk-hero-stats .stat { flex: 1 1 calc(50% - 18px); min-width: 0; }
  .mk-hero-stats .num { font-size: 26px; }

  /* Hero product preview — on phones we swap the dense 5-column table for
     a 3-column phone-legible card (ProductPreviewMobile). Flatten the tilt. */
  .mk-screen-wrap { transform: none; margin: 0; }
  .mk-screen-wrap:hover { transform: none; }
  .mk-screen { padding: 8px; border-radius: 14px; }
  .mk-sticky { display: none; }
  .mk-arrow { display: none; }

  /* Phone product preview card */
  .mk-screen-m { padding: 10px; }
  .mk-pp-m {
    background: #1F2937; border-radius: 11px; overflow: hidden;
    font-variant-numeric: tabular-nums;
  }
  .mk-pp-m-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; background: #374151;
    font: 700 13px/1 var(--font-sans); color: #E5E7EB; letter-spacing: -0.01em;
  }
  .mk-pp-m-bar .meta { font: 500 11px/1 var(--font-sans); color: #9CA3AF; letter-spacing: 0; }
  .mk-pp-m-head {
    display: grid; grid-template-columns: minmax(0,1fr) auto 46px;
    align-items: center; gap: 10px;
    padding: 9px 14px; background: rgba(255,255,255,0.03);
    font: 600 10px/1 var(--font-sans); color: #9CA3AF;
    letter-spacing: 0.06em; text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .mk-pp-m-head span:nth-child(2) { justify-self: center; }
  .mk-pp-m-head .r { text-align: right; }
  .mk-pp-m-row {
    display: grid; grid-template-columns: minmax(0,1fr) auto 46px;
    align-items: center; gap: 10px;
    padding: 11px 14px; min-height: 44px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: background 0.4s var(--ease-out);
  }
  .mk-pp-m-row:last-child { border-bottom: 0; }
  .mk-pp-m-row.flash { background: rgba(124,196,250,0.10); }
  .mk-pp-m-row .nm {
    font: 500 13px/1.25 var(--font-sans); color: #F3F4F6;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .mk-pp-m-row .sc { justify-self: center; }
  .mk-pp-m-row .ro {
    text-align: right; font: 700 13px/1 var(--font-sans);
    font-variant-numeric: tabular-nums;
  }

  /* Hero credibility subline duplicates the bracket-B subhead almost
     verbatim ("250+ Shopify founders… $4.2M+… 13 years…"). Two near-
     identical paragraphs back-to-back on a narrow screen reads as a
     formatting bug. Subhead carries the load — hide the credibility
     line on phones. */
  .mk-hero-stack > p[style*="500 14px"] { display: none; }
  .bw-hero-rotator-dots { display: none; }
  .bw-hero-rotator { margin-bottom: 4px; }

  /* ---------- Eyebrows / leads ---------- */
  .mk-eyebrow { font-size: 11px; letter-spacing: 0.14em; flex-wrap: wrap; }

  /* ---------- Marketing bento → 1 column ---------- */
  .mk-bento { grid-template-columns: 1fr; gap: 12px; }
  .mk-bento .card { padding: 24px; }
  .mk-bento .card.wide,
  .mk-bento .card.narrow,
  .mk-bento .card.half { grid-column: span 1; }
  .mk-bento .icn { width: 44px; height: 44px; margin-bottom: 16px; }

  /* ---------- Marketing pricing ---------- */
  .mk-price { padding: 28px; }
  .mk-price .amt { font-size: 44px; }

  /* ---------- Quote / testimonial ---------- */
  .mk-quote { font-size: 26px; line-height: 1.25; max-width: none; }
  .mk-quote-mark { font-size: 140px; margin-bottom: -28px; }

  /* ---------- Step numbers (marketing) ---------- */
  .mk-step-num { font-size: 88px; margin-bottom: 16px; }

  /* ---------- Footer → 1 column ---------- */
  .mk-footer { padding: 56px 0 32px; }
  .mk-footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .mk-footer-grid > div:first-child img { height: 24px; margin-bottom: 16px; }
  .mk-footer .colophon { flex-direction: column; gap: 14px; align-items: flex-start; margin-top: 36px; }
  .mk-footer .big-mark { width: 280px; right: -80px; bottom: -100px; }

  /* ---------- Marquee ---------- */
  .mk-marquee { padding: 22px 0; }
  .mk-marquee-track { gap: 40px; }
  .mk-marquee-track .logo { font-size: 19px; }

  /* ---------- Trust marquee container ---------- */
  .mk-marquee-eyebrow { font-size: 10px; }

  /* ============================================================
     HOME-SPECIFIC SECTIONS
     ============================================================ */

  /* Pain block */
  .bw-pain-headline { font-size: 28px; margin-bottom: 36px; }
  .bw-pain-item { padding: 22px 22px 22px 64px; border-radius: 14px; }
  .bw-pain-item::before { left: 20px; top: 22px; font-size: 22px; }
  .bw-pain-item .punch { font-size: 16px; }
  .bw-pain-item .body { font-size: 14px; }
  .bw-pain-closer { font-size: 22px; margin-top: 36px; }

  /* Methodology block */
  .bw-method-intro { margin-bottom: 36px; }
  .bw-method-body p { font-size: 15px; }
  .bw-method-kicker { font-size: 13px; padding: 12px 16px; gap: 8px; }
  .bw-method-kicker .price { font-size: 18px; }

  /* Bento (methodology features in home.css) — already stacks at 720px,
     but tighten padding for sub-720 */
  .bw-bento-card { padding: 14px; }
  .bw-bento-card.hero { padding: 16px; }
  .bw-bento-cell, .bw-bento-cell:first-child { min-height: 280px; }
  .bw-bento-text h4 { font-size: 14px; }
  .bw-bento-text p { font-size: 14px; }
  .bw-bento-card.hero .bw-bento-text h4 { font-size: 19px; }

  /* Walkthrough — pinned vertical model (see ≤1100 block above). Phone tweaks. */
  .bw-walk-pin { gap: 14px; top: 66px; height: calc(100vh - 78px); height: calc(100svh - 78px); grid-template-rows: auto minmax(260px, 44vh) minmax(0, 1fr); }
  .bw-walk-stage { padding: 0; border-radius: 18px; }
  .bw-walk-step .step-num { font-size: 12px; }
  .bw-walk-step .step-title { font-size: 21px; line-height: 1.15; }
  .bw-walk-step .step-body { font-size: 14px; line-height: 1.5; }

  /* Filter pair (yes/no) */
  .bw-filter-grid { grid-template-columns: 1fr; gap: 16px; }
  .bw-filter-card { padding: 24px 22px 26px; }
  .bw-filter-card h3 { font-size: 20px; margin-bottom: 18px; }
  .bw-filter-card li { font-size: 14px; }

  /* Differentiator (bracket-aware) */
  .bw-diff-headline { font-size: 36px; }
  .bw-diff-body p { font-size: 15px; }
  .bw-diff-table .col { padding: 24px 22px 28px; }
  .bw-diff-table .row { font-size: 14px; }
  .bw-diff-c .cell { padding: 16px 18px; font-size: 13px; }
  .bw-diff-c .cell.name { font-size: 15px; }

  /* Stat strip */
  .bw-stat-strip { padding: 48px 0; }
  .bw-stat-row { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
  .bw-stat .n { font-size: 40px; letter-spacing: -0.03em; }
  .bw-stat .l { font-size: 13px; margin-top: 8px; }

  /* Testimonials / Senja */
  .bw-testimonials h2 { font-size: 30px; margin-bottom: 28px; }
  .bw-senja-slot { padding: 40px 24px; border-radius: 16px; }
  .bw-senja-slot h3 { font-size: 20px; }
  .bw-senja-slot p { font-size: 14px; }
  .bw-senja-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
  .bw-senja-card { padding: 20px; }

  /* Pricing — anchor + guarantee */
  .bw-price-grid { grid-template-columns: 1fr; gap: 16px; }
  .bw-price-anchor { padding: 28px 24px; }
  .bw-price-anchor h2 { font-size: 24px; margin-bottom: 18px; }
  .bw-price-tiles { grid-template-columns: 1fr; gap: 10px; }
  .bw-price-tile { padding: 16px 18px; }
  .bw-price-tile.hl { transform: none; }
  .bw-price-tile .v { font-size: 26px; }
  .bw-guarantee { padding: 28px 24px; border-radius: 16px; }
  .bw-guarantee h3 { font-size: 22px; }
  .bw-guarantee .body p { font-size: 15px; }
  .bw-guarantee .cta { padding: 12px 18px; font-size: 13px; }

  /* FAQ */
  .bw-faq h2 { font-size: 28px; margin-bottom: 24px; }
  .bw-faq-item summary { font-size: 16px; padding: 18px 0; }
  .bw-faq-item .answer { font-size: 14px; padding-right: 20px; padding-bottom: 18px; }

  /* Final CTA */
  .bw-final-cta { padding: 80px 16px; }
  .bw-final-cta h2 { font-size: 42px; line-height: 1; margin-bottom: 14px; max-width: 14ch; }
  .bw-final-cta .sub { font-size: 15px; margin-bottom: 28px; }
  .bw-final-cta .ctabtn { padding: 18px 28px; font-size: 15px; }

  /* Bad Day Detector widget */
  .bw-bdd { padding: 28px 22px; gap: 24px; border-radius: 18px; }
  .bw-bdd h3 { font-size: 24px; }
  .bw-bdd p { font-size: 14px; margin-bottom: 20px; }
  /* (legacy .bw-bdd-form / report rules removed — widget now uses scatter + cards) */

  /* ============================================================
     LIVE DEMO — the zoomable interactive dashboard
     ============================================================ */
  .ld-section { padding: 56px 0 0; min-height: 0; }
  .ld-intro { margin-bottom: 28px; padding: 0 16px; }
  .ld-headline { font-size: 26px !important; line-height: 1.1; margin: 12px 0 10px; }
  .ld-sub { font-size: 14px; }
  .ld-stage-wrap { width: 94vw; height: 60vh; min-height: 460px; max-height: 600px; }
  .ld-stage { border-radius: 16px; }
  .ld-stage-body { padding: 12px 14px !important; }
  .ld-chrome { padding: 8px 12px; gap: 8px; }
  .ld-chrome .lights span { width: 9px; height: 9px; }
  .ld-chrome .addr { font-size: 10px; padding: 4px 10px; max-width: none; }
  .ld-chrome .skip-big { padding: 7px 10px 7px 8px; font-size: 11px; }
  .ld-chrome .skip-big .hint { display: none; }
  /* Floating coach callouts can overflow the small viewport — clamp width */
  .ld-callout { width: 240px !important; max-width: 60vw; }
  .ld-callout .bubble { padding: 12px 14px; }
  .ld-callout .bubble .line { font-size: 13px; }
  .ld-callout .bubble .sub { font-size: 11px; }
  /* CPC popover */
  .ld-cpc-pop { width: 280px; right: 4%; top: 50%; }
  .ld-cpc-pop header { font-size: 14px; padding: 12px 14px; }
  .ld-cpc-pop .body { font-size: 12px; padding: 12px 14px 2px; }
  /* Win overlay */
  .ld-win .card { padding: 28px 24px; }
  .ld-win .amount { font-size: 52px; }
  .ld-win .line { font-size: 16px; }
  .ld-win .math { font-size: 12px; }
  /* Modal */
  .ld-modal { padding: 18px 18px 14px; }
  .ld-modal > header h3 { font-size: 17px; }
  .bigchart { height: 200px; }

  /* Dashboard table — keep horizontal scroll, shrink padding */
  .ld-table th, .ld-table td { padding: 8px 10px; font-size: 12px; }
  .ld-table .td-name .name { max-width: 140px; font-size: 12px; }
  .ld-score { min-width: 52px; padding: 4px 10px; font-size: 12px; }
  .ld-dash-head h3 { font-size: 14px; }
  .ld-tabs .tab { padding: 8px 10px; font-size: 12px; }
  .ld-foot { padding: 8px 10px; font-size: 11px; }
  .ld-foot .totals { gap: 14px; }
  .ld-dash { gap: 10px; }

  /* Placeholder (for bracket c) */
  .ld-placeholder { padding: 36px 24px; border-radius: 16px; }
  .ld-placeholder h2 { font-size: 24px; }
  .ld-placeholder p { font-size: 14px; }

  /* ============================================================
     META COMPARE — keeps its data-dense look via horizontal scroll
     ============================================================ */
  .meta-section { padding: 56px 0 64px; }
  .meta-intro { padding: 0 16px; margin-bottom: 28px; }
  .meta-headline { font-size: 24px !important; }
  .meta-sub { font-size: 14px; }
  .meta-frame { margin: 0 12px; border-radius: 8px; }
  .meta-topbar { padding: 8px 10px; gap: 8px; flex-wrap: wrap; }
  .meta-topbar .search { width: 100%; order: 3; }
  .meta-topbar .bizpill { font-size: 12px; padding: 5px 8px; }
  .meta-topbar .right { gap: 6px; }
  .meta-subnav { padding: 8px 10px; flex-wrap: wrap; gap: 8px; }
  .meta-subnav .left { gap: 12px; flex-wrap: wrap; }
  .meta-filters { padding: 8px 10px; flex-wrap: wrap; gap: 8px; }
  .meta-filters .left, .meta-filters .right { flex-wrap: wrap; gap: 6px; }
  .meta-after { margin: 28px 16px 0; }
  .meta-after p { font-size: 17px; }
  .meta-after .quiet { font-size: 13px; }

  /* ---------- Scroll progress bar at top — keep, just thinner ---------- */
  .mk-scroll-progress { height: 2px; }

  /* ---------- Reveal/animation — disable horizontal slide on mobile to
                avoid layout overflow during the entry transition ---------- */
  .reveal { transform: none !important; }

  /* ---------- Bracket pill chip (already mobile-aware) — anchor lower ---------- */
  .bw-pill-wrap { bottom: 14px; }
}

/* ============================================================
   TIER 3 — Small phones ( <= 420px )
   ============================================================ */
@media (max-width: 420px) {
  .mk-container { padding: 0 14px; }
  .bw-hero-rotator { font-size: 32px !important; }
  .mk-h1 { font-size: 38px; }
  .mk-h2 { font-size: 28px; }
  .mk-final h2 { font-size: 40px; }
  .bw-final-cta h2 { font-size: 36px; }
  .bw-pain-headline { font-size: 26px; }
  .bw-diff-headline { font-size: 30px; }
  .bw-testimonials h2 { font-size: 26px; }
  .bw-faq h2 { font-size: 24px; }
  .mk-quote { font-size: 22px; }
  .mk-step-num { font-size: 72px; }

  /* Hero stats → single column at very small widths */
  .mk-hero-stats .stat { flex: 1 1 100%; }
  .mk-hero-stats .num { font-size: 30px; }

  /* Bracket pill chip — smaller padding */
  .bw-pill-chip { padding: 10px 14px; font-size: 12px; }

  /* Live demo callouts even tighter */
  .ld-callout { width: 200px !important; }
  .ld-headline { font-size: 22px !important; }
  .meta-headline { font-size: 21px !important; }
}