/* The marketing page: theme.css gives the palette, the type and the bar;
 * this is the page's own layout. Phone first, two columns from 820px.
 * Prose is 15px on a 60ch measure; labels and captions are 13px. */

body { display: flex; flex-direction: column; min-height: 100%; font-size: 15px; line-height: 1.6; }
main { flex: 1; width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 20px; }
section { padding: 56px 0; border-top: 1px solid var(--border); }
section:first-child { border-top: 0; }
h2, h3 { margin: 0 0 16px; font-weight: 600; line-height: 1.25; color: var(--text); text-wrap: balance; }
h3 { font-size: 20px; }
/* Labels inside a section: small caps in the muted colour. */
h4 { margin: 32px 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
h4:first-child { margin-top: 0; }
p { margin: 0 0 14px; color: var(--text-2); }
.copy, .goal, .hyp, .out, section > p { max-width: 60ch; }
.big { font-size: 17px; line-height: 1.45; font-weight: 600; color: var(--text); text-wrap: balance; }
.muted { color: var(--muted); }
code { padding: 1px 5px; border-radius: 3px; background: var(--sunken); color: var(--text); font-size: .93em; white-space: nowrap; }
pre code { padding: 0; background: none; font-size: inherit; white-space: inherit; }
a.primary { color: var(--accent); border-color: var(--accent); }
/* The page the bar is on, when it is one of its own links. */
header.bar a.ghost[aria-current="page"] { color: var(--text); border-color: var(--border-strong); }
/* The bar's background runs the full width; its contents sit in the same
 * 1040px column as the sections below (1000px of content plus 20px a side). */
header.bar { padding: 10px max(20px, calc((100% - 1000px) / 2)); }

/* The one button. */
.cta { margin-top: 24px; }
.button { display: inline-block; padding: 10px 18px; border-radius: 4px; border: 1px solid var(--accent);
  background: var(--accent); color: var(--surface); font-weight: 600; }
.button:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--surface); text-decoration: none; }

/* Hero: the hook and the promise beside a terminal that plays a session.
 * The headline is sized to take two lines in its column. */
.hero { display: grid; gap: 40px; padding-top: 48px; }
.kicker { margin-bottom: 12px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hero h2 { margin-bottom: 14px; font-size: clamp(24px, 6.5vw, 30px); }
.lede { max-width: 56ch; }
/* What it does, as a checklist: the mark in its own column so wrapped
 * lines stay under the text. What is still coming is muted. */
.checklist { list-style: none; margin: 0; padding: 0; max-width: 56ch; display: grid; gap: 8px; }
.checklist li { display: grid; grid-template-columns: 1.6em 1fr; gap: 0 6px; color: var(--text-2); }
.checklist b { color: var(--text); }
.checklist .soon { color: var(--muted); }
.checklist .soon b { color: var(--text-2); }

/* The transcript is a two-column grid per line: who spoke in a 6ch gutter,
 * what they said beside it, so wrapped lines stay under the first. Lines
 * waiting to be revealed are hidden, not collapsed, so the box has its
 * full height from the first paint and the hero never moves. */
.term { border: 1px solid var(--border-strong); border-radius: 6px; background: var(--sunken); overflow: hidden;
  font-size: 13px; line-height: 1.6; color: var(--text-2); }
.term-bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: var(--elevated); border-bottom: 1px solid var(--border); }
.term-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.term-bar em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--muted); }
.session { padding: 14px 16px 16px; }
.session .line { display: grid; grid-template-columns: 6ch 1fr; gap: 0 4px; margin: 0 0 10px; color: inherit; transition: opacity .35s; }
.session .line:last-child { margin-bottom: 0; }
.session .line.pending { opacity: 0; visibility: hidden; }
.session .who { font-weight: 600; }
.session .you { color: var(--accent); }
.session .model, .session .sh { color: var(--muted); }
.session .what { min-width: 0; overflow-wrap: anywhere; color: var(--text-2); }
.session b { color: var(--text); font-weight: 600; }
.session .ok { color: var(--success); font-weight: 600; }
.session #typed { color: var(--text); }
.cursor { display: inline-block; width: 7px; height: 14px; vertical-align: -2px; background: var(--accent); animation: blink 1s steps(2) infinite; }
@keyframes blink { to { visibility: hidden; } }

/* Pricing: the hero with no terminal beside it, then the two plans as
 * cards, free beside pay as you go. The price line is the one big number
 * a pricing page is expected to have, with the qualifier small beside it. */
.hero.solo { padding-bottom: 32px; }
.plans { display: grid; gap: 20px; margin-top: 24px; }
.plan { padding: 20px 22px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--sunken); }
.plan .price { margin: 0 0 14px; font-size: 24px; font-weight: 600; line-height: 1.25; color: var(--text); }
.plan .price small { margin-left: 6px; font-size: 13px; font-weight: 400; color: var(--muted); white-space: nowrap; }
.plan ul { list-style: none; margin: 0; padding: 0; font-size: 13.5px; line-height: 1.5; }
.plan li { padding: 9px 0; border-top: 1px dashed var(--border); color: var(--text-2); }
.plan b { color: var(--text); }
.plan code { padding: 0; background: none; font-size: inherit; }

/* How it works: six numbered steps under a rule each, then the reasons. */
.steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 20px 28px; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 3ch 1fr; gap: 2px 8px; align-content: start; padding-top: 12px; border-top: 2px solid var(--border-strong); }
.steps li::before { counter-increment: step; content: counter(step, decimal-leading-zero); grid-row: 1 / 3; color: var(--accent); font-weight: 600; }
.steps b { color: var(--text); }
.steps span { font-size: 13px; line-height: 1.5; color: var(--text-2); }
.steps code { padding: 0; background: none; font-size: inherit; }

/* Reasons: a bold lead sentence, then the rest, one per item. */
.reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px 40px; }
.reasons li { max-width: 60ch; color: var(--text-2); }
.reasons b { color: var(--text); }

/* Design: the reasons beside the program, the drawing under both. */
.design-grid { display: grid; gap: 28px 40px; margin-top: 24px; }
pre.src { margin: 0; padding: 16px 18px; overflow-x: auto; font-size: 12.5px; line-height: 1.55; border: 1px solid var(--border); border-radius: 6px; background: var(--sunken); color: var(--text); }
pre.src .k { color: var(--hl-keyword); }
pre.src .s { color: var(--hl-string); }
pre.src .c { color: var(--hl-comment); }
.paper { margin: 0; border: 1px solid var(--border-strong); border-radius: 6px; overflow: hidden; background: #fff; }
.paper img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.paper figcaption { padding: 8px 12px; font-size: 12px; color: var(--muted); background: var(--elevated); border-top: 1px solid var(--border); }
.paper.drawing { margin-top: 28px; }
.paper.drawing img { max-height: 520px; width: auto; }
.paper.board img { max-height: 400px; width: auto; padding: 16px; }

/* Compare: a matrix with etcheda's column picked out. On a phone the
 * table scrolls inside its frame, not the page. */
.table-wrap { margin-top: 24px; overflow-x: auto; border: 1px solid var(--border-strong); border-radius: 6px; }
.matrix { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 13.5px; line-height: 1.45; }
.matrix th, .matrix td { padding: 9px 14px; text-align: left; vertical-align: top; border-top: 1px dashed var(--border); color: var(--text-2); }
.matrix thead th { border-top: 0; background: var(--elevated); color: var(--text); font-weight: 600; }
.matrix tbody th { font-weight: 600; color: var(--text); white-space: nowrap; }
.matrix .us { background: var(--sunken); color: var(--text); }
.matrix thead .us { color: var(--accent); }
.compare .table-wrap + p { margin-top: 16px; }

/* Vision: why it exists, then the goal and the hypothesis on one row, the
 * output on the next. */
.why { max-width: 60ch; margin-bottom: 40px; }
.vision-grid { display: grid; gap: 40px 48px; margin-top: 24px; }
.hyp .muted { margin-bottom: 0; }
.files { display: grid; grid-template-columns: max-content 1fr; gap: 0 20px; margin: 0 0 16px; font-size: 13.5px; }
.files dt, .files dd { margin: 0; padding: 8px 0; border-bottom: 1px dashed var(--border); }
.files dt { font-weight: 600; color: var(--text); }
.files dd { color: var(--text-2); }
.paper.board { justify-self: center; width: 100%; max-width: 440px; }

footer { display: flex; justify-content: center; padding: 18px 20px; border-top: 1px solid var(--border); background: var(--elevated); font-size: 13px; color: var(--muted); }
.heart { color: #d9453d; }

@media (max-width: 640px) {
  /* The links and the toggle beside the wordmark: tighter, and without
   * the leaving-the-site mark, so the bar fits a 360px phone on one
   * row, and wraps under the wordmark on anything narrower. */
  header.bar { flex-wrap: wrap; gap: 10px; padding: 10px 20px; }
  header.bar .right { gap: 4px; }
  header.bar .right a, header.bar .right button { white-space: nowrap; }
  header.bar .ext { display: none; }
}

@media (min-width: 700px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 820px) {
  .hero { grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 48px; padding-top: 72px; }
  .hero.solo { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr 1fr; align-items: start; }
  .hero h2 { font-size: clamp(26px, 3.3vw, 34px); }
  .reasons.two { grid-template-columns: 1fr 1fr; }
  .design-grid { grid-template-columns: 1fr 1.2fr; align-items: start; }
  .vision-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .paper.board { align-self: center; }
}