/* Premium Mockup V69 — global mobile-first polish and responsive hardening. */

/* Safer sizing across every public/member page. */
html{width:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{width:100%}
img,video,svg,canvas{max-width:100%;height:auto}
button,input,select,textarea{max-width:100%}

@media(max-width:850px){
  /* Sticky mobile header + usable navigation drawer. */
  .fv-site-header{z-index:3000!important}
  .fv-nav-main{min-height:64px!important;padding:0 14px!important;gap:10px!important}
  .fv-logo{min-width:0;gap:8px!important;font-size:17px!important}
  .fv-logo img{width:36px!important;height:36px!important}
  .fv-logo-mark{width:35px!important;height:35px!important;border-radius:10px!important}
  .pm-logo-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:190px}
  .fv-mobile-toggle{
    display:grid!important;place-items:center!important;flex:0 0 44px;width:44px;height:44px;
    margin-left:auto!important;padding:0!important;border:1px solid #dde5f0!important;border-radius:12px!important;
    background:#fff!important;color:#172238!important;box-shadow:0 5px 16px rgba(18,38,70,.06);font-size:0!important;cursor:pointer;
  }
  .fv-mobile-toggle::before{content:"☰";font-size:22px;line-height:1}
  .mobile-nav-open .fv-mobile-toggle::before{content:"×";font-size:28px;font-weight:500}
  body.mobile-nav-open{overflow:hidden!important}
  .fv-mobile-panel{
    top:72px!important;left:12px!important;right:12px!important;width:auto!important;max-width:none!important;
    max-height:calc(100dvh - 86px)!important;padding:8px!important;border:1px solid #dce5f1!important;border-radius:16px!important;
    background:rgba(255,255,255,.99)!important;box-shadow:0 24px 60px rgba(16,33,61,.18)!important;overflow-y:auto!important;
    overscroll-behavior:contain;z-index:3100!important;-webkit-overflow-scrolling:touch;
  }
  .fv-mobile-panel a{
    display:flex!important;align-items:center!important;min-height:44px!important;padding:10px 12px!important;
    border-bottom:1px solid #edf1f6!important;border-radius:9px;color:#283b58!important;font-size:13px!important;font-weight:750!important;
  }
  .fv-mobile-panel a:last-child{border-bottom:0!important}
  .fv-mobile-panel a:active{background:#f0f5ff;color:#1f5fd1!important}

  /* Member workspace header remains usable on small screens. */
  .pm-user-topbar{min-height:62px;padding-left:12px!important;padding-right:12px!important;gap:8px!important}
  .pm-user-menu{min-width:42px!important;min-height:42px!important}
  .pm-user-context{min-width:0}
  .pm-user-context b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
}

@media(max-width:620px){
  /* Prevent iOS input zoom and make controls comfortable to tap. */
  .fv-site-main input:not([type="checkbox"]):not([type="radio"]),
  .fv-site-main select,.fv-site-main textarea{font-size:16px!important}
  .fv-site-main button,.fv-site-main .btn{min-height:44px}
  .fv-site-main a.btn{min-height:44px}

  .fv-nav-main{min-height:62px!important;padding:0 12px!important}
  .pm-logo-text{max-width:160px;font-size:16px!important}
  .fv-mobile-panel{top:69px!important;left:8px!important;right:8px!important;max-height:calc(100dvh - 78px)!important;border-radius:14px!important}

  /* Global public page typography / horizontal safety. */
  .fv-site-main{max-width:100%;overflow-x:clip}
  .fv-site-main h1,.fv-site-main h2,.fv-site-main h3{overflow-wrap:anywhere}
  .fv-site-main p,.fv-site-main li{overflow-wrap:break-word}
  .container{width:calc(100% - 28px)!important;margin-left:auto!important;margin-right:auto!important}
  .row{flex-wrap:wrap}
  .card{padding:18px!important;border-radius:16px!important}
  .fv-site-main table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* Homepage hero. */
  .pm-home .pm-gpc-hero .mp-hero-inner{padding:34px 15px 22px!important}
  .pm-home .pm-gpc-hero h1{font-size:clamp(31px,9.6vw,38px)!important;line-height:1.05!important;letter-spacing:-1.35px!important}
  .pm-home .pm-gpc-hero p{font-size:14px!important;line-height:1.68!important}
  .pm-home .mp-pill{max-width:100%;white-space:normal;text-align:center;justify-content:center}
  .pm-home .mp-search{width:100%!important;max-width:100%!important}
  .pm-home .mp-actions{width:100%;gap:10px!important}
  .pm-home .mp-actions .mp-button{width:100%;min-height:48px!important}
  .pm-home .mp-text-link{min-height:40px;display:inline-flex;align-items:center;justify-content:center}
  .pm-home .mp-trust{font-size:11px!important;text-align:left}

  /* Moving preview wall: viewport-aware cards, no accidental horizontal page scroll. */
  .pm-home .pm-visual-showcase{padding-left:0!important;padding-right:0!important}
  .pm-home .pm-visual-card{width:min(82vw,310px)!important;flex-basis:min(82vw,310px)!important}
  .pm-home .pm-visual-frame{border-radius:15px!important}

  /* Benefit strip & category browser. */
  .pm-home .mp-stat-wrap.pm-v48-after-scroll{padding-left:14px!important;padding-right:14px!important}
  .pm-home .mp-stats{grid-template-columns:1fr!important;border-radius:16px!important}
  .pm-home .mp-stats article{border-right:0!important;border-bottom:1px solid #e8edf4!important;min-height:72px!important}
  .pm-home .mp-stats article:last-child{border-bottom:0!important}
  .pm-home .pm-v35-bundle-browser{padding-left:14px!important;padding-right:14px!important}
  .pm-v35-browser-copy h2{font-size:29px!important;line-height:1.12!important}
  .pm-v35-view-all{width:100%;justify-content:center!important}
  .pm-v35-browser-note{display:grid!important;gap:9px!important;padding:13px!important}

  /* V68: convert the desktop collage into a clean responsive visual grid. */
  .pm-v68-visual-story{padding:50px 14px 48px!important}
  .pm-v68-head{margin-bottom:24px!important}
  .pm-v68-head h2{font-size:clamp(31px,9vw,36px)!important;line-height:1.06!important;letter-spacing:-1.2px!important}
  .pm-v68-head p{font-size:14px!important;line-height:1.62!important}
  .pm-v68-canvas{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px!important;
    min-height:0!important;padding:10px!important;border-radius:20px!important;
  }
  .pm-v68-canvas::before,.pm-v68-orbit{display:none!important}
  .pm-v68-main{
    position:relative!important;left:auto!important;top:auto!important;grid-column:1/-1;width:100%!important;height:auto!important;
    transform:none!important;padding:8px!important;border-radius:15px!important;box-shadow:0 16px 36px rgba(22,45,87,.12)!important;
  }
  .pm-v68-main:hover{transform:none!important}
  .pm-v68-main-media{height:auto!important;aspect-ratio:16/10;border-radius:10px!important}
  .pm-v68-windowbar{height:29px!important;padding-bottom:6px!important}
  .pm-v68-main-meta{height:auto!important;min-height:38px!important;padding:7px 3px 1px!important;font-size:10px!important;align-items:center!important}
  .pm-v68-tile{
    position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    width:100%!important;transform:none!important;padding:6px 6px 9px!important;border-radius:14px!important;box-shadow:0 10px 24px rgba(31,58,101,.09)!important;
  }
  .pm-v68-tile:hover{transform:none!important}
  .pm-v68-tile-media{height:auto!important;aspect-ratio:4/3;border-radius:9px!important}
  .pm-v68-tile>span{font-size:10.5px!important;padding:7px 3px 0!important}
  .pm-v68-badge{display:none!important}
  .pm-v68-footer{align-items:stretch!important;gap:14px!important;margin-top:18px!important}
  .pm-v68-mini-tags{justify-content:center!important}
  .pm-v68-footer>a{justify-content:center;min-height:44px;padding:0 14px;border:1px solid #dbe6f4;border-radius:12px;background:#fff}

  /* Overlapping library preview becomes a clean one-column gallery. */
  .pm-v45-library-stage{padding-left:14px!important;padding-right:14px!important}
  .pm-v45-library-head h2{font-size:31px!important;line-height:1.08!important}
  .pm-v45-fan{gap:11px!important}
  .pm-v45-fan-card{border-radius:16px!important}
  .pm-v45-benefit-pills{gap:8px!important}
  .pm-v45-benefit-pills span{width:100%;min-height:42px!important}

  /* V64 finished-work devices: preserve the visual composition without overflow. */
  .pm-v64-outcomes{padding:50px 14px 54px!important}
  .pm-v64-head{margin-bottom:22px!important}
  .pm-v64-head h2{font-size:clamp(31px,9vw,36px)!important;line-height:1.06!important;letter-spacing:-1.2px!important}
  .pm-v64-head p{font-size:14px!important;line-height:1.62!important}
  .pm-v64-stage{padding:8px 0 2px!important;min-height:0!important}
  .pm-v64-device-row{display:grid!important;grid-template-columns:1fr 1fr!important;gap:14px 10px!important;align-items:end!important;width:100%!important}
  .pm-v64-laptop{grid-column:1/-1!important;grid-row:auto!important;width:96%!important;margin:0 auto!important}
  .pm-v64-tablet{grid-column:1!important;grid-row:auto!important;width:82%!important;margin:0 0 0 auto!important}
  .pm-v64-phone-pair{grid-column:2!important;grid-row:auto!important;display:flex!important;justify-content:center!important;align-items:flex-end!important;margin:0 auto 0 0!important;min-width:0!important}
  .pm-v64-phone{width:min(20vw,82px)!important}
  .pm-v64-phone-two{width:min(21vw,88px)!important;margin-left:-6px!important}
  .pm-v64-laptop-screen{border-width:5px!important;border-bottom-width:10px!important;padding:7px!important;border-radius:13px 13px 6px 6px!important}
  .pm-v64-tablet-screen{border-width:5px!important;padding:6px!important;border-radius:16px!important}
  .pm-v64-phone-screen{border-width:4px!important;padding:4px!important;border-radius:18px!important}
  .pm-v64-use-links{grid-template-columns:1fr 1fr!important;gap:8px!important;margin-top:26px!important}
  .pm-v64-use-links a{min-height:46px!important;padding:0 10px!important;font-size:11px!important}
  .pm-v64-actions{gap:9px!important;margin-top:20px!important}
  .pm-v64-actions a{min-height:49px!important;border-radius:12px!important}

  /* How-it-works, creator cards, pricing. */
  .pm-home .mp-section{padding-left:15px!important;padding-right:15px!important}
  .pm-home .mp-process-grid{grid-template-columns:1fr!important}
  .pm-home .pm-bonus-grid{grid-template-columns:1fr!important}
  .pm-home .pm-membership-preview{padding:52px 14px!important}
  .pm-home .pm-membership-head h2{font-size:29px!important;line-height:1.1!important}
  .pm-home .pm-home-price-grid{grid-template-columns:1fr!important;gap:14px!important}
  .pm-home .pm-home-price-card{min-height:0!important;padding:24px 20px!important;border-radius:18px!important}
  .pm-home .pm-home-price-card.featured{transform:none!important}
  .pm-home .pm-home-price-card .price{font-size:34px!important}
  .pm-home .pm-home-price-card .btn{min-height:49px!important}

  /* FAQ. */
  .pm-v56-faq{padding:46px 14px!important}
  .pm-v56-faq-shell{gap:24px!important}
  .pm-v56-faq-intro h2{font-size:30px!important}
  .pm-v56-faq-item{border-radius:14px!important}
  .pm-v56-faq-item summary{min-height:60px;padding:16px!important;gap:13px!important;font-size:14px!important}
  .pm-v56-faq-item summary i{width:28px!important;height:28px!important;flex-basis:28px!important}
  .pm-v56-faq-answer{padding:0 16px 18px!important}
  .pm-v56-faq-page-hero{padding-left:14px!important;padding-right:14px!important}
  .pm-v56-faq-page-hero h1{font-size:34px!important}

  /* Contact / Free Sample / Creator channels / Legal pages: final mobile tightening. */
  .pm-v57-contact-hero,.pm-v60-sample-hero{padding-left:14px!important;padding-right:14px!important}
  .pm-v57-contact-hero h1,.pm-v60-sample-copy h1{font-size:clamp(34px,10vw,40px)!important;letter-spacing:-1.4px!important}
  .pm-v57-contact-main,.pm-v57-contact-help,.pm-v60-sample-access{padding-left:12px!important;padding-right:12px!important}
  .pm-v57-contact-form-card,.pm-v57-contact-aside,.pm-v60-sample-form-card,.pm-v60-sample-includes{padding-left:17px!important;padding-right:17px!important;border-radius:17px!important}
  .pm-v60-sample-shell,.pm-v60-sample-access-grid{grid-template-columns:1fr!important;gap:20px!important}
  .pm-v60-sample-preview{padding:14px!important;border-radius:18px!important}
  .pm-v60-preview-stage{height:270px!important}
  .pm-v60-field-row{grid-template-columns:1fr!important}
  .pm-v61-channel-shell{width:calc(100% - 24px)!important}
  .pm-v61-channel-copy h1{font-size:36px!important;line-height:1.06!important}
  .pm-v61-channel-actions a,.pm-v61-channel-cta-actions a{min-height:48px!important}
  .pm-v66-legal-hero-inner{padding-left:14px!important;padding-right:14px!important}
  .pm-v66-legal-wrap{padding-left:12px!important;padding-right:12px!important}
  .pm-v66-legal-sidebox nav{grid-template-columns:1fr!important}

  /* Footer. */
  .fv-footer.pm-footer,.fv-footer{padding:38px 16px 20px!important}
  .pm-footer .fv-footer-grid,.fv-footer-grid{grid-template-columns:1fr!important;gap:24px!important}
  .fv-footer a{min-height:32px;display:flex;align-items:center}
  .fv-footer-bottom{display:grid!important;gap:9px!important;margin-top:24px!important;padding-top:16px!important;line-height:1.6}
}

@media(max-width:390px){
  .pm-logo-text{max-width:135px}
  .pm-home .pm-gpc-hero h1{font-size:30px!important}
  .pm-v68-head h2,.pm-v64-head h2,.pm-v45-library-head h2{font-size:29px!important}
  .pm-v68-canvas{gap:8px!important;padding:8px!important}
  .pm-v68-tile>span{font-size:9.5px!important}
  .pm-v64-use-links{grid-template-columns:1fr!important}
  .pm-v64-tablet{width:88%!important}
  .pm-v64-phone{width:21vw!important}.pm-v64-phone-two{width:22vw!important}
}
