/* Responsive styles for OGKit.pro 
   Breakpoints: 1200px, 998px, 776px, 660px, 515px, 480px, 380px 
   Constraint: Minimum font-size 12px
*/

/* 1200px */
@media (max-width: 1200px) {
  .feat-section { padding: 60px 0; }
  .feature-strip { padding: 20px 0; }
  .pricing-grid { gap: 16px; }
  .price-card { padding: 24px; }
  .ba-image{
    display:flex;
    justify-content: flex-start;
  }
  .ba-social-mock .ba-image img{
    top:0;
  }
  .ba-social-mock .ba-image-broken{
    display:flex;
    justify-content: center;
  }
}

/* 998px */
@media (max-width: 998px) {
  h1 { font-size: 40px; }
  h2 { font-size: 32px; }
  .lede { font-size: 16px; }
  .section-head p { font-size: 15px; }
  .sv-og-browser-base { padding: 24px 10px 10px; }
  .feature-card.lg h3 { font-size: 18px; }
  .ba-card{
    max-width:440px;
    margin:0 auto;
  }
}

/* 776px */
@media (max-width: 776px) {
  .wrap { padding: 0 24px; }
  h1 { font-size: 36px; }
  .section-head h2 { font-size: 28px; }
  section.block { padding: 56px 0; }
  .hero-actions .btn{

        display: flex;
        justify-content: center;
  }
  
  .lede br{
    display: none;
  }
  .footer-col p, .footer-col a { font-size: 14px; }
  .features-grid { gap: 16px; }
  .steps { gap: 24px 0; }
  .price-card { padding: 20px; }
  /* Enforce min font size 12px for smaller elements */
  .wp-panel .panel-row, .eyebrow, .wi-stat-card span, .fc-visual-ratio .ratio-frame { font-size: 12px; }
}

/* 660px */
@media (max-width: 660px) {
  h1 { font-size: 32px; }
  .hero { padding: 32px 0 50px; }
  .hero-grid { gap: 32px; }
  .section-head h2 { font-size: 26px; }
  .url-box { padding: 6px 6px 6px 14px; }
  .url-box input { font-size: 14px; }
  #canvas{
    opacity:0.2;
  }
}

/* 515px */
@media (max-width: 515px) {
  .wrap { padding: 0 16px; }
  h1 { font-size: 36px; }
  h2 { font-size: 24px; }
  .lede { font-size: 15px; }
  .btn { font-size: 14px; padding: 8px 16px; }
  section.block { padding: 48px 0; }
  .feature-card, .step, .price-card, .ba-card { padding: 25px; }
  .fc-visual-brand { gap: 8px; }
  .sv-analyze-card, .sv-browser-pill { padding: 12px; }
  .ba-image{
    height:161px;
  }
}

/* 480px */
@media (max-width: 480px) {
  h1 { font-size: 30px; }
  .ba-social-mock .ba-image img{
    height:320px;
    object-fit:cover;
    object-position:left;
  }
  .section-head h2 { font-size: 22px; }
  .lede { font-size: 14px; }
  .section-head p { font-size: 14px; }
  .step h3, .feature-card h3 { font-size: 16px; }
  .step p, .feature-card p { font-size: 13px; }
  .btn { padding: 8px 14px; font-size: 13px; }
  
  /* Enforce minimum 12px font size */
  .badge, .eyebrow, .eyebrow-pill, .og-label, .wp-editor-bar .publish-btn, .wp-panel .panel-title, .wp-panel .panel-row, .steps-stat span, .price-features li::before {
    font-size: 12px;
  }
}

/* 380px */
@media (max-width: 380px) {
  .wrap { padding: 0 12px; }
  h1 { font-size: 24px; }
  .section-head h2 { font-size: 20px; }
  .feature-card, .step, .price-card, .ba-card { padding: 25px; }
  .btn { padding: 8px 12px; font-size: 12px; }
  .nav-burger { width: 34px; height: 34px; }
  .logo { font-size: 18px; }
  .logo .mark { width: 28px; height: 28px; }
  
  /* Make sure inputs and smaller text stay at least 12px */
  .url-box input, .nav-links a, .mobile-links a { font-size: 14px; }
  .price-features li { font-size: 13px; }
  .step p, .feature-card p { font-size: 12px; }
}