/* Self-hosted Poppins (latin subset). Replaces the Google Fonts request so
   the browser never reaches out to a third party for typography — small
   privacy / GDPR / perf win. WOFF2 files live in src/fonts/. */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/poppins-400.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/poppins-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/poppins-500.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/poppins-600.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/poppins-700.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/poppins-800.woff2") format("woff2");
}

/* Palette + typography lifted from wilma's "predictr" MUI theme (src/index.tsx)
   so the marketing site and the app feel like the same product. */
:root {
  --bg: #202020;
  --bg-elev: #2a2a2a;
  --bg-card: #2a2a2a;
  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.22);
  --text: #f7f7f7;
  --muted: rgba(247, 247, 247, 0.65);
  --accent: #ffc02f;
  --accent-hover: #ffd058;
  --accent-soft: rgba(255, 192, 47, 0.12);
  --error: #c51162;
  --success: #4ade80;
  --radius: 8px;
  --maxw: 1440px;
}

* {
  box-sizing: border-box;
}

/* Skip link — visually hidden until keyboard-focused, then jumps into view
   above the header so screen-reader and keyboard users can bypass the nav.
   Text content lives in src/_data/site.js (site.copy.skipLink). */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--accent);
  color: #1a1a1a;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 6px;
  text-decoration: none;
  z-index: 100;
}
.skip-link:focus,
.skip-link:focus-visible {
  left: 8px;
  outline: 2px solid var(--text);
  outline-offset: 2px;
}
/* The skip target itself shouldn't show a default focus ring just because
   focus landed there programmatically. */
#main-content:focus {
  outline: none;
}

/* Universal keyboard-focus ring on every interactive element. Default
   browser focus is inconsistent across browsers and easy to miss on a dark
   theme; this gives every link / button / form control the same amber ring
   when reached via keyboard, while leaving mouse-clicks untouched. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Form inputs already have a border + padding — keep their existing rule
   (focus inside the box, not outside). */
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 0;
}

/* Respect users who've asked for fewer animations — wipe out the small
   transitions on buttons, cards, and the hamburger. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

html {
  /* Reserve scrollbar space so content doesn't shift / overlap with the
     scrollbar gutter (matters for the sticky header on macOS overlay scrollbars). */
  scrollbar-gutter: stable;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg);
  background-image:
    linear-gradient(
      to bottom,
      rgba(32, 32, 32, 0.2) 0%,
      rgba(32, 32, 32, 0.55) 60%,
      var(--bg) 100%
    ),
    url("/img/welcome-bg.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover, cover;
  background-attachment: fixed;
  color: var(--text);
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

h1,
h2,
h3,
h4 {
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 0.4em;
  color: var(--text);
}
h1 {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
}
h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
}
h3 {
  font-size: 1.2rem;
}

p {
  margin: 0 0 1em;
}

em {
  font-style: italic;
  color: var(--accent);
}

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  background: rgba(32, 32, 32, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  z-index: 50;
}
.nav-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 64px;
  /* Small right buffer (in addition to .container's 24px) so the Sign up
     button never sits flush against the page scrollbar. Brand stays at
     the container's left edge — only the right edge gets the extra inset. */
  padding: 10px 8px 10px 0;
  gap: 16px;
}
/* Actions (Log in + Sign up) sit immediately after .site-nav on desktop, so
   the whole right side reads as one cluster. .site-nav's margin-left:auto
   does the work of pushing them right; no auto-margin needed here. */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Hamburger menu button — hidden on desktop, shown <=720px. */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  width: 40px;
  height: 40px;
  border-radius: 6px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.nav-toggle:hover {
  border-color: var(--accent);
}
.nav-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.nav-toggle.is-open {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 700;
  font-size: 1.1rem;
}
.brand:hover {
  text-decoration: none;
  color: var(--text);
}
.brand-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
}
.brand-name {
  font-style: italic;
  letter-spacing: -0.02em;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  /* Desktop: push the nav cluster (and the actions that follow it) all the
     way to the right, leaving the brand alone on the left. */
  margin-left: auto;
}
.nav-link {
  color: var(--muted);
  padding: 8px 12px;
  border-radius: 6px;
  font-weight: 500;
}
.nav-link:hover {
  color: var(--text);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.04);
}
.nav-link.is-active {
  color: var(--accent);
}
.nav-cta {
  margin-left: 8px;
}

/* Buttons — emulate MUI outlined / contained */
.btn {
  display: inline-block;
  padding: 9px 20px;
  border-radius: var(--radius);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}
.btn-primary {
  background: var(--accent);
  color: #1a1a1a;
  border-color: var(--accent);
}
.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #1a1a1a;
  text-decoration: none;
}
.btn-ghost {
  border-color: var(--accent);
  color: var(--accent);
  background: transparent;
}
.btn-ghost:hover {
  background: var(--accent-soft);
  color: var(--accent);
  text-decoration: none;
}

/* Hero — sits over the body's fixed welcome-bg, no local image of its own */
.hero {
  position: relative;
  padding: 80px 0 56px;
  text-align: center;
}
.hero h1 {
  margin-bottom: 0.3em;
}
.hero h1 em {
  font-style: italic;
  color: var(--accent);
}
.hero .lede {
  font-size: 1.15rem;
  color: var(--text);
  opacity: 0.9;
  max-width: 640px;
  margin: 0 auto 1.5em;
}
.hero .cta-row {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.hero-compact {
  padding: 56px 0 32px;
}

/* Sections */
.section {
  padding: 32px 0;
}
.section-title {
  text-align: center;
  margin-bottom: 4px;
}
.section-lede {
  text-align: center;
  color: var(--muted);
  margin: 0 auto 24px;
  max-width: 640px;
}

/* Card grid */
.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  transition: border-color 0.15s ease;
  display: flex;
  flex-direction: column;
}
.card:hover {
  border-color: var(--border-strong);
}
.card h3 {
  margin-top: 0;
  color: var(--accent);
}
.card p {
  color: var(--muted);
  margin-bottom: 1em;
}
.card .card-cta {
  font-weight: 600;
}
/* Button-style CTAs (e.g. pricing-plan cards) get pushed to the bottom so
   they line up across cards in the same grid row. CSS Grid already stretches
   cards to equal height, so this is the only thing needed for alignment. */
.card > .btn:last-child {
  margin-top: auto;
}

/* Data stores */
.stores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  text-align: center;
}
.stores .store {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 12px;
  font-weight: 500;
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.stores .store img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

/* "Your data source?" — ghosty placeholder tile inviting a request via the
   contact form. Dashed border + muted text until hover, where it picks up
   the accent like an active CTA. */
.stores .store.store-request {
  border: 1px dashed var(--border-strong);
  color: var(--muted);
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    color 0.15s ease;
}
.stores .store.store-request:hover {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}
.stores .store.store-request svg {
  display: block;
}

/* Algorithm icons sitting above the card title */
.card-icon {
  color: var(--accent);
  margin-bottom: 12px;
  display: inline-flex;
}
.card-icon svg {
  display: block;
}

/* Interaction-points diagram — bounded so it doesn't dominate wide screens */
.interaction-diagram {
  display: block;
  width: 100%;
  max-width: 960px;
  height: auto;
  margin: 0 auto;
}

/* Pricing timeline diagram */
.pricing-timeline {
  display: block;
  width: 100%;
  max-width: 880px;
  height: auto;
  margin: 0 auto;
}

/* Featured plan card */
.card.is-featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

/* Plan-card decorations */
.price-line {
  color: var(--text);
  font-size: 1.05rem;
  margin: 4px 0 16px;
}
.price-line strong {
  color: var(--accent);
}
.plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.plan-features li {
  padding: 6px 0;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.plan-features li::before {
  content: "✓ ";
  color: var(--accent);
  font-weight: 700;
  margin-right: 6px;
}

/* Dark-mode <select> styling for the contact form */
.contact-form select {
  width: 100%;
  padding: 11px 12px;
  padding-right: 36px;
  background-color: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 1rem;
  margin-bottom: 16px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffc02f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.contact-form select:focus {
  outline: none;
  border-color: var(--accent);
}
.contact-form select option {
  background-color: var(--bg-elev);
  color: var(--text);
}

/* Contact */
.contact-grid {
  display: grid;
  gap: 48px;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}
@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

.contact-intro h1 {
  margin-top: 0;
}
.contact-intro ul {
  padding-left: 1.2em;
  color: var(--muted);
}
.contact-intro li {
  padding: 4px 0;
}

.contact-form {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
}
.contact-form label {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 6px;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 11px 12px;
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 1rem;
  margin-bottom: 16px;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.contact-form textarea {
  min-height: 140px;
  resize: vertical;
}
.contact-form .botcheck {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.contact-form .submit-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
}
.form-msg {
  margin-top: 16px;
  padding: 12px;
  border-radius: 6px;
  display: none;
}
.form-msg.is-ok {
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid var(--success);
  color: var(--success);
  display: block;
}
.form-msg.is-err {
  background: rgba(197, 17, 98, 0.1);
  border: 1px solid var(--error);
  color: #ff5e9c;
  display: block;
}

/* Long-form prose pages (privacy/terms/cookies) */
.prose {
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 24px;
}
.prose h1 {
  margin-bottom: 0.5em;
}
.prose h2 {
  color: var(--accent);
  margin-top: 1.5em;
}
.prose h3 {
  color: var(--text);
}
.prose p,
.prose li {
  color: var(--muted);
}
.prose strong {
  color: var(--text);
}

/* Small inline note (e.g. CI/CD ribbon at bottom of technology page) */
.note-strip {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-top: 24px;
  color: var(--muted);
}
.note-strip h3 {
  color: var(--text);
  margin: 0 0 8px;
  font-size: 1rem;
}

/* Footer — in-flow by default (scrolls with the page) so it doesn't eat
   precious vertical space on short / narrow viewports. */
.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 32px;
  padding: 20px 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* On bigger viewports (wide AND tall enough to spare the room) pin it to
   the bottom of the screen with the same translucent-blur treatment as
   the header. Both axes need to qualify — that excludes phones in either
   orientation and short laptop windows. */
@media (min-width: 720px) and (min-height: 700px) {
  body {
    padding-bottom: 72px;
  }
  .site-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin-top: 0;
    padding: 14px 0;
    font-size: 0.85rem;
    background: rgba(32, 32, 32, 0.85);
    backdrop-filter: blur(10px);
    z-index: 50;
  }
}
.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.footer-brand img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  opacity: 0.7;
}
.footer-nav {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-nav a {
  color: var(--muted);
}
.footer-nav a:hover {
  color: var(--text);
}

/* Compact-mode header — applied by JS to .nav-row whenever the natural
   layout would wrap onto a second row (not a fixed pixel breakpoint).
   Triggers the hamburger and stacks the four site-nav links into a
   collapsed column under the brand row. See base.njk for the trigger. */
.nav-row.is-compact {
  min-height: 56px;
  padding: 8px 8px 8px 0;
  gap: 8px;
}
.nav-row.is-compact .brand-logo {
  width: 32px;
  height: 32px;
}
.nav-row.is-compact .nav-toggle {
  display: inline-flex;
}
.nav-row.is-compact .site-nav {
  display: none;
  order: 99;
  flex-basis: 100%;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin-top: 8px;
  margin-left: 0;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}
.nav-row.is-compact .nav-actions {
  margin-left: auto;
}
.nav-row.is-compact .site-nav.is-open {
  display: flex;
}
.nav-row.is-compact .site-nav .nav-link {
  padding: 12px 8px;
  font-size: 1rem;
  border-bottom: 1px solid var(--border);
}
.nav-row.is-compact .site-nav .nav-link:last-child {
  border-bottom: none;
}
.nav-row.is-compact .nav-actions .nav-login {
  padding: 4px 8px;
  font-size: 0.9rem;
}
.nav-row.is-compact .nav-cta {
  padding: 7px 14px;
  font-size: 0.9rem;
}

/* Really narrow: drop the brand wordmark so the row-1 trio (logo + Log in +
   Sign up + hamburger) doesn't crowd. */
@media (max-width: 420px) {
  .brand-name {
    display: none;
  }
  .nav-actions .nav-login {
    /* hide Log in too at the tightest widths — it lives in the hamburger menu */
    display: none;
  }
}