/* index4.php — mobile homepage layout (independent from production index.php) */

/* How it Works CTA — slightly wider than default px-4 */
#how-it-works .how-it-works-cta .btn {
  padding-left: 2.15rem;
  padding-right: 2.15rem;
}

@media (max-width: 767px) {
  /* ---- Hide sections / badges ---- */
  #ai-authority-framework,
  #case-studies,
  /* Comparison table UI is hidden-xs; orphan header shouldn't eat a stripe */
  #pricing {
    display: none !important;
  }

  /* Beat index-dev-overrides `.main-footer … display: flex !important` */
  .main-footer .footer-community-stack .trustpilot-widget,
  .main-footer .footer-community-stack .trustpilot-widget iframe,
  .main-footer .footer-community-facebook {
    display: none !important;
  }

  /* ---- Section order (all direct children need an order so flex sort is stable) ---- */
  #content.content {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Default late so any unmarked siblings don't jump ahead of ordered sections */
  #content.content > * {
    order: 200 !important;
  }

  #content.content > #hero-section { order: 10 !important; }
  #content.content > #news-carousel { order: 20 !important; }
  #content.content > #how-it-works { order: 30 !important; }
  #content.content > #benefits { order: 40 !important; }
  #content.content > #how-it-works-legacy { order: 45 !important; }
  #content.content > #results { order: 50 !important; }
  #content.content > #recommendations { order: 60 !important; }
  #content.content > #case-studies { order: 70 !important; }
  #content.content > #reviews { order: 80 !important; }
  #content.content > #packages { order: 90 !important; }
  #content.content > #pricing { order: 100 !important; }
  #content.content > #money-back-guarantee { order: 110 !important; }
  #content.content > #why-brand-push { order: 120 !important; }
  #content.content > #faq { order: 130 !important; }
  #content.content > #official-reviews { order: 140 !important; }
  #content.content > section.cta1 { order: 150 !important; }

  /*
   * Alternating solid backgrounds by visible mobile eyebrows only.
   * Skip anything hidden on mobile (case-studies, AI framework, news-carousel,
   * official-reviews, why-brand-push, how-it-works-legacy, pricing/comparison
   * table, etc.) — they must not eat a stripe in the grey ↔ white sequence.
   *
   * Visible order after hero grey:
   *   News Outlets → How it Works → Benefits → Results → Testimonials →
   *   Reviews → Packages → Guarantee → FAQ → CTA
   *   white / grey / white / grey / white / grey / white / grey / white
   *
   * Sections are painted by plain id selectors, not `#content.content > #id`:
   * the markup closes #wrap/main early, so every section below the hero is a
   * body child at runtime and the descendant-of-content selectors never match.
   */
  #content.content,
  #wrap {
    --bp-section-grey: #f5f7fa;
    --bp-section-white: #ffffff;
    /* 32px edge ↔ content; paired seams ≈ 64px between adjacent bands */
    --bp-section-pad-y: var(--space-8, 2rem);
    /* Cards/accordion → in-section CTA (tighter than band pad) */
    --bp-inner-cta-gap: var(--space-6, 1.5rem);
  }

  #content.content {
    background-color: #ffffff !important;
  }

  /*
   * Visual section rhythm (band edge → first/last content).
   * Sections under #content miss home4's body > section pad. Alternating
   * solid bands already separate groups (32+32 ≈ 64px at color seams), so
   * kill leftover “group gap” margins that were meant for continuous BGs.
   */

  #content.content > #benefits,
  #content.content > #results,
  #content.content > #packages,
  #content.content > #recommendations,
  #content.content > #reviews,
  #content.content > #money-back-guarantee,
  #content.content > #faq,
  #content.content > section.cta1,
  section.cta1 {
    padding-top: var(--bp-section-pad-y) !important;
    padding-bottom: var(--bp-section-pad-y) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* FAQ + bottom CTA share one white band — don’t double the seam */
  #content.content > #faq {
    padding-bottom: 0 !important;
  }

  /* how-it-works: rhythm lives on the two mobile bands, not the section shell */
  #content.content > #how-it-works,
  #how-it-works {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* ---- Kill theme / index-dev spacers that inflate band edges ---- */
  #content.content > section.mb-2,
  #content.content > section.mb-4,
  #content.content > section.mb-5,
  #content.content > section.mb-6,
  #content.content > section .mb-50,
  #content.content > section .mb-60,
  #content.content > section .mb-120 {
    margin-bottom: 0 !important;
  }

  #content.content > section .mb-50,
  #content.content > section .mb-60,
  #content.content > section .mb-120 {
    margin-top: 0 !important;
  }

  #content.content > section > .custom-shape-divider-bottom-1621016099,
  #how-it-works > .custom-shape-divider-bottom-1621016099 {
    display: none !important;
  }

  #content.content > section > .container > .d-block.visible-xs.mb-50,
  #content.content > section > .d-block.visible-xs.mb-50,
  #how-it-works > .container > .d-block.visible-xs.mb-50,
  #benefits > .container > .d-block.visible-xs.mb-50 {
    display: none !important;
  }

  /* First content: no extra top margin/padding above the eyebrow */
  #reviews .fancy-title,
  #recommendations > .container > .row:first-of-type,
  #results > .container > .row:first-child,
  #packages > .container > .row:first-child,
  #faq > .container > .row:first-child,
  #benefits > .container > .px-2 > .row:first-child,
  #benefits > .container > .row:first-child,
  #money-back-guarantee > .container > .row:first-child,
  section.cta1 > .container > .row:first-child,
  #how-it-works .how-it-works-header-row > .lqd-column,
  #how-it-works .bp-m-band--how .lqd-column:first-child,
  #benefits > .container > .px-2 .lqd-column,
  #results > .container > .row:first-child > .lqd-column,
  #packages > .container > .row:first-child > .lqd-column,
  #faq > .container > .row:first-child > .lqd-column,
  #recommendations > .container > .row:first-of-type > .lqd-column,
  #money-back-guarantee > .container > .row > .lqd-column,
  section.cta1 > .container > .row:first-child > .lqd-column {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  #how-it-works .how-it-works-header-row > .lqd-column,
  #benefits > .container > .px-2 .lqd-column,
  #results > .container > .row:first-child > .lqd-column {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  #content.content > section .fancy-heading,
  #content.content > section .fancy-title,
  #content.content > section .heading-label,
  #how-it-works .fancy-heading,
  #how-it-works .heading-label,
  section.cta1 h2.visible-xs,
  section.cta1 h2 {
    margin-top: 0 !important;
  }

  /* Last content: no trailing utility margins under the final element */
  #results > .container,
  #packages > .container,
  #faq > .container,
  #benefits > .container,
  #money-back-guarantee > .container,
  #recommendations > .container,
  #reviews > .container,
  section.cta1 > .container {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* News Outlets: index-dev --mobile-group-gap (64px) was for continuous BG.
     Bands now supply the seam (32+32) — zero the grid’s trailing gap. */
  #how-it-works .mobile-news-grid,
  #how-it-works .mobile-news-grid.mb-9,
  #how-it-works .bp-m-band--outlets .mobile-news-grid {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Last logo row: drop mb-3 so band pad alone owns the bottom edge */
  #how-it-works .mobile-news-grid > .col-xs-4:nth-last-child(-n+4) {
    margin-bottom: 0 !important;
  }

  #how-it-works .mobile-news-grid > .col-xs-12:last-child {
    margin-top: var(--space-3, 0.75rem) !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  #how-it-works .how-it-works-subhead,
  #how-it-works .bp-m-band--how > .lead {
    margin-top: 0 !important;
  }

  /* Keep the How it Works eyebrow from sitting on the color seam */
  #how-it-works .bp-m-band--how > .how-it-works-subhead {
    padding-top: 0 !important;
    margin-bottom: var(--space-4, 1rem) !important;
  }

  #how-it-works .bp-m-band--how > .lead {
    margin-bottom: var(--space-4, 1rem) !important;
  }

  /* Packages: stacked pricing cards need a gap; only the last one sits flush
     so it doesn’t leave a ghost gap above the section’s bottom pad. */
  #packages .iconbox-pricing {
    margin-bottom: var(--space-6, 1.5rem) !important;
  }

  #packages .row.d-flex.flex-wrap > [class*="col-"]:last-child .iconbox-pricing {
    margin-bottom: 0 !important;
  }

  /* Recommendations: avatar row sits on the card — no extra bottom pad */
  #recommendations .review-avatars-row {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Reviews: Trustpilot CTA is the last content */
  #reviews > .container:nth-of-type(2) > p,
  #reviews .reviews-trustpilot-cta,
  #reviews .reviews-cards-shell + .cards-dots {
    margin-bottom: 0 !important;
  }

  #reviews .reviews-cards-shell + .cards-dots {
    margin-top: var(--space-4, 1rem) !important;
  }

  /* Money-back: last button paragraph */
  #money-back-guarantee .col-sm-7 > p:last-of-type,
  #money-back-guarantee .btn {
    margin-bottom: 0 !important;
  }

  /* FAQ last accordion / show-more */
  #faq .lqd-column-inner,
  #faq .accordion,
  #faq .faq-show-more {
    margin-bottom: 0 !important;
  }

  /* CTA delivery line — no second spacer under section pad */
  section.cta1 .cta-delivery-copy.mb-5,
  section.cta1 .mb-5,
  section.cta1 .btn {
    margin-bottom: 0 !important;
  }

  section.cta1 .lead.visible-xs {
    margin-bottom: var(--space-4, 1rem) !important;
  }

  /* Strip decorative backgrounds from visible + hidden sections alike */
  #how-it-works,
  #news_sites,
  #packages,
  #money-back-guarantee,
  #benefits,
  #case-studies,
  #reviews,
  #why-brand-push,
  #how-it-works-legacy,
  #news-carousel,
  #official-reviews,
  #results,
  #results.bp-results-showcase,
  #recommendations,
  #pricing,
  #faq,
  #content.content > section.cta1 {
    background-image: none !important;
  }

  /* Hidden-on-mobile sections: no stripe color (don't participate) */
  #case-studies,
  #ai-authority-framework,
  #how-it-works-legacy,
  #why-brand-push,
  #news-carousel,
  #official-reviews,
  #pricing,
  #news-carousel.hide-on-mobile,
  #official-reviews.hide-on-mobile {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
  }

  #results.bp-results-showcase::before,
  #results.bp-results-showcase::after {
    display: none !important;
    content: none !important;
    background: none !important;
    box-shadow: none !important;
  }

  #packages #news_sites,
  #news_sites {
    background: transparent !important;
    background-image: none !important;
  }

  /* Hero stays grey */
  #hero-section {
    background-color: #f5f7fa !important;
  }

  /*
   * #how-it-works holds two mobile eyebrows (News Outlets + How it Works).
   * Do NOT use 100vw breakout — #wrap has overflow-x:hidden and clips it,
   * which left the grey band looking like an inset card. Instead: zero the
   * section gutters (beat home4) and paint full-width bands inside.
   */
  section#how-it-works.benefits1,
  #how-it-works,
  #how-it-works.benefits1 {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    overflow: visible !important;
  }

  section#how-it-works.benefits1 > .container,
  #how-it-works > .container {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #how-it-works .how-it-works-header-row > [class*="col-"],
  #how-it-works .how-it-works-layout > [class*="col-"],
  #how-it-works .how-it-works-cta-row > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #how-it-works .how-it-works-header-row,
  #how-it-works .how-it-works-layout,
  #how-it-works .how-it-works-cta-row,
  #how-it-works .how-it-works-sample-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Full-width band surfaces; inset only the text/content */
  #how-it-works .how-it-works-header-row,
  #how-it-works .bp-m-band--outlets,
  #how-it-works .bp-m-band--how,
  #how-it-works .how-it-works-cta-row {
    box-sizing: border-box;
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--mobile-page-inset, 24px) !important;
    padding-right: var(--mobile-page-inset, 24px) !important;
  }

  /* News Outlets — solid white (no section gradient bleed) */
  #how-it-works .how-it-works-header-row,
  #how-it-works .bp-m-band--outlets {
    background: #ffffff none !important;
    background-color: #ffffff !important;
    background-image: none !important;
  }

  #how-it-works .how-it-works-header-row {
    padding-top: var(--bp-section-pad-y) !important;
    padding-bottom: 0 !important;
  }

  #how-it-works .bp-m-band--outlets {
    padding-top: 0 !important;
    /* Extra bottom air above the How it Works seam (was too tight vs. “400+ more”) */
    padding-bottom: var(--space-10, 2.5rem) !important;
  }

  /* How it Works + CTA — solid grey */
  #how-it-works .bp-m-band--how,
  #how-it-works .how-it-works-cta-row {
    background: #f5f7fa none !important;
    background-color: #f5f7fa !important;
    background-image: none !important;
  }

  #how-it-works .bp-m-band--how {
    padding-top: var(--space-10, 2.5rem) !important;
    padding-bottom: 0 !important;
  }

  #how-it-works .how-it-works-layout {
    background: transparent !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 0 !important;
  }

  #how-it-works .how-it-works-content-col {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
  }

  #how-it-works > .container > .d-block.visible-xs {
    display: none !important;
  }

  /* White bands — solid only (no home4 white→grey section gradient) */
  #content.content > #benefits,
  #content.content > #recommendations,
  #content.content > #packages,
  #content.content > #faq,
  #content.content > section.cta1,
  #benefits,
  #recommendations,
  #packages,
  #faq,
  section.cta1 {
    background: #ffffff none !important;
    background-color: #ffffff !important;
    background-image: none !important;
  }

  /* Grey bands — solid only (kill showcase multi-layer gradients too) */
  #content.content > #results,
  #content.content > #reviews,
  #content.content > #money-back-guarantee,
  #results,
  #results.bp-results-showcase,
  #results.bp-results-showcase.vc_row,
  #results.vc_row,
  #reviews,
  #reviews.reviews1,
  #money-back-guarantee {
    background: #f5f7fa none !important;
    background-color: #f5f7fa !important;
    background-image: none !important;
  }

  /* ---- Report feature cards as accordions ---- */
  #results .bp-report-features {
    gap: 0.75rem !important;
  }

  /* Beat index4-report-iframe `:first-child` padding/min-height so all
     accordion cards share the same collapsed chrome. */
  #results .bp-report-feature,
  #results .bp-report-feature:first-child {
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid #ededed !important;
    background: #fff !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.07) !important;
    transition: box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }

  #results .bp-report-feature:hover,
  #results .bp-report-feature:focus-visible,
  #results .bp-report-feature.is-preview,
  #results .bp-report-feature.is-active,
  #results .bp-report-feature.is-active:hover,
  #results .bp-report-feature.is-open {
    border-color: #ededed !important;
    background: #fff !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.07) !important;
    transform: none !important;
  }

  #results .bp-report-feature.is-open {
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.1) !important;
  }

  #results .bp-report-feature-copy {
    padding: 1rem 1.1rem 0;
  }

  #results .bp-report-feature.is-open .bp-report-feature-copy {
    padding-bottom: 0.15rem;
  }

  #results .bp-report-feature:not(.is-open) .bp-report-feature-copy {
    padding-bottom: 1rem;
  }

  #results .bp-report-feature-title {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.4rem 0.5rem;
    width: 100%;
    cursor: pointer;
  }

  /* Keep "New" beside the title; push chevron to the far right. */
  #results .bp-report-feature-new {
    flex: 0 0 auto;
    margin-left: 0;
  }

  #results .bp-report-feature-title::after {
    content: "";
    flex-shrink: 0;
    width: 0.55rem;
    height: 0.55rem;
    margin-left: auto;
    border-right: 2px solid #9aa0b5;
    border-bottom: 2px solid #9aa0b5;
    transform: translateY(-1px) rotate(45deg);
    transition: transform 0.42s cubic-bezier(0.34, 1.4, 0.64, 1),
                border-color 0.25s ease;
  }

  #results .bp-report-feature.is-open .bp-report-feature-title::after {
    border-color: #6b728a;
    transform: translateY(2px) rotate(225deg);
  }

  /* Height + fade accordion panel (JS wraps body into these) */
  #results .bp-report-feature-accordion {
    display: grid;
    grid-template-rows: 0fr;
  }

  #results .bp-report-feature.is-open .bp-report-feature-accordion {
    grid-template-rows: 1fr;
  }

  #results .bp-report-features.is-accordion-animated .bp-report-feature-accordion {
    transition: grid-template-rows 0.48s cubic-bezier(0.22, 1, 0.36, 1);
  }

  #results .bp-report-feature-accordion-inner {
    display: block;
    overflow: hidden;
    min-height: 0;
    opacity: 0;
    transform: translateY(-0.45rem);
  }

  #results .bp-report-feature.is-open .bp-report-feature-accordion-inner {
    opacity: 1;
    transform: translateY(0);
  }

  #results .bp-report-features.is-accordion-animated .bp-report-feature-accordion-inner {
    transition: opacity 0.22s ease,
                transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  }

  #results .bp-report-features.is-accordion-animated .bp-report-feature.is-open .bp-report-feature-accordion-inner {
    transition: opacity 0.36s ease 0.06s,
                transform 0.42s cubic-bezier(0.22, 1, 0.36, 1) 0.04s;
  }

  #results .bp-report-feature-mock {
    margin-top: 0.75rem;
    padding: 0 0 1.1rem;
  }

  #results .bp-report-feature-accordion-inner > p {
    margin-top: 0.35rem;
  }

  /* Pre-JS fallback: keep closed cards collapsed until panels are wrapped */
  #results .bp-report-feature:not([data-accordion-prepared]):not(.is-open) .bp-report-feature-copy p,
  #results .bp-report-feature:not([data-accordion-prepared]):not(.is-open) .bp-report-feature-stats,
  #results .bp-report-feature:not([data-accordion-prepared]):not(.is-open) .bp-report-feature-mock {
    display: none !important;
  }

  /* ---- How it Works steps: same accordion card treatment ---- */
  #how-it-works .how-it-works-steps {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    margin: 0 !important;
  }

  #how-it-works .how-it-works-steps .ai-authority-signal {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 1rem 1.1rem !important;
    border: 1px solid #ededed !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.07) !important;
    cursor: pointer;
    text-align: left;
    transition:
      box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.48s ease,
      transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  }

  #how-it-works .how-it-works-steps .ai-authority-signal.is-open {
    align-items: start;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.1) !important;
  }

  #how-it-works .how-it-works-steps .ai-authority-signal.is-open .ai-authority-signal-num {
    margin-top: 0.15rem;
  }

  #how-it-works .how-it-works-steps .ai-authority-signal-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  #how-it-works .how-it-works-steps .ai-authority-signal-title {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 0.4rem 0.5rem;
    width: 100%;
    margin: 0 !important;
    color: #242424 !important;
    font-size: var(--text-md, 1.0625rem) !important;
    font-weight: var(--weight-bold, 700) !important;
    line-height: var(--leading-snug, 1.35) !important;
    letter-spacing: -0.02em;
  }

  #how-it-works .how-it-works-steps .ai-authority-signal-title::after {
    content: "";
    flex-shrink: 0;
    width: 0.55rem;
    height: 0.55rem;
    margin-left: auto;
    border-right: 2px solid #9aa0b5;
    border-bottom: 2px solid #9aa0b5;
    transform: translateY(-1px) rotate(45deg);
    transition: transform 0.42s cubic-bezier(0.34, 1.4, 0.64, 1),
                border-color 0.25s ease;
  }

  #how-it-works .how-it-works-steps .ai-authority-signal.is-open .ai-authority-signal-title::after {
    border-color: #6b728a;
    transform: translateY(2px) rotate(225deg);
  }

  #how-it-works .how-it-works-steps .ai-authority-signal-accordion {
    display: grid;
    grid-template-rows: 0fr;
  }

  #how-it-works .how-it-works-steps .ai-authority-signal.is-open .ai-authority-signal-accordion {
    grid-template-rows: 1fr;
  }

  #how-it-works .how-it-works-steps.is-accordion-animated .ai-authority-signal-accordion {
    transition: grid-template-rows 0.44s cubic-bezier(0.22, 1, 0.36, 1);
  }

  #how-it-works .how-it-works-steps .ai-authority-signal-accordion-inner {
    overflow: hidden;
    min-height: 0;
    opacity: 0;
    transform: translateY(-0.35rem);
  }

  #how-it-works .how-it-works-steps .ai-authority-signal.is-open .ai-authority-signal-accordion-inner {
    opacity: 1;
    transform: translateY(0);
  }

  #how-it-works .how-it-works-steps.is-accordion-animated .ai-authority-signal-accordion-inner {
    transition: opacity 0.2s ease,
                transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }

  #how-it-works .how-it-works-steps.is-accordion-animated .ai-authority-signal.is-open .ai-authority-signal-accordion-inner {
    transition: opacity 0.34s ease 0.05s,
                transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.03s;
  }

  #how-it-works .how-it-works-steps .ai-authority-signal-desc {
    margin: 0.4rem 0 0 !important;
    color: var(--color-text-body, #737373) !important;
    font-size: var(--text-sm, 0.875rem) !important;
    font-weight: var(--weight-regular, 400) !important;
    line-height: var(--leading-relaxed, 1.65) !important;
  }

  #how-it-works .how-it-works-steps .ai-authority-signal:not([data-accordion-prepared]):not(.is-open) .ai-authority-signal-desc {
    display: none !important;
  }

  /*
   * Shared mobile section-CTA gap: accordion/content → secondary button.
   * Inner gap (24px) stays consistent; band bottom pad still owns the seam.
   */
  #how-it-works .how-it-works-layout + .d-block.visible-xs {
    display: none !important;
  }

  #how-it-works .how-it-works-cta-row {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    /* Clear the last step card + its drop shadow, then balance below the button */
    padding-top: var(--space-6, 1.5rem) !important;
    padding-bottom: var(--space-8, 2rem) !important;
  }

  #how-it-works .how-it-works-cta-row.mb-120 {
    margin-bottom: 0 !important;
  }

  #how-it-works .how-it-works-cta-row .how-it-works-actions,
  #how-it-works .how-it-works-cta,
  #wrap #how-it-works .how-it-works-cta-row .how-it-works-actions {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Desktop sample-report row still occupies space via block-gap margin */
  #how-it-works .how-it-works-sample-row {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #how-it-works .how-it-works-steps {
    margin-bottom: 0 !important;
  }

  #how-it-works .how-it-works-steps .ai-authority-signal:last-child {
    margin-bottom: 0 !important;
  }

  /* Clear the last accordion card + its drop shadow above the button */
  #results .bp-report-format-mobile {
    margin-top: var(--space-6, 1.5rem) !important;
    margin-bottom: 0 !important;
  }

  #results .bp-report-features {
    margin-bottom: 0 !important;
  }

  /* Breathing room under “View Sample Report” before Testimonials */
  #content.content > #results,
  #results,
  #results.bp-results-showcase {
    padding-bottom: var(--space-10, 2.5rem) !important;
  }

  #benefits .benefits-cards-scroll {
    margin-bottom: 0 !important;
  }

  #benefits .benefits-cards-scroll .feature-box:last-child,
  #benefits .benefits-cards-scroll > .row:last-child {
    margin-bottom: 0 !important;
  }

  /* ---- Product Benefits: match Report & Results accordion cards ---- */
  #benefits .benefits-dots {
    display: none !important;
  }

  #benefits .benefits-cards-scroll {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    overflow: visible !important;
  }

  #benefits .benefits-cards-scroll > .row {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #benefits .benefits-cards-scroll > .row > .lqd-column {
    padding: 0 !important;
  }

  #benefits .benefits-cards-scroll .feature-box,
  #benefits .benefits-cards-scroll > .row > .lqd-column.feature-box {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid #ededed !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.07) !important;
    cursor: pointer;
    transition: box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }

  #benefits .benefits-cards-scroll .feature-box.is-open {
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.1) !important;
  }

  #benefits .benefits-cards-scroll .feature-box header.fancy-title {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    margin: 0 !important;
    padding: 1rem 1.1rem !important;
  }

  #benefits .benefits-cards-scroll .feature-box .icon-circle {
    position: static !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 2.5rem;
    width: 2.5rem !important;
    height: 2.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1;
  }

  #benefits .benefits-cards-scroll .feature-box .icon-circle-img {
    position: static !important;
    width: 58% !important;
    max-width: 1.45rem !important;
    height: auto !important;
    margin: 0 !important;
  }

  #benefits .benefits-cards-scroll .feature-box .heading-with-icon {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #242424 !important;
    font-size: var(--text-md, 1.0625rem) !important;
    font-weight: var(--weight-bold, 700) !important;
    line-height: var(--leading-snug, 1.35) !important;
    letter-spacing: -0.02em;
  }

  #benefits .benefits-cards-scroll .feature-box .heading-with-icon::after {
    content: "";
    flex-shrink: 0;
    width: 0.55rem;
    height: 0.55rem;
    margin-left: auto;
    border-right: 2px solid #9aa0b5;
    border-bottom: 2px solid #9aa0b5;
    transform: translateY(-1px) rotate(45deg);
    transition: transform 0.42s cubic-bezier(0.34, 1.4, 0.64, 1),
                border-color 0.25s ease;
  }

  #benefits .benefits-cards-scroll .feature-box.is-open .heading-with-icon::after {
    border-color: #6b728a;
    transform: translateY(2px) rotate(225deg);
  }

  #benefits .benefits-cards-scroll .feature-box .benefits-accordion {
    display: grid;
    grid-template-rows: 0fr;
  }

  #benefits .benefits-cards-scroll .feature-box.is-open .benefits-accordion {
    grid-template-rows: 1fr;
  }

  #benefits .benefits-cards-scroll.is-accordion-animated .feature-box .benefits-accordion {
    transition: grid-template-rows 0.48s cubic-bezier(0.22, 1, 0.36, 1);
  }

  #benefits .benefits-cards-scroll .feature-box .benefits-accordion-inner {
    overflow: hidden;
    min-height: 0;
    opacity: 0;
    transform: translateY(-0.45rem);
  }

  #benefits .benefits-cards-scroll .feature-box.is-open .benefits-accordion-inner {
    opacity: 1;
    transform: translateY(0);
  }

  #benefits .benefits-cards-scroll.is-accordion-animated .feature-box .benefits-accordion-inner {
    transition: opacity 0.22s ease,
                transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  }

  #benefits .benefits-cards-scroll.is-accordion-animated .feature-box.is-open .benefits-accordion-inner {
    transition: opacity 0.36s ease 0.06s,
                transform 0.42s cubic-bezier(0.22, 1, 0.36, 1) 0.04s;
  }

  #benefits .benefits-cards-scroll .feature-box .benefits-accordion-inner > .visible-xs {
    display: flex !important;
    flex-direction: column;
    padding: 0 1.1rem 1.1rem !important;
  }

  #benefits .benefits-cards-scroll .feature-box .benefits-accordion-inner > .visible-xs > img,
  #benefits .benefits-cards-scroll .feature-box .benefits-accordion-inner > .visible-xs > .bp-benefit-mock {
    order: 2;
    display: block;
    width: 100% !important;
    max-width: 100%;
    height: auto;
    margin: 0.85rem 0 0 !important;
    border-radius: 12px;
  }

  #benefits .benefits-cards-scroll .feature-box .benefits-accordion-inner > .visible-xs > .bp-benefit-mock {
    border-radius: 0;
  }

  #benefits .benefits-cards-scroll .feature-box .benefits-accordion-inner > .visible-xs > .bp-benefit-mock .bp-benefit-mock-card {
    border-radius: 14px;
  }

  #benefits .benefits-cards-scroll .feature-box .benefits-accordion-inner > .visible-xs > p {
    order: 1;
    display: none !important;
    margin: 0 !important;
    color: var(--color-text-body, #737373) !important;
    font-size: var(--text-sm, 0.875rem) !important;
    font-weight: var(--weight-regular, 400) !important;
    line-height: var(--leading-relaxed, 1.65) !important;
  }

  #benefits .benefits-cards-scroll .feature-box .benefits-accordion-inner > .visible-xs > p:first-of-type {
    display: block !important;
  }

  /* Pre-JS fallback: keep closed cards collapsed until panels are wrapped */
  #benefits .benefits-cards-scroll .feature-box:not([data-accordion-prepared]):not(.is-open) div.visible-xs {
    display: none !important;
  }

  /* Sticky CTA also hides over Pricing & Packages */
  .mobile-banner.is-visible.is-packages-hidden {
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transform: translateY(calc(100% + env(safe-area-inset-bottom, 0px)));
    transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
                opacity 0.2s ease,
                visibility 0s linear 0.32s;
  }

  /*
   * Final mobile pass: home4 paints sections with a white→grey gradient.
   * Our stripe system needs flat solids — reassert at the end of this
   * breakpoint so nothing earlier in the cascade can leave a wash on white.
   */
  #benefits,
  #recommendations,
  #packages,
  #faq,
  section.cta1,
  #how-it-works .how-it-works-header-row,
  #how-it-works .bp-m-band--outlets {
    background: #ffffff none !important;
    background-color: #ffffff !important;
    background-image: none !important;
  }

  #results,
  #results.bp-results-showcase,
  #reviews,
  #reviews.reviews1,
  #money-back-guarantee,
  #how-it-works .bp-m-band--how,
  #how-it-works .how-it-works-cta-row {
    background: #f5f7fa none !important;
    background-color: #f5f7fa !important;
    background-image: none !important;
  }

  #content.content > #results,
  #results.bp-results-showcase {
    padding-bottom: 2.5rem !important;
  }

  /* Reassert View Sample Report spacing (matches How it Works CTA rhythm) */
  #results .bp-report-format-mobile {
    margin-top: 1.5rem !important;
    margin-bottom: 0 !important;
  }

  /* Reassert Read More Reviews on Trustpilot spacing.
     The CTA paragraph carries mt-0, so the gap has to be re-added here to
     clear the carousel dots; section pad supplies the space below. */
  #reviews > .container:nth-of-type(2) > p,
  #reviews .reviews-trustpilot-cta {
    margin-top: 1.5rem !important;
    margin-bottom: 0 !important;
  }

  /* Reassert News Outlets ↔ How it Works seam last (beat any earlier pad:0) */
  #how-it-works .bp-m-band--outlets {
    padding-bottom: 2.5rem !important;
  }

  #how-it-works .bp-m-band--how {
    padding-top: 2.5rem !important;
  }

  /* Reassert View Press Packages spacing (above clears card shadow; below seams to Benefits) */
  #how-it-works .how-it-works-cta-row {
    padding-top: 1.5rem !important;
    padding-bottom: 2rem !important;
    margin-bottom: 0 !important;
  }

  #how-it-works .how-it-works-sample-row {
    display: none !important;
  }

  /* Match a tighter top pad on Product Benefits after How it Works */
  #content.content > #how-it-works + #benefits,
  #how-it-works + #benefits {
    padding-top: 1.5rem !important;
  }
}

/*
 * Theme mobile nav removed on index4 — hide Bootstrap collapse + account
 * column below the theme breakpoint. Desktop (>=1200) is untouched.
 */
@media (max-width: 1199px) {
  .main-header .navbar-toggle,
  #main-header-collapse,
  .mainbar-row > .col.text-right,
  #account-header-collapse,
  #account-primary-nav {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* Desktop: new mobile menu chrome stays out of the way */
.bp-mnav-toggle,
.bp-mnav {
  display: none;
}

/* ---- index4 mobile menu (standalone; max-width 1199) ---- */
@media (max-width: 1199px) {
  .main-header .navbar-header {
    position: relative;
    z-index: 10060;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .bp-mnav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #1d1d1d;
    cursor: pointer;
    z-index: 10061;
    -webkit-tap-highlight-color: transparent;
  }

  .bp-mnav-bars {
    position: relative;
    display: block;
    width: 22px;
    height: 16px;
  }

  .bp-mnav-bars > span {
    position: absolute;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition: transform 160ms ease, opacity 160ms ease, top 160ms ease;
  }

  .bp-mnav-bars > span:nth-child(1) { top: 0; }
  .bp-mnav-bars > span:nth-child(2) { top: 7px; }
  .bp-mnav-bars > span:nth-child(3) { top: 14px; }

  .bp-mnav-toggle.is-active .bp-mnav-bars > span:nth-child(1) {
    top: 7px;
    transform: rotate(45deg);
  }

  .bp-mnav-toggle.is-active .bp-mnav-bars > span:nth-child(2) {
    opacity: 0;
  }

  .bp-mnav-toggle.is-active .bp-mnav-bars > span:nth-child(3) {
    top: 7px;
    transform: rotate(-45deg);
  }

  /* Fixed shell; closed = display:none so it cannot trap scroll */
  .bp-mnav {
    display: none;
  }

  .bp-mnav[data-open="true"] {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 10040;
    margin: 0;
    padding: 0;
    pointer-events: none;
  }

  .bp-mnav[data-open="true"] .bp-mnav-backdrop,
  .bp-mnav[data-open="true"] .bp-mnav-panel {
    pointer-events: auto;
  }

  /* Kill sticky transforms so fixed panel is viewport-relative while open */
  html.bp-mnav-open .main-header,
  html.bp-mnav-open .main-header.is-sticky,
  html.bp-mnav-open .main-header .mainbar-wrap {
    transform: none !important;
  }

  .bp-mnav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10040;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(15, 23, 42, 0.28);
    cursor: pointer;
  }

  .bp-mnav-panel {
    position: fixed;
    top: var(--m-header-h, 73px);
    left: 0;
    right: 0;
    z-index: 10050;
    max-height: min(80dvh, calc(100dvh - var(--m-header-h, 73px)));
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    padding: 0.35rem 1.35rem 1.15rem;
    background: #fff;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);
  }

  .bp-mnav-list {
    list-style: none;
    margin: 0;
    padding: 0.15rem 0 0;
  }

  .bp-mnav-list > li {
    border-bottom: 1px solid #f0f1f4;
  }

  .bp-mnav-list > li > a {
    display: flex;
    align-items: center;
    min-height: 3rem;
    padding: 0.95rem 0.15rem;
    color: #1d1d1d;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
  }

  .bp-mnav-ctas {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: 1.1rem;
  }

  .bp-mnav-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 1.25rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    box-sizing: border-box;
  }

  .bp-mnav-cta--primary {
    color: #fff;
    /* Match page CTA coral gradient (--color-gradient-stop → --color-gradient-start) */
    background: linear-gradient(
      90deg,
      var(--color-gradient-stop, #fc6a2a) 0%,
      var(--color-gradient-start, #fe506c) 100%
    );
  }

  .bp-mnav-cta--secondary {
    color: #1d1d1d;
    background: #fff;
    border: 1px solid #d7dbe3;
  }

  html.bp-mnav-open .mobile-banner {
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
  }
}

@media (max-width: 1199px) and (prefers-reduced-motion: reduce) {
  .bp-mnav-bars > span {
    transition: none;
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .mobile-banner.is-visible.is-packages-hidden {
    transition: none;
  }

  #results .bp-report-feature,
  #results .bp-report-feature-title::after,
  #results .bp-report-feature-accordion,
  #results .bp-report-feature-accordion-inner,
  #how-it-works .how-it-works-steps .ai-authority-signal,
  #how-it-works .how-it-works-steps .ai-authority-signal-title::after,
  #how-it-works .how-it-works-steps .ai-authority-signal-accordion,
  #how-it-works .how-it-works-steps .ai-authority-signal-accordion-inner,
  #benefits .benefits-cards-scroll .feature-box,
  #benefits .benefits-cards-scroll .feature-box .heading-with-icon::after,
  #benefits .benefits-cards-scroll .feature-box .benefits-accordion,
  #benefits .benefits-cards-scroll .feature-box .benefits-accordion-inner {
    transition: none !important;
  }

  #results .bp-report-feature-accordion-inner,
  #how-it-works .how-it-works-steps .ai-authority-signal-accordion-inner,
  #benefits .benefits-cards-scroll .feature-box .benefits-accordion-inner {
    transform: none !important;
  }
}

/*
 * Desktop: DOM order is reviews → packages. Keep explicit order so flex layout
 * stays stable if the sections are ever nested back inside #content.content.
 */
@media (min-width: 768px) {
  #content.content {
    display: flex !important;
    flex-direction: column !important;
  }

  #content.content > * {
    order: 200 !important;
  }

  #content.content > #hero-section { order: 10 !important; }
  #content.content > #news-carousel { order: 20 !important; }
  #content.content > #how-it-works { order: 30 !important; }
  #content.content > #benefits { order: 40 !important; }
  #content.content > #how-it-works-legacy { order: 45 !important; }
  #content.content > #results { order: 50 !important; }
  #content.content > #recommendations { order: 60 !important; }
  #content.content > #case-studies { order: 70 !important; }
  #content.content > #reviews { order: 80 !important; }
  #content.content > #packages { order: 90 !important; }
  #content.content > #pricing { order: 100 !important; }
  #content.content > #money-back-guarantee { order: 110 !important; }
  #content.content > #why-brand-push { order: 120 !important; }
  #content.content > #faq { order: 130 !important; }
  #content.content > #official-reviews { order: 140 !important; }
  #content.content > section.cta1 { order: 150 !important; }
}