/* Curbframe — marketing site styling. Self-contained: no external fonts, no scripts, no third-party
   requests of any kind (the site keeps the same privacy posture as the app). Mirrors the IN-APP identity:
   a neutral graphite canvas with a single precise AZURE for interaction. Amber is reserved for the
   "DIGITALLY ALTERED" disclosure marker ONLY — the same semantics as the app's compliance ramp. Display
   type is the native system sans stack (no serif), matching the app's technical, instrument-panel feel. */
:root {
  /* Graphite canvas (matches Frame.swift: canvas #121212, base #16181B, surface #1D2025, surface2 #272B31) */
  --canvas: #121212;
  --base: #16181B;
  --surface: #1D2025;
  --surface-2: #272B31;
  --stroke: #373C44;
  --stroke-strong: #515863;
  /* Azure accent (Frame.swift: accent #3E9BFF, accentText #71B4FF, accentDeep #2D7ADA) — interaction only */
  --azure: #3E9BFF;
  --azure-text: #71B4FF;
  --azure-deep: #2D7ADA;
  /* Amber — the "Altered" disclosure marker ONLY (Frame.swift altered #F5A623). Never an interaction colour. */
  --altered: #F5A623;
  /* Ink on graphite (Frame.swift text ramp: primary #F2F5F8, secondary #A7B0BD, tertiary #6E7783) */
  --text: #F2F5F8;
  --text-2: #A7B0BD;
  --text-3: #6E7783;
  --system-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font: 17px/1.65 var(--system-sans);
}
header.site {
  background: var(--base);
  color: var(--text);
  padding: 2.75rem 1.25rem 2.5rem;
  border-bottom: 1px solid var(--stroke);
}
header.site .inner, main, footer.site .inner { max-width: 42rem; margin: 0 auto; }
header.site a.home {
  color: var(--azure-text);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.02em;
}
header.site h1 {
  font-family: var(--system-sans);
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: -0.01em;
  margin: 0.75rem 0 0.35rem;
  color: var(--text);
}
header.site p.tagline { margin: 0; color: var(--text-2); font-size: 1.02rem; }
/* The disclosure badge — the ONLY amber on the site, mirroring the app's burned-in "DIGITALLY ALTERED" stripe. */
header.site .badge {
  display: inline-block;
  margin-top: 1.4rem;
  background: #101012;
  color: var(--text);
  border-radius: 8px;
  padding: 0.5rem 0.9rem 0.42rem;
  font: 600 0.82rem/1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.06em;
  border-bottom: 4px solid var(--altered);
}
main { padding: 2.25rem 1.25rem 3rem; }
main h2 {
  font-family: var(--system-sans);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  margin: 2.2rem 0 0.6rem;
  color: var(--text);
}
main h2:first-of-type { margin-top: 0.5rem; }
main h3 { font-size: 1.05rem; margin: 1.6rem 0 0.4rem; color: var(--text); }
main a { color: var(--azure-text); }
main strong { color: var(--text); }
main .meta { color: var(--text-2); font-size: 0.95rem; margin-bottom: 1.6rem; }
main .note {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  color: var(--text-2);
  font-size: 0.95rem;
}
main ul, main ol { padding-left: 1.35rem; }
main li { margin: 0.4rem 0; }
main hr { border: none; border-top: 1px solid var(--stroke); margin: 2.2rem 0; }
.pill {
  display: inline-block;
  background: var(--surface-2);
  color: var(--azure-text);
  border: 1px solid var(--stroke);
  border-radius: 999px;
  padding: 0.28rem 0.85rem;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.9rem; margin: 1.4rem 0; padding: 0; list-style: none; }
.cards li {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  margin: 0;
  color: var(--text-2);
}
.cards li b { display: block; margin-bottom: 0.25rem; color: var(--text); }
footer.site {
  background: var(--base);
  color: var(--text-2);
  padding: 1.9rem 1.25rem;
  font-size: 0.92rem;
  border-top: 1px solid var(--stroke);
}
footer.site a { color: var(--azure-text); text-decoration: none; margin-right: 1.1rem; }
footer.site p { margin: 0.9rem 0 0; }

/* 2026-07-30: the page had no App Store link at all — see Lab
   memory/PORTFOLIO-MARKETING-FUNNEL-20260730.md. */
a.appstore { display: inline-block; margin-top: 1rem; padding: 0.75rem 1.35rem; border-radius: 999px;
             background: #3E9BFF; color: #fff; font-weight: 700; text-decoration: none; }
a.appstore:hover { background: #71B4FF; }