/* Responsive adjustments for tablet and desktop viewports */

@media (min-width: 768px) {
  /* Hero refinements */
  .hero {
    min-height: calc(100vh - var(--header-height) + var(--space-2xl));
  }
  
  .hero-lede {
    font-size: var(--text-xl);
  }
  
  /* Feature cards larger touch targets */
  .feature-card {
    padding: var(--space-2xl);
  }
  
  /* Download CTA breathing room */
  .download-lede {
    font-size: var(--text-xl);
  }
  
  /* About section better balance */
  .about-copy p {
    font-size: var(--text-lg);
  }
}

@media (min-width: 1024px) {
  /* Hero full side-by-side */
  .hero-inner {
    min-height: 600px;
  }
  
  /* Features 3-column grid locks in */
  .feature-grid {
    gap: var(--space-xl);
  }
  
  /* Download CTA more dramatic */
  .download {
    padding-top: var(--space-4xl);
    padding-bottom: var(--space-4xl);
  }
}

@media (min-width: 1280px) {
  /* Wrap gets more breathing room at large screens */
  .wrap {
    padding-left: var(--space-3xl);
    padding-right: var(--space-3xl);
  }
  
  /* Hero art can grow */
  .portal {
    max-width: 720px;
  }
}

/* High-resolution display optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .brand-mark,
  .footer-mark,
  .about-mark,
  .crest,
  .sticky-cta-mark {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Print styles */
@media print {
  .site-header,
  .sticky-cta,
  .hero-motes,
  .store-buttons {
    display: none;
  }
  
  body {
    background: white;
    color: black;
  }
  
  .section {
    page-break-inside: avoid;
  }
  
  a {
    text-decoration: underline;
    color: black;
  }
  
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }
}