/* acceptorIQ — shared mobile.css
   Load this AFTER the page's main inline <style> block:
   <link rel="stylesheet" href="mobile.css" media="(max-width: 760px)">
*/

.mobile-menu-btn,
.mobile-menu{
  display:none;
}

@media (max-width:760px){

  body{
    background:var(--bg);
    overflow-x:hidden;
  }

  .shell{
    position:relative;
    width:calc(100% - 28px);
    margin:0 auto;
    border-left:1px solid rgba(230,235,246,.08);
    border-right:1px solid rgba(230,235,246,.08);
    overflow:hidden;
    background:var(--bg);
  }

  .wrap{
    padding:0 22px;
  }

  header{
    position:sticky;
    top:0;
    z-index:200;
    background:var(--bg) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    border-bottom:1px solid rgba(230,235,246,.08);
  }

  .nav-wrap{padding:0 20px;}

  .nav{
    height:68px !important;
    position:relative;
    justify-content:flex-start;
  }

  .brand.acceptor-logo,
  .nav > .acceptor-logo{
    gap:10px;
  }

  .logo-full{
    height:34px !important;
    width:auto;
    object-fit:contain;
  }

  .logo-phone{
    height:20px !important;
  }

  .logo-phone-text{
    height:11px !important;
  }


  .acceptor-word{font-size:21px;}

  .acceptor-mark{
    width:25px;
    height:23px;
  }

  .acceptor-mark span{
    width:8px;
    height:23px;
    border-radius:2px;
  }

  .acceptor-mark span:first-child{left:5px;}
  .acceptor-mark span:last-child{right:5px;height:17px;}

  .nav-right,
  .nav-right *,
  .nav-cta{
    display:none !important;
  }

  /* Lock the background from scrolling while the dropdown is open.
     The dropdown itself uses position:fixed so it always stays put on
     screen — but without this, the page underneath was still free to
     scroll, so the header it's meant to sit just below would scroll
     away while the menu stayed floating in place, disconnected from it.
     `top` is set inline by JS to the negative of the current scroll
     offset, so the page doesn't visibly jump when the lock engages. */
  body.mobile-menu-open{
    position:fixed;
    width:100%;
    overflow:hidden;
  }

  /* Circular icon button instead of a hard-edged square — sits inset
     from the edge by the same 20px the rest of the nav content uses
     (an absolutely-positioned right:0 here would sit flush against the
     true screen edge, ignoring the parent's own padding). */
  .mobile-menu-btn{
    display:flex !important;
    position:absolute;
    right:20px;
    top:50%;
    transform:translateY(-50%);
    width:38px;
    height:38px;
    border-radius:0;
    border:none;
    background:rgba(230,235,246,.07);
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
    cursor:pointer;
    transition:background .2s ease;
  }

  .mobile-menu-btn span{
    width:15px;
    height:1.5px;
    border-radius:1px;
    background:rgba(230,235,246,.92);
    display:block;
    transition:transform .22s ease;
  }

  body.mobile-menu-open .mobile-menu-btn{
    background:rgba(230,235,246,.12);
  }

  body.mobile-menu-open .mobile-menu-btn span:first-child{
    transform:translateY(3.25px) rotate(45deg);
  }

  body.mobile-menu-open .mobile-menu-btn span:last-child{
    transform:translateY(-3.25px) rotate(-45deg);
  }

  /* Floating rounded panel with a header gap, blur and shadow, instead of a flush hard-bordered rectangle. */
  .mobile-menu{
    display:block;
    position:fixed;
    top:82px;
    left:20px;
    right:20px;
    z-index:180;
    padding:10px 22px 18px;
    background:rgba(17,20,27,.97);
    backdrop-filter:saturate(160%) blur(22px);
    -webkit-backdrop-filter:saturate(160%) blur(22px);
    border:1px solid rgba(230,235,246,.10);
    border-radius:0;
    box-shadow:0 30px 70px -22px rgba(0,0,0,.6);
    opacity:0;
    transform:translateY(-10px);
    pointer-events:none;
    transition:opacity .22s ease, transform .22s ease;
  }

  body.mobile-menu-open .mobile-menu{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }

  .mobile-menu a{
    display:flex;
    justify-content:space-between;
    align-items:center;
    min-height:54px;
    color:rgba(230,235,246,.84);
    font-size:16px;
    font-weight:500;
    border-top:1px solid rgba(230,235,246,.08);
  }

  .mobile-menu a:first-child{
    border-top:none;
  }

  .mobile-menu a::after{
    content:"";
    width:8px;
    height:8px;
    border-right:1.8px solid rgba(230,235,246,.38);
    border-top:1.8px solid rgba(230,235,246,.38);
    transform:rotate(45deg);
    flex-shrink:0;
    margin-left:14px;
  }

  /* Optional: give one link in the dropdown a stand-out pill treatment instead of the plain arrow row — add class="mm-cta" to that <a>
     (e.g. the homepage's "Get my review" link). No-op if unused. */
  .mobile-menu a.mm-cta{
    margin:14px 0;
    min-height:0;
    padding:15px 18px;
    border-top:none;
    border-radius:0;
    background:var(--btn);
    color:var(--ink);
    font-weight:600;
    justify-content:center;
  }

  .mobile-menu a.mm-cta::after{
    content:none;
    display:none;
  }

  /* whatever directly follows the pill shouldn't carry a stray divider */
  .mobile-menu a.mm-cta + a{
    border-top:none;
  }

  .btn,
  .btn-lg{
    height:50px;
    min-width:180px;
    padding:0 20px;
    font-size:14px;
  }

  /* Homepage mobile */
  .hero{padding:76px 0 0;}

  .hero h1{
    font-size:clamp(34px,8.6vw,42px);
    line-height:1.08;
    letter-spacing:-0.055em;
    max-width:360px;
    margin:0 auto;
  }

  .hero .sub{
    font-size:15.5px;
    line-height:1.5;
    max-width:330px;
    margin:20px auto 0;
  }

  .hero-stage{
    min-height:auto;
    margin-top:42px;
    padding-bottom:84px;
  }

  .hero-band{
    top:112px;
    height:320px;
  }

  .hero .phone{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    transform:none !important;
    margin:0 auto !important;
    width:258px;
    z-index:2;
  }

  .twoup{
    display:block;
    padding:0;
    border-top:1px solid rgba(230,235,246,.08);
  }

  .twoup::before{display:none;}

  .twoup .col{
    min-height:auto;
    padding:78px 22px 84px;
    border-bottom:1px solid rgba(230,235,246,.08);
  }

  .twoup h2,
  .bleed h2,
  .control h2,
  .final h2{
    font-size:clamp(32px,8vw,40px);
    line-height:1.1;
    letter-spacing:-0.05em;
  }

  .final h2{
    font-size:clamp(31px,7.8vw,36px);
  }

  .twoup p,
  .bleed p,
  .control p,
  .advisor-section .sub,
  .final p{
    font-size:15.5px;
    line-height:1.5;
  }

  .vis{
    margin-top:42px;
    min-height:auto;
  }

  .statement-analyser{max-width:240px;}

  .payment-web{
    width:300px;
    height:300px;
    transform:none;
    margin:0 auto;
  }

  .partner-web-image{
    width:min(300px,100%) !important;
    height:auto;
  }

  .web-core{
    width:112px;
    height:112px;
  }

  .web-node{
    min-width:58px;
    height:28px;
    font-size:9px;
    padding:0 8px;
  }

  .n1{top:12px}.n2{left:64%;top:26px}.n3{right:4px;top:72px}.n4{right:-4px;top:145px}
  .n5{right:10px;bottom:92px}.n6{right:58px;bottom:32px}.n7{bottom:8px}.n8{left:58px;bottom:32px}
  .n9{left:10px;bottom:92px}.n10{left:-4px;top:145px}.n11{left:4px;top:72px}.n12{left:38px;top:26px}
  .n13{top:84px}.n14{right:62px;top:165px}.n15{left:62px;top:165px}

  .bleed{
    display:block;
    border-top:none;
  }

  .bleed .copy{
    padding:78px 22px 62px;
    border-right:none;
    border-bottom:1px solid rgba(230,235,246,.08);
  }

  .bleed .copy h2,
  .bleed .copy p{
    width:100%;
    text-align:center;
  }

  .bleed .stage{
    min-height:560px;
    padding:48px 0;
  }

  .glass{
    width:calc(100% - 44px);
    max-width:276px;
    padding:17px;
  }

  /* Compact, scannable version for mobile — same message (what each
     action is + what it saves), far fewer words. The full sentence
     describing each action reads fine on desktop but is the heaviest
     part of this card on a phone, so it's dropped here entirely
     rather than just shrinking the container around it. */
  .plan-total{
    padding:14px 0 18px;
  }

  .plan-total strong{
    font-size:32px;
  }

  .plan-row{
    grid-template-columns:22px 1fr auto;
    align-items:center;
    gap:10px;
    padding:13px 0;
  }

  .plan-num{
    padding-top:0;
  }

  .plan-main strong{
    font-size:14px;
    margin-bottom:0;
  }

  .plan-main span{
    display:none;
  }

  .advisor-section{padding:78px 0 88px;}

  .advisor-stack{
    height:auto !important;
    display:flex !important;
    flex-direction:column;
    gap:14px;
    width:100%;
    max-width:400px;
    margin:38px auto 0 !important;
  }

  .advisor-card,
  .advisor-card[data-card="0"],
  .advisor-card[data-card="1"],
  .advisor-card[data-card="2"],
  .advisor-card.is-active,
  .advisor-card.is-back{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    width:100% !important;
    min-height:0 !important;
    transform:none !important;
    opacity:1 !important;
    z-index:1 !important;
    display:grid !important;
    grid-template-columns:28px 1fr 20px;
    grid-template-rows:auto auto;
    align-items:center;
    column-gap:12px;
    padding:20px 22px !important;
    border-radius:20px !important;
    cursor:pointer;
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)) !important;
    border:1px solid rgba(255,255,255,.10) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 20px 46px -28px rgba(0,0,0,.50) !important;
    overflow:hidden;
    text-align:left;
    transition:border-color .25s ease, box-shadow .25s ease;
  }

  .advisor-card.is-open{
    border-color:rgba(169,204,242,.30) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 40px rgba(63,119,214,.14), 0 20px 46px -28px rgba(0,0,0,.50) !important;
  }

  /* no room for the icon or divider rule in a one-line collapsed row */
  .advisor-card .card-icon,
  .advisor-card .rule{
    display:none !important;
  }

  .advisor-card .step{
    grid-column:1;
    grid-row:1;
    font-size:12px;
    font-weight:700;
    letter-spacing:.02em;
    color:rgba(127,166,230,.85);
    margin:0;
  }

  /* min-width:0 lets this grid item actually shrink so text-overflow can
     kick in instead of just overflowing the row */
  .advisor-card h3{
    grid-column:2;
    grid-row:1;
    min-width:0;
    font-size:16px !important;
    line-height:1.3 !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    margin:0 !important;
    text-align:left !important;
  }

  /* the <br> inside each title (kept for desktop's two-line layout) is
     swapped for a real space character by JS on mobile — hiding it via
     CSS alone strips the only thing separating the words with no space
     left behind, which is what caused "Understandthe report" before */
.advisor-card::after{
    content:"";
    width:8px;
    height:8px;
    border-right:1.8px solid rgba(230,235,246,.50);
    border-bottom:1.8px solid rgba(230,235,246,.50);
    transform:rotate(45deg);
    justify-self:end;
    transition:transform .25s ease,border-color .25s ease;
}

.advisor-card.is-open::after{
    transform:rotate(-135deg);
    border-color:rgba(230,235,246,.82);
}

  .advisor-card p{
    grid-column:1 / -1;
    grid-row:2;
    max-height:0;
    opacity:0;
    overflow:hidden;
    font-size:14.5px;
    line-height:1.6;
    margin:0;
    padding:0;
    transition:max-height .3s ease, opacity .22s ease, padding-top .22s ease;
  }

  .advisor-card.is-open p{
    max-height:220px;
    opacity:1;
    padding-top:16px;
  }

  /* explicit grid placement makes the old desktop alignment overrides
     (centred/right-aligned variants for cards 2 and 3) irrelevant here,
     but they're higher-specificity than the rules above, so neutralise
     them explicitly rather than relying on source order alone */
  .advisor-card[data-card="0"] .step,
  .advisor-card[data-card="0"] h3,
  .advisor-card[data-card="1"] .step,
  .advisor-card[data-card="1"] h3,
  .advisor-card[data-card="2"] .step,
  .advisor-card[data-card="2"] h3{
    text-align:left !important;
  }


  .final{
    padding:84px 0 92px;
  }

  .final .wrap{
    padding-left:18px;
    padding-right:18px;
  }

  /* Pricing page mobile */
  .pricing{
    padding:86px 0 96px !important;
  }

  .pricing-head{
    max-width:360px;
    margin:0 auto 58px !important;
    padding:0 26px;
  }

  .pricing-head h1{
    font-size:clamp(34px,8.6vw,42px) !important;
    line-height:1.08 !important;
    letter-spacing:-0.055em !important;
  }

  .pricing-head p{
    max-width:330px;
    margin-top:20px !important;
    font-size:15.5px !important;
    line-height:1.5 !important;
  }

  .pricing-grid{
    display:flex !important;
    flex-direction:column;
    gap:20px;
    width:100%;
    max-width:none !important;
    margin:0 auto !important;
    padding:0 26px;
  }

  .price-col{
    min-height:auto !important;
    padding:32px 26px 36px !important;
    border-radius:0;
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
    border:1px solid rgba(255,255,255,.10);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 26px 60px -30px rgba(0,0,0,.55);
  }

  .price-col.featured{
    border-color:rgba(169,204,242,.32);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 50px rgba(63,119,214,.16), 0 26px 60px -30px rgba(0,0,0,.55);
  }

  .price-col.featured::before{
    position:static !important;
    display:inline-flex !important;
    align-items:center;
    margin:0 0 18px !important;
    padding:5px 12px;
    font-size:10.5px !important;
    font-weight:700;
    letter-spacing:.08em;
    border-radius:0;
    color:var(--peach);
    background:rgba(150,195,244,.12);
    border:1px solid rgba(150,195,244,.28);
  }

  .price-col h2{
    font-size:24px !important;
    line-height:1.1 !important;
  }

  .price-intro{
    min-height:0 !important;
    margin-top:14px !important;
    max-width:none;
  }

  .price{
    margin-top:28px !important;
    padding-bottom:22px !important;
  }

  .price strong{font-size:44px !important;}
  .details{margin-top:26px !important;}

  .features{
    gap:12px !important;
    margin-bottom:30px !important;
  }

  .price-col .btn{
    width:100% !important;
    height:50px !important;
    margin-top:8px !important;
    padding:0 20px !important;
  }

  /* Shared footer */
  .footer-section{
    background:var(--bg) !important;
    border-top:1px solid rgba(230,235,246,.08) !important;
  }

  #dots-stage{display:none !important;}

  footer.wrap{padding:0;}

  .fcols{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:18px 28px !important;
    padding:38px 26px 18px !important;
  }

  .fbrand{
    grid-column:1 / -1;
    display:flex;
    justify-content:center;
    padding-bottom:30px;
    margin-bottom:8px;
  }

  .fbrand .acceptor-logo{justify-content:center;}

  .fcol{
    border:none !important;
    padding:0 !important;
  }

  .fcol h4{
    display:flex;
    justify-content:space-between;
    align-items:center;
    height:42px;
    margin:0 !important;
    cursor:pointer;
    font-size:15px !important;
    font-weight:500 !important;
    color:rgba(230,235,246,.88) !important;
  }

.fcol h4::after{
    content:"";
    width:8px;
    height:8px;
    border-right:1.8px solid rgba(230,235,246,.42);
    border-bottom:1.8px solid rgba(230,235,246,.42);
    transform:rotate(45deg);
    transition:transform .22s ease, border-color .22s ease;
    margin-left:auto;
    flex-shrink:0;
}

.fcol.is-open h4::after{
    transform:rotate(-135deg);
    border-color:rgba(230,235,246,.72);
}

  .fcol a{
    display:block;
    max-height:0;
    overflow:hidden;
    opacity:0;
    padding:0 !important;
    font-size:13px !important;
    color:rgba(230,235,246,.55) !important;
    transition:max-height .24s ease, opacity .18s ease, padding .22s ease;
  }

  .fcol.is-open a{
    max-height:34px;
    opacity:1;
    padding:6px 0 !important;
  }

  .fcopy{
    text-align:center;
    margin:18px 26px 0 !important;
    padding:0 0 28px !important;
    border:none !important;
    font-size:12px !important;
    color:rgba(230,235,246,.35) !important;
  }

  #abi-launcher{
    right:24px;
    bottom:24px;
    width:54px;
    height:54px;
  }

  #abi-panel{
    right:14px;
    bottom:88px;
    width:calc(100vw - 28px);
    height:calc(100dvh - 118px);
    max-height:none;
  }
}

@media (max-width:480px){

  .wrap{padding:0 18px;}

  .pricing-head,
  .pricing-grid{
    padding-left:18px;
    padding-right:18px;
  }

  .pricing-head h1,
  .hero h1{
    font-size:clamp(33px,8.6vw,40px) !important;
  }

  .twoup h2,
  .bleed h2,
  .control h2{
    font-size:clamp(31px,8vw,38px) !important;
  }

  .final h2{
    font-size:clamp(30px,7.8vw,34px) !important;
  }

  .payment-web{
    width:286px;
    height:286px;
    margin-left:0;
  }

  .partner-web-image{
    width:min(286px,100%) !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .mobile-menu,
  .mobile-menu-btn,
  .mobile-menu-btn span,
  .advisor-card,
  .advisor-card p,
  .advisor-card::after,
  .fcol a,
  .fcol h4::after{
    transition:none !important;
  }
}