/* ============================================================
   PinVari — MOBILE (≤767px). Phones get a purpose-built layout,
   not a shrunk desktop. Tablets (768px+) keep the responsive desktop.
   Loaded after pv.css so these rules win.
   ============================================================ */

/* hamburger + slide-down menu exist ONLY on phones */
.burger{display:none}
.mmenu{display:none}

@media (max-width:767px){
  :root{--r-card:20px}
  .wrap{padding:0 18px}

  /* ---------- mobile nav: brand LEFT + bigger, blue CTA + hamburger RIGHT ---------- */
  .nav-wrap{top:10px;padding:0 12px}
  .nav{gap:8px;padding:8px 8px 8px 15px;position:relative;justify-content:flex-start}
  .brand{font-size:18.5px;letter-spacing:-.02em;gap:9px}
  .brand img{width:29px;height:29px}
  .nav .links{display:none}
  .nav .right{display:flex;align-items:center;gap:6px;margin-left:auto}
  .nav .right .signin{display:none}                 /* "Open the app" moves into the menu on phones */
  .nav .right .btn{padding:0 14px;height:40px;min-height:40px;font-size:14px;border-radius:12px}
  .nav .right .btn .chev{display:none}              /* compact header CTA — drop the chevron */
  .burger{display:flex;flex-direction:column;justify-content:center;gap:5px;flex:0 0 auto;
    width:40px;height:40px;padding:10px;border:0;background:transparent;cursor:pointer}
  .burger span{height:2px;width:100%;background:var(--ink);border-radius:2px;transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .18s}
  body.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.menu-open .burger span:nth-child(2){opacity:0}
  body.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* ---------- mobile menu: solid, high-contrast, tap-friendly ---------- */
  .mmenu{display:flex;position:fixed;left:12px;right:12px;top:64px;z-index:49;flex-direction:column;gap:3px;
    background:#fff;border:1px solid var(--line);border-radius:22px;padding:12px 12px 14px;
    box-shadow:0 30px 74px -20px #0a1f4a52,0 10px 24px -12px #0a1f4a33;
    opacity:0;transform:translateY(-10px) scale(.985);transform-origin:top center;pointer-events:none;
    transition:opacity .22s ease,transform .26s cubic-bezier(.4,0,.2,1)}
  body.menu-open .mmenu{opacity:1;transform:none;pointer-events:auto}
  .mmenu a{font-size:16.5px;font-weight:600;color:var(--ink);padding:15px 15px;border-radius:14px;
    display:flex;align-items:center;justify-content:space-between;line-height:1}
  .mmenu a:not(.btn):not(.signin)::after{content:"›";color:var(--n400);font-size:20px;font-weight:400}
  .mmenu a:not(.btn):active{background:var(--n100)}
  .mmenu .sep{height:1px;background:var(--line);margin:7px 6px}
  .mmenu .signin{color:var(--cta);font-weight:600}
  .mmenu .btn{margin-top:7px;justify-content:center;gap:9px;width:100%;min-height:54px;font-size:16.5px;border-radius:15px;color:#fff}
  .mmenu .btn .apl{width:16px;height:19px;fill:currentColor}
  body.menu-open{overflow:hidden}

  /* ---------- hero ---------- */
  .hero{padding:104px 0 42px}
  .eyebrow{font-size:12.5px;padding:7px 14px}
  .hero h1{margin-top:18px;font-size:clamp(33px,9vw,48px);max-width:15ch;line-height:1.06}
  .hero .sub{margin-top:15px;font-size:16px;max-width:40ch;line-height:1.55}
  .hero .cta-row{margin-top:26px;flex-direction:column;align-items:center;gap:12px}
  .hero .cta-row .btn{width:auto;min-width:232px;justify-content:center;min-height:52px;font-size:15.5px}
  .hero .cta-row .btn-ghost{background:#ffffff33 !important;border-color:#ffffff85 !important;color:#fff !important}

  /* ---------- ticker / logos row ---------- */
  .ticker{padding:32px 0 22px}
  .ticker .lbl{font-size:13.5px;padding:0 18px;line-height:1.5;margin-bottom:20px}
  /* single scrollable line — inherits nowrap + overflow-x from pv.css; scroll starts at the left edge */
  .ticker .track{gap:10px;margin:0;width:auto;justify-content:flex-start;padding:4px 18px}
  .ticker .track span{font-size:14px;padding:10px 15px}
  .ticker .track span svg,.ticker .track span img{width:20px;height:20px}

  /* ---------- generic section rhythm ---------- */
  section{padding:52px 0}
  .h2{font-size:clamp(26px,7.6vw,34px)}
  .lead{font-size:16px;margin-top:14px;line-height:1.55}
  .kicker{font-size:12.5px;padding:6px 14px}
  .sec-head{max-width:none}

  /* ---------- feature rows: image, then text, stacked ---------- */
  .feat{gap:22px}
  .feat.rev{direction:ltr}
  .feat h3{font-size:clamp(24px,6.8vw,30px)}
  .feat p{font-size:16px;max-width:none;margin-top:13px}
  .chips{margin-top:18px;gap:10px}
  .chips li{font-size:15px}

  /* ---------- card grid ---------- */
  .grid{gap:14px;margin-top:28px}
  .card{padding:22px}
  .card .ic{width:46px;height:46px;border-radius:13px;margin-bottom:14px}
  .card .ic svg{width:22px;height:22px}
  .card h4{font-size:18px}
  .card p{font-size:14.5px}

  /* ---------- stats: keep 3 across, compact ---------- */
  .stats{grid-template-columns:repeat(3,1fr);gap:8px}
  .stat{padding:16px 4px}
  .stat .num{font-size:clamp(26px,8.4vw,36px)}
  .stat .lab{font-size:12px;margin-top:5px}

  /* ---------- pricing: stacked full-width cards ---------- */
  .price-grid{gap:16px;margin-top:30px}
  .price{padding:24px}
  .price .pop{left:24px}
  .price .pd{min-height:0}
  .price .pp b{font-size:40px}

  /* ---------- CTA band ---------- */
  .cta-band{margin:0 14px}
  .cta-inner{padding:44px 22px;border-radius:26px}
  .cta-inner h2{font-size:clamp(27px,7.8vw,38px)}
  .cta-inner p{font-size:16px}
  .cta-inner .cta-row{flex-direction:column;gap:11px}
  .cta-inner .cta-row .btn{width:100%;justify-content:center;min-height:54px}

  /* ---------- faq ---------- */
  .pq-sec{padding:52px 0 64px}
  .pq-wrap{margin-top:26px;gap:11px}
  .pq-card summary{padding:17px 18px;gap:12px}
  .pq-q{font-size:16px}
  .pq-tog{width:29px;height:29px}
  .pq-a p{padding:0 18px 20px;font-size:15px}

  /* comfortable tap targets everywhere */
  .btn{min-height:48px}
}