/* ============================================================
   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}

  /* ---------- editions band ---------- */
  #editions{padding:22px 14px 60px !important}
  .ed-inner{padding:38px 18px 34px;border-radius:26px}
  .ed-inner h2{font-size:clamp(25px,6.6vw,32px)}
  .ed-inner .ed-sub{font-size:15.5px;max-width:34ch}
  /* single column that can actually shrink to the phone width.
     minmax(0,1fr) (not 1fr) + min-width:0 lets the card shrink below its
     content min-width instead of overflowing the band's clipped edge. */
  .ed-grid{grid-template-columns:minmax(0,1fr);width:100%;max-width:100%;gap:14px;margin-top:26px}
  .ed-card{min-width:0;max-width:100%;padding:22px 20px}
  .ed-card h3{font-size:21px}
  .ed-card li{overflow-wrap:anywhere}
  .ed-card .btn{width:100%;min-height:52px}

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

/* ═══ v2 mobile pass — designed for the phone, not shrunk ═══ */
@media (max-width:767px){
  /* hero economy: sub ≤3 lines, one real CTA, video pulled up */
  .hero .sub{font-size:15.5px;max-width:36ch}
  .hero .cta-row .btn-ghost{background:none!important;border:0!important;min-height:0;padding:8px;font-size:14.5px;color:#fff;text-decoration:underline;text-underline-offset:3px;box-shadow:none!important}
  .hero .demo{margin-top:26px!important;margin-bottom:0!important}
  .hero .demo>div{border-radius:18px!important}
  /* ticker: read as scrollable */
  .ticker .mask{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 36px),transparent)}
  /* tier strip wraps neatly */
  .tier-strip{grid-template-columns:1fr;padding:8px}
  .ts-cell{border-left:0;border-top:1px solid var(--line);padding:12px 16px}
  .ts-cell:first-child{border-top:0}
  .ts-link{margin:10px 8px 8px;text-align:center}
  /* pricing: Pro first, Max second, Lite last */
  .price.feat2{order:-1}
  .price.max{order:0}
  #pricing .price:not(.feat2):not(.max){order:1}
  /* compare: table out, switcher in */
  .cmp-wrap,.sheet{display:none!important}
  .cmp-m{display:block!important}
  .cmp-seg{position:sticky;top:64px;z-index:5;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:#eef1f8;border-radius:14px;padding:4px}
  .cmp-seg button{border:0;background:none;border-radius:11px;padding:9px 4px;min-height:52px;font:600 15px Inter,sans-serif;color:var(--n600);display:flex;flex-direction:column;gap:1px;align-items:center;cursor:pointer}
  .cmp-seg button small{font-size:11px;font-weight:500;color:var(--n500)}
  .cmp-seg button.on{background:#fff;color:var(--ink);box-shadow:var(--sh-card)}
  .cmp-list{margin-top:14px}
  .cmp-grp{font:700 11px Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--n500);padding:20px 4px 6px}
  .cmp-row{display:flex;gap:12px;align-items:flex-start;padding:13px 4px;border-bottom:1px solid #eef1f8}
  .cmp-row .ci{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;margin-top:1px;background:#eef1f8}
  .cmp-row b{font-size:15px;font-weight:600;color:var(--ink);display:block}
  .cmp-row small{display:block;font-size:12.5px;color:var(--n500);margin-top:2px}
  .cmp-row.cmp-txt{justify-content:space-between;align-items:center}
  .cmp-row .cv{font-size:13.5px;font-weight:600;color:var(--n700);white-space:nowrap}
  .cmp-cta{width:100%;justify-content:center;margin-top:18px}
  .cmp-comp-note{display:none;font-size:13px;color:var(--n500);padding:10px 4px;border-bottom:1px solid #eef1f8}
  .cmp-comp-note .cmp-comp-toggle{border:0;background:none;color:var(--cta);font-weight:600;font-size:13px;padding:0;cursor:pointer}
  .cmp-m:not([data-show="max"]) .cmp-comp:not(.open){display:none}
  .cmp-m:not([data-show="max"]) .cmp-comp-note{display:flex;gap:6px;align-items:center}
  /* tier truth per selected tab */
  .cmp-m[data-show="lite"] .cmp-row[data-lite="y"] .ci::before,
  .cmp-m[data-show="pro"] .cmp-row[data-pro="y"] .ci::before,
  .cmp-m[data-show="max"] .cmp-row[data-max="y"] .ci::before{content:"✓";color:var(--cta);font-weight:800;font-size:13px}
  .cmp-m[data-show="lite"] .cmp-row[data-lite="y"] .ci,
  .cmp-m[data-show="pro"] .cmp-row[data-pro="y"] .ci,
  .cmp-m[data-show="max"] .cmp-row[data-max="y"] .ci{background:#e9f0ff}
  .cmp-m[data-show="lite"] .cmp-row[data-lite="n"],
  .cmp-m[data-show="pro"] .cmp-row[data-pro="n"],
  .cmp-m[data-show="max"] .cmp-row[data-max="n"]{opacity:.42}
  .cmp-m[data-show="lite"] .cmp-row[data-lite="n"] .ci::before,
  .cmp-m[data-show="pro"] .cmp-row[data-pro="n"] .ci::before,
  .cmp-m[data-show="max"] .cmp-row[data-max="n"] .ci::before{content:"—";color:var(--n400)}
  /* FAQ tap feedback */
  .pq-card summary{-webkit-tap-highlight-color:transparent}
  .pq-card summary:active{background:var(--n100)}
  /* pricing card lists: Lite/Max collapse handled by natural stacking; keep spacing tight */
  .price .pd{min-height:0}
}
@media (min-width:768px){.cmp-m{display:none}}

@media (max-width:767px){
  /* #12 stats: stacked, readable */
  .stats{grid-template-columns:1fr;gap:6px}
  .stat{padding:14px;display:flex;align-items:baseline;gap:14px;text-align:left}
  .stat .num{font-size:30px;min-width:110px}
  .stat .lab{margin-top:0;font-size:13.5px}
  /* #6 hero poster: the product strip is the subject, not the wallpaper */
  .hero .demo video{aspect-ratio:4/3;object-fit:cover;object-position:50% 0%;width:100%}
  /* #18 footer columns balanced */
  .pf-cols{grid-template-columns:1fr 1fr;gap:22px 18px}
  /* max scene tighter */
  .maxscene{padding:20px 16px 22px}
  .maxscene .ms-app{padding:22px 16px 26px}
  .ms-tags{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .ms-tag{justify-content:flex-start}
}

@media (max-width:767px){
  .nav .right .btn{padding:9px 14px;font-size:13.5px}
  .buybar{max-width:calc(100vw - 20px)}
  .pf-col a{white-space:normal}
  .pf-brand,.pf-col{min-width:0}
  .pf-col h4{overflow-wrap:anywhere}
}