/**
 * The pages that are not the catalogue: prose, the lead forms, services,
 * search and the market updates.
 *
 * Reads only from tokens.css. Nothing shared with another page type is defined
 * here — the form, the prose column, the empty state, the buttons and the
 * breadcrumb all live in shell.css, because a page that loads only this sheet
 * still has to be able to draw them.
 */

/* ── The head every one of these pages shares ─────────────────────────── */
.v2-page-head { display: grid; gap: var(--s-3); padding-block: var(--s-10) var(--s-6); }
.v2-page-head h1 { font-family: var(--font-display); font-size: var(--t-3xl); line-height: 1.08; max-width: 20ch; }
.v2-page { padding-block-end: var(--s-12); }
.v2-page-cta { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-block-start: var(--s-8); }

/* A question and its answer. <details> is the control the browser already has. */
.v2-qa {
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: var(--s-3) var(--s-4); margin-block-end: var(--s-2);
  background: var(--surface-card);
}
.v2-qa summary { font-weight: 600; color: var(--ink); cursor: pointer; font-size: var(--t-md); }
.v2-qa summary::marker { color: var(--accent); }
.v2-qa p { margin-block-start: var(--s-2); color: var(--ink-body); font-size: var(--t-sm); }

/* ── Services ─────────────────────────────────────────────────────────── */
.v2-svc-grid { display: grid; gap: var(--s-6); }
@media (min-width: 800px) { .v2-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); } }
.v2-svc {
  border-block-start: 2px solid var(--accent);
  padding-block-start: var(--s-4);
}
.v2-svc h2 { font-family: var(--font-display); font-size: var(--t-xl); margin-block-end: var(--s-2); }
.v2-svc .v2-prose { font-size: var(--t-sm); }

/* ── The lead form, and the faster ways round it ──────────────────────── */
.v2-lead { padding-block-end: var(--s-16); }
.v2-lead-grid { display: grid; gap: var(--s-8); align-items: start; }
@media (min-width: 900px) { .v2-lead-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-10); } }
.v2-lead-form {
  background: var(--surface-card); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); padding: var(--s-5);
}
.v2-lead-form label > span em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--ink-faint); }
.v2-form-note { font-size: var(--t-xs); color: var(--ink-dim); }

.v2-lead-side { display: grid; gap: var(--s-3); }
.v2-lead-side h2 {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-dim); font-weight: 500;
}
.v2-lead-side .v2-btn { width: 100%; }
.v2-lead-who {
  background: var(--surface-warm); border-inline-start: 2px solid var(--verified);
  border-radius: 0 var(--radius) var(--radius) 0; padding: var(--s-4);
  display: grid; gap: var(--s-1);
}
.v2-lead-who-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-dim); }
.v2-lead-who-name { font-family: var(--font-display); font-size: var(--t-lg); color: var(--ink); }
.v2-lead-who-bio { font-size: var(--t-sm); color: var(--ink-body); line-height: 1.6; }
.v2-lead-facts { display: grid; gap: var(--s-3); margin: 0; }
.v2-lead-facts dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-dim); margin: 0; }
.v2-lead-facts dd { margin: 0; font-size: var(--t-sm); color: var(--ink-body); }

/* ── Search ───────────────────────────────────────────────────────────── */
.v2-search { padding-block-end: var(--s-12); }
.v2-search-box { display: flex; gap: var(--s-2); margin-block-end: var(--s-8); }
.v2-search-box input {
  flex: 1; min-width: 0; min-height: 48px;
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  background: var(--surface-card); color: var(--ink);
  padding-inline: var(--s-4); font-size: var(--t-md);
}
.v2-search-box input:focus-visible { border-color: var(--accent); }
.v2-search-box .v2-btn { min-height: 48px; flex: none; }

.v2-search-start { display: grid; gap: var(--s-8); }
.v2-search-group { margin-block-end: var(--s-6); }
.v2-search-group h2 {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-dim); font-weight: 500;
  margin-block-end: var(--s-3);
}
.v2-chips { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.v2-chips a {
  border: 1px solid var(--rule); border-radius: var(--radius-pill);
  padding: var(--s-2) var(--s-4); font-size: var(--t-sm);
  color: var(--ink-body); background: var(--surface-card);
}
.v2-chips a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.v2-chips .num { color: var(--ink-faint); }

.v2-search-projects { display: grid; gap: var(--s-2); }
@media (min-width: 700px) { .v2-search-projects { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v2-search-proj {
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: var(--s-3) var(--s-4); background: var(--surface-card);
  display: grid; gap: 2px;
}
.v2-search-proj:hover { border-color: var(--accent); text-decoration: none; }
.v2-search-proj strong { color: var(--ink); font-size: var(--t-sm); font-weight: 600; }
.v2-search-proj span { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-dim); }

/* ── Market updates ───────────────────────────────────────────────────── */
.v2-news { padding-block-end: var(--s-12); }
.v2-news-list { display: grid; gap: var(--s-6); }
.v2-news-item { display: grid; gap: var(--s-4); align-items: start; }
@media (min-width: 700px) { .v2-news-item { grid-template-columns: 320px minmax(0, 1fr); } }
.v2-news-shot {
  display: block; aspect-ratio: 16 / 10; border-radius: var(--radius-lg);
  overflow: hidden; background: var(--surface-warm); border: 1px solid var(--rule);
}
/* The one published article's image is hosted on forbes.com. Explicit box, so
   a picture that fails to load costs a picture and not the layout. */
.v2-news-shot img { width: 100%; height: 100%; object-fit: cover; }
.v2-news-body { display: grid; gap: var(--s-2); align-content: start; }
.v2-news-body h2 { font-family: var(--font-display); font-size: var(--t-xl); line-height: 1.25; }
.v2-news-body h2 a { color: var(--ink); }
.v2-news-body h2 a:hover { color: var(--accent); text-decoration: none; }
.v2-news-date { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-dim); }
.v2-news-excerpt { font-size: var(--t-sm); color: var(--ink-body); line-height: 1.7; max-width: 62ch; }
.v2-news-more { font-size: var(--t-sm); font-weight: 600; }

.v2-article { padding-block-end: var(--s-16); }
.v2-article-shot {
  margin: 0 0 var(--s-6); border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface-warm); border: 1px solid var(--rule);
  aspect-ratio: 16 / 9;
}
.v2-article-shot img { width: 100%; height: 100%; object-fit: cover; }
.v2-article-body { font-size: var(--t-md); }

/* ── Not found ────────────────────────────────────────────────────────── */
.v2-page.is-404 .v2-page-head { padding-block-start: var(--s-16); }
.v2-404-code {
  font-family: var(--font-display); font-size: var(--t-4xl);
  color: var(--rule-strong); line-height: 1;
}
.v2-404-links { display: grid; gap: var(--s-3); max-width: 620px; }
@media (min-width: 700px) { .v2-404-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.v2-404-links a {
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: var(--s-4); background: var(--surface-card);
  display: grid; gap: var(--s-1);
}
.v2-404-links a:hover { border-color: var(--accent); text-decoration: none; }
.v2-404-links strong { color: var(--ink); font-size: var(--t-md); }
.v2-404-links span { color: var(--ink-dim); font-size: var(--t-sm); }