/* =========================================================
   Historyio — Mobile Layout Overlay
   Loaded AFTER styles.css. Overrides only sizing, spacing,
   typography, and tap targets for ≤768px screens.
   PRESERVES all visual identity: gradients, colors, badges,
   pulse animations, decorative pins, globe artwork.
   ========================================================= */

@media (max-width: 768px) {

  /* ---------- Phase A — Typography scale-up ---------- */
  body { font-size: 18px; line-height: 1.65; }

  .section-title {
    font-size: clamp(1.9rem, 8vw, 2.4rem);
    line-height: 1.18;
    margin-bottom: 18px;
  }
  .section-sub {
    font-size: 1.1rem;
    line-height: 1.65;
  }
  .section-label {
    font-size: .88rem;
    letter-spacing: 1.6px;
    margin-bottom: 14px;
  }

  /* ---------- Section base padding ---------- */
  section { padding: 56px 20px; }

  /* ---------- Header ---------- */
  .btn-header-cta {
    font-size: .92rem;
    padding: 11px 20px;
  }

  /* ---------- Phase B — Hero (fix empty space, tighter layout) ---------- */
  .hero {
    min-height: 0;
    align-items: stretch;
    display: block;
  }
  .hero-content {
    padding: 32px 20px 48px;
    gap: 32px;
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-floats { display: none; }
  .hero-badge {
    font-size: .9rem;
    padding: 10px 18px;
    line-height: 1.45;
    letter-spacing: .3px;
    text-transform: none;
    margin-bottom: 24px;
  }
  .hero-headline {
    font-size: clamp(2.4rem, 10vw, 3.2rem);
    line-height: 1.12;
    margin-bottom: 20px;
  }
  .hero-sub {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 28px;
  }
  .hero-ctas {
    gap: 12px;
    margin-bottom: 32px;
    justify-content: center;
  }
  .hero-ctas .btn-primary {
    width: 100%;
    justify-content: center;
    font-size: 1.1rem;
    padding: 18px 24px;
    min-height: 60px;
  }
  .hero-ctas .btn-secondary {
    width: 100%;
    justify-content: center;
    font-size: 1.05rem;
    min-height: 56px;
  }
  /* Trust badges → 3-col grid with bigger labels */
  .hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    text-align: center;
  }
  .hero-stats .stat-item { text-align: center; }
  .stat-number { font-size: 1.3rem; }
  .stat-label {
    font-size: .82rem;
    margin-top: 6px;
    line-height: 1.3;
  }
  /* Hero discovery image: smaller and centered, not full-bleed */
  .hero-visual {
    display: flex;
    justify-content: center;
    margin-top: 8px;
  }
  .hero-discovery-img {
    max-width: 360px;
    border-radius: 16px;
  }
  .auto-badge {
    bottom: -16px;
    right: 8px;
    left: auto;
    transform: none;
    padding: 8px 12px;
  }
  .auto-badge-text { font-size: .78rem; }

  /* ---------- Phase C — Features ---------- */
  .features-header { margin-bottom: 40px; }
  .feature-card { padding: 28px 22px; }
  .feature-card h3 {
    font-size: 1.25rem;
    margin-bottom: 12px;
  }
  .feature-card p {
    font-size: 1.02rem;
    line-height: 1.65;
  }
  .feature-icon {
    width: 60px;
    height: 60px;
    font-size: 28px;
    margin-bottom: 18px;
  }
  .feature-badge {
    font-size: .8rem;
    padding: 6px 12px;
  }
  .features-note {
    font-size: 1rem;
    padding: 16px 22px;
    line-height: 1.55;
  }

  /* ---------- How It Works ---------- */
  .how-header { margin-bottom: 40px; }
  .step-item {
    padding: 0 4px;
    gap: 18px;
    align-items: flex-start;
  }
  .step-number {
    width: 64px;
    height: 64px;
    font-size: 1.4rem;
  }
  .step-item h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
  }
  .step-item p {
    font-size: 1.02rem;
    line-height: 1.6;
  }

  /* ---------- Screenshots / Story Globes ---------- */
  .screenshots-header { margin-bottom: 36px; }
  .story-grid {
    grid-template-columns: 1fr;
    gap: 36px;
    max-width: 360px;
  }
  .story-globe {
    width: 170px;
    height: 170px;
  }
  .story-globe .play-icon svg,
  .story-globe .pause-icon svg {
    width: 68px;
    height: 68px;
  }
  .story-loc { font-size: 1.25rem; }
  .story-meta { font-size: .95rem; }
  .story-narr {
    font-size: .95rem;
    max-width: 280px;
    line-height: 1.5;
  }

  /* ---------- B2B ---------- */
  .b2b-inner { margin-top: 32px; gap: 28px; }
  .benefit-item {
    padding: 20px 18px;
    gap: 14px;
  }
  .benefit-check {
    width: 34px;
    height: 34px;
    font-size: 1rem;
  }
  .benefit-content h4 {
    font-size: 1.1rem;
    margin-bottom: 6px;
  }
  .benefit-content p {
    font-size: 1rem;
    line-height: 1.55;
  }
  .b2b-visual { padding: 28px 22px; }
  .b2b-visual h3 { font-size: 1.2rem; }
  .b2b-visual p { font-size: 1rem; }
  .btn-b2b {
    font-size: 1.1rem;
    padding: 18px 28px;
    min-height: 60px;
  }
  .b2b-category-label { font-size: .85rem; }

  /* ---------- Pricing ---------- */
  .pricing-header { margin-bottom: 40px; }
  .pricing-card { padding: 32px 26px; }
  .pricing-plan { font-size: .9rem; }
  .pricing-price {
    font-size: 2.6rem;
  }
  .pricing-price .currency { font-size: 1.4rem; }
  .pricing-price .period { font-size: 1rem; }
  .pricing-desc {
    font-size: 1rem;
    min-height: auto;
    margin-bottom: 22px;
  }
  .pricing-features { gap: 14px; margin-bottom: 26px; }
  .pricing-feature { font-size: 1.02rem; }
  .btn-plan {
    font-size: 1.05rem;
    padding: 16px;
    min-height: 58px;
  }
  .pricing-footnote { font-size: .95rem; }

  /* ---------- Download CTA ---------- */
  .download-cta {
    padding: 64px 20px 72px;
  }
  .download-headline {
    font-size: clamp(2rem, 9vw, 2.6rem);
    margin-bottom: 18px;
  }
  .download-sub {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 32px;
  }
  .btn-primary-lg {
    width: 100%;
    justify-content: center;
    font-size: 1.15rem;
    padding: 18px 28px;
    min-height: 60px;
  }
  .download-beta-note {
    font-size: 1.02rem;
    line-height: 1.6;
  }
  .download-requirements {
    font-size: .92rem;
    line-height: 1.8;
    margin-top: 24px;
  }
  .btn-gplay {
    width: 100%;
    justify-content: center;
    min-height: 62px;
  }
  .btn-gplay-text .small { font-size: .78rem; }

  /* ---------- FAQ ---------- */
  .faq-header { margin-bottom: 36px; }
  .faq-question {
    font-size: 1.1rem;
    padding: 20px;
    line-height: 1.4;
    min-height: 60px;
  }
  .faq-answer {
    font-size: 1.02rem;
    line-height: 1.7;
  }
  .faq-item.open .faq-answer {
    padding: 0 20px 20px;
  }

  /* ---------- Footer ---------- */
  .site-footer { padding: 44px 20px 28px; }
  .footer-main { gap: 32px; margin-bottom: 28px; }
  .footer-brand p { font-size: 1rem; line-height: 1.7; }
  .footer-newsletter label { font-size: .95rem; }
  .newsletter-input {
    font-size: 1rem;
    padding: 12px 16px;
    min-height: 48px;
  }
  .btn-newsletter {
    font-size: 1rem;
    padding: 12px 20px;
    min-height: 48px;
  }
  .footer-links h4 { font-size: .95rem; margin-bottom: 18px; }
  .footer-links ul { gap: 14px; }
  .footer-links ul li a { font-size: 1rem; }
  .footer-social { margin-top: 8px; }
  .social-link {
    width: 46px;
    height: 46px;
    font-size: 1.05rem;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .footer-copyright { font-size: .92rem; }
  .lang-btn {
    font-size: .95rem;
    padding: 8px 12px;
    min-height: 36px;
  }

  /* ---------- Cookie Banner ---------- */
  .cookie-text {
    font-size: .95rem;
    line-height: 1.55;
  }
  .btn-cookie-accept,
  .btn-cookie-decline {
    font-size: .95rem;
    padding: 12px 22px;
    min-height: 48px;
  }

  /* ---------- Modal ---------- */
  .modal-box {
    padding: 28px 24px;
    border-radius: 18px;
  }
  .modal-title { font-size: 1.4rem; }
  .modal-body { font-size: 1.02rem; line-height: 1.7; }
}

/* ---------- Phase E — Tiny phones ---------- */
@media (max-width: 460px) {
  section { padding: 48px 16px; }
  .hero-content { padding: 40px 16px 48px; }
  .site-footer { padding: 44px 16px 24px; }
  .download-cta { padding: 64px 16px 72px; }

  /* Hero badge: keep on multiple lines comfortably */
  .hero-badge {
    font-size: .8rem;
    padding: 9px 14px;
  }

  /* Trust badges still 3-col but tighter */
  .hero-stats { gap: 8px; }
  .stat-number { font-size: 1.1rem; }
  .stat-label { font-size: .72rem; }

  /* Story globes a touch smaller to avoid overflow */
  .story-globe {
    width: 140px;
    height: 140px;
  }
  .story-globe .play-icon svg,
  .story-globe .pause-icon svg {
    width: 56px;
    height: 56px;
  }

  /* Cookie banner buttons stack vertically */
  .cookie-banner {
    flex-direction: column;
    align-items: stretch;
    padding: 14px 16px;
  }
  .cookie-btns {
    width: 100%;
    flex-direction: column;
  }
  .btn-cookie-accept,
  .btn-cookie-decline {
    width: 100%;
    text-align: center;
  }

  /* Newsletter form: stack input + button */
  .newsletter-form {
    flex-direction: column;
    gap: 10px;
  }
  .btn-newsletter { width: 100%; }
}