/* ═══════════════════════════════════════════════════
   CJP — BULLETPROOF Responsive System v3
   Handles EVERY inline style override
   320px → Ultra Wide · All Pages · All Components
   ═══════════════════════════════════════════════════ */

/* ═══ GLOBAL OVERFLOW FIX ═══ */
html,body{overflow-x:hidden!important;max-width:100vw!important}
*,*::before,*::after{box-sizing:border-box}
img,video,iframe,svg,canvas{max-width:100%;height:auto}
table{max-width:100%;overflow-x:auto;display:block}

/* ═══ ULTRA WIDE (1600px+) ═══ */
@media(min-width:1600px){
  .hero-inner,.demands-inner,.stats-grid,.footer-inner{max-width:1500px}
}

/* ═══ LARGE DESKTOP (1280px) ═══ */
@media(max-width:1280px){
  .hero-inner{gap:32px}
  .footer-inner{gap:36px}
  .eligibility-grid{grid-template-columns:repeat(3,1fr)!important}
}

/* ═══ TABLET LANDSCAPE (1024px) ═══ */
@media(max-width:1024px){
  /* ALL GRIDS — override any inline styles */
  .hero-inner,.origin-grid,.mq-inner{grid-template-columns:1fr!important}
  .hero-right{order:-1}
  .demands-grid{grid-template-columns:repeat(2,1fr)!important}
  .eligibility-grid{grid-template-columns:repeat(2,1fr)!important}
  .videos-grid{grid-template-columns:1fr!important;gap:24px}
  .contact-grid{grid-template-columns:1fr!important}
  .contact-info{grid-template-columns:1fr!important}
  .stats-grid{grid-template-columns:repeat(2,1fr)!important}
  .benefit-grid{grid-template-columns:repeat(2,1fr)!important}
  .voice-grid{grid-template-columns:repeat(2,1fr)!important}
  .steps-grid{grid-template-columns:repeat(2,1fr)!important}
  .gallery-grid{grid-template-columns:repeat(2,1fr)!important}
  .footer-inner{grid-template-columns:1fr 1fr!important}
  
  /* Catch ANY div with inline grid on pages */
  [style*="grid-template-columns:repeat(3"]{grid-template-columns:repeat(2,1fr)!important}
  [style*="grid-template-columns: repeat(3"]{grid-template-columns:repeat(2,1fr)!important}

  /* Mobile Nav — Glassmorphism Overlay */
  nav{padding:0 16px}
  .nav-links{
    position:fixed!important;top:0;left:0;right:0;bottom:0;
    background:rgba(9,7,7,.98)!important;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    flex-direction:column!important;align-items:center!important;justify-content:center!important;
    gap:8px;transform:translateY(-100%);transition:transform .45s cubic-bezier(.22,1,.36,1);
    z-index:550;padding:24px;list-style:none;overflow-y:auto
  }
  .nav-links.open{transform:translateY(0)!important}
  .nav-links li{display:block;text-align:center;width:100%;max-width:300px}
  .nav-links a{font-size:16px!important;letter-spacing:3px;padding:14px 16px!important;justify-content:center;border-radius:8px;width:100%;display:flex!important}
  .nav-links a::after{display:none!important}
  .nav-links a i{font-size:18px;opacity:.7}
  .nav-links a:hover,.nav-links a.active{background:rgba(185,28,28,.12)}
  .nav-mobile-cta{display:block!important;margin-top:16px;width:100%;max-width:300px}
  .nav-mobile-cta .btn-main{padding:16px 36px;font-size:16px;width:100%;justify-content:center}
  .nav-hamburger{display:flex!important}
  .nav-cta{display:none!important}
  .nav-right-group{gap:8px}
  .nav-wordmark{font-size:15px}
  .nav-wordmark small{font-size:9px;letter-spacing:2px}

  /* Padding — all sections */
  .hero{padding-top:calc(var(--top-offset) + 20px)}
  .hero-inner{padding:0 20px}
  .origin,.join-who{padding:60px 20px!important;max-width:100%!important}
  .demands-section{padding:60px 20px!important}
  .demands-inner{padding:0 20px}
  footer{padding:48px 20px 32px!important}
  .manifesto-quote{padding:60px 20px!important}
  .register{padding:60px 20px!important}
  .videos-section{padding:60px 20px!important;max-width:100%!important}
  .page-header{padding:calc(var(--top-offset) + 20px) 20px 36px!important}
  .breadcrumbs{padding:calc(var(--top-offset) + 8px) 20px 0!important}
  .card-section{padding:60px 20px!important}
  .contact-section{padding:40px 20px 80px!important;max-width:100%!important}
  .gallery-section{padding:40px 20px 80px!important;max-width:100%!important}
  .quiz-section{padding:60px 20px!important}
  .faq-section{padding:60px 20px!important}
  .stats-section{padding:60px 20px!important}
  .swarm-wall{padding:40px 20px!important}
}

/* ═══ TABLET PORTRAIT (768px) ═══ */
@media(max-width:768px){
  .card-form-grid{grid-template-columns:1fr!important}
  .lang-toggle{padding:3px 5px}
  .lang-btn{font-size:11px;letter-spacing:1px}
  .poster-frame{width:min(320px,80vw)!important}
  .hero-counters{flex-wrap:wrap}
  .counter{flex:1 1 45%;min-width:0}
  .footer-inner{grid-template-columns:1fr!important;gap:28px}
  .footer-bottom{flex-direction:column!important;text-align:center;gap:10px}
  .benefit-grid{grid-template-columns:1fr 1fr!important}
  .stats-grid{grid-template-columns:1fr 1fr!important}
  .steps-grid{grid-template-columns:1fr!important}
  .gallery-grid{grid-template-columns:1fr 1fr!important}

  /* Floating buttons compact */
  .cjp-tg-text{display:none!important}
  .cjp-float-tg{width:48px;height:48px;border-radius:50%;justify-content:center;padding:0}
  .cjp-tg-icon{font-size:20px}
  .cjp-float-join{padding:10px 14px 10px 10px;font-size:12px;letter-spacing:1.5px;border-radius:8px}

  /* Quiz */
  .quiz-step{padding:32px 16px}
  .q-question{font-size:clamp(22px,5vw,34px)!important}

  /* Manifesto */
  .mq-text{font-size:clamp(32px,7vw,52px)!important}
  .mq-right{font-size:15px;margin-top:16px}

  /* Register */
  .reg-title{font-size:clamp(44px,11vw,72px)!important}
  .reg-sub{font-size:15px;margin-bottom:28px}

  /* Section titles */
  .sec-title{font-size:clamp(36px,8vw,56px)!important;margin-bottom:36px}

  /* Card */
  .member-card{border-radius:8px}
  .mc-body-main{padding:14px}
  .mc-footer-info{flex-direction:column;gap:8px;align-items:flex-start}
  .mc-slogan{text-align:left}

  /* Voice */
  .voice-card{padding:24px 20px}
  .voice-text{font-size:14px;padding-left:20px}

  /* Stat/benefit */
  .stat-card{padding:28px 16px}
  .stat-num{font-size:clamp(28px,6vw,40px)!important}
  .benefit-card{padding:28px 20px}

  /* Contact */
  .contact-card{padding:24px 20px}
  .contact-item{flex-direction:column;align-items:center;text-align:center}

  /* Origin */
  .origin-headline{font-size:clamp(36px,7vw,56px)!important}
}

/* ═══ MOBILE LARGE (600px) — CRITICAL BREAKPOINT ═══ */
@media(max-width:600px){
  :root{--top-offset:88px}
  
  /* FORCE all grids to 1 column */
  .demands-grid{grid-template-columns:1fr!important}
  .eligibility-grid{grid-template-columns:1fr!important}
  .benefit-grid{grid-template-columns:1fr!important}
  .voice-grid{grid-template-columns:1fr!important}
  .contact-info{grid-template-columns:1fr!important}
  .stats-grid{grid-template-columns:1fr 1fr!important}
  .gallery-grid{grid-template-columns:1fr!important}
  .steps-grid{grid-template-columns:1fr!important}
  .videos-grid{grid-template-columns:1fr!important}
  .form-row{flex-direction:column!important}
  
  /* Override ANY inline grid */
  [style*="grid-template-columns"]{grid-template-columns:1fr!important}
  [style*="display:grid"]{gap:16px!important}
  
  /* Hero */
  .hero-title{font-size:clamp(44px,12vw,80px)!important}
  .hero-desc{font-size:15px;margin-bottom:24px}
  .hero-btns{flex-direction:column!important;gap:10px}
  .hero-btns .btn-main,.hero-btns .btn-ghost{width:100%!important;text-align:center;justify-content:center}
  .poster-frame{width:min(280px,85vw)!important}
  
  /* Toast */
  .toast{bottom:76px;left:14px;right:14px;max-width:none}
  
  /* Share */
  .share-row{flex-direction:column!important}
  .share-btn{min-width:100%!important}
  
  /* Sections padding */
  .contact-section,.gallery-section{padding:36px 14px 80px!important}
  .card-section{padding:40px 14px!important}
  .page-header{padding:calc(var(--top-offset) + 14px) 14px 28px!important}
  .page-header h1{font-size:clamp(40px,10vw,68px)!important}
  .page-header .subtitle{font-size:clamp(16px,4vw,22px)!important}
  .page-header .desc{font-size:14px;margin-top:10px}
  .breadcrumbs{padding:calc(var(--top-offset) + 6px) 14px 0!important}
  .origin,.join-who{padding:40px 14px!important}
  .demands-section{padding:40px 14px!important}
  .demands-inner{padding:0!important}
  .manifesto-quote{padding:40px 14px!important}
  .register{padding:40px 14px!important}
  footer{padding:36px 14px 24px!important}
  .faq-section{padding:40px 14px!important}
  .stats-section{padding:40px 14px!important}
  .quiz-section{padding:40px 14px!important}
  .swarm-wall{padding:32px 14px!important}
  .videos-section{padding:40px 14px!important}

  /* Counter */
  .hero-counters{border:none;gap:2px;border-radius:8px;flex-direction:column}
  .counter{border:1px solid rgba(245,239,224,.04);padding:12px 10px;border-radius:0;flex:none;width:100%}
  .c-num{font-size:24px}
  .c-label{font-size:9px;letter-spacing:1.5px}

  /* Demand cards */
  .demand{padding:24px 18px;border-radius:8px}
  .d-num{font-size:44px}
  .d-title{font-size:16px}
  .d-text{font-size:13px}
  .d-icon{font-size:24px}

  /* Eligibility */
  .elig{padding:24px 18px;border-radius:8px}
  .elig-emoji,.elig-icon{font-size:28px}
  .elig-title{font-size:16px}

  /* FAQ */
  .faq-q{font-size:15px;padding:16px 18px}
  .faq-a{padding:0 18px 16px;font-size:13px}

  /* Origin */
  .origin-headline{font-size:clamp(32px,8vw,48px)!important}
  .origin-text p{font-size:14px}

  /* Timeline */
  .timeline{padding-left:20px}
  .t-item::before{left:-28px;width:12px;height:12px}
  .t-text{font-size:13px}

  /* Register */
  .reg-form{gap:10px}
  .reg-title{font-size:clamp(36px,11vw,60px)!important}

  /* Marquee */
  .marquee-inner{font-size:14px;letter-spacing:3px}

  /* Swarm wall */
  .sw-big{font-size:clamp(40px,12vw,68px)!important}
  .sw-item{font-size:40px}
  
  /* Poster badge */
  .poster-badge{left:-6px;bottom:-4px;padding:6px 10px}
  .poster-badge span{font-size:10px}
  .poster-badge small{font-size:7px}
  
  /* Step cards */
  .step-card{padding:24px 18px}
  .step-icon{font-size:24px}
  .step-title{font-size:16px}
  
  /* Voice */
  .voice-card{padding:20px 16px}
  .voice-text{font-size:13px;padding-left:16px}
  .voice-author{font-size:11px}
  
  /* Contact items */
  .contact-item{padding:16px;gap:10px}
  .contact-icon{width:36px;height:36px;font-size:18px}
  .contact-detail h4{font-size:13px}
  .contact-detail p{font-size:12px}
  
  /* Quiz */
  .q-opts{max-width:100%!important}
  .q-opt{padding:14px 16px;font-size:14px}
  
  /* Photo upload */
  .photo-upload-area{padding:14px}
  .photo-upload-label{font-size:12px}
  .photo-upload-label strong{font-size:14px}
}

/* ═══ MOBILE SMALL (480px) ═══ */
@media(max-width:480px){
  nav{padding:0 12px;height:56px}
  .nav-badge{width:32px;height:32px;font-size:11px}
  .nav-wordmark{font-size:13px;letter-spacing:2px}
  .nav-wordmark small{font-size:8px;letter-spacing:1.5px}
  .ticker{height:24px;top:56px}
  .ticker-inner{font-size:10px;letter-spacing:1.5px}
  .ticker-label{font-size:8px;padding:0 8px;letter-spacing:1.5px}
  .ticker-label i{font-size:10px}
  :root{--nav-h:56px;--ticker-h:24px;--top-offset:80px}

  .hero-dev{font-size:14px;gap:8px}
  .hero-dev::before{width:18px}

  .cjp-float-join{bottom:12px;right:8px;padding:8px 10px;font-size:10px;letter-spacing:1px}
  .cjp-join-text small{display:none}
  .cjp-float-tg{left:8px;bottom:12px;width:42px;height:42px}
  .cjp-tg-icon{font-size:18px}
  .back-to-top{bottom:68px;right:8px;width:36px;height:36px;font-size:16px}

  .poster-frame{width:min(260px,85vw)!important}

  .stats-grid{grid-template-columns:1fr!important}
  .stat-card{padding:20px 14px}
  .stat-num{font-size:clamp(24px,7vw,36px)!important}
  .stat-label{font-size:9px;letter-spacing:1.5px}

  /* Card sizing */
  .mc-party{font-size:9px!important;letter-spacing:2px}
  .mc-party small{font-size:7px!important}
  .mc-logo{width:32px!important;height:32px!important}
  .mc-logo img{width:32px!important;height:32px!important}
  .mc-photo{width:42px!important;height:42px!important}
  .mc-name{font-size:18px!important;letter-spacing:2px}
  .mc-title{font-size:8px!important}
  .mc-id{font-size:8px!important}
  .mc-slogan{font-size:7px!important}
  .mc-qr-side{width:52px!important;min-width:52px!important;padding:8px 4px}
  .mc-bg-text{font-size:44px!important}

  /* Buttons */
  .btn-main,.btn-ghost{padding:12px 20px!important;font-size:12px!important;letter-spacing:2px}
  .btn-generate{padding:14px;font-size:13px;letter-spacing:2px}

  /* Section labels */
  .sec-label{font-size:10px!important;letter-spacing:3px}
  .sec-label::before{width:16px}
  .sec-title{font-size:clamp(32px,8vw,48px)!important}

  /* Founder */
  .founder{flex-direction:column;align-items:flex-start;gap:10px}
  .founder-av{width:36px;height:36px;font-size:14px}

  /* Footer */
  .social-row{gap:6px}
  .soc{width:34px;height:34px;font-size:14px}
  .footer-col h5{font-size:13px;letter-spacing:2px}
  .footer-col a{font-size:13px}
  .footer-desc{font-size:12px}
  
  /* Inline style overrides */
  [style*="font-size:clamp"]{font-size:inherit!important}
  [style*="padding:18px 48px"]{padding:14px 24px!important}
  [style*="font-size:16px;padding:18px"]{font-size:13px!important;padding:14px!important}
  [style*="margin-left:12px"]{margin-left:0!important;margin-top:8px!important;display:block!important}
}

/* ═══ VERY SMALL (360px) ═══ */
@media(max-width:360px){
  .hero-title{font-size:clamp(36px,13vw,60px)!important}
  .page-header h1{font-size:clamp(32px,11vw,52px)!important}
  .mc-name{font-size:16px!important}
  .btn-main,.btn-ghost{padding:10px 16px!important;font-size:11px!important;letter-spacing:1.5px}
  nav{padding:0 10px}
  .nav-wordmark{display:none!important}
  .nav-badge{width:30px;height:30px;font-size:10px}
  .lang-toggle{padding:2px 4px}
  .lang-btn{font-size:10px;padding:1px 3px}
  
  footer{padding:28px 10px 20px!important}
  .footer-col h5{font-size:12px;letter-spacing:2px}
  .footer-col a{font-size:12px}
  .footer-bottom p{font-size:10px}
  .satire-pill{font-size:8px;padding:4px 10px}
  .soc{width:30px;height:30px;font-size:13px}

  .sec-title{font-size:clamp(28px,9vw,44px)!important;margin-bottom:24px}
  .origin-headline{font-size:clamp(28px,8vw,40px)!important}
  .mq-text{font-size:clamp(28px,8vw,40px)!important}
  .reg-title{font-size:clamp(36px,11vw,56px)!important}
  
  .demand,.elig,.benefit-card,.voice-card,.step-card,.contact-card,.contact-item{padding:16px 12px!important;border-radius:8px}
  .d-num{font-size:36px!important}
  .d-title{font-size:14px!important}
  .d-text{font-size:12px!important}
  .benefit-title{font-size:14px!important}
  .benefit-text{font-size:12px!important}
}

/* ═══ VERY VERY SMALL (320px) ═══ */
@media(max-width:320px){
  nav{height:52px;padding:0 8px}
  :root{--nav-h:52px;--ticker-h:22px;--top-offset:74px}
  .ticker{height:22px;top:52px}
  .ticker-inner{font-size:9px;letter-spacing:1px}
  .nav-badge{width:28px;height:28px;font-size:9px}
  .hero-title{font-size:clamp(32px,13vw,52px)!important}
  .page-header h1{font-size:clamp(28px,11vw,44px)!important}
  .sec-title{font-size:clamp(24px,9vw,36px)!important}
  .btn-main,.btn-ghost{padding:10px 14px!important;font-size:10px!important}
  .demand,.elig,.benefit-card,.voice-card,.step-card{padding:14px 10px!important;border-radius:6px}
}

/* ═══ LANDSCAPE PHONE ═══ */
@media(max-height:500px) and (orientation:landscape){
  .hero{min-height:auto!important;padding-top:calc(var(--top-offset) + 10px);padding-bottom:40px}
  .hero-inner{grid-template-columns:1fr 1fr!important;gap:20px}
  .hero-right{order:0}
  .poster-frame{width:min(180px,35vw)!important}
  .hero-left{padding:14px 0}
  .nav-links{padding-top:var(--nav-h)}
  .swarm-wall>div:first-child,.swarm-wall>div:nth-child(2){display:none}
}

/* ═══ SAFE AREA (notch phones) ═══ */
@supports(padding:max(0px)){
  nav{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  footer{padding-bottom:max(24px,env(safe-area-inset-bottom))}
  .cjp-float-tg{left:max(8px,env(safe-area-inset-left))}
  .cjp-float-join{right:max(8px,env(safe-area-inset-right))}
  .toast{left:max(14px,env(safe-area-inset-left))}
}