/* ============================================================
   Mobile responsiveness overrides for the fleethq static site.
   ALL rules live inside @media (max-width:...) blocks, so the
   desktop layout is never affected. Generated per component
   family, loaded last so equal-specificity mobile rules win.
   ============================================================ */

/* ========== FOUNDATION: container, nav, footer, type, overflow ========== */
@media (max-width: 768px) {

  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }
  .stage {
    max-width: 100%;
    overflow-x: hidden;
  }
  img, video, iframe, embed, object, svg {
    max-width: 100%;
  }
  img, video { height: auto; }
  .wp-block-table,
  .compare-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table { max-width: 100%; }

  .wrap { max-width: calc(100% - 32px); }

  .display {
    font-size: clamp(28px, 6.2vw, 36px);
    line-height: 1.08;
  }
  .h2 {
    font-size: clamp(24px, 5.2vw, 32px);
  }
  .lede {
    font-size: 15px;
    line-height: 1.4;
  }
  .section-head .h2 {
    width: auto;
    max-width: 100%;
  }
  .section-head .lede {
    width: auto;
    max-width: 100%;
  }
  .pricing-eyebrow,
  .calc-eyebrow {
    letter-spacing: 0.08em;
    overflow-wrap: anywhere;
  }

  .nav-links { display: none; }
  .nav-right { display: none; }
  .nav-mobile-bar { display: flex; }
  .nav-burger { display: flex; width: 36px; height: 36px; }
  .nav-demo-btn {
    display: inline-flex;
    height: 36px;
    font-size: 12px;
    padding: 0 12px;
    width: auto;
  }
  .nav-mobile { display: block; }
  body.mobile-nav-open .site-header { visibility: hidden; }
  body.mobile-nav-open .nav-mobile { visibility: visible; }

  .site-logo       { display: block !important; height: 26px; width: auto; }
  .site-logo-dark  { display: none !important; }
  .site-logo-white { display: none !important; }
  .site-logo-mark  { display: none !important; }
  .site-header.nav-dark:not(.nav-scrolled) .site-logo       { display: none !important; }
  .site-header.nav-dark:not(.nav-scrolled) .site-logo-white { display: block !important; height: 26px; width: auto; }

  .site-header.nav-scrolled { top: 0; }
  .site-header.nav-scrolled .nav-inner {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    margin: 0;
    justify-content: space-between;
    gap: 0;
    padding: 0 16px;
  }
  .site-header.nav-scrolled::before { display: none; }

  .footer-inner { max-width: calc(100% - 32px); }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .footer-col {
    border-bottom: 1px solid #222;
    padding: 16px 0;
  }
  .footer-col.brand { padding-bottom: 16px; }
  .footer-col:last-child { border-bottom: none !important; }
  .footer .brand {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
  }
  .footer .brand img { margin-bottom: 0; width: 60px; }
  .footer-social { margin-top: 0; }
  .footer-bottom {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    width: 100%;
  }
}

@media (max-width: 480px) {

  .display { font-size: clamp(26px, 8vw, 30px); }
  .h2,
  .section-head .h2 {
    font-size: 26px;
    max-width: 100%;
  }
  .lede,
  .section-head .lede {
    font-size: 14px;
    max-width: 100%;
  }

  .footer-bottom .links {
    flex-wrap: wrap;
    gap: 12px 18px;
  }
}
/* ========== HERO + FEATURE HERO + PLATFORM ========== */
@media (max-width:768px){

  /* ---- container side padding / overflow guard ---- */
  .wrap{ max-width:calc(100% - 40px); }

  /* ---- shared oversized headings (40–64px on desktop) ---- */
  .display{ font-size:clamp(30px,8vw,42px); }
  .h2{ font-size:clamp(26px,6.5vw,34px); }

  /* =========================================================
     HOME HERO
     ========================================================= */
  .hero{ padding:44px 0 32px !important; }
  .hero .display{ width:auto; max-width:100%; font-size:clamp(30px,8vw,40px); }
  .hero .lede{ width:auto; max-width:100%; font-size:15px; padding:0 4px; }
  .hero-badge{ margin-bottom:18px; }

  /* email form: field above button, both full width */
  .hero-cta{ flex-direction:column; align-items:stretch; gap:14px; margin-top:20px; padding:0 4px; }
  .hero-cta .input{ width:100%; max-width:100%; height:44px; }
  .hero-cta .btn{ width:100%; max-width:100%; height:44px; }
  .hero-cta-note{ margin-top:10px; }

  /* hero figure full-width, never overflow */
  .hero-figure{ width:100%; max-width:100%; margin-top:28px; }
  .hero-figure .frame{ padding:6px; }
  .hero-figure img{ width:100%; max-width:100%; height:auto; }

  /* =========================================================
     FEATURE-PAGE HERO (.fm-hero)
     ========================================================= */
  .fm-hero{ padding-top:64px !important; }
  .fm-eyebrow{ margin:0 0 14px; }
  .fm-title{ max-width:100%; font-size:clamp(30px,8vw,40px); }
  .fm-sub{ max-width:100%; font-size:15px; }
  .fm-hero .hero-cta{ margin-top:22px; }
  .fm-hero-figure{ width:100%; max-width:100%; margin-top:34px; }
  .fm-hero-figure .frame{ padding:6px; }
  .fm-hero-figure img{ width:100%; max-width:100%; height:auto; }

  /* =========================================================
     PLATFORM / SHOWCASE
     ========================================================= */
  .platform{ padding:56px 0; }
  .platform .section-head{ max-width:100%; padding:0 4px; }
  .platform .section-head .lede{ max-width:100%; }
  .platform-stage{ width:100%; max-width:100%; margin-top:22px; }

  /* decorative doodle can push page width — hide on mobile */
  .clickme{ display:none; }

  /* transform figure: 900px on desktop -> cap to viewport */
  .transform{ padding:56px 0 0; }
  .transform-fig{ width:100%; max-width:100%; margin-top:24px; }
  .transform-fig img{ width:100%; max-width:100%; height:auto; }

  /* =========================================================
     CORNER (showcase detail)
     ========================================================= */
  .corner{ padding:56px 0; }
  .corner .section-head .h2{ width:auto; max-width:100%; }
  .corner-detail{ grid-template-columns:1fr; gap:24px; }
}

@media (max-width:480px){
  /* tighter gutters on small phones */
  .wrap{ max-width:calc(100% - 32px); }

  .hero{ padding:36px 0 28px !important; }
  .hero .display,
  .fm-title{ font-size:clamp(27px,9vw,34px); }
  .hero .lede,
  .fm-sub{ font-size:14px; }

  .fm-hero{ padding-top:56px !important; }
  .platform{ padding:44px 0; }
  .corner{ padding:44px 0; }
}
/* ========== CTA BAND + TESTIMONIALS + FAQ + CALCULATOR ========== */
@media (max-width:768px){
  .cta-band-wrap { padding: 0; }
  .cta-band {
    width: auto; max-width: 100%;
    margin: 0 16px; padding: 44px 22px 46px;
  }
  .cta-band img[aria-hidden] { display: none; }

  .cta-title {
    font-size: clamp(34px, 9vw, 52px);
    line-height: 1.02;
  }
  .footer-cta .cta-title {
    font-size: clamp(34px, 9vw, 52px);
    line-height: 1.02;
  }

  .cta-field {
    flex-direction: column; flex-wrap: nowrap;
    gap: 14px; margin-top: 28px; padding: 0;
  }
  .cta-field .input { width: 100%; max-width: none; height: 44px; }
  .cta-field .btn   { width: 100%; max-width: none; height: 44px; }

  .voices { padding: 56px 0 0; overflow-x: hidden; }
  .voices h2 { width: auto; max-width: 90%; font-size: clamp(24px, 6vw, 34px); }
  .v-rows { width: auto; max-width: 100vw; }
  .v-card { width: 220px; }

  .pricing-faq { padding: 56px 0 64px; }
  .pricing-faq-inner { max-width: 100%; }
  .pricing-faq .h2 { font-size: clamp(24px, 6vw, 30px); margin-bottom: 28px; }
  .faq-list { width: 100%; }
  .faq-btn {
    width: 100%; align-items: flex-start;
    gap: 12px; padding: 18px 0;
  }
  .faq-num { width: 16px; padding-top: 2px; }
  .faq-q {
    min-width: 0; font-size: 14px; line-height: 1.35;
    overflow-wrap: anywhere;
  }
  .faq-icon { width: 26px; height: 26px; flex-shrink: 0; }
  .faq-body { padding: 0 0 18px 28px; }
  .faq-a { font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }

  .fhq-calc-section { padding: 48px 0; }
  .fhq-calc-section .calc-hero { padding-top: 8px; }
  .fhq-calc-section .calc-title { font-size: clamp(28px, 7vw, 40px); }
  .fhq-calc-section .calc-sub { font-size: 15px; }

  .fhq-calc-section .calc-widget { margin: 36px auto 0; }
  .fhq-calc-section .calc-grid { grid-template-columns: 1fr; gap: 18px; }
  .fhq-calc-section .calc-controls {
    width: 100%; padding: 28px 22px; gap: 30px;
  }
  .fhq-calc-section .calc-result { width: 100%; margin-top: 0; padding: 36px 24px; }
  .fhq-calc-section .calc-slider { width: 100%; }
  .fhq-calc-section .calc-result-title { font-size: 28px; }
  .fhq-calc-section .calc-result-amount { font-size: clamp(40px, 11vw, 50px); }

  .fhq-calc-section .hero-cta {
    width: 100%; max-width: 100%;
    flex-direction: column; flex-wrap: nowrap;
    gap: 14px; padding: 0;
  }
  .fhq-calc-section .hero-cta .input { width: 100%; max-width: none; height: 44px; }
  .fhq-calc-section .hero-cta .btn   { width: 100%; max-width: none; height: 44px; }
}

@media (max-width:480px){
  .cta-band { margin: 0 12px; padding: 36px 18px 38px; }
  .cta-title { font-size: clamp(30px, 10vw, 40px); }
  .footer-cta .cta-title { font-size: clamp(30px, 10vw, 40px); }

  .voices h2 { font-size: 22px; }
  .v-card { width: 200px; }

  .pricing-faq .h2 { font-size: 24px; }
  .faq-q { font-size: 13.5px; }

  .fhq-calc-section .calc-title { font-size: clamp(26px, 8vw, 32px); }
  .fhq-calc-section .calc-controls { padding: 24px 18px; }
  .fhq-calc-section .calc-result { padding: 32px 20px; }
  .fhq-calc-section .calc-result-title { font-size: 26px; }
  .fhq-calc-section .calc-result-amount { font-size: clamp(36px, 12vw, 44px); }
}
/* ========== PRICING + BLOG/ARTICLE + FEATURE CONTENT ========== */
@media (max-width:768px){

  /* ===== PRICING: dark hero ===== */
  .pricing-hero{padding:64px 0 0;}
  .pricing-hero .display{font-size:clamp(30px,8vw,40px);max-width:100%;line-height:1.08;}
  .pricing-eyebrow{margin-bottom:16px;}
  /* Billing toggle: full width, keep annual/monthly side-by-side */
  .price-toggle{width:100%;display:grid;grid-template-columns:1fr 1fr;margin-top:28px;}
  .price-toggle-btn{justify-content:center;width:100%;}

  /* ===== PRICING: cards -> single column stack ===== */
  .pricing-cards-wrap{padding:32px 0 0;}
  .pricing-cards{grid-template-columns:1fr;gap:12px;max-width:calc(100% - 32px);}
  .price-card{padding:24px;}
  .price-card-head{min-height:auto;}
  .price-card-name-row,.price-card-price{flex-wrap:wrap;}
  .price-amount{font-size:clamp(34px,10vw,44px);}
  .price-cta{width:100%;max-width:100%;}

  /* ===== PRICING: comparison table -> internal horizontal scroll, never overflow viewport ===== */
  .pricing-compare{padding:48px 0 40px;}
  .compare-table-wrap{overflow-x:auto;max-width:100%;margin:0;-webkit-overflow-scrolling:touch;}
  .compare-table{min-width:560px;font-size:12px;}
  .compare-table tbody td,.compare-table thead th{padding:10px 12px;}
  .compare-table .compare-feature-col{width:50%;}

  /* ===== PRICING: FAQ ===== */
  .pricing-faq{padding:48px 0 64px;}
  .pricing-faq-inner{max-width:calc(100% - 32px);padding:0;margin:0 auto;}
  .pricing-faq .h2{font-size:clamp(24px,7vw,30px);margin-bottom:28px;}

  /* ===== PRICING: trust strip ===== */
  .pricing-trust-dark{padding:0 0 48px;}

  /* ===== BLOG ARTICLE: hero + prose ===== */
  .post-hero{padding:48px 16px 32px;}
  .post-hero-inner{max-width:100%;padding:0;}
  .post-title{font-size:clamp(26px,8vw,36px);line-height:1.08;}
  .post-meta-row{flex-wrap:wrap;padding:0 16px;}
  .post-thumb-wrap{max-width:100%;padding:24px 0 0;}
  .entry-content{max-width:100%;margin:32px auto;padding:0 16px;}
  .entry-content img{width:100%;height:auto;}
  .entry-content h2{font-size:clamp(22px,6vw,28px);}

  /* ===== BLOG INDEX: card grids -> 1 column ===== */
  .insights{padding:48px 16px 72px;}
  .insights-head{flex-direction:column;align-items:flex-start;gap:12px;width:100%;max-width:100%;margin-left:0;margin-right:0;}
  .insights-head h2{font-size:clamp(24px,7vw,32px);}
  /* full width of the container (which already has the gutter) so cards line up
     with the search bar above — no extra inset */
  .blog-grid{grid-template-columns:1fr;gap:14px;width:100%;max-width:100%;margin:0 auto;padding:0;}
  .blog-grid-archive{grid-template-columns:1fr;gap:14px;width:100%;max-width:100%;margin:0 auto;}
  .blog-card{padding:0;}
  .blog-featured{grid-template-columns:1fr;}
  .blog-featured-img{aspect-ratio:16/9;}
  .blog-featured-body{padding:24px 16px;}
  .blog-featured-title{font-size:clamp(20px,6vw,26px);}

  /* ===== FEATURE PAGE (fm-*): stack multi-column content ===== */
  .fm-body{overflow-x:clip;}
  .fm-hero{padding-top:64px;}
  .fm-hero .display{font-size:clamp(28px,8vw,40px);line-height:1.08;}
  .fm-hero-figure{width:100%;max-width:calc(100% - 32px);margin-top:32px;}
  .fm-scale-grid{grid-template-columns:1fr;gap:40px;margin-top:40px;}
  .fm-shot-single img,.fm-shot-wide img{max-width:100%;}
  .fm-composite{width:auto;max-width:100%;}
  .fm-composite .fm-card{width:100%;max-width:300px;}
  .fm-composite .fm-cal{width:90%;max-width:300px;}

  /* ===== Overflow safety net on owned page wrappers ===== */
  .pricing-page{overflow-x:clip;}
}

@media (max-width:480px){

  /* Tighter hero + headings on small phones */
  .pricing-hero{padding:48px 0 0;}
  .pricing-hero .display{font-size:clamp(26px,9vw,32px);}
  .price-toggle{grid-template-columns:1fr;}

  /* Cards */
  .price-card{padding:22px 18px;}
  .price-amount{font-size:clamp(32px,11vw,40px);}

  /* Comparison table sized down further, still scrolls internally */
  .pricing-compare{padding:32px 0 32px;}
  .compare-table{min-width:520px;font-size:11px;}
  .compare-table tbody td,.compare-table thead th{padding:9px 10px;overflow-wrap:anywhere;word-break:break-word;}

  /* FAQ */
  .pricing-faq{padding:40px 0 52px;}
  .pricing-faq .h2{font-size:clamp(22px,7vw,26px);}

  /* Article prose */
  .post-title{font-size:clamp(24px,9vw,30px);}
  .entry-content h2{font-size:clamp(20px,7vw,24px);}

  /* Feature page hero figure */
  .fm-hero-figure{max-width:calc(100% - 24px);}
}
/* ========== CORNER: small illustration tabs in a ROW, detail renders below ========== */
@media (max-width: 768px) {
  .corner-card { padding: 16px 12px !important; }
  .tabstrip { grid-template-columns: repeat(5, 1fr) !important; gap: 6px !important; margin: 0 !important; }
  .tabcard { min-height: 0 !important; height: auto !important; padding: 8px 3px !important; }
  .tabcard .tc-illo {
    display: flex !important; align-items: center; justify-content: center;
    height: 42px !important; padding: 2px !important; margin: 0 !important;
  }
  .tabcard .tc-illo img { max-width: 100%; max-height: 100%; object-fit: contain; }
  .tabcard .tc-label { padding: 5px 0 0 !important; font-size: 9px !important; line-height: 1.15 !important; }
  .corner-detail { grid-template-columns: 1fr !important; gap: 20px; margin-top: 20px; }
}

/* ========== PLATFORM ACCORDION open card: bigger preview image, compact copy,
   and make the image fill the card so there's no whitespace below it ========== */
@media (max-width: 768px) {
  .acc.open { display: flex !important; flex-direction: column !important; }
  .acc.open .acc-body {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
  }
  .acc.open .acc-copy { padding: 18px 20px 0 !important; flex: 0 0 auto; }
  .acc.open .acc-copy h3 { font-size: 19px !important; margin-bottom: 10px !important; }
  .acc.open .acc-copy p { font-size: 12px !important; line-height: 1.5 !important; }
  .acc.open .acc-prev {
    flex: 0 0 auto !important;
    width: 100% !important;
    aspect-ratio: 1.9 / 1 !important;   /* landscape box ~ the screenshot's ratio */
    min-height: 0 !important;
    margin: 18px 0 0 0 !important;
    border-radius: 0 !important; border-left: none !important; border-top: 1px solid var(--border) !important;
    /* contain = whole image visible, never cropped/zoomed on the sides */
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #fff !important;
  }
}

/* ========== FEATURE-PAGE fm-scale (id-verification etc.): reduce the huge gap
   between the tab list and the image. The .fm-visual is a fixed 480px box with
   the image absolutely centered — collapse it to fit the active shot. ========== */
@media (max-width: 768px) {
  .fm-scale-grid { gap: 20px !important; margin-top: 28px !important; }
  .fm-visual { min-height: 0 !important; }
  .fm-shot { position: static !important; }
  .fm-shot:not(.active) { display: none !important; }
  .fm-shot.active {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* ========== HERO/CTA email form: fix field height on mobile ==========
   The base .hero-cta .input{flex:1} collapses the field to content height
   (~16px) in the stacked column layout. Pin field + button to equal height. */
@media (max-width: 768px) {
  .hero-cta .input, .cta-field .input, .blog-subscribe-form .input {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
  }
  .hero-cta .btn, .cta-field .btn, .blog-subscribe-form .btn {
    width: 100% !important;
    max-width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
  }
}

/* ========== RESULTS BENTO: was shifted 16px off-screen left (margin:0 -16px);
   center it with even gutters and use 2 readable columns on phones ========== */
@media (max-width: 768px) {
  .results .bento {
    grid-template-columns: repeat(2, 1fr) !important;
    width: 100% !important;
    max-width: calc(100% - 32px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: 12px !important;
  }
  .results .bento .cell { grid-column: span 1 !important; }
}

/* ========== Email forms: always fill their container on mobile ==========
   A flex-column form with no explicit width collapses to its content width
   when the parent centers it (the calc section did this). Force full width. */
@media (max-width: 768px) {
  .hero-cta, .cta-field, .blog-subscribe-form {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 14px !important;
  }
}

/* ========== FAQ ("Frequently asked questions"): the .pricing-faq-inner is
   max-width:720px with no mobile cap on non-FAQ pages, so it overflows the
   viewport — heading spills off the right, numbers spill off the left.
   Constrain it to the viewport everywhere. ========== */
@media (max-width: 768px) {
  .pricing-faq, .faq { padding: 48px 0 56px !important; }
  .pricing-faq-inner, .faq-inner {
    max-width: calc(100% - 32px) !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }
  .pricing-faq .h2, .faq .h2, .faq-inner .h2 {
    margin-bottom: 28px !important;
    font-size: clamp(24px, 6.5vw, 30px) !important;
  }
}

/* ========== PRICING compare table: the whole table scrolls horizontally,
   nothing sticky. Fix mid-word header wrap + the big gap from the sticky thead.
   Applies to .pricing-compare on the pricing page AND the FAQ page. ========== */
@media (max-width: 768px) {
  .pricing-compare { padding: 40px 0 52px !important; }
  .pricing-compare .h2 { margin-bottom: 24px !important; }
  .compare-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .compare-table { min-width: 640px !important; }
  /* the sticky thead (top:56px) leaves a big empty gap above the table on
     mobile — let it flow normally instead. Nothing else is sticky. */
  .compare-table thead { position: static !important; top: auto !important; }
  .compare-table th:first-child,
  .compare-table td:first-child { position: static !important; box-shadow: none !important; }
  .compare-plan-name { font-size: 13px !important; margin-bottom: 8px !important; white-space: nowrap !important; }
  .compare-table thead th { padding: 12px 10px !important; }
  .compare-table tbody td { padding: 11px 10px !important; font-size: 12.5px !important; }
}

/* ========== INSIGHTS section header: center the heading + "View all articles"
   button on mobile (was left-aligned via align-items:flex-start) ========== */
@media (max-width: 768px) {
  .insights-head {
    align-items: center !important;
    text-align: center !important;
  }
}

/* ========== BLOG ARTICLE body: justify text so both edges form a straight
   vertical line. Applies on ALL viewports (desktop + mobile) — intentional,
   the only non-media rule here. Hyphenate to avoid big word gaps. ========== */
.single-article p, .post-content p, .entry-content p,
.single-article li, .post-content li, .entry-content li {
  text-align: justify !important;
  -webkit-hyphens: auto !important;
  hyphens: auto !important;
}