/* =========================================================================
   LaunchWired marketing site — page-level styles + responsive layout.
   Loaded AFTER colors_and_type.css and website.css. Holds the bits that were
   inline <style> in the design prototype, plus the responsive grid utilities
   the prototype lacked (it was authored at a single desktop width).
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; }

/* Anchor offset so section tops aren't hidden under intent of fixed-ish nav */
[id] { scroll-margin-top: 24px; }

/* ---- Inlined link styles from the prototype ---------------------------- */
.lw-link { color: rgba(255,255,255,0.92); text-decoration: none; transition: color 160ms var(--ease-out); }
.lw-link:hover { color: #fff; }
.lw-foot-link { color: rgba(255,255,255,0.62); text-decoration: none; transition: color 160ms var(--ease-out); }
.lw-foot-link:hover { color: #fff; }
.lw-card-built { transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }
.lw-card-built:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,0.3); }

/* ---- Inline SVG icon helper (vendored lucide paths via <use>) ----------- */
.ic { display: inline-block; vertical-align: middle; flex: 0 0 auto; }
.ic > use { stroke: currentColor; }

/* ---- Responsive grid utilities (desktop values match the design) ------- */
.hero-grid    { display: grid; grid-template-columns: 1fr 1.04fr; gap: 56px; align-items: start; padding-top: 30px; }
.two-col      { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.grid-3       { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4       { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.presets-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.cta-grid     { display: grid; grid-template-columns: 1.25fr 1fr; gap: 48px; align-items: center; }
.footer-grid  { display: grid; grid-template-columns: 1.5fr repeat(5, 1fr); gap: 32px; }

/* Fluid hero headline so it never overflows narrow viewports */
.h-hero { font-size: clamp(34px, 6vw, 58px); line-height: 0.98; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 24px; }

/* ---- Breakpoints ------------------------------------------------------- */
@media (max-width: 1000px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .two-col { grid-template-columns: 1fr; gap: 32px; }
  .grid-3 { grid-template-columns: 1fr; }
  .cta-grid { grid-template-columns: 1fr; gap: 28px; }
  .presets-grid { grid-template-columns: 1fr; gap: 28px; }
  /* The prototype draws divider rules with left borders; drop them when stacked */
  .presets-grid > * { border-left: none !important; padding-left: 0 !important; padding-right: 0 !important; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  /* Center the nav contents on small screens */
  .site-nav { flex-wrap: wrap; justify-content: center; row-gap: 14px; }
  .site-nav__center { order: 3; flex-basis: 100%; }
}

@media (max-width: 560px) {
  .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .section-pad { padding-left: 20px; padding-right: 20px; }
  .nav-cta-label { display: none; } /* hide secondary "Log In" text label if cramped */
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}