/* The detail pages (how-it-works, features, coverage, research, trust, download, faq, pricing): a page head, then sections built from
   styles.css parts (.section-head, .items, .trust-grid, .access, .faq, .carousel, .clickflow). Only what those lack lives here. Guarded by site/test/landing.test.js. */

.page-head { display: grid; gap: 16px; padding-block: 64px 24px; max-width: 760px; }
.page-head h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); }
.page-head .eyebrow { color: var(--amber); }
section.block.first { padding-top: 40px; }
.page-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.page-jump a { padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: .88rem; text-decoration: none; color: var(--muted); }
.page-jump a:hover { color: var(--ink); border-color: var(--ink); }
.next-page { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 24px 28px; margin-block: 8px 72px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.next-page a { color: var(--signal); font-weight: 600; text-decoration: none; }

/* Download: Mac and Windows, two equal cards. */
.os-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.os-card { display: grid; gap: 12px; align-content: start; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.os-card h2 { font-size: 1.6rem; display: flex; align-items: center; gap: 10px; }
.os-card .btn { justify-self: start; }
.os-card .fine { color: var(--muted); font-size: .88rem; }
@media (max-width: 760px) { .os-cards { grid-template-columns: minmax(0, 1fr); } }
.first-run { list-style: none; counter-reset: run; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 820px; }
.first-run li { counter-increment: run; display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: baseline; padding: 16px 20px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.first-run li::before { content: counter(run); font: 600 .8rem var(--mono); color: var(--amber); }
.first-run span { color: var(--muted); font-size: .92rem; display: block; }
.first-run em { font: 400 .78rem var(--mono); font-style: normal; color: var(--muted); white-space: nowrap; }
details.tech { margin-top: 20px; max-width: 820px; border: 1px solid var(--line); border-radius: 14px; padding: 4px 20px; background: var(--surface); }
details.tech summary { cursor: pointer; padding-block: 14px; font-weight: 600; }
details.tech p { color: var(--muted); padding-bottom: 16px; }

/* Coverage: the numbers, countries as bars, kinds of work as a table. */
.bars { display: grid; gap: 8px; max-width: 820px; }
.bars div { display: grid; grid-template-columns: 150px 1fr 70px; gap: 12px; align-items: center; font-size: .94rem; }
.bars i { display: block; height: 12px; border-radius: 0 4px 4px 0; background: var(--amber); min-width: 2px; }
.bars b { font: 500 .85rem var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .bars div { grid-template-columns: 110px 1fr 56px; } }
.source-note { color: var(--muted); font-size: .88rem; margin-top: 16px; max-width: 70ch; }
/* The Terminal line outside the hero: give it the hall's colours (styles.css defines them on .hero only). */
details.tech .install-line { --hall-line: var(--line-strong); --hall-ink: var(--ink); justify-self: start; margin-bottom: 14px; }