/* ============================================================
   Guides (/docs, /docs/<slug>) and the legal pages (/privacy, /terms),
   on the GettingBooked design system.
   Static pages, so the tokens live here rather than in the React bundle.
   Values mirror web/src/v2/tokens.css and the landing page
   (web/src/components/landing/landing-v2.css): DM Sans throughout, role
   colours with a dark appearance that follows the device, an 8pt grid,
   44px targets, content first (a tone or a hairline, never a frame round
   content), lists not cards, one filled button per view, no decorative
   icons and no motion beyond instant state changes.
   When the landing page's bar or footer changes, mirror it here.
   ============================================================ */

/* ── Role tokens ── */
:root {
  color-scheme: light dark;
  --bg: #FAF9F6; --bg-2: #F1EEE6; --surface: #FFFFFF;
  --label: #1A1F2E; --label-2: #4A5357; --label-3: #5B6B73; --separator: #E0DBD0;
  --tint-text: #157554; --tint-fill: #157554; --tint-pressed: #0F5F46; --on-tint: #FFFFFF; --accent-large: #1D9E75;
  --select: #DDEFE6; --hover: #E8E4DA;
  --warn-text: #8A5A12; --warn-dot: #B57A1E; --warn-soft: #FBF1DE;
  --night: #0F1B16; --night-2: #2A3D34; --on-night: #C9D3CE; --on-night-3: #8FA39A; --leaf: #4CC79A;
  --elevation-1: 0 1px 2px rgba(26, 31, 46, .06), 0 1px 0 rgba(26, 31, 46, .04);
  --font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F1B16; --bg-2: #17261F; --surface: #1E2F27;
    --label: #F4F7F5; --label-2: #C9D3CE; --label-3: #8FA39A; --separator: #2A3D34;
    --tint-text: #4CC79A; --tint-fill: #4CC79A; --tint-pressed: #7FD9B2; --on-tint: #0F1B16; --accent-large: #4CC79A;
    --select: #1F3D31; --hover: #253A30;
    --warn-text: #F2C46D; --warn-dot: #F2C46D; --warn-soft: #33291A;
  }
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; overflow-wrap: anywhere; background: var(--bg); color: var(--label);
  font: 500 1.0625rem/1.6 var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { margin: 0; font-family: var(--font); font-weight: 700; color: var(--label); text-wrap: balance; }
p, ol, ul, dl, dd, figure { margin: 0; }
a { color: inherit; }
strong, b { font-weight: 700; color: var(--label); }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--tint-text); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--select); color: var(--label); }
.lp-figure { font-variant-numeric: tabular-nums; }

/* ── Shell ── */
.gb-shell { width: 100%; max-width: 1264px; margin: 0 auto;
  padding: 0 max(32px, env(safe-area-inset-right)) 0 max(32px, env(safe-area-inset-left)); }
@media (max-width: 560px) { .gb-shell { padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); } }

/* ── Bar: the landing page's, full width, sticky, a hairline under it ── */
.bar { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--separator);
  background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); }
@media (prefers-reduced-transparency: reduce) { .bar { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1264px; min-height: 72px; margin: 0 auto;
  padding: 0 max(32px, env(safe-area-inset-right)) 0 max(32px, env(safe-area-inset-left)); }
.logo { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.nav nav ul { display: flex; gap: 32px; margin: 0; padding: 0; list-style: none; font-size: .9375rem; }
.nav nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--label-2); text-decoration: none; }
.nav nav a:hover { color: var(--label); text-decoration: underline; text-underline-offset: 4px; }
.nav nav a[aria-current="page"] { color: var(--label); font-weight: 700; }
.nav-end { display: flex; align-items: center; gap: 12px; font-size: .9375rem; }
.nav-signin { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--label);
  color: var(--label); font-weight: 600; text-decoration: none; white-space: nowrap; }
.nav-signin:hover { background: var(--bg-2); }
/* Phones: the bar keeps the logo and the one action; the page's own sections scroll in a rail under it. */
.rail { display: none; gap: 24px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; white-space: nowrap;
  border-bottom: 1px solid var(--separator); font-size: .9375rem; }
.rail::-webkit-scrollbar { display: none; }
.rail a { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 44px; color: var(--label-2); text-decoration: none; }
@media (max-width: 900px) {
  .nav { gap: 12px; padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
  .nav nav { display: none; }
  .rail { display: flex; }
}
@media (max-width: 520px) { .nav-signin { display: none; } }

/* ── Buttons: pills. The filled one is the view's one primary action. ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 8px 0 22px; border: 0;
  border-radius: 999px; background: var(--tint-fill); color: var(--on-tint); font: 600 1rem var(--font); text-decoration: none; white-space: nowrap; cursor: pointer; }
.btn:hover { background: var(--tint-pressed); }
.btn .ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; background: rgba(255, 255, 255, .16); }
.btn.sm { min-height: 44px; padding: 0 4px 0 18px; font-size: .9375rem; }
.btn.sm .ico { width: 32px; height: 32px; }
.btn.quiet { background: transparent; color: var(--label); box-shadow: inset 0 0 0 1.5px var(--label); padding: 0 22px; }
.btn.quiet:hover { background: var(--bg-2); }
@media (prefers-color-scheme: dark) { .btn .ico { background: rgba(15, 27, 22, .14); } }
.text-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--tint-text); font-weight: 600; text-decoration: none; }
.text-btn:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ── Type ── */
.tag { color: var(--tint-text); font-size: .875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.gb-h1 { font-size: min(4rem, 11vw); line-height: 1.04; letter-spacing: -0.035em; }
.gb-h1 em, .gb-h1 .accent { font-style: normal; color: var(--accent-large); }
.gb-h2 { font-size: min(3rem, 8vw); line-height: 1.08; letter-spacing: -0.03em; }
.gb-h3 { font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.02em; }
.gb-lead { max-width: 600px; font-size: 1.25rem; line-height: 1.55; color: var(--label-2); }
.gb-section { padding-top: 96px; }
@media (max-width: 900px) { .gb-section { padding-top: 72px; } }

/* ── /docs hero ── */
.docs-hero { display: flex; flex-direction: column; gap: 24px; padding-top: 96px; }
@media (max-width: 900px) { .docs-hero { padding-top: 48px; } }
.docs-hero h1 { max-width: 15ch; }
.docs-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.docs-meta { display: flex; flex-wrap: wrap; gap: 24px 56px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--separator); }
.docs-meta strong { display: block; font-size: 1.75rem; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.docs-meta span { display: block; margin-top: 4px; font-size: .9375rem; color: var(--label-3); }

/* ── Start here: numbered steps on hairlines (landing "How it works") ── */
.start-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 48px; padding: 0; list-style: none; }
@media (max-width: 900px) { .start-grid { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--separator); } }
.start-grid > li { display: flex; flex-direction: column; gap: 8px; padding-top: 24px; border-top: 1px solid var(--separator); }
@media (max-width: 900px) { .start-grid > li { padding: 24px 0; border-top: 0; border-bottom: 1px solid var(--separator); } }
.start-grid .n { font-size: 1.5rem; font-weight: 700; line-height: 1.2; color: var(--tint-text); font-variant-numeric: tabular-nums; }
.start-grid p { color: var(--label-2); max-width: 40ch; }
.start-grid a { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; color: var(--tint-text); font-weight: 600; text-decoration: none; }
.start-grid a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ── Guide index: groups of rows on hairlines ── */
.idx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 40px; margin-top: 48px; }
@media (max-width: 1000px) { .idx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .idx-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.idx-label { padding-bottom: 8px; font-size: .9375rem; font-weight: 600; color: var(--label-3); border-bottom: 1px solid var(--separator); }
.idx-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 8px 0;
  border-bottom: 1px solid var(--separator); color: var(--label); text-decoration: none; }
.idx-link:hover { color: var(--tint-text); }
.idx-link:hover .go { color: var(--tint-text); }
.idx-link .go { flex: none; display: inline-flex; color: var(--label-3); }
.owners-list { max-width: 760px; margin-top: 32px; border-top: 1px solid var(--separator); }
.owners-list .idx-link { min-height: 64px; font-weight: 600; }

/* ── Guide sections ── */
.guides { padding-top: 96px; }
@media (max-width: 900px) { .guides { padding-top: 72px; } }
/* The steps list closes each guide with its own hairline, so sections are set apart by space, not a second rule. */
.guide { max-width: 760px; margin-bottom: 96px; scroll-margin-top: 96px; }
.guide:last-of-type { margin-bottom: 0; }
@media (max-width: 900px) { .guide { margin-bottom: 72px; } }
.guide > .n { font-size: .9375rem; font-weight: 700; color: var(--tint-text); font-variant-numeric: tabular-nums; }
.guide > h2 { margin-top: 8px; font-size: min(2.25rem, 7vw); line-height: 1.1; letter-spacing: -0.025em; max-width: 20ch; }
.guide > .lead { margin-top: 16px; max-width: 62ch; font-size: 1.125rem; color: var(--label-2); }

/* Steps: numbered rows on hairlines */
.steps { margin: 32px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--separator); }
.steps > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--separator); }
.steps .sn { font-size: 1.0625rem; font-weight: 700; color: var(--tint-text); font-variant-numeric: tabular-nums; }
.steps h3 { font-size: 1.0625rem; line-height: 1.4; letter-spacing: -0.01em; }
.steps p { margin-top: 6px; max-width: 62ch; color: var(--label-2); }

/* Callouts: a tone, never a border. Tips on bg-2; notes that warn on warn-soft. */
.tip, .note { margin-top: 16px; padding: 16px 20px; border-radius: 14px; max-width: 62ch; font-size: 1rem; line-height: 1.55; color: var(--label-2); }
.tip { background: var(--bg-2); }
.note { background: var(--warn-soft); }
.tip strong, .note strong { color: var(--label); }

/* Inline field names, URLs and commands */
.chip { display: inline-block; padding: 0 8px; border-radius: 6px; background: var(--bg-2); color: var(--label); font-size: .9375em; font-weight: 600; white-space: nowrap; }

/* Definition rows */
.defs { margin-top: 24px; border-top: 1px solid var(--separator); }
.defs > div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--separator); }
.defs dt { font-weight: 700; color: var(--label); }
.defs dd { color: var(--label-2); }
@media (max-width: 640px) { .defs > div { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* Tables: hairlines, sentence-case headers in label-3 */
.table-wrap { overflow-x: auto; margin-top: 24px; }
table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 1rem; }
th { padding: 0 16px 10px 0; border-bottom: 1px solid var(--separator); text-align: left; font-size: .9375rem; font-weight: 600; color: var(--label-3); }
td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--separator); vertical-align: top; line-height: 1.55; color: var(--label-2); }
td:first-child { color: var(--label); font-weight: 700; }

/* An illustrative mini-site, drawn in the Studio template's own look (a customer's brand colour inside it).
   It is a picture, so it sits on a tone with its own corners, like the landing page's screens. */
.frame { max-width: 620px; margin-top: 32px; padding: 16px; border-radius: 28px; background: var(--bg-2); }
.frame-in { overflow: hidden; border-radius: 14px; background: #FAF6F0; color: #15130F; font-family: 'Plus Jakarta Sans', var(--font); }
.frame-bar { display: flex; align-items: center; gap: 7px; padding: 14px 18px; border-bottom: 1px solid #EDE6DA; font-family: var(--font); }
.frame-bar i { width: 9px; height: 9px; border-radius: 50%; background: #E0DBD0; }
.frame-bar .url { margin-left: 12px; font-size: .75rem; font-style: normal; color: #6B655C; }
.frame-body { padding: 24px 26px 26px; }
.frame-kick { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; color: #D9472B; }
.frame-body h4 { margin: 9px 0 0; color: #15130F; font: 800 28px/1 'Plus Jakarta Sans', var(--font); letter-spacing: -.01em; text-transform: uppercase; }
.frame-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 20px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(21,19,15,.6); }
.frame-meta b { color: #15130F; font-weight: 700; }
.frame-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.frame-row { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: #F1EAE0; }
.frame-row .t { font-weight: 800; font-size: 17px; line-height: 1.1; }
.frame-row .name { font-weight: 700; font-size: 15px; line-height: 1.2; color: #15130F; }
.frame-row .sub { margin-top: 5px; font-size: 11.5px; color: rgba(21,19,15,.7); }
.frame-row .sub .low { color: #C2401F; }
.frame-row .act { display: inline-flex; align-items: center; justify-content: center; padding: 9px 14px; border: 1.5px solid #15130F; border-radius: 12px;
  background: #FAF6F0; color: #15130F; font-size: 11.5px; font-weight: 700; letter-spacing: .01em; text-transform: uppercase; white-space: nowrap; }
.frame-row.is-full .act { border-color: #E7DDCE; background: transparent; color: rgba(21,19,15,.55); }
@media (max-width: 560px) {
  .frame { padding: 12px; border-radius: 24px; }
  .frame-row { grid-template-columns: 52px 1fr; grid-template-areas: "time main" "time end"; gap: 4px 12px; }
  .frame-row .t { grid-area: time; align-self: start; padding-top: 2px; }
  .frame-row .m { grid-area: main; }
  .frame-row .act { grid-area: end; justify-self: start; margin-top: 9px; }
}

/* ── Closing panel: one tone, one primary action ── */
.cta-banner { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 96px; padding: min(64px, 7vw); border-radius: 28px; background: var(--bg-2); }
.cta-banner h2 { max-width: 16ch; }
.cta-banner p { max-width: 52ch; font-size: 1.125rem; color: var(--label-2); }
.cta-banner .btn { margin-top: 8px; }
@media (max-width: 900px) { .cta-banner { margin-top: 72px; } }

/* ── Footer: Night, as on the landing page ── */
.foot { margin-top: 112px; padding: 64px max(32px, env(safe-area-inset-right)) 40px max(32px, env(safe-area-inset-left)); background: var(--night); color: var(--on-night); }
@media (prefers-color-scheme: dark) { .foot { border-top: 1px solid var(--separator); } }
.foot > * { max-width: 1200px; margin-left: auto; margin-right: auto; }
.foot :focus-visible { outline-color: var(--leaf); }
.fcols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 3fr); gap: 32px; }
.fcols > div:first-child { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.fcols > div:first-child p { max-width: 280px; }
.fcols a.social { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--leaf); font-weight: 600; text-decoration: none; }
.fnav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.fnav > div { display: flex; flex-direction: column; }
.fnav h3 { margin-bottom: 6px; color: #FFFFFF; font-size: .9375rem; }
.fnav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-night); text-decoration: none; }
.fnav a:hover, .fcols a.social:hover { text-decoration: underline; text-underline-offset: 4px; }
.fbase { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--night-2);
  font-size: .875rem; color: var(--on-night-3); }
@media (max-width: 900px) { .foot { padding: 56px max(20px, env(safe-area-inset-right)) 32px max(20px, env(safe-area-inset-left)); } .fcols { grid-template-columns: minmax(0, 1fr); gap: 40px; } }
@media (max-width: 560px) { .fnav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ============================================================
   Articles (/docs/<slug>)
   ============================================================ */
.art-hero { display: flex; flex-direction: column; gap: 20px; padding-top: 64px; }
@media (max-width: 900px) { .art-hero { padding-top: 32px; } }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .9375rem; color: var(--label-3); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--tint-text); font-weight: 600; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 4px; }
.art-hero h1 { max-width: 18ch; font-size: min(3.5rem, 10vw); line-height: 1.05; letter-spacing: -0.035em; }
.art-hero .gb-lead { max-width: 58ch; }
.byline { display: flex; flex-wrap: wrap; gap: 4px 24px; max-width: 760px; padding-top: 16px; border-top: 1px solid var(--separator); font-size: .9375rem; color: var(--label-3); }
.byline strong { font-weight: 600; color: var(--label-2); }
/* The header picture: on its own sand ground, with its corners, no frame */
.art-ill { margin-top: 20px; }
.art-ill img { width: 100%; max-width: 1000px; border-radius: 28px; }
@media (max-width: 560px) { .art-ill img { border-radius: 20px; } }

/* The reading column */
.prose { max-width: 700px; padding-top: 48px; }
.prose > * + * { margin-top: 20px; }
.prose p, .prose li { font-size: 1.125rem; line-height: 1.7; color: var(--label-2); }
.prose strong { color: var(--label); }
.prose h2 { margin-top: 64px; scroll-margin-top: 96px; font-size: min(2rem, 7vw); line-height: 1.15; letter-spacing: -0.025em; }
.prose h3 { margin-top: 36px; font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.015em; }
.prose h2 + *, .prose h3 + * { margin-top: 12px; }
.prose h2 + h3 { margin-top: 24px; }
.prose ul, .prose ol { padding-left: 24px; }
.prose li + li { margin-top: 8px; }
.prose li::marker { color: var(--tint-text); font-weight: 700; }
.prose a { color: var(--tint-text); font-weight: 600; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.prose .tip, .prose .note { max-width: none; }
.prose table { font-size: 1rem; }

/* On this page */
.toc b { display: block; padding-bottom: 8px; font-size: .9375rem; font-weight: 600; color: var(--label-3); border-bottom: 1px solid var(--separator); }
.toc ol { margin: 0; padding: 0 !important; list-style: none; counter-reset: toc; }
.toc li { margin: 0 !important; counter-increment: toc; }
.toc a { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 6px 0; border-bottom: 1px solid var(--separator);
  color: var(--label) !important; font-weight: 500 !important; font-size: 1rem; text-decoration: none; }
.toc a::before { content: counter(toc); min-width: 16px; color: var(--tint-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.toc a:hover { color: var(--tint-text) !important; }

/* Something to copy as it is: a tone, no frame */
.template { padding: 24px; border-radius: 20px; background: var(--bg-2); }
.template .label { margin: 0 0 8px; font-size: .9375rem; font-weight: 600; color: var(--label-3); }
.template > * + * { margin-top: 12px; }
.template p { font-size: 1.0625rem; color: var(--label); }
@media (max-width: 560px) { .template { padding: 20px; } }

/* How GettingBooked does it: the selection tone */
.in-app { padding: 20px 24px; border-radius: 20px; background: var(--select); }
.in-app b { display: block; margin-bottom: 6px; font-size: .9375rem; color: var(--tint-text); }
.in-app p { font-size: 1rem; line-height: 1.6; color: var(--label); }
.in-app p + p { margin-top: 10px; }

/* Screens: the picture with its corners on a tone, concentric (28 − 16 = 12) */
.prose .fig { margin-top: 32px; }
.fig .shot { padding: 16px; border-radius: 28px; background: var(--bg-2); }
.fig .shot img { width: 100%; border-radius: 12px; }
.fig.phone .shot img { max-width: 330px; margin: 0 auto; border-radius: 20px; }
.fig.pair .shot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.fig.pair .shot img { max-width: none; }
.fig figcaption { margin-top: 12px; font-size: .9375rem; line-height: 1.5; color: var(--label-3); }
@media (max-width: 560px) {
  .fig .shot { padding: 12px; border-radius: 24px; }
  .fig.pair .shot { grid-template-columns: minmax(0, 1fr); }
  .fig.pair .shot img { max-width: 330px; margin: 0 auto; }
}

/* More for studio owners */
.more { max-width: 700px; margin-top: 96px; }
.more h2 { padding-bottom: 8px; font-size: .9375rem; font-weight: 600; color: var(--label-3); border-bottom: 1px solid var(--separator); }
.more a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 8px 0;
  border-bottom: 1px solid var(--separator); color: var(--label); font-weight: 600; text-decoration: none; }
.more a:hover, .more a:hover .go { color: var(--tint-text); }
.more a .go { flex: none; display: inline-flex; color: var(--label-3); }
.art-cta { margin-top: 72px; }

@media print {
  .bar, .rail, .foot, .cta-banner, .more { display: none; }
  body { background: #fff; }
}
.cta-banner > div { display: flex; flex-direction: column; gap: 16px; }
.fig picture { display: block; }

/* ============================================================
   Legal pages (/privacy, /terms): same system, a reading column
   ============================================================ */
.legal-hero h1 { max-width: 16ch; }
.hero-meta { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.hero-meta p { font-size: 1.25rem; line-height: 1.55; color: var(--label-2); }
.hero-dates { display: flex; flex-direction: column; font-size: .9375rem; color: var(--label-3); }
.hero-dates strong { font-weight: 600; color: var(--label-2); }
.plain-english { max-width: 760px; margin-top: 8px; padding: 20px 24px; border-radius: 20px; background: var(--bg-2); font-size: 1rem; color: var(--label-2); }
.plain-english strong { color: var(--label); }
.toc-index { padding-top: 72px; }
.toc-index h2 { padding-bottom: 8px; font-size: .9375rem; font-weight: 600; color: var(--label-3); border-bottom: 1px solid var(--separator); max-width: 1000px; }
.toc-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; max-width: 1000px; }
@media (max-width: 760px) { .toc-list { grid-template-columns: minmax(0, 1fr); } }
.g-toc { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 6px 0; border-bottom: 1px solid var(--separator); color: var(--label); text-decoration: none; }
.g-toc:hover { color: var(--tint-text); }
.toc-n { min-width: 24px; color: var(--tint-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.legal-body { padding-top: 88px; }
@media (max-width: 900px) { .legal-body { padding-top: 64px; } }
.guide-section { max-width: 760px; margin-bottom: 72px; scroll-margin-top: 96px; }
.section-num { font-size: .9375rem; font-weight: 700; color: var(--tint-text); font-variant-numeric: tabular-nums; }
.section-head h2 { margin-top: 8px; font-size: min(2rem, 7vw); line-height: 1.15; letter-spacing: -0.025em; }
.section-head .lead { margin-top: 12px; font-size: 1.125rem; color: var(--label-2); }
.body-text { margin-top: 16px; }
.body-text > * + * { margin-top: 16px; }
.body-text p, .body-text li { color: var(--label-2); line-height: 1.7; }
.body-text strong { color: var(--label); }
.body-text .tip, .body-text .note { max-width: none; }
.plist { padding-left: 24px; }
.plist li + li { margin-top: 8px; }
.plist li::marker { color: var(--tint-text); }
.legal-body .cta-banner { margin-top: 24px; }
.legal-crosslink { margin-top: 24px; color: var(--label-3); }
.legal-crosslink a { color: var(--tint-text); font-weight: 600; text-decoration: none; }
.legal-crosslink a:hover { text-decoration: underline; text-underline-offset: 4px; }
.legal-hero h1 { font-size: min(3.5rem, 10vw); line-height: 1.05; letter-spacing: -0.035em; }
table { overflow-wrap: normal; }
.info-table td:first-child { width: 24%; }
.body-text a { color: var(--tint-text); font-weight: 600; text-underline-offset: 4px; text-decoration-thickness: 1px; }
/* Figures inside /docs guides */
.guide .fig { margin-top: 32px; max-width: 760px; }
.fig.sheet .shot img { max-width: 420px; margin: 0 auto; }
.docs-hero .art-ill { margin-top: 24px; }

/* ── Cookie notice (docs/analytics.js), the app's CookieConsent in the design system ── */
.consent { position: fixed; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 12px 24px; max-width: 760px; margin: 0 auto; padding: 16px 16px 16px 24px;
  border-radius: 20px; background: var(--surface); color: var(--label-2); box-shadow: 0 10px 30px -8px rgba(15, 27, 22, .28), 0 2px 6px rgba(15, 27, 22, .08); font-size: .9375rem; }
@media (prefers-color-scheme: dark) { .consent { box-shadow: 0 0 0 1px var(--separator), 0 10px 30px -8px rgba(0, 0, 0, .5); } }
.consent p { flex: 1 1 300px; }
.consent a { color: var(--tint-text); font-weight: 600; }
.consent-actions { display: flex; gap: 8px; }
.consent .btn { min-height: 44px; padding: 0 20px; font-size: .9375rem; }
@media (max-width: 520px) { .consent { padding: 16px; } .consent-actions { width: 100%; } .consent .btn { flex: 1; } }
@media print { .consent { display: none; } }