/* The guides: one search answered per page, told with the home page's parts
   (hero and waitlist card, chapters, colour fields, live interfaces, questions).
   Only what the home page doesn't already have lives here. */

.guide .topbar nav a[aria-current="page"] { color: var(--ink); }
.guide .hero { padding-bottom: 70px; }
.guide .hero .kicker a { color: inherit; }
.guide .hero .kicker a:hover { color: var(--ink); }
.guide .hero .display { font-size: clamp(42px, 5.9vw, 88px); }
.guide .hero .lead + .lead { margin-top: 14px; }
.guide .hero .lead b { color: var(--ink); font-weight: 550; }

/* The story below the hero: one column, the chapters' rhythm, no rail. */
.guide-body { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.guide-body .chapter { padding: 70px 0 110px; }
.guide-body .chapter + .chapter:not(.field) { border-top: 1px solid var(--line); }
.guide-body .chapter.field { margin: 0; padding: 120px 0 110px; }
.guide-body .chapter.field + .chapter { border-top: 0; }
.guide-body .ch-head h2 { max-width: 15em; }
.guide-body .chapter .stage + .caption, .guide-body .reveal-frame + .caption { margin-top: 18px; }
.guide-body .facts { margin-top: 40px; }

/* Steps, numbered as the home page's rail and step tags are. */
.steps { list-style: none; counter-reset: step; display: grid; gap: 0; max-width: 820px; border-top: 1px solid var(--line-2); }
.steps li { counter-increment: step; position: relative; padding: 20px 0 20px 46px; border-bottom: 1px solid var(--line-2); color: var(--ink-2); font-size: 16.5px; line-height: 1.55; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 20px; width: 26px; height: 26px; border-radius: 13px; display: grid; place-items: center; font-size: 12.5px; font-weight: 650; background: var(--violet); color: var(--violet-ink); }
.steps li b { color: var(--ink); font-weight: 600; }
.steps-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 56px; align-items: start; }
.steps-wrap .steps { position: sticky; top: 90px; }

/* A plain table that turns into one card per row on phones. */
.spec { width: 100%; max-width: 920px; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; }
.spec th, .spec td { text-align: left; vertical-align: top; padding: 14px 18px 14px 0; border-bottom: 1px solid var(--line-2); }
.spec thead th { font-family: "Geist Mono", monospace; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; border-bottom-color: var(--line-3); }
.spec tbody th { color: var(--ink); font-weight: 600; white-space: nowrap; }
.spec td { color: var(--ink-2); }
.spec .yes { color: var(--ok); font-weight: 600; }
.field .spec th, .field .spec td { border-bottom-color: color-mix(in srgb, var(--on) 35%, transparent); color: var(--on); }
.field .spec thead th { color: color-mix(in srgb, var(--on) 70%, transparent); }
.source { margin-top: 14px; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); max-width: 60em; }
.source a, .guide-body .lead a, .guide-body .points a, .guide-body .facts a, .steps a { color: var(--violet); text-decoration: underline; text-underline-offset: 3px; }
.field .source, .field .source a, .field .points a, .field .lead a { color: inherit; }

/* The USB drive, with its two libraries sharing one set of files. */
.drive { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0 18px; align-items: center; max-width: 980px; margin: 8px 0 26px; }
.drive-lib { border: 1.5px solid currentColor; border-radius: 18px; padding: 20px 22px 18px; }
.drive-lib .kicker { color: inherit; opacity: .75; }
.drive-lib b { display: block; margin: 8px 0 6px; font-family: "Bricolage Grotesque", system-ui, sans-serif; font-variation-settings: "opsz" 60; font-weight: 750; font-size: clamp(24px, 2.6vw, 34px); line-height: 1; letter-spacing: -.03em; }
.drive-lib code { font-family: "Geist Mono", monospace; font-size: 13px; opacity: .8; }
.drive-lib ul { list-style: none; margin-top: 12px; font-size: 14.5px; line-height: 1.5; }
.drive-lib li + li { margin-top: 2px; }
.drive-core { display: grid; place-items: center; gap: 8px; text-align: center; width: 150px; font-size: 13.5px; line-height: 1.35; }
.drive-core .stick { position: relative; width: 74px; height: 36px; border: 2px solid currentColor; border-radius: 9px; }
.drive-core .stick::after { content: ""; position: absolute; right: -16px; top: 8px; width: 14px; height: 16px; border: 2px solid currentColor; border-left: 0; border-radius: 0 3px 3px 0; }
.drive-core .stick i { position: absolute; left: 10px; top: 13px; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .35; }
.drive-core .wire { width: 100%; height: 2px; background: repeating-linear-gradient(90deg, currentColor 0 6px, transparent 6px 11px); opacity: .55; }
.js .drive.in .drive-core .stick i { animation: drive-led 1.6s steps(1) infinite; }
@keyframes drive-led { 0%, 60% { opacity: .35; } 61%, 100% { opacity: 1; } }

/* Install lines for Linux, set like the app's monospace readouts. */
.term { max-width: 760px; border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); overflow: hidden; }
.term-bar { display: flex; gap: 7px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.term-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-3); }
.term pre { margin: 0; padding: 18px 20px 20px; overflow-x: auto; font-family: "Geist Mono", ui-monospace, monospace; font-size: 14px; line-height: 1.75; color: var(--ink); }
.term pre .c { color: var(--ink-3); }
.term pre .p { color: var(--violet); user-select: none; }

/* Where to read next: the other guides and the help centre. */
.next { padding: 100px 0 40px; border-top: 1px solid var(--line); }
.next h2 { margin: 18px 0 34px; font-size: clamp(30px, 3.6vw, 48px); }
.next-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.next-grid h3 { font-family: "Geist Mono", monospace; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; margin-bottom: 6px; }
.next-grid ul { list-style: none; }
.next-grid li a { position: relative; display: block; padding: 15px 28px 15px 0; border-top: 1px solid var(--line-2); font-size: 16px; font-weight: 500; color: var(--ink); }
.next-grid li a span { display: block; margin-top: 2px; font-weight: 400; color: var(--ink-3); font-size: 14.5px; }
.next-grid li a::after { content: "↗"; position: absolute; right: 2px; top: 15px; color: var(--violet); }
.next-grid li a:hover { color: var(--violet); }

@media (max-width: 1100px) {
  .guide .topbar nav { display: none; }
}
@media (max-width: 900px) {
  .steps-wrap { grid-template-columns: 1fr; gap: 36px; }
  .steps-wrap .steps { position: static; }
  .drive { grid-template-columns: 1fr; gap: 14px; }
  .drive-core { width: auto; grid-auto-flow: column; justify-content: start; }
  .drive-core .wire { display: none; }
}
@media (max-width: 760px) {
  .guide .hero { padding-bottom: 40px; }
  .guide-body .chapter { padding: 50px 0 70px; }
  .guide-body .chapter.field { padding: 80px 0 70px; }
  .next { padding-top: 70px; }
  .next-grid { grid-template-columns: 1fr; gap: 28px; }
  .spec thead { display: none; }
  .spec, .spec tbody, .spec tr, .spec th, .spec td { display: block; }
  .spec tr { padding: 12px 0; border-bottom: 1px solid var(--line-2); }
  .spec th, .spec td { border: 0; padding: 2px 0; }
  .field .spec tr { border-bottom-color: color-mix(in srgb, var(--on) 35%, transparent); }
  .spec td[data-h]::before { content: attr(data-h) ": "; color: var(--ink-3); }
  .field .spec td[data-h]::before { color: inherit; opacity: .7; }
}
@media (prefers-reduced-motion: reduce) { .js .drive.in .drive-core .stick i { animation: none; opacity: 1; } }