/* =====================================================================
   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.06 !important; letter-spacing: -.02em; 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: 'PP NeueBit', '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; }

  /* 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; }
  .brand-logo { height: 20px !important; width: auto !important; }
  .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;
    order: -1 !important;
    flex: 0 0 auto !important;
    align-self: flex-start !important;
    margin: 0 0 18px;
    font-weight: 700; color: var(--black);
    font-size: 17px;
  }
  .drawer-brand img { display: block; height: 24px; width: auto; }
  .drawer-brand .brand-logo { height: 24px !important; width: auto !important; }

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

  /* Pricing page compare table keeps the real tabular layout on mobile.
     The generic stacked-card treatment above works for 2-column compares,
     but the pricing matrix has 5 plans and becomes unreadable when stacked. */
  .cmp-plans {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 0 !important;
  }
  .cmp-plans table {
    display: table !important;
    width: 100% !important;
    min-width: 760px;
  }
  .cmp-plans thead { display: table-header-group !important; }
  .cmp-plans tbody { display: table-row-group !important; }
  .cmp-plans tr {
    display: table-row !important;
    padding: 0 !important;
    border-bottom: 0 !important;
  }
  .cmp-plans th,
  .cmp-plans td {
    display: table-cell !important;
    padding: 12px 14px !important;
    border-bottom: 1px solid var(--light) !important;
    font-size: 12.5px !important;
    line-height: 1.4;
    vertical-align: middle;
    white-space: nowrap;
  }
  .cmp-plans th {
    font-size: 10px !important;
  }
  .cmp-plans td:first-child,
  .cmp-plans th:first-child {
    position: sticky;
    left: 0;
    min-width: 170px;
    white-space: normal;
  }
  .cmp-plans td:first-child {
    background: #fff;
    font-weight: 600;
  }
  .cmp-plans th:first-child {
    background: var(--snow);
    z-index: 1;
  }
  .cmp-plans td::before { content: none !important; }
}

/* =====================================================================
   9. PRICING
   ===================================================================== */
@media (max-width:760px){
  .plan, .pricing-card { padding: 22px !important; }
  .plan h3, .pricing-card h3 { font-size: 19px !important; }
  .plan .price, .pricing-card .price { font-size: 28px !important; }
  .plan ul li, .pricing-card ul li { font-size: 13.5px; line-height: 1.45; padding: 6px 0; }
  .plan .btn, .pricing-card .btn { width: 100%; justify-content: center; padding: 13px 18px; }
}

/* =====================================================================
   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){
  footer { padding: 34px 0 40px !important; }
  .foot-inner { display: grid !important; grid-template-columns: 1fr !important; gap: 18px !important; padding: 0 18px !important; text-align: center !important; }
  .foot-brand { align-items: center !important; gap: 14px !important; }
  .foot-logo { width: min(180px, 52vw) !important; min-height: 0 !important; margin: 0 auto !important; }
  .foot-logo img { width: 100% !important; height: auto !important; }
  .foot-meta { font-size: 10.5px !important; line-height: 1.7 !important; letter-spacing: .16em !important; }
  .foot-actions { align-items: center !important; gap: 16px !important; }
  .foot-social {
    justify-content: center !important;
    gap: 14px !important;
  }
  .foot-social a {
    width: 22px !important;
    height: 22px !important;
  }
  .foot-social svg {
    width: 22px !important;
    height: 22px !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;
    justify-content: center !important;
    flex-wrap: wrap;
    gap: 8px 26px !important;
    overflow: visible !important;
    max-width: 380px;
    margin: 0 auto !important;
  }
  .foot-inner .nav-links a {
    display: inline-flex !important;
    padding: 0 !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #9a9a98 !important;
    border: 0 !important;
  }
}

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