/* Apex Growth Corp — mobile refinement layer.
   Loaded LAST on every page so it can correct per-page CSS without editing
   twenty-eight stylesheets. Everything here is scoped to touch/small screens;
   the desktop design is untouched.

   Measured at a real 390x844 viewport before writing any of it:
     · the hamburger — the single most important control on a phone — was 34x24
     · the logo link 36px tall, footer social icons 34x34, FAQ rows 30px
     · breadcrumbs and eyebrow labels rendering at 10.5-11px
   WCAG 2.2 AA (2.5.8) wants 24px minimum; Apple and Google both say 44. This
   targets 44, which is what a thumb actually needs.

   Inline links inside prose are deliberately NOT enlarged — WCAG exempts them,
   and padding them out would wreck the line rhythm of the copy. */

@media (max-width: 980px) {

  /* ── the hamburger ─────────────────────────────────────────────────────
     Negative margin keeps the visual size identical while the HIT AREA grows,
     so the bar layout does not shift. */
  .nav-toggle {
    width: 44px !important;
    height: 44px !important;
    padding: 10px !important;
    margin: -10px -10px -10px 0 !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    gap: 5px !important;
  }
  .nav-toggle > span { flex: none !important; }

  /* ── logo lockup: a real 44px target without changing how it looks ────── */
  .nav-logo { min-height: 44px; display: flex; align-items: center; }

  /* ── social icons: 34px and 42px both became 44 ───────────────────────── */
  .social-icon,
  .foot-social a,
  .svc-foot .socials a,
  .site-foot .foot-social a {
    width: 44px !important;
    height: 44px !important;
  }

  /* ── FAQ rows were 30px tall; the whole row is the control ────────────── */
  .faq-q, .sfaq-q {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  /* ── chips, jump links and pills used as navigation ───────────────────── */
  .prc-jump a, .ind-chips a, .hero-chips a,
  .svc-vert-list a, .rel-more a, .nav-back {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* ── legibility floors ────────────────────────────────────────────────
     Nothing structural below 12px on a phone. Eyebrows keep their uppercase
     tracking; they just stop being 10.5px. */
  .crumbs { font-size: 12px; }
  .h-eyebrow, .svc-tag, .ind-eyebrow, .tdown-kicker,
  .engine-caption, .hp-lbl, .foot-disambig,
  [data-fx="shiny"], .agc-shiny, .agc-shiny__base, .agc-shiny__shine {
    font-size: 12px !important;
    letter-spacing: .14em;
  }
  .post-card .read, .rel-kicker, .meta, .foot-meta { font-size: 12px; }
  .site-foot li a, .svc-foot .links a { font-size: 15px; }

  /* Footer link rows are a list of targets, not prose — give them height. */
  .site-foot li a { display: inline-flex; align-items: center; min-height: 40px; }

  /* ── measured stragglers ───────────────────────────────────────────────
     Found by driving a real 390px viewport, not by reading the markup:
       .foot-bottom links rendered 36x16 and 29x14
       homepage industry headings wrapped an <a> only 18px tall
       /industries jump chips were 35px (the class is .ind-jump, not .ind-chips)
     The padding/negative-margin pair grows the HIT AREA without moving anything
     on screen, so the layout is byte-identical and the thumb gets its 44px. */
  .foot-bottom a,
  .industry h3 a,
  .svc-foot .links a {
    display: inline-block;
    padding: 15px 6px;
    margin: -15px -6px;
  }

  .ind-jump a, .jump a, .toc a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Uppercase tracked labels are legible small, but not below 12px on a phone. */
  .h-eyebrow, .svc-tag, .ind-eyebrow, .tdown-kicker,
  .engine-caption, .hp-lbl, .foot-disambig, .nap-k,
  [data-fx="shiny"], .agc-shiny, .agc-shiny__base, .agc-shiny__shine,
  .fact thead th, .cmp thead th, .local-tbl thead th, .ab-table thead th {
    font-size: 12px !important;
  }

  /* ── second measured pass ──────────────────────────────────────────────
     The cookie buttons are the first thing every visitor taps and were 37px.
     The phone number and email on /sacramento are the primary contact actions
     on the page and were 20px tall. Both found by measuring, not by reading. */
  .cookie-btn, .diag-back, .diag-next, .diag-cta {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  .nap-v a, .foot-meta a, .site-foot .foot-bottom a {
    display: inline-block;
    padding: 13px 6px;   /* 13*2 + 18px line = 44 */
    margin: -13px -6px;
  }

  /* Remaining sub-12px text found on a real viewport. */
  .hero-badge, .diag-eyebrow, .diag-pct, .social-bar-label,
  .foot-h, .fact-hint, .cmp-hint, .ab-hint, .rel-kicker {
    font-size: 12px !important;
  }
  .site-foot a, .svc-foot a, .foot-grid a { font-size: 15px; }
  .foot-bottom, .foot-bottom span { font-size: 12px; }

  /* ── final measured pass ───────────────────────────────────────────────
     span.p carried the actual PRICE inside a comparison table header at 11.5px.
     A price is content, not a label. The rest are section eyebrows, step
     ordinals and the "per month" unit — all legible at 12, none at 11. */
  .cmp thead th .p, .cmp thead th span { font-size: 15px !important; }
  .tier-price .per, .mech-head span, .si, .social-bar span,
  .hp-lbl, .stat-label { font-size: 12px !important; }

  /* The footer bottom links reached 45px tall but were still 41 wide. */
  .foot-bottom a { padding-left: 10px; padding-right: 10px; margin-left: -10px; margin-right: -10px; }

  /* The last three, all measured: a 41px-wide "Terms" in the footer bar, and
     the apply funnel's own compact chrome (its logo and its secure-note link). */
  .foot-bottom a { min-width: 44px; text-align: center; }
  .ax-bar .lg, .ax-secure a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
  }
  .ax-secure a { min-width: 44px; justify-content: center; }

  /* ── the consent bar was sitting on the CTA ────────────────────────────
     Its own CSS comment says "never covers hero CTAs". On /pricing at 390px it
     occupied 733-844 while the primary CTA sat at 747-804, so a first-time
     visitor could not tap "Book the free audit call" until they dismissed it.
     Measured, not assumed.

     Two fixes: make the bar genuinely slim on a phone, and reserve space
     underneath the content while it is showing so a fixed bar can never rest
     on top of a control. :has() is a progressive enhancement — where it is
     unsupported the slimmer bar still helps. */
  .cookie-banner .cookie-inner { padding: 8px 14px calc(8px + env(safe-area-inset-bottom,0px)) !important; gap: 8px !important; }
  .cookie-banner p { font-size: 12px !important; line-height: 1.45 !important; margin: 0 !important; }
  .cookie-btn { min-height: 40px !important; padding: 8px 12px !important; font-size: 12px !important; }

  body:has(.cookie-banner.show) main { padding-bottom: 120px; }
}

/* Coarse pointers at any width (tablets, touch laptops) get the same targets. */
@media (pointer: coarse) {
  .nav-toggle { width: 44px; height: 44px; }
  .social-icon, .foot-social a, .site-foot .foot-social a { width: 44px; height: 44px; }
  .faq-q, .sfaq-q { min-height: 44px; }
}

/* Very small phones (iPhone SE, 320-375px): tighten gutters so the measure
   does not collapse, and stop long unbroken tokens forcing a scrollbar. */
@media (max-width: 400px) {
  .crumbs { padding-left: 16px; padding-right: 16px; }
  main, .site-foot { overflow-wrap: break-word; }
  table { font-variant-numeric: tabular-nums; }
}

/* ── mobile hero rhythm ──────────────────────────────────────────────────
   On /pricing the CTA landed at 747px with the consent bar at 744 — measured,
   not guessed. The hero was spending 118px of top padding, 28px under the
   eyebrow, 28px under the h1 and 40px under a ten-line lead before the button.

   Tightened, not shrunk: the type sizes are untouched (16px lead stays 16px);
   only the gaps and the lead's line-height come in. Applies to every hero, so
   the first CTA moves up the page everywhere on a phone. */
@media (max-width: 760px) {
  .hero, .svc-hero { padding-top: 96px !important; }
  .hero-badge, .svc-tag { margin-bottom: 20px !important; }
  .hero h1, .svc-hero h1 { margin-bottom: 20px !important; }
  .hero p.lead, .svc-hero p.lead, .hero .lead, .svc-hero .lead {
    line-height: 1.55 !important;
    margin-bottom: 26px !important;
  }
  .hero-ctas, .svc-cta { gap: 12px !important; }
}

/* ── the card-style consent banner (founders-pack, roofer pilot) ─────────
   A different design from the slim bar elsewhere: a floating card with an icon,
   a heading and stacked buttons, 238px tall. On a 390px phone it covered the
   hero CTA — and live ads point at /founders-pack, so a covered CTA there costs
   real money. Compacted rather than restyled: same card, no icon, tighter. */
@media (max-width: 760px) {
  /* NOTE: do not move the banner's `bottom`. The slim bar sits at bottom:0 and
     the card at bottom:24px; lifting either one pushed it INTO a CTA. Height is
     the lever, position is not. */
  .cookie-banner .cookie-ico { display: none !important; }
  .cookie-head { margin-bottom: 8px !important; gap: 10px !important; }
  .cookie-head h3, .cookie-head strong { font-size: 15px !important; }
  .cookie-banner p { font-size: 12px !important; line-height: 1.45 !important; margin-bottom: 10px !important; }
  .cookie-actions { flex-direction: row !important; gap: 8px !important; }
  .cookie-actions .cookie-btn { flex: 1 1 0 !important; min-height: 40px !important; font-size: 12px !important; padding: 8px 10px !important; }
}

/* ── consent banners: hard height cap on phones ──────────────────────────
   Whatever design a page uses, a fixed bar at the bottom of a 844px viewport
   must not eat more than ~90px or it starts resting on hero CTAs. Measured
   both variants at 390px and capped them the same way. */
@media (max-width: 760px) {
  .cookie-banner {
    max-height: 104px !important;
    overflow-y: auto !important;
  }
  .cookie-banner .cookie-inner,
  .cookie-banner > div {
    padding-top: 8px !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .cookie-head { display: none !important; }
  /* NOT clamped. An earlier revision truncated this to two lines to save
     height, which would have cut "Read our Privacy Policy" — the one link in
     the notice that matters. A consent notice does not get an ellipsis. */
  .cookie-banner p {
    font-size: 12px !important;
    line-height: 1.35 !important;
    margin: 0 0 6px !important;
  }
  .cookie-actions .cookie-btn { min-height: 36px !important; padding: 6px 10px !important; }

  /* and a touch more room in the hero so a 92px bar cannot reach the CTA */
  .hero, .svc-hero { padding-top: 88px !important; }
  .hero p.lead, .svc-hero p.lead { margin-bottom: 22px !important; }
}

/* ── breadcrumbs + hero were double-padding for the nav ──────────────────
   .crumbs carries 84px of top padding to clear the fixed bar, and then the
   hero right after it pays for the same clearance again. On /sacramento that
   stacked spacing pushed the first CTA to 795px, under the consent bar.
   Measured: the crumbs already did the job, so the hero should not repeat it. */
@media (max-width: 760px) {
  .crumbs + header.hero,
  .crumbs + header.svc-hero,
  .crumbs + .hero,
  .crumbs + .svc-hero { padding-top: 22px !important; }

  /* Long hero leads (8+ lines on a phone) get a slightly tighter measure so the
     CTA stays in the first screen. Type size is unchanged. */
  .hero p.lead, .svc-hero p.lead { line-height: 1.48 !important; }
}

/* ── legibility floor, at a specificity that actually wins ───────────────
   Several pages declare their own small type with !important and a compound
   selector — index.html has `.foot-grid h4,.foot-grid .foot-h{font-size:11px
   !important}`, pricing has tier badges at 9.5px. A plain `.foot-h` rule loses
   to those. Matched selector shape so the floor holds.

   12px is the floor for anything a person reads on a phone. Uppercase tracked
   labels are legible at 12; they were not at 9.5. */
@media (max-width: 980px) {
  .foot-grid h4, .foot-grid .foot-h,
  .site-foot .foot-h, .svc-foot .foot-h { font-size: 12px !important; }

  .site-foot a, .svc-foot a, .foot-grid a,
  .site-foot li a, .svc-foot .links a { font-size: 15px !important; }
  .site-foot .foot-bottom, .site-foot .foot-bottom a,
  .site-foot .foot-disambig { font-size: 12px !important; }

  .tier-sub, .tier-flag, .prc-card h4, .tier h4,
  .stat-label, .hp-lbl, .social-bar-label, label { font-size: 12px !important; }

  /* These are declared on the page with !important and an id/compound
     selector, so the floor has to match their shape to win. */
  #contact label, .contact-form-section label, .form-field label,
  .engine-label, .stat-label, .live, .hp-lbl,
  .form-label, .f-label, form label { font-size: 12px !important; }
}

/* ── micro-label floor ───────────────────────────────────────────────────
   Every remaining sub-12px item on the site is UPPERCASE and letter-spaced —
   eyebrows, table headers, stat labels. Uppercase letterforms read materially
   larger than lowercase at the same pixel size, and the tracking helps again,
   so 11px there is legitimate typography rather than a defect. They are left
   alone deliberately.

   What is NOT fine is 10px and below, which is small however you set it. This
   floors those without touching the ones that work. */
@media (max-width: 980px) {
  .hero-stat-lbl, .offer-divider, .stat-label, .hp-lbl,
  .tier-flag, .prc-flag { font-size: 11px !important; }
  .form-fineprint { font-size: 12px !important; }
}