/* ======================================================
   OPW2 V16 MOBILE ONLY — separate safe file
   Loaded after opx-welcome.css. Desktop remains controlled by main CSS.
   ====================================================== */

@media (max-width: 820px) {
  html:has(#opw2),
  html:has(#opw2) body,
  body.opto-welcome-v2,
  body:has(#opw2) {
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
    background:#050914 !important;
  }

  /* Theme header/logo: stop it from covering content */
  body.opto-welcome-v2 > header:not(.page-header),
  body.opto-welcome-v2 .site-header,
  body.opto-welcome-v2 .main-header,
  body.opto-welcome-v2 .header-area,
  body.opto-welcome-v2 .navbar-area,
  body.opto-welcome-v2 .dsn-header,
  body:has(#opw2) > header:not(.page-header),
  body:has(#opw2) .site-header,
  body:has(#opw2) .main-header,
  body:has(#opw2) .header-area,
  body:has(#opw2) .navbar-area,
  body:has(#opw2) .dsn-header {
    height:74px !important;
    min-height:74px !important;
    max-height:74px !important;
    overflow:hidden !important;
    background:rgba(0,0,0,.94) !important;
    position:sticky !important;
    top:0 !important;
    z-index:99999 !important;
  }

  body.opto-welcome-v2 > header:not(.page-header) img,
  body.opto-welcome-v2 .site-header img,
  body.opto-welcome-v2 .main-header img,
  body.opto-welcome-v2 .header-area img,
  body.opto-welcome-v2 .navbar-area img,
  body.opto-welcome-v2 .dsn-header img,
  body.opto-welcome-v2 .custom-logo,
  body.opto-welcome-v2 .logo img,
  body:has(#opw2) > header:not(.page-header) img,
  body:has(#opw2) .site-header img,
  body:has(#opw2) .main-header img,
  body:has(#opw2) .header-area img,
  body:has(#opw2) .navbar-area img,
  body:has(#opw2) .dsn-header img,
  body:has(#opw2) .custom-logo,
  body:has(#opw2) .logo img {
    max-height:52px !important;
    width:auto !important;
    max-width:215px !important;
    object-fit:contain !important;
    transform:none !important;
  }

  #opw2 {
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
    margin:0 !important;
    padding:0 !important;
  }

  #opw2 .section,
  #opw2 .section.wide,
  #opw2 .section.compact {
    width:min(calc(100% - 28px), 540px) !important;
    max-width:540px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-top:48px !important;
    padding-bottom:48px !important;
  }

  #opw2 h1 {
    font-size:clamp(40px, 11vw, 56px) !important;
    line-height:1.08 !important;
    letter-spacing:-.035em !important;
  }
  #opw2 h2 {
    font-size:clamp(30px, 8.6vw, 42px) !important;
    line-height:1.12 !important;
  }
  #opw2 h3 { font-size:21px !important; line-height:1.2 !important; }
  #opw2 p,
  #opw2 .lede { font-size:16px !important; line-height:1.55 !important; }
  #opw2 .eyebrow,
  #opw2 .tier,
  #opw2 .status-pill { font-size:11px !important; letter-spacing:.08em !important; white-space:normal !important; }

  #opw2 #hero.hero { min-height:auto !important; padding-top:42px !important; padding-bottom:46px !important; }
  #opw2 #hero .hero-grid { grid-template-columns:1fr !important; gap:30px !important; }
  #opw2 #hero .hero-copy { text-align:left !important; max-width:100% !important; }
  #opw2 #hero .hero-actions { display:grid !important; grid-template-columns:1fr !important; gap:12px !important; margin-top:22px !important; }
  #opw2 #hero .btn { width:100% !important; min-height:48px !important; font-size:15px !important; }
  #opw2 #hero .hero-meta { grid-template-columns:1fr !important; gap:12px !important; margin-top:22px !important; }
  #opw2 #hero .meta-card { min-height:auto !important; padding:16px !important; text-align:center !important; }

  #opw2 #hero .hero-panel { min-height:auto !important; padding:18px !important; border-radius:24px !important; }
  #opw2 #hero .panel-top { grid-template-columns:1fr !important; text-align:center !important; gap:12px !important; }
  #opw2 #hero .panel-title { font-size:20px !important; text-align:center !important; }
  #opw2 #hero .panel-note { font-size:14.5px !important; max-width:100% !important; text-align:center !important; }
  #opw2 #hero .panel-badge { justify-self:center !important; }
  #opw2 #hero .flow-grid { grid-template-columns:1fr !important; gap:10px !important; }
  #opw2 #hero .flow-label { min-height:auto !important; padding:14px 16px !important; }
  #opw2 #hero .flow-label strong { font-size:17px !important; }
  #opw2 #hero .flow-label div { font-size:14px !important; }
  #opw2 #hero .chip-map { width:min(78vw,300px) !important; margin:22px auto 18px !important; }
  #opw2 #hero .chip-inner { inset:22px !important; padding:14px !important; }
  #opw2 #hero .fabric-grid { gap:7px !important; }
  #opw2 #hero .fabric-cell { min-height:34px !important; }
  #opw2 #hero .hero-metrics { grid-template-columns:1fr !important; gap:10px !important; }
  #opw2 #hero .hero-metric { min-height:auto !important; padding:14px !important; }

  #opw2 .grid-2,
  #opw2 .grid-3,
  #opw2 .problem-visual,
  #opw2 .insight-band,
  #opw2 .stack-grid,
  #opw2 .deploy-grid,
  #opw2 .update-grid,
  #opw2 .app-grid {
    grid-template-columns:1fr !important;
    gap:16px !important;
  }

  #opw2 .card,
  #opw2 .flow-board,
  #opw2 .insight-panel,
  #opw2 .stack-wrap,
  #opw2 .deploy-card,
  #opw2 .update-card,
  #opw2 .app-card,
  #opw2 .step-card,
  #opw2 .cta-panel {
    padding:18px !important;
    border-radius:22px !important;
    min-height:auto !important;
  }

  #opw2 #why .flow-diagram { height:190px !important; }
  #opw2 #why .block { width:92px !important; height:58px !important; }
  #opw2 #why .near-core { width:170px !important; height:116px !important; }
  #opw2 #why .energy-pie { width:180px !important; height:180px !important; }
  #opw2 #why .pie-wrap { display:grid !important; grid-template-columns:1fr !important; justify-items:center !important; }
  #opw2 #why .energy-legend { width:100% !important; min-width:0 !important; }
  #opw2 #why .grid-2 .card,
  #opw2 #why .grid-3 .card { min-height:auto !important; padding:18px !important; }

  #opw2 #architecture .layer-canvas { min-height:380px !important; }
  #opw2 #architecture .platform-layer { left:5% !important; right:5% !important; min-height:62px !important; height:62px !important; padding:10px 12px !important; }
  #opw2 #architecture .platform-layer strong { font-size:15px !important; }
  #opw2 #architecture .platform-layer span { font-size:12px !important; }
  #opw2 #architecture .layer-tag { display:none !important; }
  #opw2 #architecture .platform-layer.l1 { top:34px !important; }
  #opw2 #architecture .platform-layer.l2 { top:118px !important; }
  #opw2 #architecture .platform-layer.l3 { top:202px !important; }
  #opw2 #architecture .platform-layer.l4 { top:286px !important; }

  #opw2 .app-card,
  #opw2 .app-card.wide { grid-column:auto !important; }
  #opw2 .timeline::before,
  #opw2 .step-dot { display:none !important; }
  #opw2 .step-row { grid-template-columns:1fr !important; }
  #opw2 .step-card { grid-template-columns:1fr !important; }
  #opw2 .cta-panel { display:grid !important; grid-template-columns:1fr !important; gap:16px !important; }
  #opw2 .cta-actions { display:grid !important; grid-template-columns:1fr !important; width:100% !important; }
  #opw2 .footer-grid { display:grid !important; grid-template-columns:1fr !important; text-align:center !important; gap:14px !important; }
}

@media (max-width: 430px) {
  #opw2 .section,
  #opw2 .section.wide,
  #opw2 .section.compact { width:calc(100% - 24px) !important; padding-top:42px !important; padding-bottom:42px !important; }
  #opw2 h1 { font-size:clamp(36px, 12vw, 48px) !important; }
  #opw2 h2 { font-size:clamp(28px, 9.5vw, 38px) !important; }
  #opw2 p,
  #opw2 .lede { font-size:15px !important; }
  #opw2 #hero .chip-map { width:min(82vw,280px) !important; }
}