/* One stylesheet for every page here. Same origin, so it costs one request and
   nothing is fetched from outside -- the pages must stand up on their own.

   The tokens are the application's own, lifted verbatim from
   frontend/src/index.css (:root and .dark) so the site and the product are
   visibly one thing rather than two that nearly match. If you change them
   there, change them here. Two exceptions, both in dark mode: the page's
   background, cards, muted fills and borders are a step lighter than the
   app's, which read as near-black across a whole page; and the amber tint is a
   khaki in amber's own hue, where the app's dark orange-brown fills a band as
   brown. */
:root {
  --radius: 0.5rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.2478 0 0);
  --card: oklch(1 0 0);
  --primary: oklch(0.2478 0 0);
  --primary-foreground: oklch(1 0 0);
  --muted: oklch(0.9702 0 0);
  --muted-foreground: oklch(0.4926 0 0);
  --border: oklch(0.9067 0 0);
  --ring: oklch(0.5849 0.2286 280.29);
  --success: oklch(0.4882 0.089 177.11);
  --success-muted: oklch(0.9647 0.0508 166.71);
  --destructive: oklch(0.4298 0.1483 16.42);
  --destructive-muted: oklch(0.9352 0.0214 3.1);
  --warning: oklch(0.473 0.137 46.201);
  --warning-muted: oklch(0.962 0.059 95.617);
  --chart-1: oklch(0.5849 0.2286 280.29);
  --chart-2: oklch(0.7017 0.1318 175.49);
  --chart-3: oklch(0.6813 0.1634 256.09);
  --chart-1-muted: oklch(0.8599 0.0704 289.32);
  --chart-2-muted: oklch(0.9647 0.0508 166.71);
}

/* Three states, matching the app's Light / Dark / System control. The media
   query is guarded so an explicit "light" choice still wins over a dark OS,
   and the attribute rule comes last so the toggle wins in both directions. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: oklch(0.22 0 0);
    --foreground: oklch(0.9851 0 0);
    --card: oklch(0.265 0 0);
    --primary: oklch(0.9851 0 0);
    --primary-foreground: oklch(0.22 0 0);
    --muted: oklch(0.30 0 0);
    --muted-foreground: oklch(0.7155 0 0);
    --border: oklch(0.34 0 0);
    --ring: oklch(0.7282 0.1442 285.85);
    --success: oklch(0.8858 0.1224 163.54);
    --success-muted: oklch(0.298 0.0476 179.67);
    --destructive: oklch(0.7393 0.1625 12.07);
    --destructive-muted: oklch(0.2783 0.0781 12.01);
    --warning: oklch(0.828 0.189 84.429);
    --warning-muted: oklch(0.31 0.045 85);
    --chart-1-muted: oklch(0.2971 0.0842 283.79);
    --chart-2-muted: oklch(0.3383 0.0572 178.99);
  }
}
:root[data-theme="dark"] {
  --background: oklch(0.22 0 0);
  --foreground: oklch(0.9851 0 0);
  --card: oklch(0.265 0 0);
  --primary: oklch(0.9851 0 0);
  --primary-foreground: oklch(0.22 0 0);
  --muted: oklch(0.30 0 0);
  --muted-foreground: oklch(0.7155 0 0);
  --border: oklch(0.34 0 0);
  --ring: oklch(0.7282 0.1442 285.85);
  --success: oklch(0.8858 0.1224 163.54);
  --success-muted: oklch(0.298 0.0476 179.67);
  --destructive: oklch(0.7393 0.1625 12.07);
  --destructive-muted: oklch(0.2783 0.0781 12.01);
  --warning: oklch(0.828 0.189 84.429);
  --warning-muted: oklch(0.31 0.045 85);
  --chart-1-muted: oklch(0.2971 0.0842 283.79);
  --chart-2-muted: oklch(0.3383 0.0572 178.99);
}

/* The app's typeface, the same file its bundle ships. Only the Latin subset:
   it covers Portuguese, English and the euro sign. */
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/inter-latin-opsz-normal.woff2) format("woff2-variations");
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font: 16px/1.65 "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--primary); }
.wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; }

/* The bar stays at the top, so its buttons are in reach anywhere on the page.
   Solid rather than translucent: over the inverted steps band a see-through
   bar turns grey. */
/* Off screen until a keyboard user reaches it, then above the sticky header. */
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 20;
  padding: 0.5rem 1rem; border-radius: 0.5rem;
  background: var(--primary); color: var(--primary-foreground);
}
.skip-link:focus-visible { top: 0.75rem; }

header {
  position: sticky; top: 0; z-index: 10;
  border-bottom: 1px solid var(--border); background: var(--background);
}
/* An anchor (#lista, #como-funciona) stops below the bar, not under it. */
html { scroll-padding-top: 5rem; }
/* Vertical padding only, so the bar keeps .wrap's sides and lines up with the page. */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; }
.bar nav { display: flex; align-items: center; gap: 1rem; font-size: 0.95rem; }
/* The same treatment as the app's own logo: a 24px mark beside the name at
   20px/600 (Tailwind's size-6, text-xl font-semibold, gap-2).

   currentColor rather than a filter, so dark mode needs no inversion trick. */
.brand {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--foreground); text-decoration: none;
}
.brand-icon { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }
/* line-height matches Tailwind's text-xl (1.75rem), not the body's 1.65, so
   the header sits at the same height as the app's. */
.brand span {
  font-size: 1.25rem; line-height: 1.75rem;
  font-weight: 600; letter-spacing: -0.03em;
}
.brand-lit { fill: var(--ring); }

.cta {
  display: inline-block; padding: 0.65rem 1.25rem;
  border-radius: calc(var(--radius) / 2);
  background: var(--primary); color: var(--primary-foreground);
  text-decoration: none; font-weight: 500; border: 0; cursor: pointer;
  font-size: 0.95rem; font-family: inherit;
}
.cta:hover { opacity: 0.9; }
.quiet { color: var(--muted-foreground); text-decoration: none; }
.quiet:hover { color: var(--foreground); }
.quiet[aria-current="page"] { color: var(--foreground); font-weight: 500; }
.icon-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; padding: 0; text-decoration: none;
  border: 1px solid var(--border); border-radius: calc(var(--radius) / 2);
  background: var(--background); color: var(--foreground);
  cursor: pointer; font-size: 1rem; line-height: 1;
}
.icon-button:hover { background: var(--muted); }
/* Lucide's outline at the app's 1.5 stroke. */
.icon-button svg, .switch svg {
  width: 1.1rem; height: 1.1rem;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

/* The language, as two letters in a pill: the current one is marked, the
   other is the link to the same page in that language. */
.lang-switch { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--muted); }
.lang-switch > * {
  display: grid; place-items: center; min-width: 2.25rem; height: 1.875rem;
  border-radius: 999px; font-size: 0.8rem; font-weight: 600;
  color: var(--muted-foreground); text-decoration: none;
}
.lang-switch a:hover { color: var(--foreground); }
.lang-switch [aria-current] { background: var(--background); color: var(--foreground); box-shadow: 0 1px 2px rgb(0 0 0 / 0.15); }

/* Light or dark, as a switch. theme.js keeps writing the sun or the moon into
   the button and sets aria-pressed; the icon is the thumb, and slides across
   when the dark theme is on. */
.switch {
  position: relative; flex-shrink: 0; width: 3.5rem; height: 2.25rem; padding: 0;
  border: 0; border-radius: 999px; background: var(--muted); color: var(--foreground); cursor: pointer;
}
.switch svg {
  position: absolute; top: 3px; left: 3px; width: 1.875rem; height: 1.875rem; padding: 0.4rem;
  border-radius: 50%; background: var(--background); box-shadow: 0 1px 2px rgb(0 0 0 / 0.15);
  transition: transform 0.18s ease-out;
}
.switch[aria-pressed="true"] svg { transform: translateX(1.25rem); }
.switch:focus-visible, .lang-switch a:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* Each of the page's four accents: a tint for the band, and an accent for
   the swatches and lines on it. Text stays in the foreground colour, which
   reads on every tint; an accent as text would not. Violet, teal, amber and
   blue are the app's own chart-1, success, warning and chart-3, in both
   themes; chart-1's tint is the strongest, so it is mixed halfway with the
   background. Chart-3 has no tint of its own, so a little of it is mixed in. */
/* The full tint first, for browsers without color-mix. */
.violet { --accent: var(--ring); --tint: var(--chart-1-muted); --tint: color-mix(in srgb, var(--chart-1-muted) 50%, var(--background)); }
.teal { --accent: var(--success); --tint: var(--success-muted); }
.amber { --accent: var(--warning); --tint: var(--warning-muted); }
.blue { --accent: var(--chart-3); --tint: var(--muted); --tint: color-mix(in srgb, var(--chart-3) 14%, var(--background)); }

/* Medium, not bold: the app's titles stop at 500 too. */
h1, h2, h3 { font-weight: 500; }
h1 {
  font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1.06;
  letter-spacing: -0.035em; margin: 1rem 0 1.25rem;
}
.lede { font-size: 1.125rem; color: var(--muted-foreground); max-width: 44rem; margin: 0 0 2rem; }
h2 { font-size: 1.375rem; letter-spacing: -0.015em; margin: 0 0 1.25rem; }
section { padding-bottom: 4.5rem; }
/* The home page's bands carry larger section titles. */
.hero h1 { margin-top: 0; text-wrap: balance; }
:is(.how, .tour, .includes, .residents, .faq, .join) h2 {
  font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.15; letter-spacing: -0.025em; text-wrap: balance;
}
/* The home page's bands, each full width with its own tint. */
.hero, .how, .tour, .includes, .residents, .faq, .join { padding: 5rem 0; }

/* A small square in the accent, before a label. */
.marker { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.75rem; }
.marker::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 2px; background: var(--accent); }

/* The first screen sits on the violet tint. The video's frame leans towards
   the pointer (site.js); without a pointer it stays flat. */
.hero { background: var(--chart-1-muted); background: color-mix(in srgb, var(--chart-1-muted) 50%, var(--background)); }
.hero-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 3.5rem; align-items: center;
}
.ctas { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cta.secondary { background: var(--card); color: var(--foreground); border: 1px solid var(--border); }
.hero-media {
  position: relative; margin: 0; padding: 0.75rem; border-radius: calc(var(--radius) * 2);
  background: var(--card); box-shadow: 0 30px 60px -30px rgb(40 30 120 / 0.45);
  transition: transform 0.18s ease-out;
}
.hero-media video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  border-radius: var(--radius); background: var(--card);
}

/* Pause and play, over the video's corner. aria-pressed is true while paused,
   and the icon shows what a click does. */
.video-toggle { position: absolute; right: 1.5rem; bottom: 1.5rem; background: var(--card); }
.video-toggle svg { fill: currentColor; stroke: none; }
.video-toggle[aria-pressed="false"] .icon-play, .video-toggle[aria-pressed="true"] .icon-pause { display: none; }

.facts {
  list-style: none; margin: 0; padding: 1.25rem 0;
  border-bottom: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 0.75rem 2.25rem;
  color: var(--muted-foreground); font-size: 0.9rem;
}
.facts li { display: flex; gap: 0.6rem; }
.facts li::before {
  content: ""; flex: none; width: 0.5rem; height: 0.5rem; margin-top: 0.5em;
  border-radius: 2px; background: var(--accent);
}
/* One row on a wide screen: each fact takes the width its text needs, and
   wraps inside its own column when the row runs out of room. */
@media (min-width: 861px) {
  .facts { display: grid; grid-auto-flow: column; justify-content: space-between; gap: 1.5rem; }
}

/* How it works: three steps under a line in the three accents, which fills as
   the section comes into view. */
.how-line { height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; margin-bottom: 2rem; }
.how-line i { display: block; height: 100%; background: linear-gradient(90deg, var(--ring), var(--success), var(--warning)); transform-origin: left; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
.step h3 { margin: 1rem 0 0.4rem; font-size: 1.2rem; }
.step p { margin: 0; color: var(--muted-foreground); }
.num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 0.6rem;
  background: var(--tint); color: var(--foreground);
  font-weight: 600; font-variant-numeric: tabular-nums;
}

/* The product tour: one step per screen. On a wide screen each step holds its
   text and screenshot in place while it is read, the links above mark the
   step in view, and the band takes on that step's tint (site.js). Narrow, or
   without the script, the steps simply follow one another. */
.tour { background: var(--tint); transition: background-color 0.4s ease; }
.tour-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; }
.tour-nav a {
  padding: 0.45rem 0.95rem; border-radius: 999px; border: 1px solid var(--border);
  background: var(--background); color: var(--foreground); text-decoration: none; font-size: 0.9rem;
}
.tour-nav a::before {
  content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.5rem;
  border-radius: 2px; background: var(--accent); vertical-align: 0.05em;
}
.tour-nav a[aria-current="step"] { background: var(--foreground); color: var(--background); border-color: var(--foreground); }
.tour-steps { list-style: none; margin: 0; padding: 0; }
.tour-step {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 3rem; align-items: start; padding: 3rem 0;
}
.tour-step h3 { font-size: 1.6rem; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 0.75rem; text-wrap: balance; }
.tour-step p { margin: 0; color: var(--muted-foreground); }
.tour-shot { margin: 0; }
.tour-shot img {
  display: block; width: 100%;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); box-shadow: 0 24px 48px -28px rgb(0 0 0 / 0.35);
}
@media (min-width: 861px) {
  .tour-nav { position: sticky; top: 4.5rem; z-index: 2; padding: 0.75rem 0; background: var(--tint); transition: background-color 0.4s ease; }
  .tour-step { min-height: 65vh; }
  .tour-text, .tour-shot { position: sticky; top: 9rem; }
}

/* What it includes, by the job it does. */
.jobs { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.job { background: var(--tint); border-radius: calc(var(--radius) * 2); padding: 1.75rem; }
.job h3 { display: flex; align-items: center; gap: 0.6rem; font-size: 1.3rem; margin: 0 0 0.5rem; }
.job h3::before { content: ""; width: 1.4rem; height: 0.6rem; border-radius: 3px; background: var(--accent); }
.job dl { margin: 0; }
.job dl div { padding: 0.9rem 0; border-top: 1px solid var(--border); }
.job dt { font-weight: 500; }
.job dd { margin: 0.25rem 0 0; color: var(--muted-foreground); font-size: 0.95rem; }

/* Clipped sideways: the screenshot slides in from the right (below), and
   must not widen the page while it waits. */
.residents { background: var(--tint); overflow-x: clip; }
.residents-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 3.5rem; align-items: center; }
.residents .lede { color: var(--foreground); opacity: 0.85; }
.residents ul { list-style: none; margin: 0; padding: 0; }
.residents li { position: relative; padding: 0.6rem 0 0.6rem 1.75rem; border-top: 1px solid var(--border); }
.residents li::before {
  content: ""; position: absolute; left: 0.2rem; top: 1rem; width: 0.8rem; height: 0.4rem;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg);
}
.browser {
  margin: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.4);
}
.browser img { display: block; width: 100%; }
.browser-bar {
  display: flex; align-items: center; gap: 0.35rem; height: 2.25rem; padding: 0 0.75rem;
  border-bottom: 1px solid var(--border); background: var(--muted);
}
.browser-bar i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--border); }
.browser-bar span {
  margin-left: 0.75rem; padding: 0.1rem 0.75rem; border-radius: 1rem;
  background: var(--background); color: var(--muted-foreground); font-size: 0.75rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.faq-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 3.5rem; }
.faq details { border-top: 1px solid var(--border); }
.faq details:last-child { border-bottom: 1px solid var(--border); }
.faq summary {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 1.1rem 0; cursor: pointer; font-weight: 500; font-size: 1.05rem; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: ""; flex-shrink: 0; width: 0.5rem; height: 0.5rem; border-radius: 2px; background: var(--accent); }
.faq summary::after { content: "+"; margin-left: auto; color: var(--muted-foreground); font-weight: 400; font-size: 1.25rem; transition: transform 0.2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 0.25rem; }
.faq details p { margin: 0 0 1.25rem 1.35rem; color: var(--muted-foreground); max-width: 44rem; }

.join { background: var(--tint); }
.join-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; align-items: start; }
.join .lede { color: var(--foreground); opacity: 0.85; }
.join form { max-width: none; box-shadow: 0 20px 50px -30px rgb(40 30 120 / 0.4); }

/* Scroll-linked, where the browser supports it and the reader has not asked
   for less motion: the line under How it works fills, and the residents'
   page slides in. Elsewhere both simply show. */
@keyframes how-fill { from { transform: scaleX(0); } }
@keyframes slide-in { from { transform: translateX(4rem); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .how-line i { animation: how-fill linear both; animation-timeline: view(); animation-range: entry 20% cover 55%; }
    .residents .browser { animation: slide-in linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-media, .switch svg, .tour, .tour-nav { transition: none; }
}

@media (max-width: 860px) {
  .hero-inner, .tour-step, .residents-inner, .faq-inner, .join-inner { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .hero, .how, .tour, .includes, .residents, .faq, .join { padding: 3.5rem 0; }
  .tour-step { padding: 2rem 0; }
}
@media (max-width: 720px) {
  /* The narrow cut of the video is 4:5. */
  .hero-media video { aspect-ratio: 4 / 5; }
}
@media (max-width: 480px) {
  /* The bar stays in view, so on a phone it keeps the waiting list rather than
     the login, which nobody can use before launch. */
  .bar nav .quiet { display: none; }
  .bar nav { gap: 0.5rem; }
  .bar nav .cta { padding: 0.5rem 0.8rem; font-size: 0.875rem; white-space: nowrap; }
  .lang-switch > * { min-width: 2rem; height: 1.75rem; }
  .switch { width: 3rem; height: 2rem; }
  .switch svg { width: 1.625rem; height: 1.625rem; padding: 0.35rem; }
  .switch[aria-pressed="true"] svg { transform: translateX(1rem); }
  .video-toggle { right: 1.25rem; bottom: 1.25rem; }
}
@media (max-width: 420px) {
  /* A bar that carries the waiting list (the home page) gives up the name
     first, keeping the mark, the button, the pill and the switch. */
  .bar:has(.cta) .brand span { display: none; }
}
@media (max-width: 360px) {
  /* The smallest phones fit the mark, the button, the other language and the
     switch only. */
  .bar .brand span { display: none; }
  .lang-switch [aria-current] { display: none; }
}

form {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.5rem; max-width: 34rem;
}
label { display: block; font-weight: 500; font-size: 0.9rem; margin: 0 0 0.4rem; }
input, textarea {
  width: 100%; padding: 0.55rem 0.7rem; margin-bottom: 1rem;
  border: 1px solid var(--border); border-radius: calc(var(--radius) / 2);
  background: var(--background); color: var(--foreground); font: inherit;
  font-size: 0.95rem;
}
input:focus, textarea:focus { outline: 2px solid var(--ring); outline-offset: 1px; }
textarea { min-height: 6rem; resize: vertical; }
.note { color: var(--muted-foreground); font-size: 0.8rem; margin: 0.75rem 0 0; }
/* Off-screen rather than display:none, which some bots skip. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

footer {
  border-top: 1px solid var(--border); padding: 2rem 0;
  color: var(--muted-foreground); font-size: 0.85rem;
}
footer a { color: var(--muted-foreground); }
/* The page keeps .wrap's gutter and left edge, so the text lines up with the
   logo; only its column is narrowed, to a reading width. */
.prose { padding-block: 3rem; }
.prose > * { max-width: 44rem; }
.prose h2 { margin-top: 2rem; }
.prose p, .prose li { color: var(--muted-foreground); }

/* The guide. Its index groups the chapters by job, as the home page does, each
   with a picture of its main screen. A chapter has a title band in its job's
   tint, a menu of every chapter with this one's steps (wide screens only),
   its numbered steps, and links to the chapters before and after it. */
.neutral { --accent: var(--muted-foreground); --tint: var(--muted); }
.guide-hero { background: var(--tint); padding: 3.5rem 0 3rem; }
.guide-hero h1 { margin: 0.5rem 0 1rem; }
.guide-hero .lede { margin: 0; color: var(--foreground); opacity: 0.85; }
.guide-hero .marker { margin: 0; }
.back { margin: 0 0 1rem; font-size: 0.9rem; }
.back a { color: var(--muted-foreground); }
.back a::before { content: "← "; }

/* One column per job, as on the home page; each job's chapters one under the other. */
.guide-groups { padding-top: 3.5rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.guide-groups > h2 { grid-column: 1 / -1; margin: 0; }
.guide-group { background: var(--tint); border-radius: calc(var(--radius) * 2); padding: 1.25rem; }
.guide-group h3 { display: flex; align-items: center; gap: 0.6rem; font-size: 1.25rem; margin: 0 0 1rem; }
.guide-group h3::before { content: ""; width: 1.4rem; height: 0.6rem; border-radius: 3px; background: var(--accent); }
.chapters { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.chapters a {
  display: grid; gap: 0.35rem; align-content: start; height: 100%; padding: 1rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); color: var(--foreground); text-decoration: none;
}
.chapters a:hover, .chapters a:focus-visible { border-color: var(--accent); }
.chapters img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin-bottom: 0.5rem;
  object-fit: cover; object-position: top left;
  border: 1px solid var(--border); border-radius: calc(var(--radius) / 2); background: var(--muted);
}
.chapters b { font-weight: 500; font-size: 1.05rem; }
.chapters span { color: var(--muted-foreground); font-size: 0.9rem; }

.guide-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 3rem; align-items: start; padding-top: 3rem; padding-bottom: 4.5rem; }
.guide-nav { position: sticky; top: 5.5rem; max-height: calc(100vh - 7rem); overflow: auto; font-size: 0.9rem; }
.guide-nav p {
  display: flex; align-items: center; gap: 0.5rem; margin: 1.25rem 0 0.4rem;
  font-size: 0.75rem; font-weight: 600; color: var(--muted-foreground);
}
.guide-nav p:first-child { margin-top: 0; }
.guide-nav p::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 2px; background: var(--accent); }
.guide-nav ol { list-style: none; margin: 0; padding: 0; }
.guide-nav a { display: block; padding: 0.3rem 0.6rem; border-radius: 0.4rem; color: var(--muted-foreground); text-decoration: none; line-height: 1.35; }
.guide-nav a:hover { color: var(--foreground); background: var(--muted); }
.guide-nav a[aria-current="page"] { color: var(--foreground); font-weight: 500; background: var(--tint); }
.guide-nav .chapter-steps { margin: 0.25rem 0 0.5rem 0.6rem; padding-left: 0.4rem; border-left: 2px solid var(--border); }
.guide-nav .chapter-steps a { font-size: 0.85rem; }
.guide-nav .chapter-steps a[aria-current="step"] { color: var(--foreground); font-weight: 500; }

.walkthrough { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 3.5rem; }
.walkthrough > li { counter-increment: step; max-width: 44rem; }
.walkthrough > li.wide { max-width: none; }
.walkthrough h2 { margin: 0 0 0.75rem; }
.walkthrough h2::before {
  content: counter(step); display: inline-grid; place-items: center; width: 2rem; height: 2rem;
  margin-right: 0.75rem; border-radius: 0.5rem; background: var(--tint); color: var(--foreground);
  font-size: 0.95rem; font-weight: 600; vertical-align: 0.1em;
}
.walkthrough p { margin: 0 0 0.5rem; color: var(--muted-foreground); }
.walkthrough ul { margin: 0 0 0.5rem; padding-left: 1.25rem; color: var(--muted-foreground); }
.walkthrough ul li { margin: 0 0 0.25rem; }
.walkthrough b { font-weight: 500; color: var(--foreground); }
.screen { margin: 1.25rem 0 0; }
.screen img {
  display: block; max-width: 100%; height: auto;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); box-shadow: 0 16px 40px rgb(0 0 0 / 0.08);
}

.chapter-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 4rem; }
.chapter-pager a {
  display: grid; gap: 0.2rem; padding: 1rem 1.25rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); color: var(--foreground); text-decoration: none;
}
.chapter-pager a:hover, .chapter-pager a:focus-visible { border-color: var(--accent); }
.chapter-pager a[rel="next"] { grid-column: 2; text-align: right; }
.chapter-pager small { color: var(--muted-foreground); font-size: 0.8rem; }
.chapter-pager b { font-weight: 500; }

@media (max-width: 1023px) {
  .guide-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* No room for the menu: the back link and the links at the end do its job. */
  .guide-layout { grid-template-columns: minmax(0, 1fr); }
  .guide-nav { display: none; }
}
@media (max-width: 560px) {
  .guide-groups { grid-template-columns: minmax(0, 1fr); }
  .chapter-pager { grid-template-columns: minmax(0, 1fr); }
  .chapter-pager a[rel="next"] { grid-column: auto; }
}