/* Lacrosse Tracker marketing site — shared styles.
   Static, no JS. Palette follows the app: theme #3b82f6, headings #1e40af. */

:root {
  --blue: #3b82f6;
  --blue-dark: #1e40af;
  --ink: #1f2937;
  --ink-soft: #4b5563;
  --bg: #ffffff;
  --bg-soft: #f3f6fb;
  --card: #ffffff;
  --border: #e5e7eb;
}

@media (prefers-color-scheme: dark) {
  :root {
    --blue: #60a5fa;
    --blue-dark: #93c5fd;
    --ink: #e5e7eb;
    --ink-soft: #9ca3af;
    --bg: #0f172a;
    --bg-soft: #131c31;
    --card: #1e293b;
    --border: #334155;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}

.wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header */
header.site {
  border-bottom: 1px solid var(--border);
}
header.site .wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  padding-bottom: 14px;
}
header.site img { width: 36px; height: 36px; border-radius: 8px; }
/* Brand link wraps icon + wordmark so the whole thing is clickable. */
header.site .name {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration: none;
}
header.site nav { margin-left: auto; display: flex; gap: 18px; }
header.site nav a { color: var(--ink-soft); text-decoration: none; font-size: 0.95rem; }
header.site nav a:hover { color: var(--blue); }

/* Hero */
.hero { text-align: center; padding: 56px 0 40px; }
.hero h1 {
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  line-height: 1.2;
  margin: 0 0 14px;
  color: var(--blue-dark);
}
.hero p.tagline {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0 auto 28px;
}
.cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  font-size: 1rem;
}
.btn.primary { background: var(--blue); color: #fff; }
.btn.primary:hover { filter: brightness(1.1); }
.btn.secondary { border: 1.5px solid var(--blue); color: var(--blue); }
.btn.secondary:hover { background: var(--bg-soft); }
.hero .fineprint { margin-top: 16px; font-size: 0.85rem; color: var(--ink-soft); }

/* Sections */
section { padding: 40px 0; }
section.alt { background: var(--bg-soft); }
section h2 {
  text-align: center;
  color: var(--blue-dark);
  font-size: 1.5rem;
  margin: 0 0 28px;
}

/* Screenshots */
/* The screenshot band holds four 230px phone shots (4×230 + 3×16 = 968px),
   which overflows the default 960px .wrap (920px inside its padding) and
   wraps the 4th to its own row. Widen just this section so all four sit in
   one row on desktop; flex-wrap still stacks them on narrower viewports. */
.wrap.shots-wrap { max-width: 1040px; }
.shots { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
/* Pin each figure to the shot width so a long caption wraps inside it
   instead of stretching that figure wider than its image (which would push
   the row over its budget and wrap the last shot). max-width keeps it
   shrinking on narrow viewports. */
.shots figure { margin: 0; text-align: center; width: 230px; max-width: 100%; }
.shots img {
  width: 230px;
  max-width: 100%;
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.shots figcaption { font-size: 0.85rem; color: var(--ink-soft); margin-top: 8px; }

/* Feature cards */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.feature {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
}
.feature h3 { margin: 0 0 6px; font-size: 1.02rem; color: var(--ink); }
.feature p { margin: 0; font-size: 0.92rem; color: var(--ink-soft); }

/* Get-it cards */
.get-it { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.get-it .card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}
.get-it h3 { margin: 0 0 8px; font-size: 1.05rem; color: var(--blue-dark); }
.get-it p, .get-it ol { font-size: 0.92rem; color: var(--ink-soft); margin: 0 0 10px; }
.get-it ol { padding-left: 20px; }
.get-it a { color: var(--blue); }

/* Prose pages (contact, 404) */
.prose { max-width: 640px; margin: 0 auto; padding: 48px 20px; }
.prose h1 { color: var(--blue-dark); }
.prose h2 { color: var(--blue-dark); font-size: 1.15rem; margin-top: 2em; }
.prose a { color: var(--blue); }
.prose .updated { color: var(--ink-soft); font-size: 0.9em; }
.contact-card {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 24px 0;
}
.contact-card .label { font-size: 0.85rem; color: var(--ink-soft); margin: 0 0 4px; }
.contact-card .value { font-size: 1.1rem; font-weight: 600; margin: 0; }

/* Beta signup form */
.field-label { display: block; font-size: 0.88rem; font-weight: 600; margin: 12px 0 4px; }
.field-label .optional { font-weight: 400; color: var(--ink-soft); }
.contact-card input[type="email"],
.contact-card input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--ink);
  background: var(--card);
}
.contact-card input:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.contact-card button.btn { margin-top: 16px; border: 0; cursor: pointer; font-family: inherit; }
.contact-card button.btn:disabled { opacity: 0.6; cursor: default; }
.form-error { color: #dc2626; font-size: 0.9rem; margin: 10px 0 0; }
@media (prefers-color-scheme: dark) { .form-error { color: #f87171; } }
/* Honeypot — visually removed, still in the DOM for bots. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Footer */
footer.site {
  border-top: 1px solid var(--border);
  padding: 26px 0;
  text-align: center;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
footer.site a { color: var(--blue); text-decoration: none; }
footer.site a:hover { text-decoration: underline; }
footer.site .links { display: flex; gap: 18px; justify-content: center; margin-bottom: 8px; flex-wrap: wrap; }