/* ============================================================
   Autometa AI — site-wide mobile responsiveness
   Loaded AFTER each page's inline styles so it overrides where needed.
   Keep this file lean — only rules that apply broadly or fix real bugs.
   Breakpoints used:
     1000px — tablet (stack 2-col content blocks)
      900px — small tablet / large phone (stack nav, multi-col grids)
      640px — phone (collapse to 1-col, smaller type)
      420px — small phone (compact padding)
   ============================================================ */

/* ========== HAMBURGER BUTTON ========== */
.mobile-menu-toggle{
  display:none;
  background:transparent; border:1px solid transparent;
  width:40px; height:40px; border-radius:10px;
  align-items:center; justify-content:center;
  cursor:pointer; color:var(--ink, #0E1116);
  margin-left:8px;
  transition:background 150ms ease;
  flex:0 0 auto;
}
.mobile-menu-toggle:hover{ background:var(--surface-alt, #F5F6F7); }
.mobile-menu-toggle:focus-visible{
  outline:2px solid var(--primary, #0B4A3A);
  outline-offset:2px;
}

/* ========== MOBILE NAV DRAWER ========== */
.mobile-drawer{
  position:fixed; inset:0;
  background:rgba(14,17,22,0.45);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  z-index:1000;
  opacity:0; pointer-events:none;
  transition:opacity 220ms ease;
}
.mobile-drawer.open{ opacity:1; pointer-events:auto; }

.mobile-drawer-inner{
  position:absolute; inset:0;
  width:100%;
  background:#fff;
  padding:18px 22px 40px;
  display:flex; flex-direction:column;
  transform:translateY(-12px);
  opacity:0;
  transition:transform 240ms cubic-bezier(.2,.8,.2,1), opacity 200ms ease;
  overflow-y:auto;
}
.mobile-drawer.open .mobile-drawer-inner{
  transform:translateY(0);
  opacity:1;
}

/* RTL support — overlay covers full viewport in any direction */
html[dir="rtl"] .mobile-drawer-inner{
  transform:translateY(-12px);
}
html[dir="rtl"] .mobile-drawer.open .mobile-drawer-inner{ transform:translateY(0); }

.mobile-drawer-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:4px 0 20px;
  border-bottom:1px solid var(--border, #E5E9ED);
}
.mobile-drawer-header .wordmark{
  font-family:'Fraunces',serif; font-weight:500; font-size:20px;
  color:var(--ink, #0E1116);
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none;
}
.mobile-drawer-header .wordmark .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--accent, #D4623E);
}
.mobile-drawer-close{
  background:var(--surface-alt, #F5F6F7); border:none;
  width:44px; height:44px; border-radius:50%;
  font-size:26px; line-height:1;
  color:var(--ink, #0E1116);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background 150ms ease, transform 150ms ease;
}
.mobile-drawer-close:hover{ background:#E5E9ED; transform:scale(1.05); }
.mobile-drawer-close:active{ transform:scale(0.95); }

.mobile-drawer-links{
  display:flex; flex-direction:column; gap:2px;
  margin-top:16px; list-style:none; padding:0;
}
.mobile-drawer-links a{
  font-family:'Inter',system-ui,sans-serif;
  font-size:17px; font-weight:500;
  color:var(--ink, #0E1116) !important;
  padding:14px 14px;
  border-radius:10px;
  text-decoration:none;
  display:flex; align-items:center; justify-content:space-between;
  border:1px solid transparent;
  transition:background 150ms ease, border-color 150ms ease;
}
.mobile-drawer-links a:hover,
.mobile-drawer-links a:active{
  background:var(--surface-alt, #F5F6F7);
}
.mobile-drawer-links a.current{
  background:var(--surface-alt, #F5F6F7);
  color:var(--primary, #0B4A3A) !important;
}
.mobile-drawer-links .section-label{
  font-family:'JetBrains Mono',monospace;
  font-size:11px; font-weight:600;
  color:var(--ink-mute, #8A94A2);
  letter-spacing:0.1em; text-transform:uppercase;
  padding:18px 14px 6px;
}
.mobile-drawer-links a.sub{
  padding:10px 14px 10px 28px;
  font-size:15px;
  color:var(--ink-soft, #3E4855) !important;
}
.mobile-drawer-links a.cta{
  background:var(--primary, #0B4A3A);
  color:#fff !important;
  margin-top:20px;
  justify-content:center;
  padding:14px;
  border-radius:999px;
  font-weight:600;
}
.mobile-drawer-links a.cta:hover{
  background:var(--primary-hover, #083327);
}
.mobile-drawer-lang{
  margin-top:18px; padding:12px 14px;
  display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid var(--border, #E5E9ED);
  padding-top:18px;
  font-size:13px; color:var(--ink-mute, #8A94A2);
}
.mobile-drawer-lang button{
  font-family:inherit; font-size:13px; font-weight:600;
  color:var(--ink, #0E1116);
  background:var(--surface-alt, #F5F6F7);
  border:1px solid var(--border, #E5E9ED);
  padding:6px 12px; border-radius:999px;
  cursor:pointer;
}

/* ========== NAV BEHAVIOUR ========== */
@media (max-width: 900px){
  /* Hide desktop nav links (everything except CTA + hamburger).
     Also hide the language toggle — it's replicated inside the drawer. */
  .nav-links > a:not(.nav-cta),
  .nav-links > div.services-wrap,
  .nav-links > .lang-toggle{
    display:none !important;
  }
  .mobile-menu-toggle{ display:inline-flex !important; }
  .nav-cta{
    padding:9px 16px !important;
    font-size:14px !important;
    margin-left:0 !important;
  }
  .nav-inner{ gap:6px; }

  /* Playbook library nav (different structure) */
  .nav-right .lang-toggle{ display:none !important; }
}

/* On phones, hide the top-nav "Book Free Audit" pill entirely.
   The sticky bottom CTA appears on scroll, plus the WhatsApp button
   in the hero handle conversion. */
@media (max-width: 640px){
  .nav-cta{ display:none !important; }
}

/* ========== CONTAINERS + SECTIONS ========== */
@media (max-width: 640px){
  .container{ padding:0 20px !important; }
  section{ padding:56px 0 !important; }
}
@media (max-width: 420px){
  .container{ padding:0 16px !important; }
  section{ padding:44px 0 !important; }
}

/* ========== TYPOGRAPHY ========== */
@media (max-width: 640px){
  h1{ font-size:clamp(30px, 8vw, 40px) !important; line-height:1.1 !important; }
  h2{ font-size:clamp(24px, 6.5vw, 34px) !important; }
  h3{ font-size:clamp(20px, 5vw, 28px) !important; }
  body{ font-size:16px !important; }
  .sub, .lede{ font-size:16px !important; }
  /* Hero sub/lede slightly bigger */
  .hero-copy .sub,
  .about-hero .sub,
  .blog-hero .sub,
  .cs-hero .sub,
  .lib-hero .sub{
    font-size:17px !important;
  }
}

/* ========== 2-COL HERO/CARD LAYOUTS → STACK ========== */
@media (max-width: 900px){
  .hero-body,
  .svc-hero .hero-body,
  .founder-card,
  .cal-grid,
  .pbk-grid,
  .case-inner,
  .featured-card,
  .prob-body,
  .newsletter,
  .author-bio{
    grid-template-columns:1fr !important;
    gap:32px !important;
  }
  .featured-body{ padding:28px 24px !important; }
  .founder-photo{ aspect-ratio:4/3 !important; width:100% !important; max-width:420px; justify-self:center; }
  .founder-stats{ grid-template-columns:repeat(3, 1fr) !important; }
}

/* ========== 3-COL + 4-COL GRIDS → 1-COL ========== */
@media (max-width: 640px){
  .serv-grid,
  .subs-grid,
  .process-grid,
  .engage-grid,
  .related-grid,
  .team-grid,
  .pb-grid,
  .posts-grid,
  .cs-grid,
  .stack-grid,
  .stats-grid,
  .case-metrics,
  .metrics-grid,
  .foot-grid,
  .mission-values{
    grid-template-columns:1fr !important;
    gap:20px !important;
  }
  .founder-stats{
    grid-template-columns:1fr 1fr !important;
    padding:20px !important;
  }
}

/* ========== FOOTER (sitewide) — phones only ==========
   Cuts the footer from ~870px (full viewport) to ~360px on mobile.
   Brand block stays on top full-width, then "Explore" + "Get in touch"
   sit side-by-side as a 2-column grid instead of two stacked sections. */
@media (max-width: 640px){
  /* The <footer> element wraps everything; .foot is the inner block */
  footer{ padding:32px 0 0 !important; }
  .foot{ padding:48px 0 24px !important; }

  /* Brand: shorter tagline width, less spacing */
  .foot-brand .wordmark{ font-size:22px !important; }
  .foot-brand p{
    margin-top:8px !important;
    font-size:14px !important;
    max-width:none !important;
  }

  /* 2-column grid for Explore + Get in touch (was single-column stack) */
  .foot-grid{
    grid-template-columns:1fr !important;
    gap:24px !important;
  }
  .foot-grid > .foot-brand{ grid-column:1 / -1; }
  /* The two link columns side-by-side */
  .foot-grid{
    grid-template-areas:
      "brand brand"
      "explore touch" !important;
    grid-template-columns:1fr 1fr !important;
  }
  .foot-grid > .foot-brand{ grid-area:brand; }
  .foot-grid > div:nth-child(2){ grid-area:explore; }
  .foot-grid > div:nth-child(3){ grid-area:touch; }

  /* Tighter typography for footer */
  .foot h6{
    font-size:11px !important;
    margin-bottom:10px !important;
    letter-spacing:0.1em !important;
  }
  .foot ul{ gap:7px !important; }
  .foot ul a{ font-size:14px !important; }
  .foot ul li{ word-break:break-word; }

  /* Bottom bar: stacked, tighter, centered */
  .foot-bar{
    flex-direction:column !important;
    gap:8px !important;
    margin-top:28px !important;
    padding:18px 0 !important;
    text-align:center;
    font-size:12px !important;
  }
  .foot-bar a{ margin:0 6px !important; }
}

/* ========== POLAROID MARQUEE ========== */
@media (max-width: 640px){
  .polaroid{ flex:0 0 220px !important; padding:14px 14px 22px !important; }
  .poly-photo{ height:220px !important; }
  .track{ animation-duration:80s !important; gap:20px !important; }
  .poly{ padding-bottom:48px !important; }
}

/* ========== HIDE / SIMPLIFY DECORATIVE ELEMENTS ========== */
@media (max-width: 640px){
  /* Heavy or irrelevant decorative SVGs on mobile */
  .hero-halo,
  .banner-strip,
  .bucket-stage,
  .final-skyline{
    display:none !important;
  }
  /* Compact hero dashcard on mobile (keep it, just smaller) */
  .hero-dashcard{
    position:static !important;
    transform:none !important;
    margin-top:24px !important;
    width:100% !important;
  }
  .hero-photo{
    aspect-ratio:4/3 !important;
    width:100% !important;
    max-width:none !important;
  }
  .hero-visual{ display:block !important; }

  /* Tighten the empty band between nav and eyebrow on phones */
  .hero{ padding-top:32px !important; }

  /* Avatar pile is decorative noise at this size — keep just the caption */
  .micro-trust .heads{ display:none !important; }
  .micro-trust{ grid-template-columns:1fr !important; gap:8px !important; }
  .micro-trust .caption{ font-size:14px !important; }

  /* Hide the secondary "What we build" dashcard on mobile —
     content is duplicated in the "Three ways we help" section below.
     Lets the photo stand alone as the hero visual. */
  .hero-dashcard{ display:none !important; }

  /* Mobile CTA swap:
     - Hide the desktop primary CTA (Cal.com modal)
     - Show the WhatsApp CTA instead
     - Place CTAs side-by-side (the desktop CTA wraps to a new row otherwise) */
  .hero-ctas .cta-desktop{ display:none !important; }
  .hero-ctas .cta-mobile{ display:inline-flex !important; }
  .hero-ctas{
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    gap:8px !important;
  }
  .hero-ctas .btn{
    flex:1 1 0 !important;
    min-width:0 !important;
    padding:14px 12px !important;
    font-size:14px !important;
    justify-content:center !important;
    white-space:nowrap !important;
  }
  .hero-ctas .btn svg{ flex:0 0 auto; }
}

/* Hide the WhatsApp CTA on tablets / desktop — Cal.com modal is the
   primary path there. Default state (no media query) covers all viewports
   above the mobile breakpoint. */
.hero-ctas .cta-mobile{ display:none; }

/* ========== ENTRY POPUP (homepage only) ==========
   Mobile layout for the popup if/when it's re-enabled (POPUP_ENABLED in
   index.html). Currently disabled at the JS level for all viewports. */
@media (max-width: 640px){
  .popup{
    right:12px !important;
    left:12px !important;
    bottom:12px !important;
    width:auto !important;
    max-width:none !important;
  }
}

/* ========== MOBILE STICKY CTA ========== */
@media (max-width: 640px){
  .mobile-cta{
    left:16px !important;
    right:16px !important;
    border-radius:999px !important;
    text-align:center;
  }
  /* Hidden while the in-hero CTA is on screen — avoids two identical
     "Book Free Audit" buttons appearing at once. Reuses the same
     transform/opacity pattern as .hide so the transition is smooth. */
  .mobile-cta.hide-hero{
    transform:translateY(calc(100% + 20px)) !important;
    opacity:0 !important;
    pointer-events:none !important;
  }
  /* Prevent the fixed CTA from covering bottom-of-section content
     (testimonials, list items, etc). Only applied on pages that
     actually render the sticky CTA. */
  body:has(.mobile-cta){
    padding-bottom:96px !important;
  }
}

/* ========== CAL.COM BOOKING SECTION ========== */
@media (max-width: 900px){
  .days-grid{
    grid-template-columns:repeat(2, 1fr) !important;
    gap:10px !important;
  }
  .slots-foot{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:12px !important;
  }
  .slots-foot .btn{ width:100%; justify-content:center; }
  .strategist-card,
  .slots-card{ padding:24px !important; }
}

/* ========== UNIVERSAL DESKTOP-ONLY / MOBILE-ONLY HELPERS ==========
   Used to swap copy between viewports without JS. */
.m-only{ display:none; }
@media (max-width: 640px){
  .d-only{ display:none !important; }
  .m-only{ display:inline !important; }
  /* For elements that need to be removed on mobile entirely
     (independent of inline/block — e.g. leak-tag pills) */
  .mobile-hide{ display:none !important; }
}

/* "Where leads leak:" mini-heading — mobile-only block */
.leak-heading{ display:none; }
@media (max-width: 640px){
  .leak-heading{
    display:block !important;
    font-family:'JetBrains Mono',monospace;
    font-size:12px; font-weight:600;
    color:var(--ink-mute, #8A94A2);
    letter-spacing:0.1em; text-transform:uppercase;
    margin:24px 0 12px !important;
  }
}

/* ========== AUDIT SECTION (Section 2) — phones only ========== */
@media (max-width: 640px){
  /* Tighten section vertical padding */
  .cal-sec{ padding:48px 0 32px !important; }

  /* Tighten the gap between eyebrow label and H2 */
  .cal-head .label-top{ margin-bottom:10px !important; }
  .cal-head h2{ margin-bottom:8px !important; }
  .cal-head p{ font-size:16px !important; margin-top:12px !important; }

  /* Founder card holds everything on phones — quote, trust list, and
     the booking CTA. No second card, no merged corners. */
  .cal-grid{ gap:0 !important; }
  .strategist-card{
    padding:22px !important;
  }

  /* Pull-quote: switch from serif italic to a clean sans-serif on phones */
  .strategist-quote{
    font-family:'Inter',system-ui,sans-serif !important;
    font-style:normal !important;
    font-size:16px !important;
    line-height:1.5 !important;
    border-left-width:3px !important;
    padding-left:14px !important;
    margin:14px 0 !important;
  }

  /* Trust chips: stack vertically as a clean checklist */
  .trust-row{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:8px !important;
    margin-top:12px !important;
  }
  .trust-chip{
    background:transparent !important;
    border:none !important;
    padding:0 !important;
    font-size:14px !important;
    color:var(--ink-soft, #3E4855) !important;
  }
  .trust-chip .ico{ color:var(--primary, #0B4A3A) !important; }

  /* Hide the static-data slots grid on phones. Dates and times are
     hardcoded and misleading. Booking CTA inside the founder card
     replaces this on mobile. */
  .slots-card{ display:none !important; }

  /* Booking CTA inside the founder card — fits the card's theme,
     full-width, sits below the trust checklist. */
  .strategist-cta{
    margin-top:18px !important;
    width:100% !important;
    justify-content:center !important;
    padding:14px !important;
    font-size:15px !important;
    font-weight:600 !important;
  }
}

/* Hide sticky bottom CTA while the booking section is in viewport —
   the in-section "See available slots" button is right there. */
@media (max-width: 640px){
  .mobile-cta.hide-booking{
    transform:translateY(calc(100% + 20px)) !important;
    opacity:0 !important;
    pointer-events:none !important;
  }
}

/* ========== SERVICES SECTION (Section 4) ==========
   Card-link pattern: the entire .svc-cat card becomes a clickable
   link to its service page (mobile + desktop). The visible "Explore X →"
   link stays as the click target; ::after stretches it over the whole card. */
.svc-cat{ position:relative; }
.svc-cat .svc-link{ position:relative; z-index:2; }
.svc-cat .svc-link::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
}
.svc-cat:hover{ cursor:pointer; }

/* Mobile-only: real horizontal scroll container with snap.
   JS adds card clones for a seamless loop and auto-advances scrollLeft.
   Manual swipe works natively, auto-scroll pauses for 4s after each touch. */
@media (max-width: 640px){
  /* Tight section padding so the whole block fits one viewport */
  .serv{ padding:40px 0 24px !important; }
  .serv-head{ margin-bottom:8px !important; }
  .serv-head p{ display:none !important; }

  .serv-grid{
    display:flex !important;
    grid-template-columns:none !important;
    flex-wrap:nowrap !important;
    gap:14px !important;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scroll-behavior:auto;
    margin-top:20px !important;
    padding:4px 20px 8px;
    /* Bleed to viewport edges so cards hint past the screen */
    margin-left:calc(-1 * var(--container-pad, 20px));
    margin-right:calc(-1 * var(--container-pad, 20px));
    /* Hide scrollbar */
    scrollbar-width:none;
  }
  .serv-grid::-webkit-scrollbar{ display:none; }

  .svc-cat{
    flex:0 0 320px !important;
    width:320px !important;
    margin:0 !important;
    padding:22px !important;
    scroll-snap-align:start;
    /* Reset the desktop "featured" lift so all cards look equal in the row */
    transform:none !important;
  }
  .svc-cat.featured{ transform:none !important; }

  /* Compact card content: drop the bullet list on mobile (full list lives
     on the linked service page). Keep icon, number, title, tag, body, link. */
  .svc-cat .svc-list{ display:none !important; }
  .svc-cat .svc-body{
    font-size:14px !important;
    line-height:1.45 !important;
    margin-bottom:14px !important;
  }
  .svc-cat .svc-title{ font-size:22px !important; }
  .svc-cat .svc-tag{ font-size:14px !important; margin-bottom:10px !important; }

  /* Hide the secondary footer link to keep the section in one viewport */
  .serv-foot{ display:none !important; }
}

/* ========== FREE PILLAR GUIDES (homepage) — hidden on phones (2026-05-02) ==========
   Pillar guides are still indexed and reachable from the footer, but the homepage
   block was creating a long mid-page detour on mobile. */
@media (max-width: 640px){
  .guides-sec{ display:none !important; }
}

/* ========== GUIDE PAGES (article + TOC) — phones only ========== */
@media (max-width: 640px){
  /* Root cause of horizontal overflow: .guide-wrap grid had `1fr` which
     grows to fit children's intrinsic min-width (e.g. a long URL inside
     a <pre> block). Forcing minmax(0, 1fr) lets the column shrink to
     viewport. min-width:0 on direct children defeats overflow at the
     flex/grid item level too. */
  .guide-wrap{
    grid-template-columns:minmax(0, 1fr) !important;
    gap:24px !important;
  }
  .guide-wrap > *{ min-width:0 !important; }
  .guide-article, .guide-body{ min-width:0 !important; max-width:100% !important; }
  /* TOC anchors used to render inline next to an inline-block counter,
     so long titles like "Why a Dubai brokerage cannot run on
     spreadsheets" overflowed off the right edge. Convert each li to
     a flex row so the number and the wrapping link share space cleanly. */
  .guide-toc{
    padding:18px 16px 14px !important;
    border-radius:12px !important;
    font-size:14px !important;
  }
  .guide-toc h6{ margin-bottom:10px !important; }
  .guide-toc li{
    display:flex !important;
    align-items:flex-start !important;
    gap:8px !important;
    padding:9px 0 !important;
    line-height:1.4 !important;
  }
  .guide-toc li::before{
    flex:0 0 auto;
    width:24px !important;
    line-height:1.4 !important;
  }
  .guide-toc a{
    flex:1 1 0 !important;
    min-width:0 !important;
    word-wrap:break-word !important;
    overflow-wrap:anywhere !important;
    display:block !important;
  }

  /* Article body: smaller font, tighter spacing, prevent long-word overflow */
  .guide-body{ font-size:16px !important; line-height:1.65 !important; }
  .guide-body h2{
    font-size:24px !important; line-height:1.2 !important;
    margin-top:32px !important; margin-bottom:12px !important;
    overflow-wrap:anywhere;
  }
  .guide-body h3{
    font-size:19px !important; line-height:1.25 !important;
    margin-top:24px !important; margin-bottom:8px !important;
  }
  .guide-body p{ margin-bottom:14px !important; }
  .guide-body ul, .guide-body ol{ padding-left:22px !important; margin-bottom:14px !important; }
  .guide-body li{ margin-bottom:6px !important; }
  .guide-body pre, .guide-body code{
    overflow-x:auto !important;
    word-break:break-word !important;
    font-size:13px !important;
  }
  /* Article meta strip below the H1: stack so chips don't overflow */
  .guide-meta{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:6px !important;
    font-size:14px !important;
  }
}

/* ========== RESULTS (Section 6) — phones only ==========
   2x2 grid of compact stat cards, smaller numbers, tighter padding.
   Inline testimonial + duplicate "Book a Strategy Call" CTA hidden
   (the polaroid wall and sticky bottom CTA cover those signals). */
@media (max-width: 640px){
  /* Tighter section padding */
  .results{ padding:40px 0 32px !important; }
  .results-head{ margin-bottom:24px !important; }

  /* 2x2 grid (overrides the earlier 1-col grid rule for .stats-grid) */
  .stats-grid{
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
  }
  .stat-cell{
    padding:18px 12px !important;
    border-radius:14px !important;
  }
  .stat-num{
    font-size:38px !important;
    line-height:1.05 !important;
  }
  .stat-label{
    font-size:10.5px !important;
    margin-top:8px !important;
    letter-spacing:0.1em !important;
    line-height:1.25 !important;
  }

  /* Bonus 1: drop inline testimonial — full polaroid wall is right below */
  .testimonial-inline{ display:none !important; }

  /* Bonus 2: drop in-section CTA — sticky bottom CTA is already on screen */
  .results-cta{ display:none !important; }
}

/* ========== HOW WE WORK (Section 5) — phones only ==========
   Compact left-aligned rows: small circle on the left, title +
   one-line description on the right. Replaces the desktop's
   3-column centered timeline (kept on tablet/desktop). */
@media (max-width: 640px){
  .hww{ padding:32px 0 !important; }
  .hww-toggle{ padding:10px 18px !important; }
  .hww-toggle h3{ font-size:18px !important; }
  .hww-panel.open{ max-height:480px !important; margin-top:20px !important; }

  .steps{
    grid-template-columns:1fr !important;
    gap:14px !important;
    max-width:360px;
  }
  .step{
    display:grid !important;
    grid-template-columns:44px 1fr !important;
    column-gap:14px !important;
    row-gap:4px !important;
    text-align:left !important;
    align-items:start;
  }
  /* Circle stays in col 1, row 1 */
  .step .num{
    width:36px !important;
    height:36px !important;
    margin:0 !important;
    font-size:16px !important;
    grid-column:1;
    grid-row:1 / span 2;
    align-self:start;
  }
  /* Title + description both belong in column 2 */
  .step h4{
    font-size:17px !important;
    margin:0 !important;
    text-align:left !important;
    line-height:1.2 !important;
    grid-column:2;
    grid-row:1;
    align-self:center;
  }
  .step p{
    font-size:14px !important;
    max-width:none !important;
    margin:0 !important;
    text-align:left !important;
    line-height:1.4 !important;
    grid-column:2;
    grid-row:2;
  }
}

/* ========== PROBLEM SECTION (Section 3) — phones only ========== */
@media (max-width: 640px){
  /* Trim the heavy desktop section padding */
  .prob{ padding:48px 0 32px !important; }

  /* Kill the big empty band: prob-body grid carries margin-top:56px
     from desktop (where the bucket SVG sits beside the copy). On mobile
     the SVG is hidden, so that gap becomes void. Trim it. */
  .prob-body{ margin-top:24px !important; }

  /* Inline 66% stat: big number sits next to the explanation on one line */
  .prob-stat{
    margin-top:24px !important;
    align-items:center !important;
    gap:12px !important;
  }
  .prob-stat .big{
    font-size:56px !important;
    line-height:1 !important;
  }
  .prob-stat .small{
    font-size:16px !important;
    max-width:none !important;
    line-height:1.3 !important;
  }

  /* Leak-tags as a tight 2-column grid (4 visible items, 2 hidden via .mobile-hide) */
  .leak-tags{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    margin-top:0 !important;
  }
  .leak-tag{
    font-size:13px !important;
    padding:10px 12px !important;
    justify-content:flex-start !important;
  }
}

/* ========== SERVICE PAGE ========== */
@media (max-width: 900px){
  .svc-hero .hero-panel{
    max-width:100%;
  }
  .case-inner{
    grid-template-columns:1fr !important;
  }
  .case-visual{ min-height:200px !important; }
  .breadcrumb{ font-size:13px !important; }
}
@media (max-width: 640px){
  .stack-pill{ padding:10px 12px !important; }
  .stack-pill .role{ font-size:12px !important; }
  .sub-card{ padding:22px !important; }
}

/* ========== CASE STUDY DETAIL ========== */
@media (max-width: 700px){
  .client-strip{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:14px !important;
    padding:18px !important;
  }
  .client-strip .sep-v{ display:none !important; }
  .at-glance{
    grid-template-columns:1fr !important;
    gap:18px !important;
    padding:22px !important;
  }
  .metrics-grid{ grid-template-columns:1fr 1fr !important; }
  .cs-pullquote{ padding:28px 22px !important; }
  .timeline{ padding-left:18px !important; }
  .story-chapter{ margin-bottom:40px !important; }
  .cs-detail-head h1{ font-size:clamp(30px, 8vw, 44px) !important; }
}
@media (max-width: 500px){
  .metrics-grid{ grid-template-columns:1fr !important; }
}

/* Featured case-study card */
@media (max-width: 900px){
  .featured-visual{ min-height:260px !important; padding:28px !important; }
  .featured-visual .client-name{ font-size:28px !important; }
  .featured-visual .big-stat .n{ font-size:48px !important; }
}

/* ========== BLOG POST DETAIL ========== */
@media (max-width: 1000px){
  .article{ grid-template-columns:1fr !important; gap:24px !important; }
  .toc{ position:static !important; order:-1; }
}
@media (max-width: 640px){
  .prose{ font-size:17px !important; }
  .prose h2{ margin-top:48px !important; }
  .callout{ padding:22px 20px !important; }
  .pullquote{ padding-left:20px !important; }
  .post-head h1{ font-size:clamp(32px, 8vw, 48px) !important; }
  .post-head .author-row{ gap:12px !important; }
  .post-head .share{ margin-left:0 !important; }
}

/* ========== LEGAL PAGES (privacy/terms) ========== */
@media (max-width: 900px){
  .legal-body{ grid-template-columns:1fr !important; gap:24px !important; }
  .legal-body .toc{ position:static !important; order:-1; }
}

/* ========== PLAYBOOK LOGIN ========== */
@media (max-width: 500px){
  .login-card{ padding:32px 22px !important; border-radius:18px !important; }
  .login-card .back{ top:14px; left:14px; }
  .phone-input{ grid-template-columns:100px 1fr !important; gap:8px !important; }
  .otp-group{ gap:6px !important; }
  .otp-group input{
    font-size:18px !important;
    padding:12px 0 !important;
  }
}

/* ========== PLAYBOOK LIBRARY ========== */
@media (max-width: 640px){
  .lib-filters{ padding:24px 0 4px !important; }
  .pb-cover{ padding:22px !important; }
  .pb-cover h4{ font-size:22px !important; }
  .pb-body{ padding:18px 20px !important; }
}

/* ========== BLOG LISTING ========== */
@media (max-width: 900px){
  .featured-card{ overflow:hidden; }
  .featured-media{ min-height:220px !important; aspect-ratio:16/9 !important; }
  .featured-body h2{ font-size:26px !important; }
}

/* ========== ABOUT ========== */
@media (max-width: 900px){
  .founder-social{ flex-wrap:wrap; }
  .founder-stats .num{ font-size:28px !important; }
}

/* ========== TOUCH / HOVER ADJUSTMENTS ========== */
@media (hover: none) {
  /* On touch devices, disable hover-scale effects that feel janky on tap */
  .post-card:hover,
  .cs-card:hover,
  .pb-card:hover,
  .related-card:hover,
  .member:hover{
    transform:none !important;
  }
  /* Keep shadow/border changes — those still make sense on focus */
}

/* ========== IMAGES / MEDIA ========== */
@media (max-width: 640px){
  img, svg, video{ max-width:100%; height:auto; }
  .cover-img, .featured-media{ aspect-ratio:16/9 !important; }
}

/* ========== UTILITY: prevent horizontal scroll ========== */
@media (max-width: 900px){
  html, body{ overflow-x:hidden; }
}

/* ========== UTILITY: .m-hide ========== */
@media (max-width: 640px){
  .m-hide{ display:none !important; }
}

/* ========== WHATSAPP OS — phones only (2026-05-02) ==========
   The OS page was a long scroll on mobile. Tighten section padding,
   compress the pricing card, and reduce hero/lede font sizes so the
   page reads like a focused mobile landing rather than a desktop doc. */
@media (max-width: 640px){
  /* Tighten section vertical rhythm */
  .svc-hero{ padding:24px 0 16px !important; }
  .svc-hero h1{ font-size:32px !important; line-height:1.1 !important; }
  .svc-hero .sub{ font-size:15px !important; line-height:1.5 !important; }
  .subs{ padding:48px 0 !important; }
  .process{ padding:48px 0 !important; }
  .section-head .lede{ font-size:15px !important; line-height:1.55 !important; }

  /* Module + process cards: compress padding, reduce body copy size */
  .sub-card, .proc-step{ padding:22px 20px !important; }
  .sub-card h3, .proc-step h4{ font-size:18px !important; }
  .sub-card p, .proc-step p{ font-size:14px !important; line-height:1.5 !important; }

  /* Pricing card: compress padding + font sizes */
  #pricing-block > .container > div[style*="border-radius:24px"]{
    padding:24px 20px !important;
    border-radius:18px !important;
    margin-top:24px !important;
  }
  #pricing-block h3{ font-size:22px !important; }
  #pricing-block div[style*="font-size:44px"]{ font-size:32px !important; margin:14px 0 4px !important; }
}