/* ============================================================
   Mekanys — Shared mobile/tablet stylesheet
   Targets React-rendered inline `style` attributes.
   After React renders, `style` is dash-cased with no quote chars.
   ============================================================ */

/* ─── Tablet: ≤900px ─────────────────────────────────────── */
@media (max-width: 900px) {
  /* Section padding */
  section[style*="padding: 140px 40px"],
  section[style*="padding: 120px 40px"],
  section[style*="padding: 160px 40px"],
  section[style*="padding: 180px 40px"],
  section[style*="padding: 100px 40px"],
  section[style*="padding: 80px 40px"] {
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
  section[style*="40px 120px"],
  section[style*="40px 100px"] {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  footer[style] {
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-top: 60px !important;
  }

  /* Universal: any multi-col inline grid → single column */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  /* Restore 2-col for stat-card grids, hero stats grid (keep numbers visible) */
  .mkn-stats-2col[style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  /* Hero mascot scene — tame the halo/orbit so they don't push layout */
  .mkn-mascot-stage { min-height: 420px !important; }
  .mkn-mascot-halo {
    width: min(420px, 90vw) !important;
    height: min(420px, 90vw) !important;
  }
  .mkn-mascot-orbit {
    width: min(380px, 85vw) !important;
    height: min(380px, 85vw) !important;
  }
  .mkn-mascot-stage img { width: min(320px, 75%) !important; height: auto !important; }

  /* Floor shadow under mascot */
  .mkn-mascot-stage [style*="bottom: 60px"][style*="width: 280px"] {
    width: min(220px, 70%) !important;
  }

  /* Implementation Approach — shrink 3D scene on tablets so phase slabs don't get clipped */
  .mkn-impl-3d {
    height: 540px !important;
    transform: scale(0.78);
    transform-origin: 50% 50%;
  }

  /* Hero floating absolute decorations from old variants — clip them */
  section [style*="position: absolute"][style*="width: 220px"][style*="height: 220px"],
  section [style*="position: absolute"][style*="width: 300px"][style*="height: 220px"] {
    display: none !important;
  }

  /* Reveal the mobile-only order hint */
  .mobile-order-top { order: -1; }

  /* Display type scaling */
  h1 {
    font-size: clamp(40px, 9vw, 56px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
  }
  h2 {
    font-size: clamp(32px, 7vw, 44px) !important;
    line-height: 1.08 !important;
  }

  /* Nav — hide desktop link row */
  .mkn-nav-links { display: none !important; }
  .mkn-nav-mobile-toggle { display: grid !important; }

  /* Nav container */
  nav[style*="padding: 20px 40px"],
  nav[style*="padding: 24px 40px"],
  nav[style*="padding: 18px 40px"],
  nav[style*="padding: 16px 40px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* max-width containers stay max-width 100% */
  [style*="max-width: 1280px"],
  [style*="max-width: 1320px"],
  [style*="max-width: 1240px"],
  [style*="max-width: 1220px"],
  [style*="max-width: 1200px"],
  [style*="max-width: 1180px"],
  [style*="max-width: 1140px"],
  [style*="max-width: 1120px"],
  [style*="max-width: 1100px"],
  [style*="max-width: 1080px"],
  [style*="max-width: 980px"],
  [style*="max-width: 940px"],
  [style*="max-width: 900px"],
  [style*="max-width: 820px"],
  [style*="max-width: 720px"],
  [style*="max-width: 640px"] {
    max-width: 100% !important;
  }

  /* Big stat numbers */
  [style*="font-size: 180px"],
  [style*="font-size: 160px"],
  [style*="font-size: 140px"],
  [style*="font-size: 120px"] {
    font-size: 88px !important;
    line-height: 1 !important;
  }
  [style*="font-size: 100px"],
  [style*="font-size: 96px"],
  [style*="font-size: 88px"] {
    font-size: 64px !important;
  }
  /* Hero CSAT card — slightly smaller */
  [style*="font-size: 64px"] {
    font-size: 44px !important;
  }
  /* Very-long font sizes on headings in hero etc */
  [style*="font-size: 80px"],
  [style*="font-size: 72px"] {
    font-size: 48px !important;
    line-height: 1.05 !important;
  }
  [style*="font-size: 56px"] {
    font-size: 40px !important;
    line-height: 1.05 !important;
  }
}

/* ─── Phone: ≤600px ──────────────────────────────────────── */
@media (max-width: 600px) {
  /* Implementation Approach — swap 3D scene for stacked list */
  .mkn-impl-3d, .mkn-impl-tabs { display: none !important; }
  .mkn-impl-mobile { display: flex !important; }

  /* Automation Pipeline — swap desktop 5-col grid for stacked cards */
  .mkn-pipeline-desktop { display: none !important; }
  .mkn-pipeline-mobile { display: flex !important; }
  .mkn-pipeline-card { padding: 22px 18px !important; border-radius: 18px !important; }
  .mkn-pipeline-card input[type="range"] { margin-top: 18px !important; }
  /* Scrubber row → vertical stack on small screens */
  .mkn-pipeline-card [style*="grid-template-columns: auto 1fr auto"] {
    grid-template-columns: auto 1fr auto !important;
    gap: 14px !important;
    margin-top: 28px !important;
    padding-top: 22px !important;
  }
  /* Reduction readout — full width below header */
  section#pipeline [style*="grid-template-columns: 1fr auto"] {
    grid-template-columns: 1fr !important;
  }
  section#pipeline [style*="min-width: 220px"] { min-width: 0 !important; }

  section[style] {
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  /* Hero gets a bit more top padding to clear nav */
  section[style*="padding: 140px 40px 100px"],
  section[style*="padding: 160px 40px"] {
    padding-top: 92px !important;
  }
  footer[style] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  h1 {
    font-size: clamp(36px, 11vw, 48px) !important;
  }
  h2 {
    font-size: clamp(26px, 7.5vw, 34px) !important;
  }

  /* Big card paddings */
  [style*="padding: 44px 44px"],
  [style*="padding: 48px 48px"],
  [style*="padding: 44px"],
  [style*="padding: 48px"],
  [style*="padding: 56px"],
  [style*="padding: 60px 48px"],
  [style*="padding: 60px 56px"],
  [style*="padding: 56px 48px"],
  [style*="padding: 36px 32px"] {
    padding: 24px !important;
  }

  /* Smaller stat numbers still */
  [style*="font-size: 180px"],
  [style*="font-size: 160px"],
  [style*="font-size: 140px"],
  [style*="font-size: 120px"] {
    font-size: 64px !important;
  }
  [style*="font-size: 96px"] {
    font-size: 56px !important;
  }
  [style*="font-size: 64px"] {
    font-size: 38px !important;
  }
  [style*="font-size: 44px"] {
    font-size: 32px !important;
  }
  [style*="font-size: 34px"] {
    font-size: 26px !important;
  }

  /* Tweaks panel tweak */
  .tweaks {
    right: 10px !important;
    bottom: 10px !important;
    width: calc(100vw - 20px) !important;
    max-width: 320px !important;
  }

  span.nowrap, em.nowrap { white-space: normal !important; }

  /* Hide desktop-only flourishes */
  .desktop-only { display: none !important; }

  /* Hero CTA buttons — slim, side-by-side, room to breathe */
  .mkn-hero-cta a[href="#contact"],
  .mkn-hero-cta a[href="use-cases.html"] {
    flex: 1 1 calc(50% - 5px) !important;
    justify-content: center !important;
    padding: 14px 18px !important;
    font-size: 14.5px !important;
    box-shadow: 0 6px 16px color-mix(in oklab, var(--accent) 30%, transparent) !important;
  }
  .mkn-hero-cta { gap: 10px !important; }

  /* Services interactive grid — much tighter on mobile */
  section#services [style*="grid-template-columns: repeat(4"] {
    gap: 8px !important;
  }
  section#services button[style*="min-height: 170px"] {
    min-height: 0 !important;
    padding: 14px 16px !important;
    border-radius: 12px !important;
  }
  section#services button[style*="min-height: 170px"] [style*="font-size: 20px"] {
    font-size: 15px !important;
    line-height: 1.2 !important;
  }
  /* Services detail panel — slim padding, smaller heading */
  section#services [style*="padding: 44px 44px"] {
    padding: 24px 20px !important;
    gap: 16px !important;
  }

  /* Hero — hide big mascot stage on mobile entirely; show inline Meka beside the headline */
  .mkn-mascot-stage { display: none !important; }
  .mkn-mascot-mobile {
    display: block !important;
    position: absolute !important;
    top: 40px;
    right: 50px;
    z-index: 5;
    pointer-events: none;
  }
  .mkn-mascot-mobile img {
    width: 130px !important;
  }
  /* Reduce headline a bit so Meka has room to peek */
  .mkn-headline-wrap h1 {
    font-size: clamp(40px, 11vw, 56px) !important;
    padding-right: 90px !important;
  }

  /* Mobile clutter trim: hide secondary inline email taglines and email links in hero/CTA rows */
  .mkn-hide-mobile { display: none !important; }

  /* Reduce bob amplitude on mobile (saves jank) */
  @keyframes mkn-bob-mobile { 0%,100% { transform: translateY(0) rotate(-1deg);} 50% { transform: translateY(-8px) rotate(1deg);} }
  .mkn-mascot-stage img { animation-name: mkn-bob-mobile !important; }

  /* Floating CSAT/Pledge cards in old hero variants — hide */
  .mkn-floating-card { display: none !important; }

  /* Founder house illustration — already responsive (aspectRatio 1/1), good */

  /* Nav drawer when open — full width sheet */
  .mkn-nav-drawer { width: 100vw !important; max-width: 100vw !important; right: 0 !important; }

  /* Reduce gap on hero stats grid */
  .mkn-stats-2col { gap: 10px !important; }
  .mkn-stats-2col [style*="padding: 22px 24px"] { padding: 18px !important; }
  .mkn-stats-2col [style*="padding: 18px 16px"] { padding: 16px !important; }
  .mkn-stats-2col [style*="min-height: 130px"] { min-height: 110px !important; }
}

/* ─── Global image guard ─────────────────────────────────── */
@media (max-width: 900px) {
  img { max-width: 100%; height: auto; }
}

/* Smooth horizontal scroll prevention */
html, body { overflow-x: hidden; }