/* ─────────────────────────────────────────────
   Diranex Landing — Mobile fix + Toggle removal
   ───────────────────────────────────────────── */

/* 1. REMOVE the PROTOTYPE / Landing Page / Dashboard top toggle bar */
.proto-toggle, [class*="proto-toggle"] { display: none !important; }

/* 2. MOBILE responsive — stack all columns under 768px */
@media (max-width: 767px) {

  /* Pricing cards (3 columns → 1) */
  .l-price-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 0 16px !important;
    max-width: 100% !important;
  }

  /* Feature cards (4 columns → 1) */
  .l-feat-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 0 16px !important;
  }

  /* Inline grid columns set via style="" attributes — flatten ALL to 1fr */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(7,1fr)"],
  [style*="grid-template-columns: repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(7,1fr)"],
  [style*="grid-template-columns:1.2fr 1fr 0.9fr 0.9fr"],
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    height: auto !important;
    gap: 12px !important;
  }

  /* Hero typography scales down */
  .l-hero h1 { font-size: 32px !important; line-height: 1.2 !important; }
  .l-hero p,
  .l-hero .l-sub { font-size: 15px !important; padding: 0 16px !important; }

  /* Header + buttons – give breathing room */
  .header,
  .l-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 12px 14px !important;
  }
  .header-right { flex-wrap: wrap !important; gap: 6px !important; }

  /* Section headers / titles */
  h2, h3 { font-size: 24px !important; line-height: 1.25 !important; }

  /* Generic safe spacing */
  section, .l-section { padding-left: 16px !important; padding-right: 16px !important; }

  /* Hide the prototype dashboard preview on mobile — too dense to read */
  .l-preview, .l-preview-content { display: none !important; }

  /* CTA buttons — full width and stacked */
  .l-cta-row,
  [class*="cta-row"] {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
  .l-cta-row .btn,
  .l-cta-row a,
  .l-cta-row button { width: 100% !important; text-align: center !important; }

  /* Body text reflow */
  .l-price-card, .l-feat-card {
    padding: 22px 18px !important;
  }
  .l-price-amt {
    font-size: 42px !important;
  }
}