/* acceptorIQ — shared mobile.css */

.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;
  }

  body.mobile-menu-open{
    position:fixed;
    width:100%;
    overflow:hidden;
  }

  .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);
  }

  .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;
  }

  .mobile-menu a.mm-cta{
    margin:14px 0;
    min-height:0;
    padding:15px 18px;
    border-top:none;
    border-radius:0;
    background:rgba(230,235,246,.84);
    color:var(--ink);
    font-weight:600;
    justify-content:center;
  }

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

  .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;
  }

  .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 cards — flat, square, no gradient ── */
  .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:0 !important;
    cursor:pointer;
    background:rgba(224,233,246,.04) !important;
    border:1px solid rgba(224,233,246,.10) !important;
    box-shadow:none !important;
    overflow:hidden;
    text-align:left;
    transition:border-color .25s ease;
  }

  .advisor-card::before{
    background:none !important;
  }

  .advisor-card.is-open{
    border-color:rgba(224,233,246,.22) !important;
    box-shadow:none !important;
  }

  .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;
  }

  .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;
  }

  .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;
  }

  .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 section / footer ── */
  .final{
    padding:84px 0 92px;
    border-top:none;
  }

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

  .footer-section{
    border-top:none !important;
  }

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

  /* 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:rgba(224,233,246,.04);
    border:1px solid rgba(224,233,246,.10);
    box-shadow:none;
  }

  .price-col.featured{
    border-color:rgba(224,233,246,.18);
    box-shadow:none;
  }

  .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.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;
  }
}