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