/* responsive.css — responsive adjustments */

/* Ultra small mobile — stack hero vertically */
@media (max-width: 379px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .phone-hero { max-width: 240px; margin: 0 auto; transform: scale(1); }
}

/* Small mobile */
@media (max-width: 479px) {
  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  .hero h1 { font-size: clamp(2.2rem, 9vw, 3rem); }
  .section { padding-block: var(--space-6); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .cta-block { padding: var(--space-6); }
  .device-frame { width: 240px; }
  .status-bar { gap: var(--space-3); }
  .status-bar .status-item .label { display: none; }

  /* Container side spacing */
  .container { padding-inline: var(--space-3); }

  /* Hero */
  .shopify-hero { padding-top: calc(var(--header-h) + var(--space-1)); padding-bottom: var(--space-4); }
  .shopify-hero h1 { font-size: clamp(1.5rem, 5.5vw, 2.2rem); }
  .shopify-hero .subtext { font-size: var(--text-xs); margin-top: var(--space-2); line-height: 1.45; }
  .shopify-hero .hero-ctas { gap: var(--space-2); margin-top: var(--space-3); flex-direction: column; }
  .shopify-hero .hero-ctas .btn { font-size: var(--text-xs); padding: 0.6rem 1rem; width: 100%; justify-content: center; }
  .hero-grid { grid-template-columns: 1.3fr 1fr; gap: var(--space-3); align-items: center; }

  /* Phone hero — bigger on mobile, to the side */
  .phone-hero { max-width: 100%; margin: 0; transform: scale(1); transform-origin: center; }
  .phone-hero-badge { display: none; }

  /* Trust strip */
  .trust-marquee-track { gap: var(--space-5); }
  .trust-logo { font-size: var(--text-sm); }

  /* Feature splits — image as background on mobile */
  .feature-split { grid-template-columns: 1fr; gap: 0; position: relative; }
  .feature-split.reverse .feature-split-content,
  .feature-split.reverse .feature-split-visual { order: unset; }
  .feature-split-visual {
    position: absolute; inset: 0; z-index: 0;
    border-radius: 0; min-height: auto; height: 100%;
    display: block;
  }
  .feature-split-visual img {
    width: 100%; height: 100%; object-fit: cover;
    border-radius: 0; opacity: 0.18;
  }
  .feature-split-content {
    position: relative; z-index: 1;
    padding: var(--space-4); border-radius: var(--radius-md);
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .feature-split-content h2 { font-size: clamp(1.4rem, 5vw, 2rem); margin-bottom: var(--space-3); }
  .feature-split-content > p { font-size: var(--text-sm); margin-bottom: var(--space-4); line-height: 1.55; }
  .feature-split-list { gap: var(--space-2); margin-bottom: var(--space-4); }
  .feature-split-list li { font-size: var(--text-sm); line-height: 1.45; gap: var(--space-2); }
  .feature-split-list li::before { width: 18px; height: 18px; margin-top: 1px; }
  .feature-split-ctas { gap: var(--space-2); }
  .feature-split-ctas .btn { font-size: var(--text-sm); padding: 0.6rem 1.1rem; flex: 1 1 auto; justify-content: center; }

  /* Stats band — single row on mobile */
  .stats-band { grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
  .stat-item { padding: var(--space-2); }
  .stat-num { font-size: var(--text-lg); }
  .stat-label { font-size: 9px; }

  /* Use case tabs */
  .usecase-tab-list { gap: var(--space-1); padding-bottom: 2px; }
  .usecase-tab { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }
  .uc-info-model { font-size: var(--text-base); }
  .uc-info-builder { font-size: var(--text-sm); margin-top: var(--space-1); }
  .uc-info-builds { font-size: var(--text-sm); margin-top: var(--space-2); }
  .uc-metric-chip { font-size: var(--text-xs); padding: 4px 10px; }
  .usecase-tab-phone { display: none; }
  .usecase-tabs { gap: var(--space-4); }

  /* Why cards */
  .why-grid { gap: var(--space-4); }
  .why-card { padding: var(--space-4); }
  .why-card .why-img { aspect-ratio: 16 / 9; }
  .why-card h3 { font-size: var(--text-base); }
  .why-card p { font-size: var(--text-xs); line-height: 1.5; }

  /* Testimonials */
  .testimonial-card { padding: var(--space-4); }
  .testimonial-card .tc-quote { font-size: var(--text-sm); margin-bottom: var(--space-3); }
  .testimonial-card .tc-avatar { width: 36px; height: 36px; font-size: var(--text-xs); }

  /* Proof flow — keep horizontal like desktop */
  .proof-flow { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: var(--space-2); padding-bottom: var(--space-2); }
  .flow-arrow { display: flex; }
  .flow-step { min-width: 120px; flex: 1 1 0; padding: var(--space-2); }
  .flow-step .flow-num { width: 24px; height: 24px; font-size: var(--text-xs); margin-bottom: var(--space-1); }
  .flow-step .flow-title { font-size: var(--text-xs); }
  .flow-step .flow-desc { font-size: 10px; line-height: 1.3; }
  .flow-step .flow-status { font-size: 9px; margin-top: var(--space-1); }

  /* CTA block */
  .cta-block { padding: var(--space-5); border-radius: var(--radius-lg); }
  .cta-content h2 { font-size: var(--text-xl); }
  .cta-content p { font-size: var(--text-sm); }

  /* Section headings */
  .section-heading { margin-bottom: var(--space-4); }
  .section-heading h2 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
  .section-heading p { font-size: var(--text-sm); }

  /* Buttons */
  .btn { font-size: var(--text-sm); padding: 0.65rem 1.1rem; }
  .btn-primary, .btn-secondary { width: 100%; justify-content: center; }
}

/* Tablet */
@media (min-width: 480px) and (max-width: 767px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }

  /* Container side spacing */
  .container { padding-inline: var(--space-4); }

  /* Hero — keep side by side */
  .hero-grid { grid-template-columns: 1.2fr 1fr; gap: var(--space-4); align-items: center; }

  /* Hero */
  .shopify-hero h1 { font-size: clamp(2rem, 6vw, 3rem); }
  .shopify-hero .subtext { font-size: var(--text-base); }
  .shopify-hero .hero-ctas .btn { font-size: var(--text-sm); padding: 0.75rem 1.3rem; }

  /* Phone hero */
  .phone-hero { max-width: 100%; margin: 0; }
  .phone-hero-badge { display: none; }

  /* Feature splits — image as background on tablet too */
  .feature-split { grid-template-columns: 1fr; gap: 0; position: relative; }
  .feature-split-visual {
    position: absolute; inset: 0; z-index: 0;
    border-radius: 0; height: 100%;
  }
  .feature-split-visual img {
    width: 100%; height: 100%; object-fit: cover;
    border-radius: 0; opacity: 0.2;
  }
  .feature-split-content {
    position: relative; z-index: 1;
    padding: var(--space-5); border-radius: var(--radius-md);
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .feature-split-content h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); }
  .feature-split-ctas .btn { flex: 0 0 auto; }

  /* Use case tabs */
  .usecase-tab-phone { display: none; }

  /* Why cards */
  .why-grid { grid-template-columns: 1fr; gap: var(--space-4); }

  /* Proof flow — horizontal like desktop */
  .proof-flow { flex-wrap: nowrap; overflow-x: auto; }
  .flow-step { flex: 1 1 0; min-width: 130px; }
  .flow-arrow { display: flex; }
}

/* Desktop */
@media (min-width: 768px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Medium desktop — ensure side spacing */
@media (min-width: 768px) and (max-width: 1279px) {
  .container { padding-inline: var(--space-5); }
  .section { padding-block: var(--space-7); }
}

/* Large desktop */
@media (min-width: 1280px) {
  .container { padding-inline: var(--space-5); }
}

/* Cockpit responsive */
@media (max-width: 1023px) {
  .cockpit-shell { grid-template-columns: 1fr; }
  .venture-rail, .context-panel { display: none; }
  .chat-spine { display: none; }
}

/* Print */
@media print {
  .bottom-dock, .site-header, .menu-toggle { display: none; }
}