/* ============================================================
   MOBILE.CSS — Presentation Help
============================================================ */

html, body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

* { box-sizing: border-box; }

/* ============================================================
   ≤ 768px — phones
============================================================ */
@media (max-width: 768px) {

  /* Kill fixed background attachment on iOS — was broken typo */
  .page2-bg {
    background-attachment: scroll !important;
    padding: 1.5rem 0 4rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: block !important;
  }

  /* Collapse layout wrappers */
  main,
  .section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  /* two-col: stack as a flex column */
  .two-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  /* Columns and lozenge containers */
  .left-col,
  .right-col,
  .lozenge {
    width: calc(100% - 2rem) !important;
    max-width: 480px !important;
    margin: 1.25rem auto !important;
    padding: 1.25rem !important;
    border-radius: 20px !important;
    float: none !important;
    display: block !important;
  }

  .left-col {
    padding-bottom: 2.5rem !important;
  }

  /* Right column tint */
  .right-col {
    background: rgba(30,63,168,0.75) !important;
    border-color: rgba(120,150,255,0.85) !important;
    box-shadow:
      0 0 18px rgba(30,63,168,0.85),
      0 0 32px rgba(10,20,60,0.7) !important;
  }

  .form-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* HOW IT WORKS — single column */
  .steps {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    margin-top: 1rem !important;
  }

  .how-card {
    width: 100% !important;
    padding: 1rem !important;
  }

  /* FAQ — single column */
  .faq-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    margin-top: 1rem !important;
  }

  /* FEEDBACK — single column */
  .feedback-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    margin-top: 1rem !important;
    padding: 0 !important;
  }

  .feedback-wrapper,
  .feedback-box {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Prevent iOS zoom on inputs */
  input,
  select,
  textarea,
  input[type="file"] {
    font-size: 16px !important;
    width: 100% !important;
  }

  /* Tap behaviour */
  .how-card,
  .faq-box,
  .feedback-item,
  .btn-primary,
  .hero-btn,
  #floatingHelp {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* Mobile primary button */
  .btn-primary {
    width: 100% !important;
    max-width: 100% !important;
    background: linear-gradient(135deg, #3b5df0, #1E3FA8) !important;
    border: 1px solid rgba(255,255,255,0.28) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 24px rgba(10,20,60,0.7) !important;
    padding: 16px 24px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    border-radius: 14px !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  }

  .btn-primary:hover,
  .btn-primary:focus {
    background: linear-gradient(135deg, #4c6bff, #2A4ED0) !important;
  }

  .btn-primary:active {
    transform: translateY(1px) scale(0.992);
    box-shadow: 0 10px 18px rgba(10,20,60,0.6) !important;
  }

  /* Press states */
  .how-card:active,
  .faq-box:active,
  .feedback-item:active {
    transform: scale(0.97);
    box-shadow: 0 0 14px rgba(0,0,0,0.25);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
  }

  /* HERO */
  .hero-btn {
    font-size: 1.1rem !important;
    padding: 16px 32px !important;
  }

  /* FLOATING HELP */
  #floatingHelp {
    bottom: 16px !important;
    right: 16px !important;
    font-size: 0.9rem !important;
    padding: 10px 16px !important;
  }

  /* FOOTER */
  .site-footer {
    margin-top: 1.5rem !important;
    padding: 1rem !important;
  }

  .footer-links a svg {
    width: 2rem !important;
    height: 2rem !important;
  }

  .footer-links a.social-link svg {
    width: 2.2rem !important;
    height: 2.2rem !important;
  }
}
/* Excel Help button – mobile */
.excel-help-cta {
  text-align: center;
  margin: 24px 0 16px;
}

.excel-help-cta a {
  display: inline-block;
  padding: 12px 22px;
  background: #0078ff;
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.95rem;
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
  transition: 0.25s ease;
}

.excel-help-cta a:active {
  transform: scale(0.97);
}