/* marketing/styles.css — getflis.com and getflis.com/privacy.
 *
 * ── WHY THIS IS HAND-WRITTEN CSS AND NOT THE APP'S BUNDLE ─────────────────
 * These two pages load no JavaScript, no Firebase SDK and no app shell. A
 * marketing page that depends on the application bundle is a marketing page
 * that goes down when the application does, and a privacy policy is the one
 * page that must be readable by somebody who cannot sign in — Google's
 * verification reviewers, among others, read it while signed out.
 *
 * The palette is the product's, copied from tailwind.config.js so the pages
 * read as the same software. It is COPIED rather than imported on purpose:
 * importing would mean building this against the app's toolchain, which is the
 * dependency the paragraph above exists to avoid. Values, for the next person
 * who changes one:
 *
 *   --shell   #000b29   flis-surface-shell   the page substrate
 *   --rail    #0a1128   flis-surface-rail    cards and support surfaces
 *   --active  #0f1a3a   flis-surface-active  a raised surface
 *   --edge    #1e293b   flis-edge-subtle
 *   --edge-2  #334155   flis-edge-medium
 *   --accent  #60a5fa   brand-accent
 *   --cyan    #22d3ee   flis-accent-cyan
 *   --gold    #c9a961   flis-gold
 */

:root {
  --shell: #000b29;
  --rail: #0a1128;
  --active: #0f1a3a;
  --edge: #1e293b;
  --edge-2: #334155;
  --accent: #60a5fa;
  --cyan: #22d3ee;
  --gold: #c9a961;

  --ink: #e8edf7;
  --ink-dim: #a9b4cc;
  --ink-faint: #7c88a3;

  --measure: 68ch;
  --pad: clamp(20px, 5vw, 48px);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--shell);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (max-width: 560px) {
  body { font-size: 16px; line-height: 1.6; }
}

/* ── shell ──────────────────────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  padding-inline: var(--pad);
}

.masthead {
  border-bottom: 1px solid var(--edge);
  background: rgba(0, 11, 41, 0.92);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: saturate(140%) blur(8px);
}

.masthead .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 16px;
}

.wordmark {
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.14em;
  color: var(--ink);
  text-decoration: none;
}
.wordmark::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--cyan);
  vertical-align: 3px;
}

.masthead nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 26px);
  font-size: 14.5px;
}

/* ── links ──────────────────────────────────────────────────────────────── */

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: #93c5fd; }

.nav-link {
  color: var(--ink-dim);
  text-decoration: none;
}
.nav-link:hover { color: var(--ink); }

.cta {
  display: inline-block;
  padding: 11px 20px;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: rgba(96, 165, 250, 0.12);
  color: #cfe1fd;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;
  transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.cta:hover {
  background: rgba(96, 165, 250, 0.2);
  border-color: #93c5fd;
  color: #e4efff;
}
.cta-sm { padding: 8px 15px; font-size: 14px; }

a:focus-visible, .cta:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── hero ───────────────────────────────────────────────────────────────── */

.hero { padding-block: clamp(56px, 11vw, 108px) clamp(40px, 8vw, 76px); }

.hero h1 {
  margin: 0;
  max-width: 21ch;
  font-size: clamp(31px, 5.6vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.022em;
  font-weight: 700;
}

.hero .lede {
  margin: clamp(20px, 3vw, 28px) 0 0;
  max-width: 58ch;
  font-size: clamp(17px, 2.1vw, 20px);
  line-height: 1.55;
  color: var(--ink-dim);
}

.hero-actions {
  margin-top: clamp(28px, 4vw, 38px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
}

.invite-note {
  font-size: 14.5px;
  color: var(--ink-faint);
}

/* ── sections ───────────────────────────────────────────────────────────── */

section { padding-block: clamp(36px, 6vw, 60px); }

.rule { border: 0; border-top: 1px solid var(--edge); margin: 0; }

.eyebrow {
  margin: 0 0 clamp(22px, 3vw, 32px);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Four cards. auto-fit gave three across and one orphaned underneath at the
 * page's max width; two columns reads as 2x2, which is what four of anything
 * wants. One column below 760px. */
.cards {
  display: grid;
  gap: clamp(14px, 2vw, 20px);
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .cards { grid-template-columns: 1fr 1fr; }
}

.card {
  background: var(--rail);
  border: 1px solid var(--edge);
  border-radius: 12px;
  padding: clamp(20px, 2.6vw, 27px);
}

.card h3 {
  margin: 0 0 10px;
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.card p {
  margin: 0;
  color: var(--ink-dim);
  font-size: 15.5px;
  line-height: 1.62;
}

.prose-block {
  max-width: var(--measure);
}
.prose-block h2 {
  margin: 0 0 14px;
  font-size: clamp(22px, 3.2vw, 28px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 700;
}
.prose-block p {
  margin: 0;
  color: var(--ink-dim);
  font-size: clamp(16px, 2vw, 17.5px);
}

/* The one pull-quote panel on the homepage. */
.panel {
  background: var(--active);
  border: 1px solid var(--edge-2);
  border-left: 3px solid var(--gold);
  border-radius: 12px;
  padding: clamp(22px, 3vw, 32px);
  max-width: var(--measure);
}
.panel h2 { margin: 0 0 12px; font-size: clamp(20px, 2.8vw, 25px); font-weight: 700; letter-spacing: -0.014em; }
.panel p { margin: 0; color: var(--ink-dim); }

/* ── footer ─────────────────────────────────────────────────────────────── */

footer {
  border-top: 1px solid var(--edge);
  margin-top: clamp(40px, 7vw, 72px);
  padding-block: clamp(30px, 5vw, 44px);
  color: var(--ink-faint);
  font-size: 14.5px;
}
footer .wrap > * + * { margin-top: 10px; }
footer .links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
}
footer a { color: var(--ink-dim); text-decoration: none; }
footer a:hover { color: var(--ink); text-decoration: underline; }
.sep { color: var(--edge-2); }

/* ── the policy document ────────────────────────────────────────────────── */

.doc {
  max-width: var(--measure);
  padding-block: clamp(40px, 7vw, 68px) 0;
}

.doc h1 {
  margin: 0;
  font-size: clamp(29px, 4.6vw, 42px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.doc .docmeta {
  margin: 14px 0 0;
  color: var(--ink-faint);
  font-size: 14.5px;
}

.doc .intro {
  margin-top: clamp(24px, 3vw, 32px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--edge);
}

.doc h2 {
  margin: clamp(38px, 5vw, 54px) 0 14px;
  font-size: clamp(19px, 2.5vw, 23px);
  line-height: 1.3;
  letter-spacing: -0.012em;
  font-weight: 600;
  color: var(--ink);
  scroll-margin-top: 84px;
}

.doc h3 {
  margin: 26px 0 8px;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--ink);
}

.doc p { margin: 0 0 16px; color: var(--ink-dim); }
.doc p:last-child { margin-bottom: 0; }

.doc ul { margin: 0 0 16px; padding-left: 22px; color: var(--ink-dim); }
.doc li { margin-bottom: 9px; }
.doc li:last-child { margin-bottom: 0; }

.doc strong { color: var(--ink); font-weight: 600; }

.doc address {
  font-style: normal;
  color: var(--ink-dim);
  line-height: 1.75;
}

/* A statement the reader should not skim past. */
.doc .assert {
  background: var(--rail);
  border: 1px solid var(--edge);
  border-left: 3px solid var(--cyan);
  border-radius: 10px;
  padding: clamp(16px, 2.2vw, 22px);
  margin: 0 0 16px;
}
.doc .assert p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; }
}