/* ════════════════════════════════════════
   BEEYACORP — responsive.css
   LOAD ORDER: 4 of 4
   Mobile-first breakpoints. Every override
   here has been measured against a 375px
   viewport to prevent content overflow.
   ════════════════════════════════════════ */

/* ══ ≤ 1100px — Narrow desktop ══ */
@media (max-width: 1100px) {
  .hero-grid {
    grid-template-columns: 1fr 400px;
    gap: 40px;
  }
}

/* ══ ≤ 1024px — Tablet ══ */
@media (max-width: 1024px) {
  .hero-grid          { grid-template-columns: 1fr; gap: 36px; }
  .case-grid          { grid-template-columns: 1fr; gap: 32px; }
  .steps-grid         { grid-template-columns: 1fr 1fr; gap: 16px; }
  .step-card          { border-right: none; border-bottom: 1px solid var(--c-border); }
  .step-card:nth-child(3),
  .step-card:last-child { border-bottom: none; }
  .qual-grid          { grid-template-columns: 1fr; gap: 24px; }
  .testi-grid         { grid-template-columns: 1fr; gap: 16px; }
  .testi-card:first-child { grid-column: span 1; }
  .deliv-grid         { grid-template-columns: 1fr 1fr; }
  .proof-grid         { grid-template-columns: repeat(2, 1fr); }
  .proof-col          { border-bottom: 1px solid var(--c-border); }
  .proof-col:nth-child(2)           { border-right: none; }
  .proof-col:nth-child(3)           { border-right: 1px solid var(--c-border); }
  .proof-col:nth-child(3),
  .proof-col:nth-child(4)           { border-bottom: none; }
  .trust-badges-inner { gap: 20px; }
  .hsub               { max-width: 100%; }
  .bc-footer-brand    { max-width: 100%; }
}

/* ══ ≤ 768px — Large mobile ══ */
@media (max-width: 768px) {
  /* Section spacing */
  .section     { padding: 48px 0; }
  .section-lg  { padding: 56px 0; }
  .section-sm  { padding: 36px 0; }
  .section-cta { padding: 56px 0; }
  .hero        { padding: 76px 0 48px; }

  /* Type scale */
  .h1     { font-size: 34px; line-height: 1.1; }
  .h2     { font-size: 28px; line-height: 1.15; }
  .h2-cta { font-size: 28px; line-height: 1.15; }
  .hsub   { font-size: 16px; }
  .pn     { font-size: 38px; }
  .pl     { font-size: 11px; margin-top: 6px; }

  /* Nav */
  .nav-inner { height: 60px; }

  /* Show mobile sticky CTA (index.html only — legal pages hide it via .mobile-sticky { display:none }) */
  .mobile-sticky { display: block; }

  /* Bottom padding for pages with the sticky bar — prevents content being hidden behind it.
     Applied to body globally; harmless on legal pages (adds minor extra bottom space only). */
  body { padding-bottom: 72px; }

  /* Form card */
  .form-card { padding: 24px 20px; }

  /* Compare table: allow horizontal scroll, don't squish */
  .compare-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .compare-table      { min-width: 480px; font-size: 13px; }
  .compare-table th,
  .compare-table td   { padding: 10px 12px; }

  /* Testimonials */
  .testi-card { padding: 20px; }

  /* Risk strip: wrap into 2 rows */
  .risk-strip {
    gap: 10px 20px;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Trust badges: 2-col grid */
  .trust-badges-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
    justify-items: start;
  }

  /* Final CTA reversed button */
  .btn-reversed { height: 58px; font-size: 15px; padding: 0 28px; width: 100%; max-width: 380px; }

  /* Section CTA body text */
  .cta-body { font-size: 15px; margin-bottom: 28px; }

  /* Scarcity pill: allow wrapping */
  .scarcity {
    white-space: normal;
    text-align: center;
    padding: 8px 16px;
    font-size: 12px;
  }

  /* Quote block: reduce padding + font */
  .quote-block {
    padding: 16px 20px;
    font-size: 16px;
    margin: 32px 0;
  }

  /* Process steps: 2×2 grid instead of 4-wide flex */
  .process-steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    border-top: 1px solid var(--c-border);
    margin-top: 18px;
    padding-top: 14px;
  }
  .process-step::after { display: none; }

  /* Trust strip in form: keep 3-col but shrink padding */
  .trust-strip { gap: 4px; padding-top: 12px; margin-top: 14px; }
  .trust-num   { font-size: 14px; }
  .trust-label { font-size: 9px; line-height: 1.35; }

  /* Proof cols: reduce padding */
  .proof-col { padding: 20px 16px; }

  /* Hero bullets */
  .hero-bullets li { font-size: 14px; }

  /* CTA buttons: full-width on mobile */
  .btn-lg { height: 58px; font-size: 15px; padding: 0 24px; }

  /* Mid CTA padding */
  .mid-cta { padding: 32px 0 0; }

  /* Qual CTA */
  .qual-cta { margin-top: 28px; }

  /* Compare header: stack on narrow */
  .compare-header { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* FAQ button: reduce padding */
  .faq-btn { padding: 16px 18px; font-size: 14px; }
  .faq-answer p { padding: 0 18px 18px; font-size: 13px; }

  /* Form card rating: keep single row */
  .form-card-rating { padding: 8px 0; margin-top: 10px; }
  .form-card-rating-text { font-size: 11px; }
}

/* ══ ≤ 640px — Mobile ══ */
@media (max-width: 640px) {
  .wrap { padding-left: 16px; padding-right: 16px; }

  /* Type */
  .h1              { font-size: 30px; line-height: 1.1; }
  .h2              { font-size: 24px; line-height: 1.18; }
  .h2-cta          { font-size: 24px; }
  .hsub            { font-size: 15px; line-height: 1.6; }
  .hero-bullets li { font-size: 14px; }
  .body-text       { font-size: 14px; }

  /* All grids → single column */
  .problem-grid { grid-template-columns: 1fr; gap: 10px; }
  .steps-grid   { grid-template-columns: 1fr; }
  .deliv-grid   { grid-template-columns: 1fr; gap: 12px; }
  .arch-compare { grid-template-columns: 1fr; gap: 10px; }
  .metric-grid  { grid-template-columns: 1fr 1fr; gap: 10px; }
  .qual-grid    { grid-template-columns: 1fr; gap: 14px; }

  /* Step cards */
  .step-card {
    border-right: none;
    border-bottom: 1px solid var(--c-border);
    padding: 22px 18px;
  }
  .step-card:last-child { border-bottom: none; }

  /* Process steps: keep 2-col from 768 */
  .process-steps {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .process-label { font-size: 9px; }

  /* Trust strip: 3-col shrinks naturally at 640 */
  .trust-strip { gap: 4px; }
  .trust-num   { font-size: 13px; }
  .trust-label { font-size: 9px; }

  /* Trust badges: single column */
  .trust-badges-inner {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Risk strip: single column */
  .risk-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .risk-item { font-size: 13px; }

  /* Footer */
  .bc-footer-top    { flex-direction: column; gap: 20px; }
  .bc-footer-links  { align-items: flex-start; }
  .bc-footer-bottom { flex-direction: column; gap: 6px; }
  .bc-footer-brand  { max-width: 100%; }

  /* Testimonial header */
  .testi-header { flex-direction: column; gap: 8px; }

  /* Testi card */
  .testi-card { padding: 18px; gap: 12px; }

  /* Arch sides */
  .arch-side { padding: 18px 16px; }

  /* Quote block */
  .quote-block { padding: 14px 16px; font-size: 15px; margin: 24px 0; }

  /* Compare table: ensure scrollable on mobile */
  .compare-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 0; }
  .compare-table      { min-width: 460px; }
  .compare-header     { padding: 14px 16px; }

  /* Compare table scroll hint */
  .compare-scroll-hint { display: block; }

  /* FAQ */
  .faq-btn  { padding: 14px 16px; font-size: 13px; gap: 12px; }
  .faq-icon { width: 22px; height: 22px; font-size: 13px; }
  .faq-answer p { padding: 0 16px 16px; font-size: 13px; }

  /* Deliverable cards */
  .deliv-card { padding: 20px; }
  .deliv-title { font-size: 14px; }

  /* Problem items */
  .problem-item { padding: 14px 16px; gap: 10px; }

  /* Qual cards */
  .qual-card { padding: 14px 16px; gap: 10px; }

  /* Form card */
  .form-card { padding: 20px 16px; }
  .form-title { font-size: 18px; }
  .form-sub   { font-size: 12px; margin-bottom: 18px; }

  /* Scarcity: full width pill */
  .scarcity { display: flex; width: 100%; max-width: 340px; justify-content: center; margin: 0 auto 24px; }

  /* Section CTA */
  .section-cta { padding: 48px 0; }
  .h2-cta em  { display: block; }

  /* Buttons */
  .btn-lg  { width: 100%; height: 56px; font-size: 15px; justify-content: center; }
  .btn     { height: 52px; font-size: 14px; }
  .btn-reversed { height: 56px; font-size: 14px; padding: 0 24px; max-width: 100%; }

  /* Case study result text */
  .case-result { font-size: 14px; }

  /* Metric value */
  .metric-val { font-size: 28px; }

  /* Step number circle */
  .sn { width: 54px; height: 54px; font-size: 18px; margin-bottom: 16px; }

  /* Niche strip items */
  .niche-item { font-size: 11px; }

  /* Microcopy */
  .microcopy { font-size: 11px; flex-wrap: wrap; }

  /* Form card rating */
  .form-card-rating { flex-wrap: wrap; gap: 6px; }
}

/* ══ ≤ 480px — Small mobile ══ */
@media (max-width: 480px) {
  /* Proof bar: 2×2 */
  .proof-grid { grid-template-columns: repeat(2, 1fr); gap: 0; }
  .proof-col  { padding: 18px 12px; }
  .pn         { font-size: 32px; }
  .pl         { font-size: 10px; }

  /* Buttons */
  .btn-full { height: 52px; font-size: 14px; }
  .btn-xl   { height: 56px; font-size: 14px; }

  /* Form */
  .form-card { padding: 18px 14px; }
  .field      { height: 46px; font-size: 13px; }

  /* Step number */
  .sn { width: 50px; height: 50px; font-size: 17px; }

  /* Testi */
  .testi-card { padding: 14px; }
  .testi-avatar { width: 38px; height: 38px; font-size: 12px; }
  .testi-name   { font-size: 13px; }
  .tq           { font-size: 14px; }

  /* Mobile sticky */
  .mobile-sticky .btn { font-size: 13px; height: 50px; }

  /* Trust strip: stack to 1-col on very small screens */
  .trust-strip {
    grid-template-columns: 1fr;
    gap: 10px;
    text-align: left;
  }
  .trust-divider { border: none; border-top: 1px solid var(--c-border); padding-top: 10px; }
  .trust-num  { font-size: 15px; }
  .trust-label { font-size: 10px; }

  /* Process steps: keep 2-col */
  .process-steps { grid-template-columns: 1fr 1fr; }
  .process-label  { font-size: 8px; }
  .process-num    { width: 22px; height: 22px; font-size: 9px; }

  /* Deliverables */
  .deliv-grid { grid-template-columns: 1fr; }

  /* H1 */
  .h1 { font-size: 28px; }
  .h2 { font-size: 22px; }

  /* Form title */
  .form-title { font-size: 17px; }

  /* Proof cols: reduce further */
  .proof-col { border-bottom: 1px solid var(--c-border); }
  .proof-col:nth-child(2) { border-right: none; }
  .proof-col:nth-child(3) { border-right: 1px solid var(--c-border); }
  .proof-col:nth-child(3),
  .proof-col:nth-child(4) { border-bottom: none; }
}

/* ══ ≤ 360px — Very small phones (Galaxy A series etc.) ══ */
@media (max-width: 360px) {
  .wrap      { padding-left: 12px; padding-right: 12px; }
  .h1        { font-size: 26px; }
  .h2        { font-size: 21px; }
  .form-card { padding: 16px 12px; }
  .btn-lg    { font-size: 14px; height: 54px; }
  .btn-full  { font-size: 13px; height: 50px; }
  .pn        { font-size: 28px; }
  .faq-btn   { font-size: 12px; padding: 12px 14px; }
  .testi-card { padding: 12px; }
  .section   { padding: 40px 0; }
}

/* ══ ≤ 320px — Minimum supported width ══
   Older iPhones (SE 1st gen), Galaxy mini.
   Ensures no overflow or clipping at the
   smallest viewport the brief requires.
   ════════════════════════════════════════ */
@media (max-width: 320px) {
  .wrap       { padding-left: 10px; padding-right: 10px; }

  /* Type: minimum readable sizes */
  .h1         { font-size: 24px; line-height: 1.1; }
  .h2         { font-size: 19px; line-height: 1.15; }
  .h2-cta     { font-size: 19px; }
  .hsub       { font-size: 14px; }
  .pn         { font-size: 26px; }

  /* Bare semantic heading tags — fallback for any text not using utility classes */
  h1          { font-size: 24px; line-height: 1.1; }
  h2          { font-size: 19px; line-height: 1.15; }
  h3          { font-size: 16px; }
  p           { font-size: 13px; }

  /* Sections */
  .section    { padding: 32px 0; }
  .section-cta { padding: 36px 0; }
  .hero       { padding: 64px 0 28px; }

  /* Form */
  .form-card  { padding: 14px 10px; }
  .form-title { font-size: 16px; }
  .field      { height: 44px; font-size: 13px; }
  .btn-full   { height: 48px; font-size: 13px; }
  .btn-lg     { height: 50px; font-size: 13px; }

  /* Nav */
  .nav-inner  { height: 56px; }

  /* Proof */
  .proof-col  { padding: 14px 8px; }
  .pn         { font-size: 26px; }

  /* Cards */
  .testi-card { padding: 10px; }
  .deliv-card { padding: 16px; }

  /* FAQ */
  .faq-btn    { padding: 10px 12px; font-size: 12px; }

  /* Footer */
  .bc-footer  { padding: 36px 0 20px; }
}

/* ══ Landscape phone (e.g. iPhone SE landscape = 667×375) ══ */
@media (max-width: 768px) and (orientation: landscape) {
  .hero        { padding: 68px 0 36px; }
  .section-cta { padding: 44px 0; }
  .hero-grid   { gap: 24px; }
  .form-card   { padding: 20px; }
}