/* FieldCast Weather — public site.
   Design tokens are copied from the app's own stylesheet so the two read as one product.
   LIGHT ONLY, deliberately: the logo artwork carries a white border, which reads as a bright
   square when dropped on a dark surface. The app itself still themes; this site does not. */
:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #fbfcfd;
  --text: #16202a;
  --text-2: #5a6672;
  --muted: #6b7681;
  --border: #e7ebef;
  --border-strong: #d6dce2;
  --accent: #1f6feb;
  --accent-soft: #eaf2ff;
  --accent-fg: #ffffff;
  --shadow: 0 1px 2px rgba(16, 32, 48, .04), 0 2px 8px rgba(16, 32, 48, .05);
  --shadow-lg: 0 12px 40px rgba(16, 32, 48, .12);
  --page-bg: #e9edf1;
  --radius: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page-bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
.wrap { max-width: 960px; margin: 0 auto; padding: 0 20px; }

/* --- chrome ------------------------------------------------------------- */
header.site {
  background: var(--surface); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
header.site .wrap { display: flex; align-items: center; gap: 24px; height: 62px; }
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; letter-spacing: -.01em; color: var(--text); text-decoration: none;
  font-size: 16px; white-space: nowrap;
}
.brand .mark {
  /* Square, deliberately: the artwork carries its own shape and a border-radius here clipped its
     corners into a rounded tile. */
  width: 26px; height: 26px; flex: none;
  object-fit: contain;
}
nav.site { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
nav.site a {
  color: var(--text-2); text-decoration: none; font-size: 14px; font-weight: 500;
  padding: 7px 11px; border-radius: 9px;
}
nav.site a:hover { background: var(--surface-2); color: var(--text); }
nav.site a[aria-current='page'] { background: var(--accent-soft); color: var(--accent); }

main { padding: 44px 0 64px; }
footer.site {
  border-top: 1px solid var(--border); background: var(--surface);
  padding: 26px 0; color: var(--muted); font-size: 13px;
}
footer.site .wrap { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
footer.site a { color: var(--muted); }
footer.site .spacer { margin-left: auto; }

/* --- type --------------------------------------------------------------- */
h1 { font-size: clamp(28px, 5vw, 40px); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 14px; }
h2 { font-size: 21px; letter-spacing: -.01em; margin: 40px 0 14px; }
h3 { font-size: 15px; margin: 0 0 5px; letter-spacing: -.005em; }
p { margin: 0 0 14px; color: var(--text-2); }
.lede { font-size: 17px; color: var(--text-2); max-width: 60ch; }
a { color: var(--accent); }
.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 10px;
}

/* --- surfaces ----------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px;
}
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
.grid .card p { margin: 0; font-size: 14px; }

/* --- hero --------------------------------------------------------------- */
.hero { display: grid; grid-template-columns: 1fr 300px; gap: 44px; align-items: center; }
@media (max-width: 760px) { .hero { grid-template-columns: 1fr; gap: 28px; } }

/* --- phone screenshots -------------------------------------------------- */
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 22px; }
figure.shot { margin: 0; }
figure.shot img {
  display: block; width: 100%; height: auto; border-radius: 20px;
  border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); background: var(--surface);
}
figure.shot figcaption { font-size: 13px; color: var(--muted); margin-top: 9px; text-align: center; }
.hero figure.shot img { border-radius: 24px; }

/* --- store badges ------------------------------------------------------- */
/* Apple's and Google's own artwork, unmodified and scaled to the same WIDTH: Apple's badge is the
   squarer of the two (2.99 vs Play's 3.37), so equal widths leave it the taller one, which is what
   Apple's marketing guidelines ask for when another platform's badge shares the layout. 160px puts
   Apple's at 53px tall, above their 40px onscreen minimum, and keeps the pair on one line at 390px. */
.badges { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.badges a { display: block; line-height: 0; }
.badges img { width: 160px; height: auto; }
.fineprint { font-size: 13px; color: var(--muted); margin: 14px 0 0; }

/* --- misc --------------------------------------------------------------- */
.prose { max-width: 68ch; }
.prose h2 { font-size: 18px; margin: 32px 0 10px; }
.prose p, .prose li { font-size: 14.5px; }
.prose ul { padding-left: 20px; margin: 0 0 14px; }
.prose li { margin-bottom: 6px; color: var(--text-2); }
.updated { font-size: 13px; color: var(--muted); }
.note {
  background: var(--accent-soft); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; font-size: 14px; color: var(--text-2);
}
.note strong { color: var(--text); }

/* The hero screenshot is the Current tab in full — a long screen, roughly 1:3.1, because showing
   how much is on it IS the pitch. Left tall on purpose, but capped so it does not run away with
   the page, and the copy sits at the TOP rather than centred against 900px of phone. */
.hero > div { padding-top: 8px; }
.hero-shot { max-width: 300px; justify-self: end; }
@media (max-width: 760px) {
  .hero-shot { max-width: 264px; margin: 0 auto; justify-self: center; }
}