/* Phone layout layer — loaded after world-class.css; only touches <=760px. */
@media (max-width:760px) {

  /* ── Hero product: box was a fixed 440px around a 200px absolute mockup ── */
  .growth-product { height:auto !important; min-height:0 !important; padding-top:44px; }
  .growth-product .growth-dashboard-shell { position:relative !important; inset:auto !important; left:auto !important; top:auto !important; width:100% !important; }
  .growth-product .growth-product-glow { inset:30px 0 0 !important; width:auto !important; height:auto !important; }

  /* ── Pet Mode: unscale the 1536px canvas and stack its panels ─────────── */
  .pet-canvas {
    width:auto !important; height:auto !important; transform:none !important; margin:0 !important;
    display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:58px 12px 14px;
  }
  .pet-canvas > *:not(.pet-name) {
    position:relative !important; inset:auto !important;
    width:auto !important; min-width:0; grid-column:1 / -1;
  }
  .pet-canvas > .pet-name { left:14px !important; top:16px !important; }
  .pet-canvas > .pet-moods { grid-column:1; }
  .pet-canvas > .pet-stage { grid-column:2; height:auto !important; min-height:300px; }
  .bujji-pet-card, .bujji-overview-card { overflow:hidden !important; }
  .pet-stage .pet-character { width:100% !important; max-width:230px; }
  .pet-stage .pet-glow { width:180px !important; height:180px !important; }
  .pet-canvas > .pet-video { height:auto !important; }
  .pet-canvas .pet-video-area { height:auto !important; aspect-ratio:4 / 5; }
  .pet-canvas > .pet-biz { height:auto !important; }
  .pet-biz .pet-biz-grid {
    display:flex !important; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory;
    margin:0 -14px; padding:2px 14px 8px; scrollbar-width:none;
  }
  .pet-biz .pet-biz-grid::-webkit-scrollbar { display:none; }
  .pet-biz .pet-biz-grid > .pet-biz-card { flex:0 0 78%; min-width:0; scroll-snap-align:start; }
  .pet-biz .pet-biz-chips { grid-template-columns:1fr 1fr !important; gap:8px; }
  .pet-biz .pet-biz-chips > button { min-width:0; }

  /* ── Overview: unscale the 1664px canvas and stack its panels ─────────── */
  .pw-canvas {
    width:auto !important; height:auto !important; transform:none !important; margin:0 !important;
    display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:14px 12px;
  }
  .pw-canvas > .pw-left-shell,
  .pw-canvas > .pw-right-shell { display:none !important; }
  .pw-canvas > * {
    position:relative !important; inset:auto !important;
    width:auto !important; min-width:0; grid-column:1 / -1;
  }
  .pw-canvas > .pw-quad { grid-column:auto; }
  .pw-canvas > *:not(.pw-quad) { height:auto !important; }
  .pw-core > p { width:auto !important; max-width:none !important; }
  .pw-core .pw-free { position:relative !important; inset:auto !important; width:auto !important; height:auto !important; margin-top:16px; }
  .pw-core .pw-leaf { left:auto !important; right:14px !important; top:20px !important; width:46px !important; height:46px !important; }
  .pw-hero { display:flex !important; flex-direction:column; gap:14px; }
  .pw-hero > * { width:auto !important; min-width:0; }
  .pw-hero .pw-hero-right { grid-template-columns:1fr !important; }
  .pw-hero .pw-kpis { grid-template-columns:1fr 1fr !important; }
  .pw-canvas > .pw-strip {
    display:flex !important; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
    margin:0 -12px; padding:0 12px; gap:8px;
  }
  .pw-canvas > .pw-strip::-webkit-scrollbar { display:none; }
  .pw-strip > * { flex:0 0 auto; scroll-snap-align:start; }
  .pw-canvas > .pw-foot { display:flex !important; flex-wrap:wrap; justify-content:center; gap:6px 14px; }
  .pw-foot > * { position:static !important; }
  .bujji-overview-card > .pw-frame { display:none; }
}

@media (max-width:760px) {
  /* ── Enterprise Brain: orbit tags covered the phone chat — dock them below ── */
  .enterprise-phone-zone {
    display:grid !important; grid-template-columns:repeat(3,1fr); gap:8px;
    height:auto !important; min-height:0 !important; padding:8px 0 4px;
  }
  .enterprise-phone-zone > .enterprise-phone {
    position:relative !important; inset:auto !important; transform:none !important; translate:none !important;
    grid-column:1 / -1; order:-1; justify-self:center; margin:0 0 6px;
  }
  .enterprise-phone-zone > .enterprise-orbit-ring { display:none !important; }
  .enterprise-phone-zone > .enterprise-orbit-tag {
    position:relative !important; inset:auto !important; transform:none !important; animation:none !important;
    width:auto !important; height:auto !important; min-height:62px;
  }
  .enterprise-phone-zone > .enterprise-private-strip {
    position:relative !important; inset:auto !important; transform:none !important; translate:none !important;
    grid-column:1 / -1; order:1; justify-self:center; margin-top:6px;
  }

  /* ── Bujji Voice workspace: 800px panel was scaled to 0.43 ─────────────── */
  .voice-col-work { height:auto !important; }
  .voice-workspace-panel {
    width:auto !important; height:auto !important; transform:none !important; margin:0 !important;
    padding:14px 12px 16px !important;
  }
  .voice-workspace-panel > .voice-browser { width:768px; zoom:.38; margin:0 auto; }
  .voice-workspace-panel > .voice-flow-wrap { width:auto !important; margin-top:14px; }
  .voice-flow-wrap .voice-flow {
    display:flex !important; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
    margin:0 -12px; padding:4px 12px 6px;
  }
  .voice-flow-wrap .voice-flow::-webkit-scrollbar { display:none; }
  .voice-flow-wrap .voice-flow > button { flex:0 0 150px; scroll-snap-align:start; }
  .voice-flow-wrap .voice-flow > b { display:none; }
  .voice-workspace-panel > .voice-assurance {
    width:auto !important; display:grid !important; grid-template-columns:1fr !important; gap:8px; margin-top:12px;
  }
  .voice-assurance > .assure-arrow { display:none; }
  .voice-assurance > span { min-width:0; }
}
@media (min-width:361px) and (max-width:760px) { .voice-workspace-panel > .voice-browser { zoom:.39; } }
@media (min-width:391px) and (max-width:760px) { .voice-workspace-panel > .voice-browser { zoom:.43; } }
@media (min-width:431px) and (max-width:760px) { .voice-workspace-panel > .voice-browser { zoom:.48; } }
@media (min-width:521px) and (max-width:760px) { .voice-workspace-panel > .voice-browser { zoom:.6; } }
@media (min-width:641px) and (max-width:760px) { .voice-workspace-panel > .voice-browser { zoom:.76; } }

@media (max-width:760px) {
  /* ── Analytics: rows were fixed at 256px, leaving dead space in short tiles ── */
  #bujjiAnalytics .an-grid { grid-auto-rows:auto !important; }
  #bujjiAnalytics .an-grid > .an-card { height:auto !important; }

  /* ── Pricing: stacked plans faded in late (range was tuned for a row) ──── */
  #bujjiPricing .bp-plan { animation-range:entry 0% entry 55% !important; }

  /* ── Footer: two link columns instead of one long list ─────────────────── */
  .site-footer .ft-top { grid-template-columns:1fr 1fr !important; column-gap:18px; row-gap:26px; }
  .site-footer .ft-brand,
  .site-footer .ft-cta { grid-column:1 / -1; }
  .site-footer .ft-col { min-width:0; width:auto !important; }
  .site-footer .ft-col a { width:auto !important; min-height:36px; }
}

@media (max-width:760px) {
  /* in-page links landed under the fixed glass nav */
  section[id], article[id], header[id], footer[id] { scroll-margin-top:84px; }

  .pet-hud .pet-hud-now { flex-wrap:wrap; row-gap:4px; }
  .pet-hud .pet-hud-now time { white-space:nowrap; width:auto !important; margin-left:auto; }

  .growth-product .growth-dashboard-shell { width:100% !important; max-width:100%; }
}

@media (max-width:760px) {
  /* ── Readable minimums for the unscaled cards (desktop sizes were 7–9.5px
        because the canvases used to render at 2–4x and get scaled down) ── */
  #bujjiOverview small, #bujjiOverview .pw-pill, #bujjiOverview .pw-select,
  #bujjiOverview .up, #bujjiOverview .pw-chips > span, #bujjiOverview .pw-foot > span,
  #bujjiPetMode small, #bujjiPetMode li, #bujjiPetMode .pet-task > b, #bujjiPetMode .pet-task-count,
  #bujjiPetMode .pet-privacy-foot, #bujjiPetMode .pomo-state, #bujjiPetMode .pet-mini-btn,
  #bujjiPetMode .pet-well-row > em,
  #bujjiAnalytics small, #bujjiAnalytics th, #bujjiAnalytics [class^="l"] > em,
  #bujjiAnalytics .l1, #bujjiAnalytics .l2, #bujjiAnalytics .l3, #bujjiAnalytics .l4, #bujjiAnalytics .l5, #bujjiAnalytics .l6,
  #bujjiVoiceDemo small:not(.voice-browser small) { font-size:11px !important; line-height:1.35; }
  #bujjiPetMode .pet-task > time, #bujjiAnalytics .an-heat > b, #bujjiAnalytics .an-heat-times > span { font-size:10px !important; }

  /* ── Tap targets: 36–44px on touch ────────────────────────────────────── */
  .hamburger { min-width:44px; min-height:44px; justify-content:center; align-items:center; }
  #bujjiFeedback .ef-viewport { scrollbar-width:none; }
  #bujjiFeedback .ef-viewport::-webkit-scrollbar { display:none; }
  #voiceAlertList .wa-send, #voiceAlertList .wa-suggest, #voiceAlertList .wa-row-reply { min-height:36px; padding-inline:12px; }
  #voiceAlertList .wa-mic, #bujjiVoiceDemo .voice-icon-btn { min-width:36px; min-height:36px; }
  #voiceClearAlerts { min-height:32px; }
  #bujjiPetMode .pet-btn-green { min-height:38px; }
  #bujjiPetMode .pet-mini-btn { min-height:34px; padding-inline:12px; }
  #bujjiFeedback .ef-arrow { width:38px; height:38px; min-width:38px; min-height:38px; }
  #efBars > button { width:8px; height:8px; padding:0; position:relative; }
  #efBars > button.is-on { width:28px; }
  #efBars > button::after { content:""; position:absolute; inset:-14px 0; }
  .site-footer .ft-legal-pill { min-height:36px; }
}

@media (max-width:760px) {
  #bujjiAnalytics .an-chips { flex-wrap:wrap; width:auto !important; gap:6px; }
  #bujjiOverview .pw-chips { display:flex !important; flex-wrap:wrap; gap:6px; }
  #bujjiOverview .pw-chips > span { min-width:0; }
  #bujjiOverview .pw-integrations > * { min-width:0; }
  #bujjiOverview .pw-integrations { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
/* very small phones (≤360px) */
@media (max-width:360px) {
  .enterprise-phone-zone > .enterprise-phone { zoom:.9; }
  .voice-workspace-panel > .voice-browser { zoom:.33; }
  .voice-intro-panel { --vs:.6 !important; }
  .voice-alert-panel { --vs:.62 !important; }
}

@media (max-width:760px) {
  #bujjiOverview .pw-analytics .pw-kpis { grid-template-columns:1fr 1fr !important; gap:8px; }
  #bujjiFeedback .ef-controls { gap:4px; padding:8px 10px; max-width:100%; }
  #bujjiFeedback .ef-controls > #efBars { gap:6px; padding:0 6px; }
}

@media (max-width:760px) {
  /* hero grid track was sized by min-content (~320px) and clipped on narrow phones */
  .growth-hero-inner { grid-template-columns:minmax(0,1fr) !important; }
  .growth-hero-inner > * { min-width:0; }
  .growth-eyebrow { max-width:100%; white-space:normal; text-align:center; }
}

@media (max-width:760px) {
  /* ── Template demo: 360px scene overflowed and the photo covered the phone's
        reply buttons — fit the scene and tuck the photo behind the phone ──── */
  .mockup-create-demo .mockup-phone-scene { width:100% !important; max-width:360px; margin-inline:auto; }
  .mockup-phone-scene > .mockup-real-phone { left:0 !important; }
  .mockup-phone-scene > .mockup-phone-woman {
    z-index:1 !important; left:auto !important; right:-8px !important;
    width:56% !important; height:auto !important; top:auto !important; bottom:0;
  }
  .mockup-phone-scene > .mockup-phone-route { width:100% !important; }
}
@media (max-width:400px) { .mockup-phone-scene > .mockup-phone-woman { display:none !important; } .mockup-phone-scene > .mockup-real-phone { left:50% !important; translate:-50% 0; } }

/* ── Round 2 fixes ────────────────────────────────────────────────────────── */
@media (max-width:760px) {
  /* 1. hero platform pills align with the centred hero */
  .growth-platforms { justify-content:center; }

  /* 2. Broadcast: fixed 900px card + 540px stage scaled to .64 — stack the two
        mocks at real size instead */
  .mockup-suite-card:has(.broadcast-visual) { height:auto !important; min-height:0 !important; }
  .broadcast-visual { position:relative !important; inset:auto !important; height:auto !important; margin-top:22px; container-type:normal !important; overflow:visible !important; padding-bottom:10px; }
  /* keep the desktop side-by-side composition, just fitted to the width */
  .broadcast-visual .ads-live-stage {
    position:relative !important; inset:auto !important; transform:none !important;
    width:540px !important; height:470px !important; zoom:.6; margin:0 auto;
  }

  /* 3. AI Agents: orchestrator orbit was absolute over the feature list */
  .enterprise-agent-panel { height:auto !important; padding-bottom:24px; }
  .enterprise-agent-panel > .enterprise-orchestrator {
    position:relative !important; inset:auto !important; transform:none !important;
    margin:28px auto 8px; max-width:100%;
  }

  /* 5. Analytics footer banner: row layout crushed the text to 0px wide */
  #bujjiAnalytics .an-foot { flex-direction:column; align-items:flex-start; gap:14px; height:auto !important; }
  #bujjiAnalytics .an-foot > p { width:auto !important; min-width:0; flex:none; }
  #bujjiAnalytics .an-foot > p > b, #bujjiAnalytics .an-foot > p > small { width:auto !important; display:block; }

  /* 6. Overview leaf sits at the bottom of the core panel */
  .pw-core { padding-bottom:64px !important; }
  .pw-core .pw-leaf { top:auto !important; bottom:12px !important; right:16px !important; width:54px !important; height:54px !important; }

  /* 7. Overview footer list: drop the desktop separators, two tidy columns */
  .pw-canvas > .pw-foot { display:grid !important; grid-template-columns:1fr 1fr; gap:10px 12px; justify-items:start; padding:14px !important; }
  .pw-foot > span { border:0 !important; padding:0 !important; margin:0 !important; text-align:left; min-width:0; }
  .pw-canvas > .pw-neural { overflow:hidden; border-radius:18px; }
  .pw-canvas > .pw-neural img { width:100%; height:auto; display:block; }
}

@media (max-width:760px) {
  /* 4. Pet Mode: panels kept desktop fixed heights; let them size to content */
  .pet-canvas > .pet-hud, .pet-canvas > .pet-stats { height:auto !important; }
  .pet-canvas > .pet-stats { grid-template-columns:1fr 1fr !important; gap:10px; }
  .pet-canvas > .pet-stats > * { height:auto !important; min-height:104px; }
  .pet-canvas > .pet-moods, .pet-canvas > .pet-stage { align-self:stretch; }
  .pet-canvas > .pet-stage { display:flex; align-items:center; justify-content:center; }
}

@media (max-width:760px) {
  /* platform pills: one compact row */
  .growth-platforms { flex-wrap:nowrap !important; gap:6px !important; }
  .growth-platforms > * { flex:1 1 0; min-width:0; justify-content:center; padding:8px 6px !important; gap:5px !important; font-size:12px !important; white-space:nowrap; }
  .growth-platforms > * svg, .growth-platforms > * img { width:14px !important; height:14px !important; flex:none; }

  /* CTA pair side by side */
  .growth-actions { flex-direction:row !important; flex-wrap:nowrap !important; gap:8px !important; }
  .growth-actions > * { flex:1 1 0; min-width:0; width:auto !important; min-height:52px; padding:10px 8px !important; font-size:13.5px !important; gap:6px !important; white-space:nowrap; }
}
@media (max-width:420px) {
  .growth-actions > * { font-size:13px !important; padding:10px 6px !important; letter-spacing:-.01em; }
  .growth-actions > * > svg, .growth-actions > * > i, .growth-actions > * > span:first-child:not(:only-child):empty { display:none !important; }
}
@media (max-width:420px) { .growth-actions svg { display:none !important; } }
@media (max-width:420px) { .growth-actions > * > b { display:none !important; } }

@media (max-width:760px) {
  /* template demo card: desktop min-heights (1110 / 780px) left a big gap under the phone */
  .mockup-create-card { min-height:0 !important; height:auto !important; }
  .mockup-create-card .mockup-create-demo { min-height:0 !important; height:auto !important; container-type:normal !important; }
  .mockup-create-demo .mockup-phone-scene { height:500px !important; }
}

@media (max-width:360px) { .broadcast-visual .ads-live-stage { zoom:.5 !important; } }
@media (min-width:361px) and (max-width:390px) { .broadcast-visual .ads-live-stage { zoom:.58 !important; } }
@media (min-width:391px) and (max-width:430px) { .broadcast-visual .ads-live-stage { zoom:.63 !important; } }
@media (min-width:431px) and (max-width:520px) { .broadcast-visual .ads-live-stage { zoom:.72 !important; } }
@media (min-width:521px) and (max-width:760px) { .broadcast-visual .ads-live-stage { zoom:.9 !important; } }
@media (max-width:760px) {
  /* children are absolute (tabs 0–161px, scene at 178px + 500px) */
  .mockup-create-card .mockup-create-demo { height:680px !important; }
}
@media (max-width:760px) {
  /* photo in front of the phone like desktop, kept to the right edge */
  .mockup-phone-scene > .mockup-phone-woman { z-index:4 !important; width:50% !important; right:-14px !important; pointer-events:none; }
}

@media (max-width:760px) {
  /* footer legal links: one compact row */
  .site-footer .ft-bottom { flex-wrap:wrap; }
  .site-footer .ft-legal { width:100%; flex-wrap:nowrap !important; justify-content:space-between !important; gap:5px !important; }
  .site-footer .ft-legal-pill { flex:1 1 auto; min-width:0; justify-content:center; padding:6px 6px !important; font-size:10.5px !important; white-space:nowrap; gap:0 !important; min-height:34px; }
  .site-footer .ft-legal-pill svg { display:none !important; }
}

/* ── Round 3: phone navigation, swipeable pricing, readable plan matrix ─────
   The desktop nav is hidden site-wide (font-trial.css), which left phones with
   no way to move around a 28,000px page. */
.m-bar, .m-bar-spacer, .bp-dots { display:none; }

@media (max-width:760px) {
  :root { --m-bar-h:calc(56px + env(safe-area-inset-top, 0px)); }
  html { scroll-behavior:smooth; scroll-padding-top:calc(var(--m-bar-h) + 8px); }
  @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

  /* 1. Top bar: logo, Pricing, Install. Fixed (the body clips overflow, which
        breaks sticky) with a spacer of the same height so nothing hides under it. */
  .m-bar-spacer { display:block; height:var(--m-bar-h); }
  .m-bar {
    display:flex; align-items:center; gap:6px;
    position:fixed; inset:0 0 auto 0; z-index:900; height:var(--m-bar-h);
    padding:env(safe-area-inset-top, 0px) 14px 0;
    background:rgba(255,255,255,.84);
    -webkit-backdrop-filter:saturate(1.6) blur(16px); backdrop-filter:saturate(1.6) blur(16px);
    border-bottom:1px solid rgba(15,23,42,.07);
    transition:transform .28s ease;
  }
  .m-bar.is-hidden { transform:translateY(-101%); }
  .m-bar-logo {
    display:inline-flex; align-items:center; gap:8px; margin-right:auto; min-height:44px;
    font-size:17px; font-weight:800; letter-spacing:-.02em; color:#0d1524; text-decoration:none;
  }
  .m-bar-logo img { width:30px; height:30px; border-radius:9px; display:block; }
  .m-bar-link {
    display:inline-flex; align-items:center; min-height:44px; padding:0 10px;
    font-size:14px; font-weight:650; color:#334155; text-decoration:none;
  }
  .m-bar-cta {
    display:inline-flex; align-items:center; min-height:40px; padding:0 16px; border-radius:999px;
    font-size:13.5px; font-weight:800; color:#fff; text-decoration:none; white-space:nowrap;
    background:linear-gradient(135deg,#d58c0e 0%,#e4a40f 100%); box-shadow:0 6px 16px rgba(213,140,14,.3);
  }
  .m-bar-cta:active { transform:scale(.97); }

  /* 2. Pricing: one swipeable row in price order (Free to Ultra) instead of
        five stacked cards ~3,000px tall. mobile.js opens it on the popular plan. */
  #bujjiPricing .bp-grid {
    display:flex !important; position:relative; gap:12px; overflow-x:auto; overflow-y:hidden;
    justify-content:flex-start;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    width:auto !important; margin:0 -14px; padding:22px 14px 14px;
    overscroll-behavior-x:contain;
  }
  #bujjiPricing .bp-grid::-webkit-scrollbar { display:none; }
  /* the neighbouring plans fade in at the edges instead of showing a cut-off sliver of text */
  #bujjiPricing .bp-grid { -webkit-mask-image:linear-gradient(to right,transparent 0,#000 38px,#000 calc(100% - 38px),transparent 100%); mask-image:linear-gradient(to right,transparent 0,#000 38px,#000 calc(100% - 38px),transparent 100%); }
  #bujjiPricing .bp-grid > .bp-plan {
    flex:0 0 min(82%, 330px); min-width:0; width:auto !important;
    scroll-snap-align:center; scroll-snap-stop:always;
    animation:none !important; opacity:1 !important; transform:none !important; translate:none !important;
  }
  #bujjiPricing .bp-grid > .bp-plan[data-bp-plan="free"]  { order:1 !important; }
  #bujjiPricing .bp-grid > .bp-plan[data-bp-plan="basic"] { order:2 !important; }
  #bujjiPricing .bp-grid > .bp-plan[data-bp-plan="air"]   { order:3 !important; }
  #bujjiPricing .bp-grid > .bp-plan[data-bp-plan="pro"]   { order:4 !important; }
  #bujjiPricing .bp-grid > .bp-plan[data-bp-plan="ultra"] { order:5 !important; }
  #bujjiPricing .bp-dots { display:flex; justify-content:center; align-items:center; gap:8px; padding:2px 0 6px; }
  #bujjiPricing .bp-dots > i {
    display:block; width:8px; height:8px; border-radius:999px; background:#cbd5e1;
    transition:width .25s ease, background-color .25s ease; cursor:pointer;
  }
  #bujjiPricing .bp-dots > i.on { width:24px; background:#16a34a; }
  #bujjiPricing .bp-cta { min-height:48px; display:flex; align-items:center; justify-content:center; }
  .bp-cycle-row > .bp-toggle > button { min-height:44px; }

  /* 3. Compare Plans modal: the Feature column took ~250px of a 352px window,
        so only "Free" showed and the other four plans were off-screen unseen. */
  .bp-matrix { width:calc(100vw - 20px); max-height:92vh; max-height:92dvh; border-radius:20px; }
  .bp-matrix-in { max-height:92vh; max-height:92dvh; }
  .bp-matrix-head { position:relative; padding:16px 58px 10px 16px !important; gap:4px !important; }
  .bp-matrix-head h4 { font-size:21px !important; margin-top:6px !important; }
  .bp-matrix-note { font-size:12px !important; line-height:1.4; }
  .bp-matrix-note::after { content:" Swipe sideways to see every plan \2192"; color:#16a34a; font-weight:700; }
  .bp-matrix-x { position:absolute; top:12px; right:12px; }
  .bp-matrix thead th, .bp-matrix td { padding:11px 10px !important; font-size:12.5px; text-align:center; min-width:88px; }
  .bp-matrix thead th:first-child, .bp-matrix tbody th {
    min-width:122px; max-width:128px; white-space:normal !important; text-align:left !important;
    font-size:12.5px; line-height:1.3; padding:11px 10px !important;
    box-shadow:6px 0 10px -8px rgba(15,23,42,.38);
  }

  /* 4. Hero badge and the real tap targets */
  .growth-eyebrow, .growth-eyebrow * { font-size:11.5px !important; line-height:1.35; }
  .site-footer a, .site-footer .ft-col a { min-height:44px; display:inline-flex; align-items:center; }
  .site-footer .ft-legal-pill { min-height:40px; }
  .fq-btn, .bp-compare { min-height:48px; }
}

@media (max-width:760px) {
  /* Stack contact actions so longer and translated labels stay inside the card. */
  .site-footer .ft-cta { display:grid; grid-template-columns:minmax(0,1fr); min-width:0; }
  .site-footer .ft-cta > :not(.ft-cta-go):not(.ft-cta-demo) { grid-column:1 / -1; }
  .site-footer .ft-cta-go, .site-footer .ft-cta-demo {
    display:flex; width:100%; min-width:0; height:auto; min-height:48px; margin-top:12px; padding:12px;
    justify-content:center; gap:8px; font-size:14px; white-space:normal; box-sizing:border-box;
  }
  .site-footer .ft-cta-demo b { margin:0; }
  .site-footer .ft-cta-cal { background:none; width:20px; height:20px; }
  .site-footer .ft-cta-cal svg { width:17px; height:17px; }
  .site-footer .ft-cta-go svg { width:16px; height:16px; }

  /* footer bottom: copyright on its own line, then the social icons, then the legal row */
  .site-footer .ft-bottom { justify-content:flex-start; row-gap:14px; }
  .site-footer .ft-copy { width:100%; }
  .site-footer .ft-social { margin-left:0; gap:10px; }
  .site-footer .ft-social a { width:44px; height:44px; padding:0; justify-content:center; }
  .site-footer .ft-sep { display:none; }
}

@media (max-width:760px) {
  /* Bujji Alert card: stats and Hands-free stacked, so nothing is cut off at the edge */
  .wa-alert-foot { display:grid !important; grid-template-columns:1fr !important; gap:10px !important; }
  .wa-alert-foot .voice-alert-stats { display:grid !important; grid-template-columns:repeat(3,1fr); gap:6px; width:100%; }
  .wa-alert-foot .voice-alert-stats > span { min-width:0; padding:0 4px !important; }
  .wa-alert-foot .voice-alert-stats small { white-space:normal; overflow-wrap:anywhere; font-size:11.5px; }
  .wa-alert-foot .voice-handsfree { width:100% !important; box-sizing:border-box; }

  /* "How it works" scrolls sideways: say so */
  .voice-flow-wrap::after { content:'Swipe to see all 4 steps \2192'; display:block; margin-top:10px; text-align:center; color:#73829a; font-size:12px; font-weight:600; }
}

/* "Coming soon" state for the install buttons: same size and shape as before, but
   plainly not clickable (no hover lift, no pointer, no arrow). */
.growth-primary.is-soon, .growth-primary.is-soon:hover {
  cursor:default; transform:none; filter:none; color:#0f5132;
  background:linear-gradient(135deg,#ecfdf3 0%,#d9f7e4 100%);
  border:1px solid #9fe0b8; box-shadow:0 8px 20px rgba(18,160,77,.10);
}
.growth-primary.is-soon { user-select:none; }
.soon-dot { width:9px; height:9px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.22); flex:none; }
@media (max-width:760px) {
  .m-bar-cta.is-soon {
    cursor:default; color:#0f5132; background:#ecfdf3; border:1px solid #9fe0b8; box-shadow:none;
  }
  .m-bar-cta.is-soon:active { transform:none; }
}

/* ── Round 4: phone gaps, carousel and mascot (reported on a real Android phone) ── */
@media (max-width:760px) {
  /* 1. Hero: the fixed top bar already has its own spacer, so the 88px desktop-era
        padding left a ~110px empty band above the first badge. */
  .hero.growth-hero { padding-top:22px !important; }

  /* 2. Scroll-driven reveals start the next panel at opacity 0 and only finish
        ~540px into the viewport, which showed as a big blank gap between cards
        on a phone. Panels are simply present on phones. */
  .reveal,
  .template-story.reveal, .mockup-suite-grid.reveal, .bujji-voice-card.reveal,
  .enterprise-agent-card.reveal, .bujji-pet-card.reveal, .feature-explorer.reveal,
  .knowledge-workspace.reveal, .desktop-story.reveal, .ai-workbench.reveal,
  .journey-wrap.reveal, .bujji-companion.reveal, .growth-product.reveal, .pairing-demo.reveal {
    animation:none !important; opacity:1 !important; translate:none !important; scale:none !important;
    filter:none !important; will-change:auto !important;
  }

  /* 3. Overview analytics: seven tiles in two columns left an empty cell. */
  #bujjiOverview .pw-analytics .pw-kpis > span:last-child:nth-child(odd) { grid-column:1 / -1; }

  /* 4. Pet Mode: Bujji was only ~265px tall in a ~350px panel. */
  .pet-canvas > .pet-stage { min-height:340px; }
  .pet-stage .pet-character { width:122% !important; max-width:none !important; }

  /* 5. Reviews: native swipe, one card per view (see world-class.js; the desktop
        transform paging pushed cards half out of the window). */
  #bujjiFeedback .ef-track { transform:none !important; transition:none !important; }
  #bujjiFeedback .ef-card { flex:0 0 min(320px, 82%) !important; }
  #bujjiFeedback .ef-viewport { scroll-behavior:smooth; overscroll-behavior-x:contain; }
}

/* ── Phone image weight: the 1254px avatar sprite (1.3MB) is only ever shown at 32–44px. The 640px
      copy keeps the same 2×2 layout, so every background-position and size still applies. ── */
@media (max-width:760px) {
  .pet-quick-avatar,
  .pet-avatars u:nth-child(1), .pet-avatars u:nth-child(2), .pet-avatars u:nth-child(3), .pet-avatars u:nth-child(4),
  .pet-lead-avatar,
  .an-faces > span { background-image:url("assets/seo/customer-avatars-640.webp"); }
  /* the fifth face is a 32px crop of the business-owner photo (1.5MB original) */
  .an-faces .f5 { background-image:url("assets/seo/business-owner-cutout-320.webp"); }
}

/* ── Round 5: full-width mobile layout ──────────────────────────────────────
   On a 412px viewport the container had 18px side padding, the card border 1px,
   and the canvas 12px inner padding = 62px dead space (15% of the screen).
   Cut it to 8px container + 6px canvas = ~28px total ⇒ 93% utilisation. ── */
@media (max-width:760px) {
  /* 1. Global container padding: 18→8px on phones */
  .container { padding-inline:8px !important; }

  /* 2. Cards go nearly edge-to-edge with tighter radius */
  .bujji-overview-card,
  .bujji-pet-card,
  .mockup-suite-card,
  .enterprise-agent-card,
  .bujji-voice-card { border-radius:18px !important; }

  /* 3. Overview canvas: reduce inner padding 12→6px */
  .pw-canvas { padding:10px 6px !important; }

  /* 4. Pet canvas: reduce inner padding 12→6px */
  .pet-canvas { padding:44px 6px 10px !important; }

  /* 5. Mockup suite cards: reduce side padding 16→10px */
  .mockup-suite-card { padding:18px 10px !important; }

  /* 6. Overview KPI grid: was pushed in by parent padding stacking; let it fill */
  .pw-hero .pw-kpis { gap:6px !important; }
  .pw-kpis > span { border-radius:12px !important; }

  /* 7. Pet biz grid scroll margins (matched to new 6px canvas padding) */
  .pet-biz .pet-biz-grid { margin:0 -6px !important; padding:2px 6px 8px !important; }

  /* 8. Overview strip scroll margins (matched to new 6px canvas padding) */
  .pw-canvas > .pw-strip { margin:0 -6px !important; padding:0 6px !important; }

  /* 9. Overview footer: use full width */
  .pw-canvas > .pw-foot { padding:10px !important; }

  /* 10. Feature explorer & AI workbench: reduce side padding */
  .feature-explorer { border-radius:18px !important; }
  .ai-workbench { padding:16px 10px !important; }

  /* 11. Section vertical padding: reduce excessive top/bottom padding between cards */
  section.pad.mockup-live-suite { padding:28px 0 32px !important; }
  .mockup-suite-grid { gap:10px !important; }
}

/* ── Round 6: hero benefit cards (5 stacked ~170px tiles) hidden on phones ──
   Same points are covered again in the cards below; desktop keeps them. */
@media (max-width:760px) {
  .growth-hero .growth-proof-grid { display:none !important; }
}