/* =====================================================================
   mobile.css — Bettrlabs mobile-only refinements
   Loaded AFTER shared.css. All rules are gated by @media (max-width:760px)
   so desktop renders identically to before.

   Goals:
    1. Tighten spacing — less empty real estate, more dense rhythm.
    2. Typography discipline — reserve PP NeueBit (pixel font) for genuine
       display highlights only. Everything else uses Inter or JetBrains Mono.
    3. 5-second comprehension — what + who + why all visible above the fold.
    4. Left-side hamburger + slide-in drawer (with footer nav inside).
   ===================================================================== */

/* ---------------------------------------------------------------------
   Visibility helpers — pair with <span class="m-only"> / <span class="d-only">
   --------------------------------------------------------------------- */
.m-only{display:none}
.d-only{display:inline}
@media (max-width:760px){
  .m-only{display:inline}
  .d-only{display:none}
}

/* ---------------------------------------------------------------------
   Desktop guard for drawer-injected DOM.
   mobile-nav.js injects .drawer-brand, .drawer-close, .drawer-footer,
   .drawer-cta, and .nav-backdrop on every page load (regardless of
   viewport). On desktop, .nav-links is display:flex, so without this
   guard those children render inline next to the real nav links —
   producing a visible "Bettrlabs Bettrlabs · X · Company · About · Free
   slots · ... · Join the waitlist" duplicate strip in the desktop nav.

   These pieces are re-enabled inside the mobile @media block below
   (each one has its own display rule there).
   --------------------------------------------------------------------- */
.drawer-brand,
.drawer-close,
.drawer-footer,
.drawer-cta,
.nav-backdrop{display:none !important}

/* =====================================================================
   1. UNIVERSAL MOBILE GUARDS + TIGHTER RHYTHM
   ===================================================================== */
@media (max-width:760px){
  html, body { overflow-x: hidden; }
  body { font-size: 15px; line-height: 1.5; }

  .wrap, .wrap-narrow { padding: 0 18px; }

  /* Section padding — was 56, now 36. Sections feel connected, not spaced apart. */
  .section, .section-paper, .section-dark { padding: 36px 0 !important; }
  .page-head { padding: 18px 0 14px !important; }
  .page-head .lede { font-size: 15.5px; line-height: 1.5; margin-top: 14px !important; }

  /* Generic body paragraphs */
  p { line-height: 1.55; margin-bottom: 12px; }
  main h2 + p, main h2 + .lede { margin-top: 10px; }

  /* Banner — slim, single line */
  .banner { font-size: 11px; padding: 7px 14px; gap: 8px; line-height: 1.3; }

  /* Buttons */
  .btn { padding: 12px 18px; font-size: 14px; }

  /* Page-head */
  .page-head h1 { font-size: clamp(28px, 7.6vw, 38px) !important; line-height: 1.16 !important; letter-spacing: -.018em; margin: 4px 0 10px !important; }
  .page-head .crumbs { font-size: 11.5px; margin-bottom: 6px; }
  .page-head .eyebrow { font-size: 10.5px; letter-spacing: .1em; margin-bottom: 8px; }

  /* Section headers */
  .s-head { display: block !important; }
  .s-head .s-title { font-size: clamp(24px, 6vw, 32px) !important; line-height: 1.1 !important; margin-top: 6px; }
  .s-head .s-num { font-size: 11px; }
  .s-head .s-meta { margin-top: 8px; font-size: 11px; text-align: left; }

  /* H2 universal mobile cap (covers ad-hoc inline-styled h2s) */
  main h2 { font-size: clamp(24px, 6vw, 32px) !important; line-height: 1.12 !important; margin: 0 0 12px !important; }
  main h3 { font-size: 17px !important; line-height: 1.25 !important; margin-top: 16px !important; }

  /* Crumbs sit close to H1 */
  .crumbs { margin-bottom: 4px; }
}

/* =====================================================================
   2. TYPOGRAPHY DISCIPLINE — Pixel font is for display highlights only.
   On mobile we demote .px / .ed in chrome and body copy to JetBrains Mono,
   then explicitly preserve PP NeueBit on the genuine display highlights.
   ===================================================================== */
@media (max-width:760px){
  /* DEMOTE: any .px / .ed not inside a display heading or hero stat
     gets JetBrains Mono — clean, monospace, readable at small sizes. */
  .px, .ed {
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: .04em !important;
    font-size: 0.92em !important;
    vertical-align: baseline !important;
    line-height: inherit !important;
  }

  /* PRESERVE: explicit allow-list for genuine display tokens.
     These are the "key highlights" the brand should keep pixel-perfect. */
  h1 .px, h1 .ed, h1 .px-big, h1 .ed-em,
  h2 .px, h2 .ed,
  .hero-h .px-big, .hero-h .ed-em,
  .page-head h1 .px, .page-head h1 .ed,
  .s-head .s-title .px, .s-head .s-title .ed,
  .final h2 .px, .final h2 .ed,
  .hero-trust .t-num,
  .statwall .stat .v,
  .founding-block .seats,
  .step .n,
  .brand-mark {
    font-family: 'SS Default Lingo', 'JetBrains Mono', monospace !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .01em !important;
    line-height: .9 !important;
    vertical-align: -.08em !important;
  }

  /* Display tokens inside H1/H2 still need to be sized smaller than
     surrounding Inter sans — pixel fonts read visually larger at the
     same point size. 0.78em puts them at optical parity. */
  h1 .px, h1 .ed, h1 .px-big, h1 .ed-em,
  h2 .px, h2 .ed { font-size: 0.78em !important; }

  /* --- Page-head H1 inline pixel emphasis: stabilize against dancing ---
     The default .px / .ed spans (above) render with line-height:.9 and
     vertical-align:-.08em — combined with display:inline-block and 0.78em
     sizing, this causes sans + pixel words on the same line to sit at
     different sizes, baselines, and line metrics. The result is the
     "dancing" you see on the How It Works h1.

     Inside .page-head h1 specifically, we keep the pixel font texture but
     force the spans to render INLINE at optical parity (0.92em compensates
     for PP NeueBit's taller cap-height vs Inter), on the shared baseline,
     with the parent's line-height. The heading then reads as one stable
     line of text — pixel font becomes a clean visual accent, not a
     vertically displaced atom. */
  .page-head h1 .px,
  .page-head h1 .ed {
    font-size: 0.92em !important;
    line-height: inherit !important;
    letter-spacing: 0 !important;
    vertical-align: baseline !important;
    display: inline !important;
  }

  /* The .mono class in the footer / metadata stays as-is (already mono). */
}

/* =====================================================================
   3. NAV — Hamburger LEFT, Brand right of it, CTA far right.
   Drawer slides in from the LEFT and includes footer navigation.
   ===================================================================== */
@media (max-width:760px){
  /* Kill backdrop-filter on mobile — it creates a containing block, which
     causes position:fixed descendants (the drawer) to be positioned
     relative to .nav instead of the viewport. With nav already 94%
     opaque on mobile, the blur is invisible anyway. */
  .nav {
    background: rgba(255,255,255,.96);
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .nav-inner {
    height: 54px;
    padding: 0 14px 0 8px;
    display: flex !important;
    align-items: center;
    gap: 10px;
  }

  /* Reorder via flex order: hamburger first, then brand, then CTA */
  .nav-toggle { order: 1; display: inline-flex !important; margin: 0; }
  .brand      { order: 2; flex: 1; gap: 8px; font-size: 15px; }
  .nav-cta    { order: 3; }
  .nav-links  { order: 4; }

  .brand-mark { width: 22px; height: 22px; font-size: 18px; }

  .nav-cta .btn { padding: 7px 12px; font-size: 12.5px; }
  .nav-cta .btn .arrow { font-size: 14px; margin-left: 2px; }

  /* Hamburger — bigger tap target, clear pictogram.
     shared.css renders the icon as <span> (middle bar) + span::before/::after
     (top + bottom bars). Our drawer animates three bars into an X using
     .nav-toggle::before / span / ::after, so we MUST kill shared.css's
     span::before and span::after first — otherwise we render 5 bars and the
     widths mismatch (shared = 16px wide, ours = 20px wide). */
  .nav-toggle span::before,
  .nav-toggle span::after {
    display: none !important;
  }

  .nav-toggle {
    width: 40px; height: 40px;
    border: 0;
    background: transparent;
    border-radius: 8px;
    position: relative;
    padding: 0;
  }
  .nav-toggle:active { background: var(--paper); }

  /* Three identical bars: top (::before), middle (span), bottom (::after).
     Shared.css's `.nav-toggle span` already has width:16px so we override
     to fill the 20px slot from left:10 → right:10. */
  .nav-toggle span,
  .nav-toggle::before,
  .nav-toggle::after {
    content: "";
    position: absolute;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    height: 2px !important;
    background: var(--black);
    border-radius: 2px;
    transition: transform .22s, opacity .22s, top .22s;
  }
  .nav-toggle::before { top: 13px; }
  .nav-toggle span    { top: 19px; }
  .nav-toggle::after  { top: 25px; }
  .nav-inner.open .nav-toggle::before { top: 19px; transform: rotate(45deg); }
  .nav-inner.open .nav-toggle span    { opacity: 0; }
  .nav-inner.open .nav-toggle::after  { top: 19px; transform: rotate(-45deg); }

  /* Drawer (closed) — selectors prefixed to beat shared.css .nav-inner .nav-links rule.
     NOTE: .nav has backdrop-filter which creates a containing block, so
     position:fixed inside it would be relative to .nav, not viewport.
     Explicit height (100vh / 100dvh) bypasses that — the drawer fills
     the viewport regardless of containing block. */
  .nav .nav-inner .nav-links {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important;
    width: min(84vw, 320px) !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: 320px;
    background: #fff !important;
    z-index: 100 !important;
    transform: translateX(-100%);
    transition: transform .26s cubic-bezier(.4,0,.2,1);
    padding: 60px 22px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    border: 0 !important;
    box-shadow: 2px 0 28px rgba(0,0,0,.18);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav .nav-inner.open .nav-links { transform: translateX(0); }

  /* Drawer brand-mark at top of drawer, above close */
  .drawer-brand {
    display: flex !important; align-items: center; gap: 10px;
    margin: 0 0 18px;
    font-weight: 700; color: var(--black);
    font-size: 17px;
  }
  .drawer-brand .brand-mark { width: 22px; height: 22px; font-size: 18px; }

  /* Drawer close (X) */
  .drawer-close {
    display: block !important;
    position: absolute;
    top: 10px; right: 10px;
    width: 36px; height: 36px;
    border: 0; background: transparent;
    font-size: 26px; line-height: 1;
    cursor: pointer; color: var(--black);
    border-radius: 8px;
    padding: 0;
  }
  .drawer-close:active { background: var(--paper); }

  /* Drawer primary links */
  .nav .nav-inner .nav-links > a {
    display: block !important;
    padding: 13px 0 !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--black) !important;
    border-bottom: 1px solid var(--light) !important;
    text-decoration: none;
  }
  .nav .nav-inner .nav-links > a:active { color: var(--stone) !important; }

  /* Drawer footer section (injected by mobile-nav.js) */
  .drawer-footer {
    display: block !important;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px dashed var(--light);
  }
  .drawer-foot-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--stone);
    margin-bottom: 8px;
  }
  .nav .nav-inner .nav-links .drawer-footer a {
    padding: 9px 0 !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    color: var(--stone) !important;
    border-bottom: 0 !important;
    display: block;
  }
  .nav .nav-inner .nav-links .drawer-footer a:active { color: var(--black) !important; }

  /* Drawer CTA at bottom of drawer */
  .drawer-cta {
    display: block !important;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--light);
  }
  .drawer-cta .btn {
    width: 100%;
    justify-content: center;
    padding: 13px 18px;
    font-size: 14.5px;
  }

  /* Backdrop */
  .nav-backdrop {
    display: block !important;
    position: fixed;
    inset: 0;
    background: rgba(15,15,15,.42);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s;
  }
  body.drawer-open .nav-backdrop { opacity: 1; pointer-events: auto; }
  body.drawer-open { overflow: hidden; }

  /* CRITICAL: .nav creates its own stacking context (z-index:40 in shared.css),
     so the drawer — even at z-index:100 inside it — is effectively at z=40 in
     the page, behind the backdrop (z=90). The backdrop's backdrop-filter then
     blurs the drawer instead of the page content.

     When the drawer opens, raise .nav above the backdrop. The backdrop now
     blurs the page (correct), and the drawer renders crisp on top. */
  body.drawer-open .nav { z-index: 200 !important; }
}

/* =====================================================================
   4. HERO (index.html)
   ===================================================================== */
@media (max-width:760px){
  .hero { padding: 18px 0 26px !important; }
  .hero-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
  .hero-eyebrow { font-size: 11.5px; padding: 6px 11px; line-height: 1.4; gap: 6px; margin-bottom: 14px; }
  .hero-h { font-size: clamp(30px, 8.4vw, 42px) !important; line-height: 1.06 !important; letter-spacing: -.02em; margin: 0 0 12px !important; }
  .hero-h .px-big { font-size: clamp(32px, 9vw, 50px) !important; line-height: .9 !important; }
  .hero-h .ed-em { font-size: 0.7em !important; }
  .hero-sub { font-size: 15.5px; line-height: 1.5; margin-top: 10px; }

  .hero-ctas { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
  .hero-ctas .btn { width: 100%; justify-content: center; padding: 13px 18px; font-size: 14.5px; }

  .hero-fine { gap: 6px 14px; flex-wrap: wrap; font-size: 11.5px; margin-top: 14px; }

  .hero-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; padding-top: 14px; }
  .hero-trust .t-num { font-size: 22px !important; }
  .hero-trust .t-lbl { font-size: 10.5px !important; line-height: 1.3; }

  /* Hide decorative right-rail simulation panel on mobile */
  #graph-panel { display: none !important; }
}

/* =====================================================================
   5. STEPS (homepage "How it works" cards)
   ===================================================================== */
@media (max-width:760px){
  .steps { grid-template-columns: 1fr !important; gap: 14px !important; }
  .step { padding: 20px !important; }
  .step .n { font-size: 32px !important; }
  .step h3 { font-size: 19px !important; line-height: 1.18 !important; margin: 6px 0 8px !important; }
  .step p { font-size: 14px; line-height: 1.5; margin-bottom: 14px; }
  .step .when { font-size: 11px; }
  .step .inputs { font-size: 12px; padding-top: 14px; }
  .step .inputs .row { padding: 8px 0; gap: 10px; }
}

/* =====================================================================
   6. .split sections (220px sidebar + content) — KEY OVERFLOW FIX
   ===================================================================== */
@media (max-width:760px){
  .split { padding: 26px 0 !important; }
  .split > .wrap { display: block !important; padding: 0 18px !important; }
  .split .aside {
    font-size: 10.5px !important;
    color: var(--stone) !important;
    text-transform: uppercase !important;
    letter-spacing: .12em !important;
    margin-bottom: 10px !important;
  }
  .split .aside .num { font-size: 26px !important; line-height: 1 !important; margin-bottom: 2px !important; color: var(--black) !important; }
  .split h2 { margin-bottom: 10px !important; }
  .split p { font-size: 15px; margin-bottom: 10px; }
  .split .fgrid { grid-template-columns: 1fr !important; gap: 10px !important; margin-top: 14px !important; }
  .split .fgrid .f { padding: 16px !important; }
  .split .fgrid .f h4 { font-size: 15px !important; margin-bottom: 6px; }
  .split .fgrid .f p { font-size: 13px; line-height: 1.5; }
}

/* =====================================================================
   7. STATWALL
   ===================================================================== */
@media (max-width:760px){
  .statwall { display: grid !important; grid-template-columns: 1fr 1fr !important; }
  .statwall .stat { padding: 18px 16px !important; }
  .statwall .stat .k { font-size: 10px !important; }
  .statwall .stat .v { font-size: 22px !important; margin-top: 6px !important; }
  .statwall .stat .cap { font-size: 10.5px !important; line-height: 1.35 !important; margin-top: 4px !important; }
}
@media (max-width:420px){
  .statwall { grid-template-columns: 1fr !important; }
}

/* =====================================================================
   8. COMPARE TABLE
   ===================================================================== */
@media (max-width:760px){
  .compare { overflow-x: hidden; padding: 4px !important; }
  .compare table { display: block; width: 100%; }
  .compare thead { display: none; }
  .compare tbody { display: block; }
  .compare tr { display: block; padding: 14px 16px; border-bottom: 1px solid #222; }
  .compare td { display: block; padding: 3px 0 !important; border: 0 !important; font-size: 13.5px !important; }
  .compare td:first-child { font-weight: 600; font-size: 14.5px !important; padding-bottom: 6px !important; }
  .compare td:nth-child(2)::before { content: "Before — "; color: #9a9a98; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
  .compare td:nth-child(3)::before { content: "With Bettrlabs — "; color: #9a9a98; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
}

/* =====================================================================
   9. PRICING — mobile-only refinements
   Goals (per founder feedback):
     · Crisp, structured cards. No scattered alignment.
     · Everything LEFT-aligned inside cards. Buttons full-width.
     · Reduce visual weight: tighter typography, compressed credits-box,
       smaller bullets, tighter gaps.
     · Fix Enterprise wide card (3-col grid) → stacked vertical.
     · Fix "How you pay" 3-col explainer → stacked vertical.
     · Fix comparison table → horizontal scroll (preserves cross-plan
       comparison instead of stacking with broken inherited labels).
   ===================================================================== */
@media (max-width:760px){
  /* --- Page head: meta-row stack, currency toggle compact --- */
  .page-head .meta-row { margin-top: 18px !important; gap: 10px !important; align-items: stretch !important; }
  .page-head .meta-row .crumbs { font-size: 11px !important; line-height: 1.5; }
  .page-head .currency-toggle { align-self: flex-start; padding: 2px !important; }
  .page-head .curr-btn { font-size: 11px !important; padding: 5px 10px !important; }

  /* --- Pricing grid: single column, tighter gap --- */
  .pricing-grid { gap: 14px !important; }

  /* --- Plan card: left-aligned, tightened, consistent rhythm --- */
  .plan { padding: 22px 20px !important; border-radius: 16px !important; text-align: left !important; }
  .plan .tag { font-size: 10.5px !important; padding: 4px 10px !important; margin-bottom: 12px !important; letter-spacing: .06em !important; }
  .plan .pname { font-size: 24px !important; margin-bottom: 6px !important; }
  .plan .price { font-size: 34px !important; margin-bottom: 4px !important; line-height: 1 !important; }
  .plan .price .cur { font-size: 18px !important; }
  .plan .price .per { font-size: 13.5px !important; }
  .plan .price-sub { font-size: 11.5px !important; margin-bottom: 12px !important; line-height: 1.45; }
  .plan .tag-line { font-size: 13.5px !important; line-height: 1.5 !important; margin: 4px 0 14px !important; min-height: 0 !important; }

  /* Plan-toggle (Monthly/Yearly): compact, full-width-friendly */
  .plan .plan-toggle { margin-bottom: 14px !important; padding: 2px !important; }
  .plan .tog-btn { font-size: 10.5px !important; padding: 5px 10px !important; }

  /* Credits-box: keep info, compress visually */
  .plan .credits-box {
    font-size: 12px !important;
    line-height: 1.5 !important;
    padding: 12px 14px !important;
    border-radius: 8px !important;
    margin-bottom: 14px !important;
  }

  /* Bullet list: tighter, consistent spacing */
  .plan ul { margin: 0 0 16px !important; padding-top: 14px !important; gap: 6px !important; }
  .plan ul li { font-size: 13.5px !important; line-height: 1.45 !important; padding: 4px 0 4px 18px !important; }

  /* Note: smaller, calmer */
  .plan .note { font-size: 11px !important; line-height: 1.5 !important; margin-bottom: 14px !important; }

  /* CTA button: full width, consistent padding */
  .plan .btn { width: 100% !important; justify-content: center !important; padding: 13px 18px !important; font-size: 14.5px !important; }

  /* Popular badge: pull in, scale down */
  .plan .popular-badge { top: -12px !important; right: 14px !important; font-size: 10px !important; padding: 4px 10px !important; letter-spacing: .06em !important; }

  /* --- Enterprise wide card: stack vertically --- */
  .pricing-enterprise {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 22px 20px !important;
    align-items: flex-start !important;
  }
  .pricing-enterprise > div:nth-child(2) ul {
    grid-template-columns: 1fr !important;
    gap: 4px 0 !important;
    margin-top: 4px !important;
  }
  .pricing-enterprise > div:nth-child(2) ul li {
    font-size: 13.5px !important;
    line-height: 1.45;
    padding: 3px 0 3px 18px !important;
  }
  .pricing-enterprise > div:last-child {
    align-items: stretch !important;
    width: 100%;
  }
  .pricing-enterprise .btn { width: 100% !important; justify-content: center !important; }
  .pricing-enterprise > div:last-child .note { text-align: left !important; }

  /* --- "How you pay" explainer: stack 3 cells, reduce padding --- */
  .pricing-explainer { padding: 8px 0 32px !important; }
  .pricing-explainer-box { padding: 22px 20px !important; border-radius: 14px !important; }
  .pricing-explainer-box .eyebrow { font-size: 10.5px !important; }
  .pricing-explainer-box h2 { font-size: 22px !important; line-height: 1.18 !important; margin: 0 0 14px !important; }
  .pricing-explainer-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    margin-top: 14px !important;
  }
  .pricing-explainer-cell .px { font-size: 18px !important; }
  .pricing-explainer-cell p { font-size: 13.5px !important; line-height: 1.55 !important; }
  .pricing-explainer-box > div:last-child {
    margin-top: 18px !important;
    padding-top: 16px !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
  }

  /* --- Comparison table: horizontal scroll instead of stacked rows ---
     Override the generic .compare mobile rules (designed for 2-col compare)
     so the 6-column pricing table doesn't get the wrong "Before — / With
     Bettrlabs —" labels and inconsistent center/left text-align. */
  .compare.cmp-plans { overflow-x: auto !important; -webkit-overflow-scrolling: touch; padding: 0 !important; border-radius: 14px !important; }
  .compare.cmp-plans table { display: table !important; width: max-content !important; min-width: 100%; }
  .compare.cmp-plans thead { display: table-header-group !important; }
  .compare.cmp-plans tbody { display: table-row-group !important; }
  .compare.cmp-plans tr { display: table-row !important; padding: 0 !important; border-bottom: 0 !important; }
  .compare.cmp-plans th,
  .compare.cmp-plans td {
    display: table-cell !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid var(--light) !important;
    font-size: 12.5px !important;
    white-space: nowrap;
    text-align: left !important;
  }
  .compare.cmp-plans th { font-size: 10.5px !important; padding: 12px 14px !important; }
  .compare.cmp-plans td:first-child { font-weight: 600; min-width: 160px; white-space: normal; }
  .compare.cmp-plans td.tick,
  .compare.cmp-plans td.dash,
  .compare.cmp-plans td.num { text-align: center !important; min-width: 88px; }
  /* Kill the inherited "Before — / With Bettrlabs —" labels from the
     generic 2-col compare rule above — they don't apply to this 6-col table. */
  .compare.cmp-plans td:nth-child(2)::before,
  .compare.cmp-plans td:nth-child(3)::before { content: "" !important; }

  /* --- Trust bar: keep 2x2, ensure left alignment & consistent padding --- */
  .trust-bar { padding: 18px !important; gap: 14px 16px !important; }
  .trust-bar .t-item { font-size: 11px !important; letter-spacing: .06em !important; }
}

/* =====================================================================
   10. FAQ
   ===================================================================== */
@media (max-width:760px){
  .faqs summary { font-size: 15.5px !important; gap: 10px; padding: 14px 0; }
  .faqs p { font-size: 14px !important; line-height: 1.55 !important; }
  .faqs details { padding: 12px 0 !important; }
}

/* =====================================================================
   11. TEAM (about.html)
   ===================================================================== */
@media (max-width:760px){
  .team { gap: 10px !important; margin-top: 22px !important; }
  .person { padding: 18px !important; }
  .person .ph { width: 44px; height: 44px; font-size: 20px; margin-bottom: 12px; }
  .person h4 { font-size: 15px; }
  .person p { font-size: 12.5px; }
}

/* =====================================================================
   12. FINAL CTA
   ===================================================================== */
@media (max-width:760px){
  .final { padding: 44px 18px !important; }
  .final-inner h2 { font-size: clamp(26px, 7vw, 34px) !important; line-height: 1.1 !important; }
  .final-inner p { font-size: 15.5px; line-height: 1.5; margin-bottom: 18px; }
  .final-ctas { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
  .final-ctas .btn { width: 100%; justify-content: center; padding: 13px 18px; font-size: 14.5px; }
  .final-fine { font-size: 11.5px; line-height: 1.45; margin-top: 12px; }
  .final-bg svg { transform: scale(.6); }
}

/* =====================================================================
   13. FOOTER
   ===================================================================== */
@media (max-width:760px){
  .home-footer{padding:34px 0 40px}
  .home-footer .foot-inner{display:grid;grid-template-columns:1fr;gap:14px}
  .home-footer .foot-logo img{width:min(230px,78vw)}
  .home-footer .foot-actions{margin-left:0;align-items:flex-start;gap:14px}
  .home-footer .foot-social{gap:12px}
  .home-footer .foot-social svg{width:24px;height:24px}
  .home-footer .foot-links{flex-wrap:wrap;gap:6px 14px}
  .home-footer .foot-links a{font-size:12.5px}

  .foot-inner { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; padding: 22px 18px !important; text-align: left !important; }
  .foot-inner .nav-links {
    /* Footer's .nav-links is NOT the drawer — reset to normal inline list */
    position: static !important;
    transform: none !important;
    width: auto !important;
    background: transparent !important;
    z-index: auto !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 4px 14px !important;
    overflow: visible !important;
  }
  .foot-inner .nav-links a {
    display: inline-block !important;
    padding: 0 !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: var(--stone) !important;
    border: 0 !important;
  }
  .foot-inner .mono { font-size: 10.5px; }
}

/* =====================================================================
   14. FOUNDING BLOCK
   ===================================================================== */
@media (max-width:760px){
  .founding-block { padding: 20px !important; gap: 12px !important; margin: 18px 0 6px !important; }
  .founding-block .seats { font-size: 40px !important; }
  .founding-block .pitch h3 { font-size: 17px !important; line-height: 1.22 !important; }
  .founding-block .pitch p { font-size: 13px; }
  .founding-block .btn { width: 100%; justify-content: center; }
}

/* =====================================================================
   15. TRUST BAR
   ===================================================================== */
@media (max-width:760px){
  .trust-bar { gap: 12px 18px !important; padding: 16px !important; font-size: 10.5px; }
  .trust-bar .t-item { font-size: 10px; gap: 5px; }
}

/* =====================================================================
   16. NOT-A-DIRECTORY
   ===================================================================== */
@media (max-width:760px){
  .not-section { padding: 32px 0 !important; }
  .not-grid { gap: 18px !important; }
  .not-col li { font-size: 14px; padding: 6px 0; }
}

/* =====================================================================
   17. QUOTES
   ===================================================================== */
@media (max-width:760px){
  .quotes { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; }
  .quote { padding: 18px !important; }
  .quote p { font-size: 14.5px !important; line-height: 1.5 !important; }
  .quote .who .av { width: 32px; height: 32px; font-size: 16px; }
  .quote .who .nm { font-size: 13.5px; }
  .quote .who .rl { font-size: 11.5px; }
}

/* =====================================================================
   18. MARKETPLACE
   ===================================================================== */
@media (max-width:760px){
  .mkt-toolbar { padding: 12px 0 !important; gap: 8px !important; }
  .mkt-toolbar .filters { gap: 4px; }
  .mkt-toolbar .filters button { padding: 5px 9px; font-size: 10px; }
  .lab { min-height: 0 !important; padding: 16px !important; }
  .lab h4 { font-size: 15px !important; }
  .lab .loc { font-size: 11px; }
}

/* =====================================================================
   19. LEGAL PAGES
   ===================================================================== */
@media (max-width:760px){
  main h3 { font-size: 17px !important; line-height: 1.25 !important; margin-top: 18px !important; }
  main h4 { font-size: 15px !important; line-height: 1.3 !important; }
  main ul, main ol { padding-left: 20px; }
  main li { font-size: 14px; line-height: 1.55; margin-bottom: 4px; }
}

/* =====================================================================
   20. FOUNDING-50 STEPS GRID
   ===================================================================== */
@media (max-width:600px){
  ol[aria-labelledby="claim-steps-heading"] li { padding: 18px !important; }
  ol[aria-labelledby="claim-steps-heading"] li > div:nth-child(2) { font-size: 15.5px !important; }
  ol[aria-labelledby="claim-steps-heading"] li > div:nth-child(3) { font-size: 13.5px !important; line-height: 1.5 !important; }
}

/* =====================================================================
   21. WAITLIST MODAL
   ===================================================================== */
@media (max-width:760px){
  #wl-modal .wl-modal-box { padding: 22px 18px !important; max-height: calc(100dvh - 22px) !important; }
  #wl-modal .wl-m-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  #wl-modal .wl-field input,
  #wl-modal .wl-field textarea { font-size: 16px !important; /* prevents iOS auto-zoom */ }
}

/* =====================================================================
   22. INLINE-GRID MOBILE OVERRIDES
   Desktop sections use inline `style="grid-template-columns:..."` which
   beats normal CSS — we need !important to stack on mobile.
   Covers: index "Built for every stage", merged "Every product its own
   page + tools", pricing teaser 3-col, "How it grows" 4-col steps,
   how-it-works 3-step scan strip, .split aside-content collapse.
   ===================================================================== */
@media (max-width:760px){
  /* All .modules grids stack to 1-col regardless of inline override */
  .modules[style*="grid-template-columns"]{grid-template-columns:1fr !important}
  .modules .m{
    padding:22px !important;
    border-right:0 !important;
    border-bottom:1px solid var(--light) !important;
    min-height:auto !important;
  }
  .modules .m:last-child{border-bottom:0 !important}
  .modules .m h3{font-size:19px !important;line-height:1.22 !important;margin-bottom:8px !important}
  .modules .m h3 .px{font-size:22px !important}
  .modules .m p{font-size:14.5px !important;line-height:1.55 !important;margin-bottom:0 !important}
  .modules .m ul{font-size:11.5px !important;line-height:1.85 !important;margin-top:10px !important}
  .modules .m .stats{padding-top:14px !important;margin-top:18px !important}

  /* Steps with inline 3-col / 4-col overrides → stack */
  .steps[style*="grid-template-columns"]{grid-template-columns:1fr !important}

  /* Merged "Tools sub-block" 220-1fr split → stack */
  section .wrap > div[style*="grid-template-columns:220px 1fr"]{
    grid-template-columns:1fr !important;
    gap:14px !important;
    padding-top:24px !important;
  }
  /* how-it-works .split inner wrap (220-1fr) → stack */
  .split > .wrap[style*="grid-template-columns:220px 1fr"]{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  /* Pricing teaser 3-col plan tiles → stack */
  section.section .wrap > div[style*="grid-template-columns:repeat(3,1fr)"]{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  .plan{padding:22px !important}
  .plan .price{font-size:30px !important}
  .plan .pname{font-size:13px !important}
  .plan .tag-line{font-size:13.5px !important;line-height:1.5 !important}

  /* Hero "Flexible" stat — pull back from clamp(28,3.4vw,40) so it sits with peers */
  .hero-trust .t-num[style*="clamp(28px"]{font-size:22px !important;letter-spacing:-.01em !important}

  /* Section lede paragraphs sitting between s-head and grids — tighten */
  section.section > .wrap > p[style*="max-width:720px"],
  section.section > .wrap > p[style*="max-width:680px"],
  section.section > .wrap > p[style*="max-width:640px"]{
    font-size:14.5px !important;
    line-height:1.55 !important;
    margin:0 0 18px !important;
  }

  /* Tools strip pills — wrap nicely on small screens */
  .pill[style*="font-size:11.5px"],
  .pill[style*="font-size:12px"]{font-size:11.5px !important;padding:5px 10px !important}

  /* Closing mono "One system · three operating modes · room to grow" */
  section.section > .wrap > p[style*="text-transform:uppercase"]{
    font-size:10.5px !important;
    letter-spacing:.06em !important;
    margin-top:18px !important;
  }

  /* Hero secondary lines — keep stacked but readable */
  .hero-secondary{font-size:11.5px !important;line-height:1.5 !important}

  /* Hero fine-line ✓ items — wrap pleasantly */
  .hero-fine{
    flex-wrap:wrap !important;
    gap:4px 10px !important;
    font-size:11px !important;
    line-height:1.6 !important;
    margin-top:14px !important;
  }
}