/* ====================================================================
 FILE: /assets/02-home-page/w03-css-launch-hmpg/jzhmpg-w03-mobile.css
 link: <link rel="stylesheet" href="/assets/02-home-page/w04-css-launch-hmpg/jzhmpg-w04-desktop.css">
 PURPOSE: JUXTAZONE.COM - Mobile Styling - v6.0 Blueprint Compliant
 VERSION: v2.0  DATE MODIFIED: 2026-04-16 - Universal Typography Wiring
 ==================================================================== */

@media (max-width: 768px) {

  /* ========================================== */
  /* SECTION 0: MOBILE BRAT TWEAKS              */
  /* ========================================== */
  :root {
    /* --- 📏 MOBILE TYPOGRAPHY DIALS --- */
    --mob-h3-size: 1.1rem;       /* <-- Brat Tweak: Main Heading */
    --mob-p-size: 0.8rem;        /* <-- Brat Tweak: Main Subtext */
    
    /* --- 🌈 THE 2 CARDS (CRYPTO CARDS) --- */
    --mob-card-h4: 0.75rem;      /* <-- Brat Tweak: Shrunk Card Title */
    --mob-card-p: 0.55rem;       /* <-- Brat Tweak: Shrunk Card Desc */
    --mob-card-gap: 8px;         /* <-- Brat Tweak: Gap between stacked cards */
    
    /* --- 🏗️ LAYOUT DIALS --- */
    --mob-box-pad: 25px 15px;    /* <-- Brat Tweak: Main Box inner padding */
    --mob-vault-pad-side: 5px;   /* <-- Brat Tweak: Tight 5px Vault Side Padding */
  }

  /* ========================================== */
  /* SECTION 1: MASTER BOX & WRAPPER            */
  /* ========================================== */
  .jz-waitlist-box {
    padding: var(--mob-box-pad) !important; 
    border-radius: 12px;
  }

  .jz-waitlist-box h3 {
    font-size: var(--mob-h3-size) !important;
    margin-bottom: 10px;
  }

  .jz-waitlist-box p {
    font-size: var(--mob-p-size) !important;
    margin-bottom: 20px;
  }

  /* ========================================== */
  /* SECTION 2: THE COBALT VAULT (NESTED)       */
  /* ========================================== */
  .jz-mvp-showcase-wrapper {
    margin-top: 25px;
    /* Forces the 5px side padding you requested */
    padding: 20px var(--mob-vault-pad-side) 15px var(--mob-vault-pad-side) !important;
  }

  /* ========================================== */
  /* SECTION 3: THE CARDS (FORCED COLUMN)       */
  /* ========================================== */
  .jz-showcase-grid {
    display: flex !important;
    flex-direction: column !important; /* <-- FORCED COLUMN STACK */
    gap: var(--mob-card-gap) !important; 
  }

  .jz-tool-card {
    flex: none !important; /* Stops cards from trying to grow horizontally */
    width: 100% !important;
    padding: 12px !important;
    display: flex !important;
    flex-direction: row !important; /* Icon next to text */
    align-items: center !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }

  .jz-tool-icon {
    font-size: 1.1rem !important;
    margin-bottom: 0 !important;
    padding: 5px !important;
  }

  /* THE TITLES (ENCRYPT/DECRYPT) */
  .jz-tool-text h4 {
    font-size: var(--mob-card-h4) !important; 
    margin: 0 0 2px 0 !important;
    color: #00befd; /* Keeping the cyan accent */
  }

  /* THE DESCRIPTIONS */
  .jz-tool-text p {
    font-size: var(--mob-card-p) !important;
    line-height: 1.1 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  /* ========================================== */
  /* SECTION 4: ENGINE SPECS (BOTTOM)           */
  /* ========================================== */
  .jzn-tech-font {
    font-size: 7px !important;
    margin-top: 12px;
    opacity: 0.7;
  }

  /* Stack the main form too */
  .jz-waitlist-form {
    flex-direction: column !important;
    gap: 8px !important;
  }
}