/* Guides, press, privacy and the changelog: the home page's big type and real panel pieces, set for reading. */
.page { max-width: calc(1150px + 2 * var(--side)); margin: 0 auto; padding: 0 var(--side); }

/* ---------- The title, set like the home page's hero ---------- */
.page-head { padding-top: clamp(130px, 18vh, 170px); max-width: 1000px; }
.crumb { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 600; color: var(--violet); }
.crumb::before { content: "‹"; font-size: 20px; line-height: 1; transition: transform 160ms var(--ease); }
.crumb:hover::before { transform: translateX(-3px); }
.page-head h1 { margin-top: 14px; font-size: clamp(34px, 5.4vw, 70px); line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }
.crumb + h1 { margin-top: 18px; }
.page-lede { margin-top: 24px; max-width: 58ch; font-size: 20px; line-height: 1.5; color: var(--muted); }
.page-lede a { color: var(--violet); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- The panel on the desktop, as on the home page ---------- */
.page-stage {
  position: relative; margin-top: 64px; padding: 56px clamp(20px, 5%, 64px); border-radius: 28px; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: center;
  background: linear-gradient(160deg, #efe8fc, #d8cbf4);
}
.page-stage .wallpaper { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.page-stage .panel { width: 100%; }
.page-stage figcaption { max-width: 36ch; font-size: 20px; line-height: 1.45; color: var(--ink); font-weight: 500; }
.page-stage figcaption small { display: block; margin-top: 12px; font-size: 15px; font-weight: 500; color: var(--muted); }
.page-stage .panel[data-layout="mixer"] { width: 100%; }
.page-stage .strip input[type="range"] { height: 130px; }
.page-stage .strip input[type="range"]::-webkit-slider-runnable-track { height: 130px; }

/* ---------- Reading column with what's on the page beside it ---------- */
.page-body { margin-top: 72px; display: grid; grid-template-columns: minmax(0, 700px) 220px; justify-content: space-between; gap: 64px; }
.toc { align-self: start; position: sticky; top: 110px; font-size: 15px; }
.toc p { font-weight: 600; color: var(--ink); }
.toc ol { margin-top: 12px; padding: 0; list-style: none; display: grid; gap: 2px; border-left: 1px solid var(--line); }
.toc a { display: block; padding: 6px 0 6px 16px; margin-left: -1px; border-left: 1px solid transparent; color: var(--muted); transition: color 160ms, border-color 160ms; }
.toc a:hover { color: var(--ink); border-left-color: var(--violet); }

.prose { font-size: 18px; line-height: 1.65; }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin-top: 72px; font-size: clamp(28px, 3vw, 36px); line-height: 1.12; letter-spacing: -0.03em; scroll-margin-top: 100px; }
.prose h3 { margin-top: 36px; font-size: 21px; line-height: 1.3; letter-spacing: -0.015em; }
.prose p, .prose li { color: #2e2742; }
.prose p { margin-top: 16px; }
.prose h2 + p, .prose h3 + p { margin-top: 12px; }
.prose ul, .prose ol { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: step; }
.prose li { position: relative; padding-left: 30px; }
.prose li + li { margin-top: 10px; }
.prose ul > li::before { content: ""; position: absolute; left: 8px; top: 0.72em; width: 6px; height: 6px; border-radius: 50%; background: var(--violet); }
.prose ol > li { counter-increment: step; }
.prose ol > li::before { content: counter(step); position: absolute; left: 0; top: 0.3em; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; background: var(--lilac); color: var(--violet); font-size: 12.5px; font-weight: 700; line-height: 1; }
.prose a { color: var(--violet); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--ink); }
.prose figure { margin-top: 28px; }
.prose figure img { border-radius: 16px; }
.prose figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); }

.answer { margin-top: 0; padding: 26px 28px; border-radius: 22px; background: var(--surface); }
.answer p { margin-top: 0; color: var(--ink); }

.facts { margin-top: 20px; width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.facts th, .facts td { text-align: left; vertical-align: top; padding: 14px 0; border-bottom: 1px solid var(--line); }
.facts th { width: 34%; padding-right: 16px; color: var(--muted); font-weight: 500; }
.facts td { color: var(--ink); }
.note { font-size: 14px; color: var(--muted) !important; }
.table-scroll { margin-top: 24px; overflow-x: auto; }
.table-scroll .facts { margin-top: 0; }
.compare { min-width: 640px; font-size: 15px; }
.compare th { width: 22%; }
.compare td { padding-right: 14px; }
.compare tr:first-child td { padding-bottom: 10px; }

.downloads { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.downloads a { display: block; padding: 10px 10px 14px; border-radius: 20px; background: var(--surface); color: var(--ink) !important; text-decoration: none !important; transition: background 160ms; }
.downloads a:hover { background: var(--lilac); }
.downloads img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; border-radius: 12px; background: #fff; }
.downloads .contain { object-fit: contain; padding: 18px; }
.downloads span { display: block; margin: 10px 4px 0; font-size: 14px; line-height: 1.4; color: var(--muted); }

/* ---------- The guides, each shown by the piece of the panel it's about ---------- */
.guide-list { margin-top: 64px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.guide-list .piece { height: 100%; transition: background 160ms; }
.guide-list .piece:hover { background: var(--lilac); }
.guide-list .frag { pointer-events: none; }
.guide-list h2 { margin: 18px 6px 0; font-size: 20px; line-height: 1.25; letter-spacing: -0.02em; }
.guide-list .piece > p { margin-top: 6px; }
.guide-list .is-wide { grid-column: span 2; }
.frag .strip { padding: 8px 4px; gap: 6px; }
.frag .strip input[type="range"] { height: 76px; }
.frag .strip input[type="range"]::-webkit-slider-runnable-track { height: 76px; }
.frag .mini-mixer { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.frag .slider-row[hidden] { display: none; }
.compare-mini .out-row { grid-template-columns: 1fr auto; }
.compare-mini .out-row small { font-size: 12px; }

/* ---------- Changelog ---------- */
.release { margin-top: 72px; padding-top: 28px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 220px minmax(0, 700px); gap: 64px; }
.release h2 { font-size: clamp(40px, 4.6vw, 58px); line-height: 1; letter-spacing: -0.04em; }
.release .pro-mark { margin-top: 14px; }
.release .prose > p:first-child { font-size: 20px; color: var(--ink); }

/* ---------- 404 ---------- */
.link-cards { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.link-cards a { display: block; padding: 26px 26px 28px; border-radius: 24px; background: var(--surface); transition: background 160ms; }
.link-cards a:hover { background: var(--lilac); }
.link-cards strong { display: flex; justify-content: space-between; font-size: 22px; letter-spacing: -0.02em; }
.link-cards strong::after { content: "›"; color: var(--violet); }
.link-cards span { display: block; margin-top: 8px; color: var(--muted); }
.page-note { margin-top: 40px; color: var(--muted); }
.page-note a { color: var(--violet); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- The end of every page: the launch, then the name ---------- */
.page-end { margin-top: 150px; text-align: center; }
.page-end h2 { font-size: clamp(36px, 4.6vw, 58px); line-height: 1.06; letter-spacing: -0.03em; }
.page-end p { max-width: 50ch; margin: 16px auto 0; font-size: 18px; color: var(--muted); }
.page-end .button-primary { margin-top: 32px; }
.page-wordmark { overflow: hidden; text-align: center; }
.page-wordmark .wordmark { margin-top: 90px; }

@media (max-width: 960px) {
  .page-stage { grid-template-columns: 1fr; gap: 32px; justify-items: center; text-align: center; }
  .page-stage .panel { max-width: 360px; text-align: left; }
  .page-body { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
  .guide-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .release { grid-template-columns: 1fr; gap: 20px; }
  .link-cards { grid-template-columns: 1fr; max-width: 520px; }
}
@media (max-width: 640px) {
  .page-lede { font-size: 18px; }
  .page-stage { margin-top: 44px; padding: 32px 16px; border-radius: 22px; }
  .page-stage figcaption { font-size: 18px; }
  .page-body { margin-top: 52px; }
  .prose { font-size: 17px; }
  .prose h2 { margin-top: 56px; }
  .facts th { width: 40%; }
  .guide-list { grid-template-columns: 1fr; max-width: 420px; }
  .guide-list .is-wide { grid-column: auto; }
  .page-end { margin-top: 110px; }
  .page-end .button-primary { width: 100%; }
}