/* BuildGist landing page.

   The palette is the product's own (same warm paper, same ink, same blue), so
   the example explanation sits on the page rather than on top of it. Anything
   that would compete with the screenshot has been left out: no gradients, no
   cards for their own sake, one accent colour used sparingly.

   Light only, deliberately. The product renders light or dark depending on the
   reader's system, but the screenshots on this page are light, and a dark page
   wrapped around light images looks like a mistake. */

:root {
  --bg: #faf9f7;
  --panel: #ffffff;
  --ink: #1b1a18;
  --muted: #6b6862;
  --line: #e6e2dc;
  --accent: #3b5bdb;
  --accent-ink: #2f49ae;
  --added: #2f7d4b;          /* the app's own green; 4.8:1 on the paper */
  --risk: #c92a2a;
  --measure: 1080px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

main a:not(.primary):not(.ghost), footer a { color: var(--accent-ink); }

main { max-width: var(--measure); margin: 0 auto; padding: 0 24px; }

section { padding: 66px 0; border-bottom: 1px solid var(--line); }
section:last-of-type { border-bottom: 0; }

h1, h2 { letter-spacing: -0.02em; }

h2 {
  font-size: 28px;
  line-height: 1.25;
  margin: 0 0 22px;
  font-weight: 650;
}

.aside {
  color: var(--muted);
  font-size: 17px;
  max-width: 62ch;
  margin: 0;
}

/* ---- header ------------------------------------------------------- */

.bar {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wordmark {
  font-weight: 680;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}
.wordmark.small { font-size: 16px; }

.ghost {
  font-size: 15px;
  color: var(--muted);
  text-decoration: none;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
}
.ghost:hover { color: var(--ink); border-color: #d6d1c9; }

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

.hero { padding-top: 54px; padding-bottom: 20px; border-bottom: 0; }

h1 {
  font-size: clamp(34px, 6vw, 56px);
  line-height: 1.08;
  font-weight: 680;
  margin: 0 0 22px;
  max-width: 26ch;
}

.lede {
  font-size: clamp(18px, 2.4vw, 21px);
  line-height: 1.5;
  color: #35322d;
  max-width: 60ch;
  margin: 0 0 30px;
}

.cta-row { margin: 0 0 14px; }

.primary {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: 17px;
  font-weight: 560;
  text-decoration: none;
  padding: 14px 26px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
}
.primary:hover { background: var(--accent-ink); }
.primary:disabled { opacity: 0.55; cursor: default; }

.works-with { color: var(--muted); font-size: 16px; margin: 0; max-width: 60ch; }
.cta-note { display: block; margin-top: 12px; color: var(--muted); font-size: 15px; }
.guide { margin: 0; font-size: 16px; }

figcaption {
  color: var(--muted);
  font-size: 14.5px;
  margin-top: 14px;
  max-width: 62ch;
}

/* ---- the receipt -------------------------------------------------- */

/* This is the product's own visual language, not an impression of it: the
   values below are lifted from runstory/viewer/page.py: same paper, same
   ink, same card, same pills, same risk red. It is built as markup rather
   than pasted as a screenshot because a screenshot of a document is a tiny
   document on a phone, and this has to be readable in five seconds on both. */

.shot-section { padding-top: 28px; padding-bottom: 52px; }
.shot { margin: 0 auto; max-width: 760px; }
.shot figcaption { text-align: center; margin-left: auto; margin-right: auto; }

/* The instruction that started it, set apart from the receipt so the causal
   step reads at a glance: one sentence in, seven files out. */
.ask {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 14px 18px;
  max-width: 420px;
  margin: 0 auto;
}
.ask-label {
  margin: 0 0 4px;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.ask-prompt { margin: 0; font-size: 18px; line-height: 1.4; }
.ask-arrow { text-align: center; color: var(--muted); font-size: 19px; margin: 12px 0 14px; }
.ask-gap { display: block; font-size: 14px; margin-top: 2px; }

.rs {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 28px 24px;
  box-shadow: 0 1px 2px rgba(27, 26, 24, 0.05),
              0 14px 38px rgba(27, 26, 24, 0.08);
}

.rs-head { border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 4px; }
.rs-title { font-size: 23px; line-height: 1.25; margin: 0 0 7px; font-weight: 650; }
.rs-meta { color: var(--muted); font-size: 13.5px; margin: 0 0 12px; }

.rs-badge {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
}
.rs-badge.risk { border-color: var(--risk); color: var(--risk); }

.rs-modes { display: inline-flex; gap: 0; margin: 0; padding: 3px; background: #efeee9;
  border-radius: 10px; }
.rs-mode {
  font-family: inherit;
  padding: 5px 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 13.5px;
  cursor: pointer;
}
button.rs-mode:hover { color: var(--ink); }
.rs-mode.on { background: var(--panel); color: var(--ink); font-weight: 600;
  box-shadow: 0 1px 2px rgba(27, 26, 24, 0.06); }
.rs-mode:focus-visible, .rs-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
#rs-body:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }

.rs-h {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  margin: 24px 0 10px;
  font-weight: 600;
}

.rs-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
}

/* What the run changed, marked the way the receipt marks it: the analysis
   records each piece as added or modified, and so does this. */
.rs-changes { list-style: none; margin: 0; padding: 0; }
.rs-changes li {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15.5px;
  line-height: 1.45;
}
.rs-changes li:last-child { border-bottom: 0; }
.rs-tag {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  padding: 2px 0;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
}
.rs-tag.new { border-color: var(--added); color: var(--added); }

.rs-concept { font-size: 16px; font-weight: 600; margin: 0 0 6px; }
.rs-term {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  padding: 1px 6px;
  margin: 0 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #35322d;
}
.rs-plain { margin: 0; font-size: 15px; line-height: 1.5; color: #35322d; }

.rs-risk { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  background: #fbeeec; border: 0; border-left: 4px solid var(--risk); border-radius: 10px; }
.rs-risk .rs-badge.risk { background: var(--panel); }
.rs-risk p { margin: 0; font-size: 15px; line-height: 1.5; }
.rs-risk-head { font-weight: 600; margin-bottom: 4px !important; }

.rs-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.rs-actions:empty { margin: 0; }
.rs-btn {
  font-family: inherit;
  font-size: 12.5px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.rs-btn:hover { border-color: var(--accent); color: var(--accent); }

/* What a button reveals, the way the receipt reveals it. Capped, because a
   long walkthrough should not push the signup form off the page. */
.rs-reveal {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  max-height: 260px;
  overflow-y: auto;
}
.rs-reveal p { margin: 0 0 6px; font-size: 14.5px; line-height: 1.5; }
.rs-reveal p:last-child { margin-bottom: 0; }
.rs-reveal-head {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.rs-evidence code {
  font-size: 13px;
  background: rgba(27, 26, 24, 0.05);
  padding: 1px 6px;
  border-radius: 5px;
}

/* ---- what it is for ----------------------------------------------- */

.value h2 { max-width: 20ch; }


/* ---- beta --------------------------------------------------------- */

.beta { padding-bottom: 48px; }
.beta-lede { color: #35322d; max-width: 54ch; margin: 0 0 28px; font-size: 18px; }

form { max-width: 460px; display: grid; gap: 18px; }

.field { display: grid; gap: 7px; font-size: 15px; }
.field span { color: var(--muted); }
.field em { font-style: normal; color: #6b6862; }

input, select {
  font: inherit;
  font-size: 17px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid #d9d4cc;
  border-radius: 10px;
  padding: 13px 14px;
  width: 100%;
}
input:focus, select:focus, .primary:focus-visible, .ghost:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* 2.5:1 against the panel is not a placeholder, it is a rumour. */
input::placeholder { color: #8a867e; }

/* Off-screen rather than display:none, which some bots skip. */
.nope { position: absolute; left: -9999px; width: 1px; height: 1px;
        overflow: hidden; }

.form-note { margin: 0; font-size: 15.5px; min-height: 1.6em; }
.form-note.ok { color: var(--added); }
.form-note.bad { color: var(--risk); }

.fineprint { color: var(--muted); font-size: 14.5px; max-width: 58ch; margin: 26px 0 0; }

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

footer {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 34px 24px 60px;
  display: flex;
  gap: 16px;
  align-items: baseline;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
}
footer .fineprint { margin: 0; }
.foot-links { display: flex; gap: 18px; flex-wrap: wrap; font-size: 15px; }

/* ---- narrow ------------------------------------------------------- */

@media (max-width: 860px) {
  .shot-section { padding-top: 24px; padding-bottom: 40px; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  main { padding: 0 18px; }
  .bar { padding: 18px; }
  section { padding: 52px 0; }
  .hero { padding-top: 34px; }
  h2 { font-size: 24px; }
  .lede { margin-bottom: 24px; }
  .works-with { margin-bottom: 0; }
  .primary { display: block; text-align: center; }
  .rs { padding: 20px 18px 18px; border-radius: 12px; }
  .rs-title { font-size: 20px; }
  .rs-changes li { grid-template-columns: 66px 1fr; gap: 10px; font-size: 15px; }
  .ask { max-width: none; }
  .ask-prompt { font-size: 17px; }
  /* A document shrunk to phone width is unreadable, so the phone is served the
     receipt as a phone lays it out. Same page, same CSS, narrower column. */
  figcaption { margin-top: 12px; }
}