/* The marketing site. Colour comes from tokens.css — a byte-for-byte copy of
   app/src/styles/tokens.css, kept identical by a test — so the page and the
   installed app read as one product. The editorial serif headline is Brian's
   direction from the original page.

   System fonts only. A page whose argument is privacy should not phone home to a
   font CDN on first paint. */

:root {
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: var(--font);
  --max: 1120px;
  --line: rgb(225 245 238 / 0.08);
  --muted: #9a9890;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
}

a { color: inherit; }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px;
}

/* --- nav ----------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgb(12 22 20 / 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  gap: 16px;
}
.brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  text-decoration: none;
  font-family: var(--serif);
  font-size: 20px;
}
.brand small {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted);
}
.nav nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 14px;
}
.nav nav a { text-decoration: none; color: var(--text-dim); }
.nav nav a:hover { color: var(--text); }
.nav .links { display: none; }
@media (min-width: 760px) { .nav .links { display: flex; gap: 22px; } }

/* --- buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  font-size: 15px;
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn.primary { background: var(--accent); color: var(--accent-deep); }
.btn.primary:hover { background: var(--mine-200); }
.btn.ghost { border-color: var(--accent-edge); color: var(--accent-soft); }
.btn.small { padding: 8px 16px; font-size: 14px; }

/* --- type ---------------------------------------------------------------- */

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin: 0 0 18px;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.08; margin: 0; }
/* Balanced wrapping: a big serif headline that leaves one word alone on its
   last line reads as a mistake. */
h1, h2 { text-wrap: balance; }
h1 { font-size: clamp(44px, 8vw, 84px); letter-spacing: -0.01em; }
h2 { font-size: clamp(32px, 5vw, 52px); margin-bottom: 18px; }
h3 { font-size: 24px; margin-bottom: 10px; }
.lede { font-size: 18px; color: var(--text-dim); max-width: 38rem; }
.muted { color: var(--muted); }

section { padding: 88px 0; border-top: 1px solid var(--line); scroll-margin-top: 60px; }
section:first-of-type { border-top: 0; }

/* --- hero ---------------------------------------------------------------- */

.hero { padding: 72px 0 88px; }
.hero .wrap { display: grid; gap: 56px; align-items: center; }
@media (min-width: 900px) { .hero .wrap { grid-template-columns: 1.15fr 0.85fr; } }
.hero h1 { margin-bottom: 26px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 38px; }
.pillars { display: grid; gap: 22px; grid-template-columns: 1fr 1fr; max-width: 36rem; }
.pillars b {
  display: block;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--accent-soft);
  font-weight: 500;
  margin-bottom: 4px;
}
.pillars span { font-size: 14px; color: var(--text-dim); }

/* the phone */
.phone {
  justify-self: center;
  width: 300px;
  max-width: 100%;
  border-radius: 44px;
  border: 1px solid rgb(225 245 238 / 0.14);
  background: #10100f;
  padding: 18px 16px 26px;
}
.phone .notch { width: 96px; height: 22px; border-radius: 14px; background: #000; margin: 0 auto 26px; }
.phone .clock { text-align: center; font-size: 13px; color: var(--muted); margin-bottom: 22px; }
.toast {
  background: #1b1b19;
  border-radius: 16px;
  padding: 12px 14px;
  font-size: 13px;
  margin-bottom: 14px;
}
.toast b { font-weight: 500; }
.toast .meta { color: var(--muted); font-size: 12px; }
.card {
  background: var(--panel);
  border: 1px solid var(--accent-edge);
  border-radius: 18px;
  padding: 16px;
}
.card .label { font-size: 11px; letter-spacing: 0.1em; color: var(--accent-soft); margin-bottom: 10px; }
.card .who { font-family: var(--serif); font-size: 22px; }
.card .role { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.card dl { margin: 0; display: grid; gap: 8px; font-size: 13px; }
.card dt { color: var(--muted); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.card dd { margin: 0; }
.card .note { margin-top: 12px; font-size: 13px; color: var(--text-dim); font-style: italic; }

/* --- problem ------------------------------------------------------------- */

/* The intent chart. A schematic — no measured values — so it carries no hover
   tooltip: showing numbers on an illustration would invent data.

   Colours validated with the dataviz skill's validator against the dark field
   (#0c1614): --accent (#1d9e75) passes the lightness band, chroma floor and 3:1
   contrast; the lighter #5dcaa5 failed the band. The grey line is a recessive
   context line rather than a second category, so it is grey on purpose and
   dashed, which keeps it distinguishable without colour.

   Text lives in HTML, not in the SVG: SVG text scales with the viewBox and would
   be unreadable at phone width. Strokes use non-scaling-stroke for the same
   reason, so lines stay 2px at every size. */
.intent { margin: 44px 0 0; max-width: 900px; }
.intent-legend { display: flex; gap: 20px; font-size: 13px; color: var(--text-dim); margin-bottom: 12px; }
.intent-legend span { display: inline-flex; align-items: center; gap: 8px; }
.sw { display: inline-block; width: 22px; height: 0; border-top: 2px solid var(--accent); }
.sw-evt { border-top: 2px dashed var(--ink-500); }
.intent-plot { position: relative; }
.intent-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.intent .base { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.intent .syn,
.intent .evt { fill: none; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.intent .syn { stroke: var(--accent); }
.intent .evt { stroke: var(--ink-500); stroke-dasharray: 6 6; }
.intent .dots circle { fill: var(--accent); stroke: var(--field); stroke-width: 2; vector-effect: non-scaling-stroke; }
.intent-label { position: absolute; right: 2%; font-size: 13px; color: var(--text-dim); }
.intent-label.syn { top: 2%; }
.intent-label.evt { top: 72%; }
.intent-axis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.intent figcaption { margin-top: 16px; font-size: 13px; color: var(--muted); }
@media (max-width: 560px) {
  /* Direct labels would collide with the lines this narrow; the legend keeps
     identity readable, and the dash keeps it from being colour alone. */
  .intent-label { display: none; }
  /* Circles scale with the viewBox; keep markers >= 8px on a phone. */
  .intent .dots circle { r: 11px; }
}

/* --- steps --------------------------------------------------------------- */

.steps { display: grid; gap: 18px; margin-top: 44px; }
@media (min-width: 760px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
}
.step .when { font-size: 11px; letter-spacing: 0.12em; color: var(--accent-soft); }
.step .num { font-family: var(--serif); font-size: 40px; color: var(--mine-600); line-height: 1; margin: 10px 0 12px; }
.step p { margin: 8px 0 0; font-size: 14px; color: var(--text-dim); }
.step p b { color: var(--text); font-weight: 500; }
.step .so { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--accent-soft); }

/* The introduction is the thesis — it gets the counterpart colour. */
.step.acts { border-color: var(--theirs-600); background: var(--theirs-panel); }
.step.acts .when, .step.acts .so { color: var(--theirs-200); }
.step.acts .num { color: var(--theirs-400); }

.quote {
  margin: 56px auto 0;
  max-width: 44rem;
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.35;
}
.quote cite { display: block; margin-top: 16px; font-family: var(--sans); font-size: 14px; font-style: normal; color: var(--muted); }

/* --- photos -------------------------------------------------------------- */

/* Generated with Nano Banana 2 (scripts/gen_site_images.py), not copied from the
   original page — the prompts live in that script. width/height are set in the
   HTML so the page does not jump when they load. */
.photo { margin: 56px 0 0; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); }
.photo img { display: block; width: 100%; height: auto; }
.photo.narrow { max-width: 760px; margin: 0 auto 48px; }

/* --- cards grid (privacy, other side) ------------------------------------ */

.grid { display: grid; gap: 18px; margin-top: 40px; }
@media (min-width: 760px) { .grid.two { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .grid.three { grid-template-columns: repeat(3, 1fr); } }
.tile { border: 1px solid var(--line); border-radius: 18px; padding: 24px; }
.tile h3 { font-size: 21px; }
.tile p { margin: 0; color: var(--text-dim); font-size: 15px; }

.nudge {
  margin-top: 36px;
  max-width: 40rem;
  background: var(--ink-50);
  color: var(--ink-900);
  border-radius: 18px;
  padding: 20px 22px;
}
.nudge .label { font-size: 11px; letter-spacing: 0.1em; color: var(--ink-600); margin-bottom: 8px; }
.nudge p { margin: 0; font-family: var(--serif); font-size: 19px; }

/* --- pricing ------------------------------------------------------------- */

.plans { display: grid; gap: 18px; margin-top: 40px; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan { border: 1px solid var(--line); border-radius: 18px; padding: 28px 24px; }
.plan.featured { border-color: var(--accent); }
.plan .name { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-soft); }
.plan .price { font-family: var(--serif); font-size: 52px; margin: 10px 0 2px; }
.plan .price small { font-family: var(--sans); font-size: 15px; color: var(--muted); }
.plan p { color: var(--text-dim); font-size: 15px; margin: 12px 0 0; }

/* --- final cta ----------------------------------------------------------- */

.final { text-align: center; }
.final .lede { margin: 0 auto 30px; }

/* --- faq ----------------------------------------------------------------- */

.faq { max-width: 46rem; margin-top: 30px; }
.faq details { border-top: 1px solid var(--line); padding: 18px 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent-soft); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 12px 0 0; color: var(--text-dim); }

/* --- roadmap ------------------------------------------------------------- */

.legend { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; }
.tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  border: 1px solid currentColor;
  white-space: nowrap;
}
.tag.live { color: var(--mine-200); }
.tag.demo { color: var(--theirs-200); }
.tag.next { color: var(--ink-200); }
.tag.exploring { color: var(--muted); }

.lead-item {
  margin-top: 44px;
  border: 1px solid var(--theirs-600);
  background: var(--theirs-panel);
  border-radius: 20px;
  padding: 28px;
}
.lead-item h3 { font-size: 30px; margin: 14px 0 10px; }
.lead-item p { margin: 0; color: var(--text-dim); max-width: 44rem; }

.road { margin-top: 56px; }
.road h2 { font-size: 30px; margin-bottom: 4px; }
.road > p { margin: 0 0 20px; color: var(--muted); }
.items { display: grid; gap: 12px; }
.item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 16px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px;
}
.item b { font-weight: 500; font-size: 16px; }
.item p { grid-column: 1 / -1; margin: 0; color: var(--text-dim); font-size: 14px; }

/* --- footer -------------------------------------------------------------- */

footer { border-top: 1px solid var(--line); padding: 32px 0 48px; font-size: 14px; color: var(--muted); }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
footer a { text-decoration: none; color: var(--text-dim); margin-left: 18px; }
footer a:first-child { margin-left: 0; }