/* Zeroly web styles.
   Tokens mirror Packages/DesignSystem (docs/design-direction.md). Kept as literal values rather
   than generated, because the web pages ship on a different cadence from the app and a build step
   between here and `firebase deploy` would be more machinery than four static pages deserve.
   If a brand colour changes in the app, change it here in the same commit. */

:root {
  color-scheme: light dark;

  --brand-primary: #4F46E5;
  --brand-fill: #4F46E5;
  --brand-subtle: #EEF2FF;
  --text-primary: #111827;
  --text-secondary: #636366;
  --bg-canvas: #FFFFFF;
  --bg-surface: #F7F7FA;
  --separator: #E5E5EA;

  --font-display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand-primary: #818CF8;
    --brand-fill: #5E5CE6;
    --brand-subtle: #26264F;
    --text-primary: #F2F2F7;
    --text-secondary: #8E8E93;
    --bg-canvas: #000000;
    --bg-surface: #1C1C1E;
    --separator: #38383A;
  }
}

/* Bundled rather than fetched from a font CDN: the Content-Security-Policy in backend/firebase.json
   is `font-src 'self'`, and widening it to admit Google Fonts would trade a tighter policy for a
   typeface. Manrope is OFL — see assets/OFL-Manrope.txt. */
@font-face {
  font-family: "Manrope";
  src: url("/assets/Manrope-Variable.ttf") format("truetype-variations");
  font-weight: 200 800;
  font-display: swap;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

.wrap {
  max-width: 45rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 5rem;
}

header.site {
  border-bottom: 1px solid var(--separator);
  background: var(--bg-canvas);
}
header.site .wrap { padding: 1.25rem; display: flex; align-items: center; gap: 1.5rem; }
header.site nav { margin-left: auto; display: flex; gap: 1.75rem; }
/* Not --text-secondary: at 15px that measured 4.47:1 on the rendered pixels, under the 4.5 floor,
   even though the token computes at 6.0:1. Anti-aliasing lightens small text. Measured 17.74:1 here. */
header.site nav a { color: var(--text-primary); font-weight: 500; font-size: 0.9375rem; text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center; }
header.site nav a:hover { text-decoration: underline; }

.mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  text-decoration: none;
}
.mark span { color: var(--brand-primary); }

h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 6vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 1.5rem 0 0.5rem;
}

h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: -0.015em;
  margin: 2.5rem 0 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--separator);
}

h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; margin: 1.75rem 0 0.5rem; }

.updated { color: var(--text-secondary); font-size: 0.9375rem; margin: 0 0 2rem; }

.lede { font-size: 1.125rem; color: var(--text-secondary); margin: 0 0 2rem; }

a { color: var(--brand-primary); text-underline-offset: 0.15em; }

/* Every tappable target at least 44px tall, as in the app. */
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 2rem 0; }
.btn {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 1.25rem; border-radius: 12px;
  font-weight: 600; text-decoration: none;
  background: var(--brand-fill); color: #FFFFFF;
}
.btn.secondary { background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--separator); }

.card {
  background: var(--brand-subtle);
  border-color: transparent;
  border: 1px solid var(--separator);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
}
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: 0.9375rem; }
th, td { text-align: left; padding: 0.625rem 0.5rem; border-bottom: 1px solid var(--separator); vertical-align: top; }
th { font-weight: 600; }
.scroll { overflow-x: auto; }

ul { padding-left: 1.25rem; }
li { margin: 0.375rem 0; }

.toc { background: var(--bg-surface); border: 1px solid var(--separator); border-radius: 16px; padding: 1rem 1.5rem; margin: 2rem 0; }
.toc ol { padding-left: 1.25rem; margin: 0.5rem 0; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

footer.site {
  border-top: 1px solid var(--separator);
  color: var(--text-secondary);
  font-size: 0.9375rem;
}
footer.site .wrap { padding: 2rem 1.25rem; }
footer.site nav { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: 0.5rem; }
footer.site nav a { min-height: 44px; display: inline-flex; align-items: center; }
.mark { min-height: 44px; display: inline-flex; align-items: center; }

@media (prefers-reduced-motion: no-preference) {
  a, .btn { transition: opacity 0.15s ease; }
}
.btn:hover { opacity: 0.9; }

/* ---- Landing page ---------------------------------------------------------- */
.hero { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 5rem; align-items: center; padding: 4.5rem 0; }
.eyebrow { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; color: var(--brand-primary); margin: 0 0 1rem; }
h1.display { font-size: clamp(2.75rem, 8vw, 4.5rem); line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 1.25rem; }
.hero p { font-size: 1.25rem; line-height: 1.55; color: var(--text-secondary); margin: 0 0 1.75rem; max-width: 32rem; }

/* A real screen sells the product better than a grey rectangle. */
.phone { border: 1px solid var(--separator); border-radius: 28px; background: var(--bg-surface); padding: 3.5rem 1.25rem 1.25rem; }
.phone h2 { font-family: var(--font-display); font-size: 2rem; margin: 0 0 1.25rem; border: 0; padding: 0; }
.phone .row { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 0; }
.phone .row div { flex: 1; }
.phone .name { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; }
.phone .cap { font-size: 0.8125rem; color: var(--text-secondary); }
.phone .amt { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; }
.pos { color: #1B7A3E; } .neg { color: #C2410C; } .zero { color: var(--text-secondary); }
@media (prefers-color-scheme: dark) { .pos { color: #4ADE80; } .neg { color: #FB923C; } }

.band { background: var(--bg-surface); }
.band .wrap { padding-top: 4rem; padding-bottom: 4rem; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.25rem; margin-top: 2rem; }
.feature { background: var(--bg-canvas); border: 1px solid var(--separator); border-radius: 20px; padding: 1.5rem; }
.feature .ico { width: 44px; height: 44px; border-radius: 12px; background: var(--brand-subtle); display: grid; place-items: center; margin-bottom: 0.75rem; }
.feature h3 { margin: 0 0 0.375rem; font-size: 1.25rem; }
.feature p { margin: 0; font-size: 1rem; color: var(--text-secondary); }

@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; gap: 2.5rem; padding: 2.5rem 0; }
  .phone { max-width: 320px; }
}