/* Gander website.
   Follows the OCR-Genius design system (without its logo): warm off-white paper, flat
   colour bands, brand greens and neutrals only (no blue, no orange), soft black shadows.
   Type: Shippori Mincho at weight 400 for headings, Geist for text, Geist Mono for code.
   The brand is matte paper, so the page is light only; previews still follow the Mac. */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/Geist-0.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/Geist-0.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/Geist-0.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/Geist-0.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/GeistMono-1.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/GeistMono-1.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Shippori Mincho';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ShipporiMincho-2.woff2") format('woff2');
  unicode-range: U+a1-a4, U+a6-a7, U+aa, U+ac-ad, U+b5-b6, U+b8-ba, U+bc-c8, U+ca-cc, U+ce-d5, U+d9-db, U+dd-df, U+e6, U+ee, U+f0, U+f5, U+f7, U+f9, U+fb, U+fe-102, U+110-113, U+11a-11b, U+128-12b, U+143-144, U+147-148, U+14c, U+14e-14f, U+152-153, U+168-16d, U+192, U+1a0-1a1, U+1af, U+1cd-1dc, U+1f8-1f9, U+251, U+261, U+2bb, U+2c7, U+2c9, U+2ea-2eb, U+304, U+307, U+30c, U+1e3e-1e3f, U+1ea0-1ebe, U+1ec0-1ec6, U+1ec8-1ef9, U+2011-2012, U+2016, U+2018-201a, U+201e, U+2021, U+2030, U+2033, U+2035, U+2042, U+2047, U+2051, U+2074, U+20a9, U+20ab-20ac, U+20dd-20de, U+2100;
}
@font-face {
  font-family: 'Shippori Mincho';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ShipporiMincho-3.woff2") format('woff2');
  unicode-range: U+25, U+25a0, U+4e26, U+4f4e, U+5341, U+56f2, U+5bbf, U+5c45, U+5c55, U+5c5e, U+5dee, U+5e9c, U+5f7c, U+6255, U+627f, U+62bc, U+65cf, U+661f, U+666e, U+66dc, U+67fb, U+6975, U+6a4b, U+6b32, U+6df1, U+6e29, U+6fc0, U+738b, U+7686, U+7a76, U+7a81, U+7c73, U+7d75, U+7dd2, U+82e5, U+82f1, U+85ac, U+888b, U+899a, U+8a31, U+8a8c, U+8ab0, U+8b58, U+904a, U+9060, U+9280, U+95b2, U+984d, U+9ce5, U+ff18;
}
@font-face {
  font-family: 'Shippori Mincho';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ShipporiMincho-4.woff2") format('woff2');
  unicode-range: U+2b, U+d7, U+300e-300f, U+4e07, U+4e8c, U+512a, U+5149, U+518d, U+5236, U+52b9, U+52d9, U+5468, U+578b, U+57fa, U+5b8c, U+5ba2, U+5c02, U+5de5, U+5f37, U+5f62, U+623b, U+63d0, U+652f, U+672a, U+6848, U+6d41, U+7136, U+7537, U+754c, U+76f4, U+79c1, U+7ba1, U+7d44, U+7d4c, U+7dcf, U+7dda, U+7de8, U+82b1, U+897f, U+8ca9, U+8cfc, U+904e, U+9664, U+982d, U+9858, U+98a8, U+9a13, U+ff13, U+ff5c;
}
@font-face {
  font-family: 'Shippori Mincho';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ShipporiMincho-5.woff2") format('woff2');
  unicode-range: U+21-22, U+27-2a, U+2c-3b, U+3f, U+41-4d, U+4f-5d, U+61-7b, U+7d, U+ab, U+ae, U+b2-b3, U+b7, U+bb, U+c9, U+cd, U+d6, U+d8, U+dc, U+e0-e5, U+e7-ed, U+ef, U+f1-f4, U+f6, U+f8, U+fa, U+fc-fd, U+103, U+14d, U+1b0, U+300-301, U+1ebf, U+1ec7, U+2013-2014, U+201c-201d, U+2039-203a, U+203c, U+2048-2049, U+2113, U+2122, U+65e5, U+6708, U+70b9;
}
@font-face {
  font-family: 'Shippori Mincho';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ShipporiMincho-6.woff2") format('woff2');
  unicode-range: U+20, U+2027, U+3001-3002, U+3041-307f, U+3081-308f, U+3091-3093, U+3099-309a, U+309d-309e, U+30a1-30e1, U+30e3-30ed, U+30ef-30f0, U+30f2-30f4, U+30fb-30fe, U+ff0c, U+ff0e;
}
@font-face {
  font-family: 'Shippori Mincho';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ShipporiMincho-7.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  --bg: #fcfbf9;
  --bg-raised: #ffffff;
  --bg-band: #edf8e7;
  --bg-cream: #f2eee4;
  --forest: #1e4a09;
  --footer: #32800f; /* the brand's footer green (#3c9512), darkened for 4.5:1 white text */
  --ink: #1a1a1a;
  --ink-2: #666666;
  --ink-3: #666666;
  --line: #e8e8e3;
  --line-2: #d4d4d0;
  --link: #3d7b3f;
  --primary: #4cbb17;
  --primary-hover: #81cf5c;
  --primary-deep: #3da012;
  --select: #3d7b3f;
  --ring: rgb(76 175 80 / 0.5);
  --win-shadow: 0 0 0 1px #d4d4d0, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

  --display: "Shippori Mincho", Georgia, "Times New Roman", serif;
  --text: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --mac: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;

  --t-small: 0.9375rem;
  --t-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --t-lede: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --t-h3: clamp(1.25rem, 2vw, 1.75rem);
  --t-h2: clamp(1.875rem, 3.5vw, 2.75rem);
  --t-h1: clamp(2.75rem, 5vw, 4rem);

  --gutter: clamp(1.5rem, 4vw, 4rem);
  --section: clamp(4rem, 8vw, 7rem);
  --radius-win: 12px;
}

/* Japanese and Chinese: Geist has no CJK and the site's Shippori Mincho subsets cover only a few
   kanji, so headings use the system Mincho/Song (one face, no mixed glyphs) and text falls back
   from Geist to the system gothic. Headings get looser lines and no negative tracking. */
:root:lang(ja) {
  --display: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  --text: "Geist", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
}
:root:lang(zh) {
  --display: "Songti SC", "STSong", "Noto Serif SC", serif;
  --text: "Geist", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3, :lang(zh) h1, :lang(zh) h2, :lang(zh) h3 { letter-spacing: 0; line-height: 1.35; }
:lang(ja) body { line-break: strict; word-break: auto-phrase; }
/* German compounds ("Datenschutzrichtlinie") are wider than a phone at heading size. */
:lang(de) h1, :lang(de) h2, :lang(de) h3 { hyphens: auto; }
h1, h2, h3 { overflow-wrap: break-word; }

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--t-body);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

h2 { font-size: var(--t-h2); letter-spacing: -0.015em; line-height: 1.15; }
h3 { font-size: var(--t-h3); letter-spacing: normal; line-height: 1.2; }

p { margin: 0; text-wrap: pretty; }
a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

code {
  font-family: var(--mono);
  font-size: 0.88em;
  padding: 0.08em 0.32em;
  border-radius: 5px;
  background: var(--line);
  white-space: nowrap;
}

strong { font-weight: 600; }

:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
  border-radius: 6px;
}

.wrap {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
}
.skip-link:focus { top: 12px; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--forest);
}

.header-row {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.375rem;
  letter-spacing: -0.015em;
  margin-right: auto;
}
/* The icon's ground is deep forest too: a hairline keeps its edge visible. */
.brand img { width: 32px; height: 32px; filter: drop-shadow(0 0 0.6px rgb(255 255 255 / 0.9)); }

.nav { display: flex; gap: 4px; }
.nav a, .menu summary {
  color: rgb(255 255 255 / 0.9);
  text-decoration: none;
  font-size: var(--t-small);
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 6px;
  transition: color 150ms ease, background 150ms ease;
}
.nav a:hover, .menu summary:hover { color: #fff; background: rgb(255 255 255 / 0.1); }
.nav a[aria-current="page"], .menu summary.is-current { color: #fff; }

.header-actions { display: flex; align-items: center; gap: 10px; }

/* Header menus: <details> with the guides, and with the page in every language. */
.menu { position: relative; }
.menu summary {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  cursor: pointer;
  white-space: nowrap;
}
.menu summary::-webkit-details-marker { display: none; }
.lang-menu summary { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.9); }
.lang-menu summary svg { width: 16px; height: 16px; flex: none; }
.guides-menu summary svg { width: 10px; height: 7px; flex: none; transition: transform 150ms ease; }
.guides-menu[open] summary svg { transform: rotate(180deg); }
.menu[open] summary { color: #fff; background: rgb(255 255 255 / 0.1); }
.menu ul {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 60;
  min-width: 200px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--bg-raised);
  border-radius: 10px;
  box-shadow: var(--win-shadow);
}
.guides-menu ul { right: auto; left: 0; min-width: 240px; }
.menu a {
  display: block;
  padding: 7px 12px;
  border-radius: 6px;
  color: var(--ink);
  text-decoration: none;
  font-size: var(--t-small);
  line-height: 1.4;
}
.menu a:hover { background: var(--bg-band); }
.menu a[aria-current] { font-weight: 600; color: var(--select); }
.menu a[aria-current]::after { content: " ✓"; }
/* Header labels never wrap. Where the nav and the longer languages (French, Portuguese) don't fit,
   the menu button shows only the globe, and below that the header store button goes (the hero has one). */
.nav a, .site-header .btn { white-space: nowrap; }
@media (max-width: 1240px) {
  .lang-menu summary span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media (max-width: 1150px) { .site-header .btn-store--header { display: none; } }
/* The FAQ link is the first to go: the home page's questions are one scroll away, and each guide has its own. */
@media (max-width: 1300px) { .nav .nav-faq { display: none; } }

@media (max-width: 860px) {
  .nav { display: none; }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 24px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: background 150ms ease;
}
.btn-store { background: var(--primary); color: var(--ink); }
.btn-store:hover { text-decoration: none; background: var(--primary-hover); }
.btn-store--header { min-height: 36px; padding: 0 16px; font-size: 0.875rem; }
.site-header .btn-store--header:hover { background: var(--primary-deep); }
/* Phones: the hero has the same button, and the header has no room for it. */
@media (max-width: 640px) { .site-header .btn-store--header { display: none; } }
.btn-soon { color: var(--ink); background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-sm); }
.site-header .btn-soon { color: #fff; background: transparent; box-shadow: inset 0 0 0 1px #fff; }

.text-link { font-weight: 600; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding-top: clamp(3rem, 2rem + 5vw, 6.5rem);
  padding-bottom: clamp(3rem, 2rem + 4vw, 6rem);
  isolation: isolate;
}

.hero-title {
  font-size: var(--t-h1);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 14em;
}

/* The one loud thing: the Space key itself. */
.nobr { white-space: nowrap; }
.hero-title-rest { display: inline-block; }
/* German and Japanese start with the key: the words after it run on from the key's line. */
.hero-title--key-first .hero-title-rest { display: inline; }

.keycap {
  display: inline-block;
  font: inherit;
  /* A key label sits a little smaller than the heading, with room for Shippori Mincho's
     long descenders (the "p" in Space) above the key's bottom edge. */
  font-size: 0.86em;
  line-height: 1.3;
  letter-spacing: -0.02em;
  padding: 0 0.32em 0.06em;
  margin: 0 0.02em;
  border-radius: 0.16em;
  color: var(--ink);
  background: var(--bg-raised);
  box-shadow: 0 0 0 1px var(--line-2), inset 0 -0.06em 0 var(--line), var(--shadow-md);
  transform: translateY(-0.03em);
}

.lede {
  margin-top: 1.5rem;
  max-width: 44ch;
  font-size: var(--t-lede);
  line-height: 1.7;
  color: var(--ink-2);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  margin-top: 2.25rem;
}

.tour-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.tour-link .play {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--line-2);
}
.tour-link .play svg { width: 13px; margin-left: 2px; }
.tour-link:hover .play { background: var(--line); }

.hero-meta { margin-top: 1.25rem; color: var(--ink-3); font-size: var(--t-small); }

/* ---------- Demo: Finder + Quick Look ---------- */

.demo {
  --row: 28px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}

.finder {
  position: relative;
  display: flex;
  background: #ffffff;
  color: var(--ink);
  font-family: var(--mac);
  border-radius: var(--radius-win);
  box-shadow: var(--win-shadow);
  overflow: hidden;
  font-size: 13px;
  line-height: 1.2;
}

.demo .finder {
  grid-column: 1 / span 7;
  margin-right: -24px;
  grid-row: 1;
  margin-top: 64px;
  z-index: 1;
  align-self: start;
}

.finder-sidebar {
  flex: none;
  width: 150px;
  padding: 12px 10px;
  background: var(--bg);
  border-right: 1px solid var(--line);
}
.finder-sidebar p { margin: 0; }
.lights { display: flex; gap: 8px; padding: 5px 6px 20px; }
.lights i { display: block; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.18); }
.lights i { background: var(--line-2); }
.side-head { font-size: 11px; font-weight: 600; color: rgba(0, 0, 0, 0.45); padding: 10px 8px 4px; }
.side-item { padding: 6px 8px; border-radius: 7px; }
.side-item.is-on { background: rgba(0, 0, 0, 0.075); }

.finder-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.finder-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 14px;
}
.nav-caps {
  display: inline-flex;
  gap: 16px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.045);
  color: #3a3a3c;
}
.nav-caps svg { width: 8px; height: 13px; }
.finder-title { font-weight: 700; font-size: 14.5px; }

.finder-cols,
.finder-list [role="option"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px 70px;
  align-items: center;
  gap: 8px;
}

.finder-cols {
  height: 26px;
  padding: 0 20px 0 22px;
  font-size: 11.5px;
  color: rgba(0, 0, 0, 0.6);
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.09);
}

.finder-list {
  list-style: none;
  margin: 0;
  padding: 5px 10px 10px;
  outline: none;
}
.finder-list:focus-visible { box-shadow: inset 0 0 0 3px var(--select); border-radius: 0 0 var(--radius-win) 0; }

.finder-list [role="option"] {
  height: var(--row);
  padding: 0 10px 0 12px;
  border-radius: 6px;
  white-space: nowrap;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}
.finder-list [role="option"]:nth-child(even) { background: rgba(0, 0, 0, 0.028); }
.finder-list [role="option"]:hover { background: rgb(61 123 63 / 0.08); }
.finder-list [role="option"][aria-selected="true"] { background: var(--select); color: #fff; }

.demo .c-kind { display: none; }
.c-name { display: flex; align-items: center; gap: 7px; min-width: 0; }
.c-name > span { overflow: hidden; text-overflow: ellipsis; }
.c-name .doc-icon { flex: none; width: 15px; height: 19px; }
.c-date, .c-size, .c-kind { color: rgba(0, 0, 0, 0.6); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.c-size { text-align: right; padding-right: 10px; }
[aria-selected="true"] .c-date, [aria-selected="true"] .c-size, [aria-selected="true"] .c-kind { color: rgba(255, 255, 255, 0.86); }
.is-hidden-file .c-name > span { opacity: 0.66; }
[aria-selected="true"].is-hidden-file .c-name > span { opacity: 0.85; }

.spacebar-wrap {
  grid-column: 1 / span 5;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
  z-index: 1;
}

.spacebar {
  appearance: none;
  border: 0;
  width: min(360px, 100%);
  height: 64px;
  display: flex;
  align-items: flex-end;
  padding: 0 0 12px 18px;
  border-radius: 14px;
  font: 500 15px/1 var(--mac);
  letter-spacing: 0.02em;
  color: var(--ink-2);
  background: var(--bg-raised);
  box-shadow: 0 0 0 1px var(--line-2), inset 0 -4px 0 var(--line), var(--shadow-md);
  cursor: pointer;
  transition: transform 90ms ease, box-shadow 150ms ease;
}
.spacebar:hover { box-shadow: 0 0 0 1px var(--line-2), inset 0 -4px 0 var(--line), var(--shadow-md), 0 0 0 4px var(--ring); }
.spacebar:active, .spacebar.is-pressed { transform: translateY(3px); }
.spacebar.is-pressed { animation: key-glow 520ms ease; }

.demo-hint { color: var(--ink-3); font-size: var(--t-small); text-align: center; }
.hint-touch { display: none; }
@media (hover: none) {
  .hint-pointer { display: none; }
  .hint-touch { display: inline; }
}

/* Quick Look window */

.ql {
  margin: 0;
  background: #ffffff;
  color: #1d1d1f;
  font-family: var(--mac);
  border-radius: var(--radius-win);
  box-shadow: var(--win-shadow);
  overflow: hidden;
  container-type: inline-size;
}

.ql-bar {
  display: flex;
  align-items: center;
  gap: clamp(4px, 1cqi, 7px);
  height: clamp(30px, 5.6cqi, 44px);
  padding: 0 clamp(7px, 1.4cqi, 11px);
}

.ql-btn {
  display: grid;
  place-items: center;
  flex: none;
  width: clamp(12px, 2.05cqi, 16px);
  height: clamp(12px, 2.05cqi, 16px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #7d7d82;
  color: #fff;
}
.ql-btn svg { width: 50%; height: 50%; }
button.ql-btn { cursor: pointer; }
button.ql-btn:hover { background: #5b5b60; }

.ql-name {
  margin-left: 0.4em;
  font-weight: 700;
  font-size: clamp(11px, 1.73cqi, 13.5px);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.ql-share { width: clamp(11px, 1.8cqi, 14px); height: auto; margin-left: auto; margin-right: clamp(6px, 1.5cqi, 12px); color: #6e6e73; flex: none; }

.ql-open {
  flex: none;
  padding: 0 clamp(8px, 1.6cqi, 13px);
  height: clamp(20px, 3.3cqi, 26px);
  line-height: clamp(20px, 3.3cqi, 26px);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.075);
  font-size: clamp(10px, 1.66cqi, 13px);
  white-space: nowrap;
}
.ql-open[hidden] { display: none; }

.ql picture, .ql img { width: 100%; }

@media (prefers-color-scheme: dark) {
  .ql--adaptive { background: #2b2b2e; color: #f5f5f7; }
  .ql--adaptive .ql-btn { background: #8e8e93; }
  .ql--adaptive .ql-share { color: #aeaeb2; }
  .ql--adaptive .ql-open { background: rgba(255, 255, 255, 0.12); }
}
/* A Dark Mode render (SQL): the window is dark on every page, as in the App Store screenshot. */
.ql--dark { background: #2b2b2e; color: #f5f5f7; }
.ql--dark .ql-btn { background: #8e8e93; }
.ql--dark .ql-share { color: #aeaeb2; }
.ql--dark .ql-open { background: rgba(255, 255, 255, 0.12); }

.ql--demo {
  grid-column: 7 / -1;
  grid-row: 1 / span 2;
  align-self: start;
  z-index: 2;
  transform-origin: 18% 62%;
  transition: opacity 200ms ease, transform 260ms cubic-bezier(0.2, 0.8, 0.3, 1), visibility 0s linear 0s;
}
.ql--demo .ql-body { position: relative; aspect-ratio: 780 / 600; background: #fff; }
.ql--demo .ql-body img { width: 100%; height: auto; }
.ql--demo.is-closed {
  opacity: 0;
  transform: scale(0.35) translate(-30%, 8%);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, transform 220ms ease-in, visibility 0s linear 220ms;
}

@keyframes key-press {
  0%, 100% { transform: translateY(-0.03em); }
  30%, 55% { transform: translateY(0.05em); box-shadow: 0 0 0 1px var(--line-2), 0 0 0 0.06em var(--ring); }
}
@keyframes key-glow {
  0% { transform: translateY(3px); box-shadow: 0 0 0 1px var(--line-2), inset 0 -4px 0 var(--line), 0 0 0 4px var(--ring); }
  100% { transform: none; }
}
@keyframes ql-open {
  from { opacity: 0; transform: scale(0.35) translate(-30%, 8%); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-title .keycap { animation: key-press 620ms ease 380ms both; }
  .spacebar-wrap .spacebar:not(.is-pressed) { animation: key-glow 620ms ease 440ms both; }
  .ql--demo.intro { animation: ql-open 520ms cubic-bezier(0.2, 0.8, 0.3, 1) 560ms both; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ql--demo, .ql--demo.is-closed, .spacebar { transition: none; }
}

/* Demo on tablets and phones: stacked */
@media (max-width: 1023px) {
  .demo { display: flex; flex-direction: column; gap: 0; }
  .demo .finder { margin-top: 0; margin-right: 0; align-self: stretch; }
  .finder-sidebar { display: none; }
  .spacebar-wrap { margin-top: 26px; }
  .ql--demo { margin-top: 26px; transform-origin: 50% 0%; align-self: stretch; }
  .ql--demo.is-closed { transform: scale(0.92) translateY(-12px); }
  @keyframes ql-open-stacked { from { opacity: 0; transform: scale(0.92) translateY(-12px); } to { opacity: 1; transform: none; } }
  .ql--demo.intro { animation-name: ql-open-stacked; }
  .finder-list { max-height: calc(var(--row) * 7.5 + 12px); overflow-y: auto; overscroll-behavior: contain; }
}

@media (max-width: 640px) {
  .demo { --row: 34px; }
  .finder-cols, .finder-list [role="option"] { grid-template-columns: minmax(0, 1fr) 72px; }
  .c-date, .c-kind { display: none; }
  .finder-cols { padding: 0 16px 0 18px; }
  .finder-list { padding-inline: 6px; }
  .c-name { font-size: 14px; }
}

@media (min-width: 1024px) and (max-width: 1180px) {
  .finder-sidebar { display: none; }
}

/* ---------- Sections ---------- */

.section { padding-block: var(--section); }

.section-head { max-width: 52rem; margin-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.section-head p { margin-top: 1.25rem; max-width: 60ch; font-size: var(--t-lede); color: var(--ink-2); line-height: 1.5; }

/* Tour */

.tour { padding-top: clamp(2rem, 1rem + 4vw, 5rem); }
.video-frame {
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-cream);
  box-shadow: var(--win-shadow);
  aspect-ratio: 16 / 9;
}
.video-frame video { width: 100%; height: 100%; object-fit: cover; }

.transcript { margin-top: 1.5rem; max-width: 60rem; }
.transcript summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink-2);
  width: fit-content;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.transcript summary::-webkit-details-marker { display: none; }
.transcript summary::before, .faq summary::before {
  content: "";
  flex: none;
  width: 0;
  height: 0;
  border-left: 7px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transition: transform 160ms ease;
}
.transcript[open] summary::before, .faq details[open] summary::before { transform: rotate(90deg); }
.transcript ol { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.transcript li { display: grid; grid-template-columns: 3.2rem 1fr; gap: 1rem; color: var(--ink-2); }
.transcript time { font-family: var(--mono); font-size: 0.9em; color: var(--ink-3); padding-top: 0.1em; }

/* Viewers */

.viewer {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  gap: 2.5rem 0;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  border-top: 1px solid var(--line);
}

.viewer-copy { grid-column: 1 / span 5; grid-row: 1; max-width: 30rem; }
.viewer-copy p { margin-top: 1.1rem; color: var(--ink-2); }
.viewer > .stack, .viewer > .finder, .viewer > .formats { grid-column: 6 / -1; grid-row: 1; }
.viewer.is-flipped .viewer-copy { grid-column: 9 / -1; }
.viewer.is-flipped > .stack, .viewer.is-flipped > .finder, .viewer.is-flipped > .formats { grid-column: 1 / span 7; }

.points { margin: 1.25rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.55rem; color: var(--ink-2); }
.points li { position: relative; padding-left: 1.3rem; }
.points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--primary);
}

/* Overlapping windows. margin-top in % of the stack's width keeps the overlap steady at any size. */
.stack { display: grid; }
.stack > .ql { grid-area: 1 / 1; align-self: start; }
.stack > .ql:nth-child(1) { width: 84%; justify-self: start; }
.stack > .ql:nth-child(2) { width: 78%; justify-self: end; margin-top: 30%; }
.stack--markdown > .ql:nth-child(1) { width: 80%; }
.stack--markdown > .ql:nth-child(2) { width: 82%; margin-top: 34%; }
.stack--sqlite > .ql:nth-child(2) { width: 84%; margin-top: 30%; }
.stack--sql > .ql:nth-child(1) { width: 78%; }
.stack--sql > .ql:nth-child(2) { width: 82%; margin-top: 24%; }
.stack--env > .ql:nth-child(2) { width: 84%; margin-top: 28%; }
.stack--json > .ql:nth-child(1) { width: 70%; }
.stack--json > .ql:nth-child(2) { width: 88%; margin-top: 34%; }
.stack--mermaid > .ql:nth-child(1) { width: 86%; justify-self: end; }
.stack--mermaid > .ql:nth-child(2) { width: 82%; justify-self: start; margin-top: 25%; }
.stack--mermaid > .ql:nth-child(3) { width: 80%; justify-self: end; margin-top: 50%; }
.stack--csv > .ql:nth-child(1) { width: 100%; }
.stack--notebooks > .ql:nth-child(1) { width: 82%; }
.stack--notebooks > .ql:nth-child(2) { width: 80%; margin-top: 36%; }
.stack--logs > .ql:nth-child(1) { width: 86%; }
.stack--logs > .ql:nth-child(2) { width: 84%; margin-top: 30%; }
.stack--more > .ql:nth-child(1) { width: 82%; justify-self: start; }
.stack--more > .ql:nth-child(2) { width: 56%; justify-self: end; margin-top: 16%; }
.stack--more > .ql:nth-child(3) { width: 74%; justify-self: center; margin-top: 60%; }

/* Export formats: a document icon per format, in place of a window stack */
.formats {
  list-style: none;
  margin: 0;
  padding: clamp(0.5rem, 0.25rem + 1vw, 1rem) clamp(1.25rem, 0.75rem + 2vw, 2.25rem);
  background: #ffffff;
  border-radius: var(--radius-win);
  box-shadow: var(--win-shadow);
}
.formats li {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 22px);
  padding-block: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
  border-bottom: 1px solid var(--line);
}
.formats li:last-child { border-bottom: 0; }
.formats .doc-icon { flex: none; width: 30px; height: auto; }
.formats span { display: grid; gap: 0.2rem; color: var(--ink-2); }
.formats strong {
  font-family: var(--display);
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* Thumbnails: Finder icon view */
.finder--icons { flex-direction: column; }
.finder--icons .finder-toolbar { border-bottom: 0.5px solid rgba(0, 0, 0, 0.08); }
.finder--icons .lights { padding: 0; margin-right: 6px; }
.icon-grid {
  list-style: none;
  margin: 0;
  padding: clamp(14px, 3vw, 28px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2.4vw, 26px) clamp(10px, 2vw, 20px);
}
.icon-grid li { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.icon-grid img {
  width: 100%;
  max-width: 132px;
  border-radius: 3px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.16), 0 3px 10px rgba(0, 0, 0, 0.12);
}
.icon-grid span {
  font-size: 12px;
  padding: 1px 6px;
  border-radius: 5px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.icon-grid span.is-on { background: var(--select); color: #fff; }

@media (max-width: 900px) {
  .viewer { grid-template-columns: minmax(0, 1fr); }
  .viewer-copy, .viewer.is-flipped .viewer-copy,
  .viewer > .stack, .viewer > .finder, .viewer > .formats,
  .viewer.is-flipped > .stack, .viewer.is-flipped > .finder, .viewer.is-flipped > .formats { grid-column: 1; grid-row: auto; }
  .viewer-copy { max-width: 40rem; }
}
@media (max-width: 520px) {
  .icon-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .icon-grid li:nth-child(n + 7) { display: none; }
}

/* Privacy band */

.privacy-band { background: var(--bg-band); border-block: 1px solid var(--line); }
.privacy-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem clamp(2rem, 5vw, 5rem); align-items: center; }
.privacy-grid p { margin-top: 1.25rem; max-width: 56ch; color: var(--ink-2); font-size: var(--t-lede); line-height: 1.5; }
.privacy-grid p:last-child { font-size: var(--t-body); }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.checks li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--display);
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}
.checks li:last-child { border-bottom: 0; padding-bottom: 0; }
.checks svg { width: 28px; height: 28px; flex: none; color: var(--ink); }
@media (max-width: 820px) { .privacy-grid { grid-template-columns: 1fr; } }

/* Setup steps: a real sequence, so real numbers */

.setup h2 { max-width: 16ch; }
.steps {
  list-style: none;
  margin: clamp(2rem, 1.5rem + 2vw, 3.5rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem clamp(1.5rem, 3vw, 3rem);
  counter-reset: step;
}
.steps li { counter-increment: step; border-top: 2px solid var(--ink); padding-top: 1.1rem; }
.steps li::before {
  content: counter(step);
  display: block;
  font-family: var(--text);
  font-weight: 700;
  font-size: clamp(2.5rem, 2rem + 2vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 0.9rem;
}
.steps p { color: var(--ink-2); max-width: 32ch; }
.setup-note { margin-top: 2.5rem; max-width: 62ch; color: var(--ink-2); padding-left: 1rem; border-left: 3px solid var(--line-2); }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

.steps--compact { grid-template-columns: 1fr; gap: 1.25rem; margin-top: 1.25rem; }
.steps--compact li { display: grid; grid-template-columns: 2.5rem 1fr; border-top: 0; padding-top: 0; }
.steps--compact li::before { font-size: 1.5rem; margin: 0; }
.steps--compact p { max-width: 60ch; color: var(--ink-2); }

/* File types: a Finder list view */

.types { padding-top: calc(var(--section) * 0.6); }
.table-frame {
  background: var(--bg-raised);
  border-radius: var(--radius-win);
  box-shadow: 0 0 0 1px var(--line);
  overflow: hidden;
}
.types-table { width: 100%; border-collapse: collapse; font-size: var(--t-small); line-height: 1.45; }
.types-table thead th {
  text-align: left;
  white-space: nowrap;
  font-family: var(--text);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--ink-3);
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.types-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--ink) 3.5%, transparent); }
.types-table th[scope="row"], .types-table td { padding: 12px 16px; vertical-align: top; text-align: left; }
.types-table th[scope="row"] { font-weight: 600; white-space: nowrap; }
.kind { display: inline-flex; align-items: center; gap: 10px; }
.kind .doc-icon { flex: none; width: 16px; height: 20px; }
.exts code { background: transparent; padding: 0; margin-right: 0.35em; color: var(--ink); white-space: nowrap; }
.ext-word { color: var(--ink-3); margin-right: 0.35em; }
.types-table td { color: var(--ink-2); }
.thumb { white-space: nowrap; }
.thumb--no { color: var(--ink-3); }

@media (max-width: 820px) {
  .types-table thead { display: none; }
  .types-table, .types-table tbody, .types-table tr, .types-table th, .types-table td { display: block; }
  .types-table tr { padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .types-table tbody tr:nth-child(even) { background: transparent; }
  .types-table th[scope="row"], .types-table td { padding: 0; }
  .types-table td { margin-top: 6px; }
  .types-table td::before { content: attr(data-label) ": "; color: var(--ink-3); font-weight: 500; }
  .exts { line-height: 1.7; }
}

/* FAQ: disclosure triangles, like Finder's outline view */

.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 2rem clamp(2rem, 5vw, 5rem); align-items: start; }
.faq-grid > h2 { position: sticky; top: 96px; }
.faq-list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 1.15rem 0;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { color: var(--ink-3); transform: translateY(-0.12em); }
.faq details[open] summary::before { transform: translateY(-0.12em) rotate(90deg); }
.faq summary h3 { font-family: var(--text); font-size: 1.125rem; font-weight: 600; letter-spacing: normal; line-height: 1.4; }
.faq summary:hover h3 { color: var(--link); }
.faq details p { padding: 0 0 1.35rem 21px; max-width: 62ch; color: var(--ink-2); }
@media (max-width: 860px) {
  .faq-grid { grid-template-columns: 1fr; }
  .faq-grid > h2 { position: static; }
}

/* At a glance */

.facts { padding-top: calc(var(--section) * 0.4); }
.facts h2 { font-size: var(--t-h3); }
.facts-list { margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 0 clamp(1.5rem, 4vw, 3.5rem); }
.facts-list > div { padding: 0.9rem 0; border-top: 1px solid var(--line); }
.facts-list dt { font-size: 0.8125rem; font-weight: 600; color: var(--ink-3); }
.facts-list dd { margin: 0.2rem 0 0; }
.closing { margin-top: 3rem; }

/* ---------- Support, privacy, 404 ---------- */

.doc-page { padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(2rem, 1rem + 3vw, 4rem); }
.doc > * { max-width: 760px; }
.doc .steps + p { margin-top: 1.25rem; color: var(--ink-2); }
.doc-head { margin-bottom: 2.5rem; }
.doc h1 { font-size: var(--t-h1); letter-spacing: -0.02em; }
.doc .lede { max-width: 52ch; }
.doc-date { margin-top: 1rem; color: var(--ink-3); font-size: var(--t-small); }
.doc section { padding-top: 2.25rem; }
.doc section + section { margin-top: 0.5rem; border-top: 1px solid var(--line); }
.doc h2 { font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem); letter-spacing: -0.015em; margin-bottom: 0.9rem; }
.doc section > p { color: var(--ink-2); max-width: 64ch; }
.doc section > p + p { margin-top: 0.9rem; }
.doc-contact p { font-size: var(--t-lede); color: var(--ink); }
.trouble { padding-top: 1.25rem !important; border-top: 0 !important; }
.trouble h3 { font-family: var(--text); font-size: 1.1875rem; font-weight: 600; letter-spacing: normal; }
.trouble ol { margin: 0.75rem 0 0; padding-left: 1.4rem; color: var(--ink-2); display: grid; gap: 0.45rem; max-width: 64ch; }
.doc-page--center { min-height: 55vh; display: grid; align-content: center; }
.doc-page--center p { margin-top: 1.25rem; }
.page-support .faq { padding-top: 2rem; }

/* ---------- Footer ---------- */

.site-footer { background: var(--footer); padding-block: 3rem; font-size: var(--t-small); color: #fff; }
.footer-grid { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem 3rem; align-items: start; }
.footer-brand { display: flex; gap: 14px; align-items: center; color: #fff; }
.footer-brand strong { color: #fff; font-family: var(--display); font-weight: 400; font-size: 1.25rem; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 22px; }
.footer-links a { color: #fff; transition: opacity 150ms ease; }
.footer-links a:hover { opacity: 0.8; }
.footer-legal { grid-column: 1 / -1; max-width: 80ch; }
.site-footer a { color: #fff; }
@media (max-width: 700px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-links { justify-content: flex-start; }
}

/* ---------- Guide pages (/csv-to-excel and the like) ---------- */

.topic-hero { padding-top: clamp(1.5rem, 1rem + 2vw, 3rem); }
.crumbs { font-size: var(--t-small); color: var(--ink-3); }
.crumbs a { color: var(--ink-2); }
.topic-intro { border-top: 0; padding-top: clamp(1.5rem, 1rem + 2vw, 3rem); }
.topic-intro h1 { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem); line-height: 1.08; }
.topic-intro .lede { margin-top: 1.25rem; font-size: var(--t-lede); line-height: 1.55; color: var(--ink-2); }
.topic-intro .cta-row { margin-top: 1.75rem; }
.topic-intro .hero-meta { margin-top: 0.9rem; }
.topic-intro > .topic-shot { grid-column: 6 / -1; grid-row: 1; margin: 0; }
.topic-shot img { border-radius: var(--radius-win); box-shadow: var(--win-shadow); }
@media (max-width: 900px) { .topic-intro > .topic-shot { grid-column: 1; grid-row: auto; } }

.topic-steps { background: var(--bg-cream); }
.steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .steps--4, .steps--2 { grid-template-columns: 1fr; } }

.topic-blocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem clamp(2rem, 4vw, 4rem); }
.topic-block h2 { font-size: var(--t-h3); }
.topic-block > p { margin-top: 1rem; color: var(--ink-2); }
@media (max-width: 1000px) { .topic-blocks { grid-template-columns: 1fr; max-width: 46rem; } }

.topic-related { border-top: 1px solid var(--line); }
.guide-list { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.guide-list a {
  display: grid;
  gap: 0.35rem;
  height: 100%;
  padding: 1.1rem 1.25rem;
  border-radius: 10px;
  background: var(--bg-raised);
  box-shadow: 0 0 0 1px var(--line-2);
  color: var(--ink-2);
  text-decoration: none;
  line-height: 1.45;
  transition: box-shadow 150ms ease;
}
.guide-list a:hover { box-shadow: 0 0 0 2px var(--select); }
.guide-list strong { color: var(--ink); font-size: 1.0625rem; }
.guide-list span { font-size: var(--t-small); }
.topic-all { margin-top: 1.75rem; }
.topic-closing { background: var(--bg-band); }
.topic-closing p { margin-top: 1rem; max-width: 56ch; color: var(--ink-2); }

.guide-link { margin-top: 1.25rem; }

/* Footer: the guides, on their own row */
.footer-guides { grid-column: 1 / -1; display: grid; gap: 0.5rem; padding-top: 1.25rem; border-top: 1px solid rgb(255 255 255 / 0.25); }
.footer-guides p { margin: 0; color: #fff; font-weight: 600; }
.footer-guides ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.footer-guides a { color: #fff; }
.footer-guides a:hover { opacity: 0.8; }
.topic-body { padding-bottom: 0; }