/* help.foreverbooked.com — laid out like Intercom's help center
   (intercom.com/help). One stylesheet for the static site on Cloudflare Pages
   and the Next /help review routes. The accent (--hp-accent) and hero band
   (--hp-brand) come from Help center → Settings; everything else is Intercom's
   own token set: text #1a1a1a, secondary #595959, borders rgb(230,230,230),
   card tiles rgb(250,249,246), footer rgb(22,16,14). */
.hp {
  --hp-ink: #1a1a1a; --hp-soft: #595959; --hp-muted: #737373; --hp-line: #e6e6e6; --hp-tile: #faf9f6;
  --hp-card-border: rgba(26, 26, 26, 0.15); --hp-footer: #16100e;
  --hp-serif: 'Fraunces', 'Iowan Old Style', Georgia, serif; --hp-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --hp-top: 60px; --hp-rail: 280px; --hp-toc: 260px;
  min-height: 100vh; display: flex; flex-direction: column; background: #fff; color: var(--hp-ink);
  font: 15px/1.5 var(--hp-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.hp *, .hp *::before, .hp *::after { box-sizing: border-box; }
html:has(.hp) { scroll-behavior: smooth; }
/* Page-to-page: the browser cross-fades the two documents, the top bar and
   rail stay put and the content rises in — a static site that moves like an app. */
@view-transition { navigation: auto; }
.hp .hp-top { view-transition-name: hp-top; }
.hp .hp-rail { view-transition-name: hp-rail; }
.hp .hp-content { view-transition-name: hp-content; }
.hp .hp-toc-col { view-transition-name: hp-toc; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.16s; }
::view-transition-old(hp-top), ::view-transition-new(hp-top), ::view-transition-old(hp-rail), ::view-transition-new(hp-rail) { animation: none; mix-blend-mode: normal; }
::view-transition-old(hp-content) { animation: hp-fade-out 0.12s ease both; }
::view-transition-new(hp-content) { animation: hp-rise-in 0.22s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
::view-transition-old(hp-toc) { animation: hp-fade-out 0.12s ease both; }
::view-transition-new(hp-toc) { animation: hp-fade-in 0.2s ease both; }
@keyframes hp-fade-out { to { opacity: 0; } }
@keyframes hp-fade-in { from { opacity: 0; } }
@keyframes hp-rise-in { from { opacity: 0; transform: translateY(8px); } }
.hp :focus-visible { outline: 2px solid var(--hp-accent); outline-offset: 2px; border-radius: 6px; }
.hp button:active { transform: scale(0.98); }
.hp h1, .hp h2, .hp h3, .hp p, .hp ul { margin: 0; }
.hp ul { padding: 0; list-style: none; }
.hp a { color: inherit; text-decoration: none; }
.hp button { font: inherit; color: inherit; }
.hp img { display: block; }
.hp .hp-skip { position: absolute; left: -9999px; }
.hp .hp-skip:focus { left: 16px; top: 16px; z-index: 100; background: #fff; padding: 8px 12px; }
body.hp-locked { overflow: hidden; }
#nprogress { display: none !important; }
.hp .hp-glyph { display: inline-grid; place-items: center; flex: none; color: var(--hp-ink); }
.hp .hp-glyph svg { width: 100%; height: 100%; }
.hp .hp-chev { flex: none; color: #8a8a8a; transition: transform 0.2s ease; }

/* ── Top bar ─────────────────────────────────────────────────────────── */
.hp .hp-top { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,0.92); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--hp-line); transition: box-shadow 0.2s ease; }
.hp .hp-top.scrolled { box-shadow: 0 4px 16px rgba(0,0,0,0.05); }
.hp .hp-top-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--hp-top); padding: 0 24px; }
.hp .hp-brand { display: inline-flex; align-items: center; }
.hp .hp-logo { height: 24px; width: auto; }
.hp .hp-brand-name { font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.hp .hp-top-right { display: flex; align-items: center; gap: 24px; }
.hp .hp-top-tabs { display: flex; align-items: center; gap: 24px; font-size: 14px; }
.hp .hp-top-tab { color: var(--hp-ink); }
.hp .hp-top-tab { transition: opacity 0.15s; }
.hp .hp-top-tab:hover { opacity: 0.7; }
.hp .hp-top-search { display: inline-flex; align-items: center; justify-content: space-between; gap: 16px; width: 150px; height: 34px; padding: 0 10px 0 14px; border: 1px solid var(--hp-line); border-radius: 8px; background: #f5f5f5; color: var(--hp-soft); font-size: 14px; cursor: pointer; transition: background 0.15s; }
.hp .hp-top-search:hover { background: #ededed; }
.hp .hp-top-search kbd { font: 12px var(--hp-sans); color: var(--hp-soft); }
.hp .hp-kbd-symbol { margin-right: 1px; }
.hp .hp-top-mobile-search, .hp .hp-top-mobile-nav { display: none; }

/* ── Hero (home) ─────────────────────────────────────────────────────── */
.hp .hp-hero { display: flex; align-items: center; justify-content: center; min-height: 300px; padding: 40px 24px; background: var(--hp-brand); background-size: cover; background-position: center; color: var(--hp-hero-text); text-align: center; }
.hp .hp-hero:not(.has-image) { background-image: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.14), transparent 60%); }
.hp .hp-hero-inner { display: flex; flex-direction: column; align-items: center; width: 100%; }
.hp .hp-hero-title { font-family: var(--hp-serif); font-weight: 300; font-size: 44px; line-height: 1.12; letter-spacing: -0.005em; max-width: 720px; margin: 0; }
.hp .hp-hero-sub { margin: 10px 0 0; font-size: 16px; max-width: 560px; opacity: 0.92; }
.hp .hp-hero-search { display: flex; align-items: center; gap: 12px; width: 440px; max-width: 100%; height: 48px; margin-top: 36px; padding: 0 12px 0 16px; border: 1px solid var(--hp-card-border); border-radius: 10px; background: #fff; color: var(--hp-soft); font-size: 15px; cursor: text; box-shadow: 0 1px 2px rgba(0,0,0,0.05); text-align: left; }
.hp .hp-hero-search .hp-hero-search-icon { display: inline-grid; place-items: center; color: var(--hp-soft); }
.hp .hp-hero-search .hp-hero-search-icon svg { width: 16px; height: 16px; }
.hp .hp-hero-search > span:not(.hp-hero-search-icon) { flex: 1; }
.hp .hp-hero-search kbd { font: 12px var(--hp-sans); color: var(--hp-soft); border: 1px solid var(--hp-line); border-radius: 6px; padding: 3px 6px; background: #fff; }
.hp .hp-popular { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; max-width: 720px; margin-top: 16px; font-size: 13px; }
.hp .hp-popular-label { opacity: 0.85; margin-right: 2px; }
.hp .hp-popular a { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; color: inherit; background: color-mix(in srgb, currentColor 10%, transparent); border: 1px solid color-mix(in srgb, currentColor 28%, transparent); transition: background 0.15s; }
.hp .hp-popular a:hover { background: color-mix(in srgb, currentColor 18%, transparent); }

/* ── Docs grid: rail + content (+ contents) ───────────────────────────── */
.hp .hp-docs { flex: 1; display: grid; grid-template-columns: var(--hp-rail) minmax(0, 1fr); }
.hp .hp-docs.with-toc { grid-template-columns: var(--hp-rail) minmax(0, 1fr) var(--hp-toc); }
.hp .hp-docs[data-dot-texture] .hp-content { background-image: radial-gradient(#d4d4d4 1.2px, transparent 1.2px); background-size: 20px 20px; }
.hp .hp-rail { border-right: 1px solid var(--hp-line); background: #fff; }
.hp .hp-sidebar { position: sticky; top: var(--hp-top); max-height: calc(100vh - var(--hp-top)); overflow-y: auto; overscroll-behavior: contain; padding: 24px 16px 40px 24px; scrollbar-width: thin; scrollbar-color: #d4d4d4 transparent; }
.hp .hp-content { min-width: 0; padding: 36px 48px 80px; }
.hp .hp-page { max-width: 880px; }
.hp .hp-toc-col { border-left: 1px solid var(--hp-line); }

/* ── Sidebar ─────────────────────────────────────────────────────────── */
.hp .hp-nav-collections { display: flex; flex-direction: column; gap: 1px; font-size: 14px; }
.hp .hp-nav-row { display: flex; align-items: center; }
.hp .hp-nav-collection-link { display: flex; flex: 1; min-width: 0; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 6px; font-weight: 500; color: var(--hp-ink); line-height: 1.3; transition: background 0.15s; }
.hp .hp-nav-collection-link:hover { background: #f5f5f5; }
.hp .hp-nav-collection-link.active { color: var(--hp-accent); }
.hp .hp-nav-icon { display: inline-grid; place-items: center; width: 18px; height: 18px; color: var(--hp-ink); }
.hp .hp-nav-label { flex: 1; min-width: 0; }
.hp .hp-nav-toggle { display: grid; place-items: center; width: 28px; height: 30px; border: 0; border-radius: 6px; background: transparent; color: #8a8a8a; cursor: pointer; }
.hp .hp-nav-toggle { transition: background 0.12s, color 0.12s; }
.hp .hp-nav-toggle:hover { background: #f5f5f5; color: var(--hp-ink); }
.hp .hp-nav-toggle[aria-expanded="true"] .hp-chev { transform: rotate(90deg); }
.hp .hp-nav-collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.22s ease; }
.hp .hp-nav-collapse.open { grid-template-rows: 1fr; }
.hp .hp-nav-collapse.instant { transition: none; }
.hp .hp-nav-collapse > ul { overflow: hidden; min-height: 0; }
.hp .hp-nav-kids.root { margin: 2px 0 8px 14px; padding-left: 0; border-left: 1px solid var(--hp-line); }
.hp .hp-nav-kids.root > li { padding-left: 0; }
.hp .hp-nav-article { position: relative; display: block; padding: 7px 8px 7px 16px; border-radius: 0 6px 6px 0; color: var(--hp-soft); line-height: 1.4; transition: color 0.12s, background 0.12s; }
.hp .hp-nav-article:hover { color: var(--hp-ink); background: #f7f7f7; }
.hp .hp-nav-article.active { color: var(--hp-accent); }
.hp .hp-nav-article.active::before { content: ""; position: absolute; left: -1px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--hp-accent); animation: hp-grow-y 0.25s ease both; }
@keyframes hp-grow-y { from { transform: scaleY(0); } }
.hp .hp-nav-section-link { transition: color 0.12s; }
.hp .hp-nav-section-link:hover { color: var(--hp-accent); }
.hp .hp-nav-section .hp-nav-row { padding-left: 16px; }
.hp .hp-nav-section-link { display: block; flex: 1; min-width: 0; padding: 7px 0; font-weight: 500; color: var(--hp-ink); line-height: 1.4; }
.hp .hp-nav-section-link.active { color: var(--hp-accent); }
.hp .hp-nav-section .hp-nav-kids { padding-left: 16px; }
.hp .hp-nav-section .hp-nav-kids .hp-nav-article::before { left: -17px; }

/* ── Home ────────────────────────────────────────────────────────────── */
.hp .hp-block-title { font-family: var(--hp-serif); font-weight: 300; font-size: 24px; line-height: 1.2; margin: 0 0 20px; }
.hp .hp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 880px; }
.hp .hp-card { display: flex; flex-direction: column; border: 1px solid var(--hp-card-border); border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.05); overflow: hidden; transition: background 0.18s, transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.22s, border-color 0.18s; }
.hp .hp-card:hover { background: color-mix(in srgb, var(--hp-accent) 7%, #fff); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,0.08); border-color: color-mix(in srgb, var(--hp-accent) 30%, var(--hp-card-border)); }
.hp .hp-card:has(.hp-card-title:focus-visible) { box-shadow: 0 0 0 2px var(--hp-accent); }
.hp .hp-card-title:focus-visible { outline: none; }
.hp .hp-card-icon { display: grid; place-items: center; width: 44px; height: 44px; margin: 22px 22px 20px; border-radius: 8px; background: var(--hp-tile); color: #111; }
.hp .hp-card-icon { transition: background 0.18s, transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1); }
.hp .hp-card:hover .hp-card-icon { background: #fff; transform: scale(1.06); }
.hp .hp-card-body { flex: 1; padding: 20px 22px 22px; border-top: 1px solid var(--hp-card-border); }
.hp .hp-card-title { display: block; font-family: var(--hp-serif); font-weight: 400; font-size: 17px; line-height: 1.3; color: var(--hp-ink); }
.hp .hp-card-title::after { content: ""; position: absolute; inset: 0; }
.hp .hp-card { position: relative; }
.hp .hp-card-summary { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--hp-soft); }
.hp .hp-card-count { margin-top: 14px; font-size: 13px; color: var(--hp-soft); }
.hp .hp-empty { color: var(--hp-soft); }

/* ── Collection / article pages ──────────────────────────────────────── */
.hp .hp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; font-size: 14px; color: var(--hp-soft); margin-bottom: 20px; }
.hp .hp-crumbs a { transition: color 0.12s; }
.hp .hp-crumbs a:hover { color: var(--hp-accent); }
.hp .hp-crumb { display: inline-flex; align-items: center; }
.hp .hp-crumb .hp-chev { margin: 0 8px; width: 13px; height: 13px; }
.hp .hp-crumb-current { color: var(--hp-ink); }
.hp .hp-title { font-family: var(--hp-serif); font-weight: 300; font-size: 36px; line-height: 1.15; letter-spacing: -0.005em; margin: 0 0 12px; }
.hp .hp-summary { font-size: 17px; line-height: 1.5; color: var(--hp-soft); margin: 0 0 20px; max-width: 760px; }
.hp .hp-coll-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--hp-soft); margin: 0 0 44px; }
.hp .hp-dot { color: #b0b0b0; margin: 0 4px; }
.hp .hp-avatars { display: inline-flex; margin-right: 4px; }
.hp .hp-avatars > span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 600; border: 2px solid #fff; box-sizing: content-box; }
.hp .hp-avatars > span + span { margin-left: -8px; }
.hp .hp-block + .hp-block { margin-top: 44px; }
.hp .hp-h2 { font-family: var(--hp-serif); font-weight: 300; font-size: 22px; line-height: 1.25; margin: 0 0 12px; }
.hp .hp-rows { display: flex; flex-direction: column; }
.hp .hp-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--hp-line); color: var(--hp-ink); transition: padding 0.18s ease; }
.hp a.hp-row:hover { padding-left: 4px; }
.hp .hp-row-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hp .hp-row-title { font-size: 15px; font-weight: 600; line-height: 1.35; transition: color 0.12s; }
.hp .hp-row:hover .hp-row-title { color: var(--hp-accent); }
.hp .hp-row-sub { font-size: 14px; line-height: 1.45; color: var(--hp-soft); }
.hp .hp-row .hp-doc { flex: none; width: 18px; height: 18px; color: var(--hp-ink); transition: transform 0.18s ease, color 0.12s; }
.hp .hp-row:hover .hp-doc { transform: translateX(3px); color: var(--hp-accent); }
.hp .hp-row-section { flex-direction: column; align-items: flex-start; gap: 6px; }
.hp .hp-row-count { font-size: 14px; color: var(--hp-accent); }

/* article */
.hp .hp-byline { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 4px 0 26px; margin-bottom: 36px; border-bottom: 1px solid var(--hp-line); }
.hp .hp-author { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.5; color: var(--hp-soft); }
.hp .hp-avatar { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--hp-accent); color: #fff; font-size: 12px; font-weight: 600; }
.hp .hp-llm { position: relative; display: inline-flex; align-items: stretch; height: 34px; border: 1px solid #d9d9d9; border-radius: 8px; background: #fff; }
.hp .hp-llm button { background: none; border: 0; cursor: pointer; color: var(--hp-ink); }
.hp .hp-llm-main { display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; font-size: 14px; border-radius: 7px 0 0 7px; }
.hp .hp-llm-more { display: inline-grid; place-items: center; width: 32px; border-left: 1px solid #d9d9d9 !important; border-radius: 0 7px 7px 0; }
.hp .hp-llm-main, .hp .hp-llm-more { transition: background 0.12s; }
.hp .hp-llm-main:hover, .hp .hp-llm-more:hover { background: #f5f5f5; }
.hp .hp-llm-main.done { color: #15803d; }
.hp .hp-llm-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 260px; padding: 6px; background: #fff; border: 1px solid var(--hp-line); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.12); transform-origin: top right; animation: hp-pop 0.16s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes hp-pop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
.hp .hp-llm-menu > button, .hp .hp-llm-menu > a { display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 8px 10px; border-radius: 8px; text-align: left; color: var(--hp-ink); }
.hp .hp-llm-menu > button:hover, .hp .hp-llm-menu > a:hover { background: #f5f5f5; }
.hp .hp-llm-menu svg { margin-top: 3px; flex: none; color: #555; }
.hp .hp-llm-menu strong { display: block; font-size: 14px; font-weight: 600; }
.hp .hp-llm-menu small { display: block; font-size: 12px; color: var(--hp-soft); margin-top: 1px; }

.hp .hp-body { font-size: 15px; line-height: 1.6; color: var(--hp-ink); overflow-wrap: anywhere; }
.hp .hp-body > * + * { margin-top: 1.1em; }
.hp .hp-body > :first-child { margin-top: 0; }
.hp .hp-body h1, .hp .hp-body h2 { font-family: var(--hp-serif); font-weight: 300; letter-spacing: -0.005em; color: var(--hp-ink); }
.hp .hp-body h1 { font-size: 28px; line-height: 1.2; margin-top: 44px; }
.hp .hp-body h2 { font-size: 24px; line-height: 1.25; margin-top: 40px; }
.hp .hp-body h3 { font-size: 17px; line-height: 1.35; font-weight: 600; margin-top: 30px; }
.hp .hp-body h4 { font-size: 15px; font-weight: 600; margin-top: 24px; }
.hp .hp-body h1 strong, .hp .hp-body h2 strong, .hp .hp-body h3 strong, .hp .hp-body h4 strong { font-weight: inherit; }
.hp .hp-body h1 + *, .hp .hp-body h2 + *, .hp .hp-body h3 + * { margin-top: 0.75em; }
.hp .hp-body h1, .hp .hp-body h2, .hp .hp-body h3, .hp .hp-body h4 { scroll-margin-top: calc(var(--hp-top) + 24px); position: relative; }
.hp .hp-anchor { position: absolute; right: 100%; top: 0; bottom: 0; display: inline-grid; place-items: center; width: 1.6em; padding-right: 0.2em; margin: 0; font-family: var(--hp-sans); font-weight: 400; font-size: 0.8em; color: var(--hp-muted); opacity: 0; transition: opacity 0.15s, color 0.12s; }
.hp .hp-body h2:hover .hp-anchor, .hp .hp-body h3:hover .hp-anchor, .hp .hp-body h4:hover .hp-anchor, .hp .hp-anchor:focus-visible { opacity: 1; }
.hp .hp-anchor:hover { color: var(--hp-accent); }
.hp .hp-anchor[data-copied]::after { content: "Link copied"; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 6px; padding: 3px 8px; border-radius: 6px; background: var(--hp-ink); color: #fff; font-size: 12px; white-space: nowrap; animation: hp-fade-in 0.15s ease both; }
.hp .hp-body ul, .hp .hp-body ol { padding-left: 1.5em; }
.hp .hp-body ul { list-style: disc; }
.hp .hp-body ol { list-style: decimal; }
.hp .hp-body li + li { margin-top: 0.4em; }
.hp .hp-body li > * + * { margin-top: 0.4em; }
.hp .hp-body blockquote { border-left: 3px solid var(--hp-line); padding-left: 1em; margin-left: 0; color: var(--hp-soft); }
.hp .hp-body pre { position: relative; background: #0f172a; color: #e2e8f0; border-radius: 10px; padding: 1em 1.2em; overflow-x: auto; font-size: 0.9em; }
.hp .hp-code-copy { position: absolute; top: 8px; right: 8px; padding: 4px 9px; border: 1px solid rgba(255,255,255,0.18); border-radius: 6px; background: rgba(255,255,255,0.08); color: #e2e8f0; font: 12px var(--hp-sans); cursor: pointer; opacity: 0; transition: opacity 0.15s, background 0.12s; }
.hp .hp-body pre:hover .hp-code-copy, .hp .hp-code-copy:focus-visible { opacity: 1; }
.hp .hp-code-copy:hover { background: rgba(255,255,255,0.16); }
.hp .hp-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.hp .hp-body hr { border: 0; border-top: 1px solid var(--hp-line); margin: 2.5em 0; }
.hp .hp-body figure { margin: 28px 0; text-align: center; }
.hp .hp-body figure.align-left { text-align: left; }
.hp .hp-body figure.align-right { text-align: right; }
.hp .hp-body img { display: inline-block; max-width: 100%; height: auto; border-radius: 12px; }
.hp .hp-body img.hp-zoomable { cursor: zoom-in; transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.22s; }
.hp .hp-body img.hp-zoomable:hover { transform: scale(1.01); box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.hp .hp-body a.help-link { transition: color 0.12s, text-decoration-color 0.12s; text-decoration-color: color-mix(in srgb, var(--hp-accent) 40%, transparent); }
.hp .hp-body a.help-link:hover { text-decoration-color: currentColor; }
.hp-lightbox { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; background: rgba(12,12,12,0.86); cursor: zoom-out; opacity: 0; transition: opacity 0.18s ease; }
.hp-lightbox.in { opacity: 1; }
.hp-lightbox img { max-width: min(100%, 1400px); max-height: 100%; border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,0.5); transform: scale(0.96); transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1); }
.hp-lightbox.in img { transform: none; }
.hp-lightbox figcaption { position: absolute; left: 0; right: 0; bottom: 20px; text-align: center; color: #d6d6d6; font: 14px var(--hp-sans, sans-serif); }
.hp-lightbox-close { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,255,255,0.12); color: #fff; cursor: pointer; transition: background 0.12s; }
.hp-lightbox-close:hover { background: rgba(255,255,255,0.22); }
.hp .hp-body figcaption { font-size: 0.85em; color: var(--hp-soft); margin-top: 0.6em; }
.hp .hp-body a.help-link { color: var(--hp-accent); text-decoration: underline; text-underline-offset: 3px; }
.hp .hp-body .help-video { position: relative; width: 100%; padding-top: 56.25%; border-radius: 12px; overflow: hidden; background: #000; margin: 36px 0; }
.hp .hp-body .help-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hp .hp-body .help-video-file { width: 100%; border-radius: 12px; background: #000; margin: 36px 0; }
.hp .hp-body .help-table { overflow-x: auto; }
.hp .hp-body table { width: 100%; border-collapse: collapse; font-size: 0.95em; }
.hp .hp-body th, .hp .hp-body td { border: 1px solid #ccc; padding: 0.55em 0.8em; text-align: left; vertical-align: top; }
.hp .hp-body th { background: #f7f7f5; font-weight: 600; }
.hp .hp-body .help-callout { background: #f7f7f5; border: 1px solid #ececec; border-radius: 12px; padding: 1em 1.2em; }
.hp .hp-body .help-tasks { list-style: none; padding-left: 0; }
.hp .hp-body .help-tasks li { display: flex; gap: 0.6em; align-items: flex-start; }
.hp .hp-body .help-tasks li.done { opacity: 0.7; text-decoration: line-through; }
.hp .hp-body .help-check { display: inline-flex; width: 1.1em; height: 1.1em; flex: none; align-items: center; justify-content: center; border: 1px solid rgba(0,0,0,0.3); border-radius: 4px; margin-top: 0.25em; font-size: 0.8em; }
.hp .hp-body .help-attachment { display: inline-flex; gap: 0.4em; align-items: center; border: 1px solid var(--hp-line); border-radius: 8px; padding: 0.4em 0.8em; }

.hp .hp-feedback { margin-top: 56px; }
.hp .hp-feedback-q { font-size: 14px; color: var(--hp-soft); margin: 0 0 10px; }
.hp .hp-faces { display: flex; gap: 8px; }
.hp .hp-face { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid #e0e0e0; border-radius: 8px; background: #fff; color: #3d3d3d; cursor: pointer; transition: background 0.12s, border-color 0.12s, transform 0.12s; }
.hp .hp-face:hover { background: #f5f5f5; border-color: #cfcfcf; }
.hp .hp-face:active { transform: scale(0.94); }
.hp .hp-face[aria-pressed="true"] { border-color: var(--hp-accent); color: var(--hp-accent); background: color-mix(in srgb, var(--hp-accent) 8%, #fff); animation: hp-bounce 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes hp-bounce { 0% { transform: scale(0.9); } 55% { transform: scale(1.1); } 100% { transform: none; } }
.hp .hp-feedback-thanks { margin: 12px 0 0; font-size: 14px; color: var(--hp-accent); animation: hp-rise-in 0.25s ease both; }
.hp .hp-related { margin-top: 56px; }
.hp .hp-related h2 { font-family: var(--hp-serif); font-weight: 300; font-size: 22px; line-height: 1.3; margin: 0 0 8px; }
.hp .hp-related-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--hp-line); font-size: 15px; font-weight: 600; color: var(--hp-ink); }
.hp .hp-related-row svg { flex: none; width: 18px; height: 18px; color: var(--hp-ink); }
.hp .hp-related-row { transition: padding 0.18s ease; }
.hp .hp-related-row:hover { padding-left: 4px; }
.hp .hp-related-row:hover span { color: var(--hp-accent); }
.hp .hp-related-row:hover svg { transform: translateX(3px); color: var(--hp-accent); }
.hp .hp-related-row svg { transition: transform 0.18s ease, color 0.12s; }

/* ── On this page ────────────────────────────────────────────────────── */
.hp .hp-toc { position: sticky; top: var(--hp-top); max-height: calc(100vh - var(--hp-top)); overflow-y: auto; padding: 40px 24px 40px 20px; font-size: 14px; line-height: 1.4; scrollbar-width: none; }
.hp .hp-toc-col { position: relative; }
.hp .hp-toc-title { font-weight: 600; color: var(--hp-ink); margin-bottom: 12px; }
.hp .hp-toc-list { display: flex; flex-direction: column; gap: 2px; }
.hp .hp-toc-bar { position: absolute; left: 0; top: 0; width: 2px; height: 0; border-radius: 2px; background: var(--hp-accent); opacity: 0; transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), height 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.2s; will-change: transform; }
.hp .hp-toc-bar.on { opacity: 1; }
.hp .hp-toc-list li a { position: relative; display: block; padding: 5px 0; color: var(--hp-soft); transition: color 0.12s; }
.hp .hp-toc-list li.level-3 a { padding-left: 14px; }
.hp .hp-toc-list li a:hover { color: var(--hp-ink); }
.hp .hp-toc-list li.active a { color: var(--hp-accent); }
.hp .hp-toc-list li a { transition: color 0.15s, transform 0.18s ease; }
.hp .hp-toc-list li.active a { transform: translateX(2px); }

/* ── Search dialog (command palette) ─────────────────────────────────── */
.hp .hp-search-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(20,20,20,0.45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); padding: 48px 20px; overflow-y: auto; opacity: 0; transition: opacity 0.18s ease; }
.hp .hp-search-overlay.in { opacity: 1; }
.hp .hp-search-dialog { position: relative; display: flex; flex-direction: column; max-width: 880px; height: min(80vh, 720px); margin: 0 auto; background: #fff; border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,0.3); overflow: hidden; transform: translateY(10px) scale(0.98); transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1); }
.hp .hp-search-progress { position: absolute; top: 0; left: 0; right: 0; height: 2px; overflow: hidden; opacity: 0; transition: opacity 0.15s; }
.hp .hp-search-dialog[aria-busy="true"] .hp-search-progress { opacity: 1; }
.hp .hp-search-progress::before { content: ""; position: absolute; inset: 0; width: 40%; background: var(--hp-accent); animation: hp-slide 0.9s ease-in-out infinite; }
@keyframes hp-slide { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.hp .hp-search-overlay.in .hp-search-dialog { transform: none; }
.hp .hp-search-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--hp-line); color: var(--hp-soft); }
.hp .hp-search-head > svg { width: 18px; height: 18px; }
.hp .hp-search-head input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 18px; color: var(--hp-ink); background: transparent; }
.hp .hp-search-head input::placeholder { color: #8a8a8a; }
.hp .hp-search-close { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--hp-ink); cursor: pointer; }
.hp .hp-search-close:hover { background: #f2f2f2; }
.hp .hp-search-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 20px; border-bottom: 1px solid var(--hp-line); }
.hp .hp-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 16px; border: 1px solid var(--hp-line); border-radius: 999px; background: #fff; font-size: 14px; color: var(--hp-ink); cursor: pointer; transition: background 0.12s, border-color 0.12s, transform 0.12s; }
.hp .hp-chip:hover { border-color: #cfcfcf; }
.hp .hp-chip.on { background: color-mix(in srgb, var(--hp-accent) 10%, #fff); border-color: color-mix(in srgb, var(--hp-accent) 25%, #fff); }
.hp .hp-chip-more { position: relative; }
.hp .hp-chip-menu { position: absolute; top: 40px; left: 0; z-index: 2; min-width: 240px; padding: 6px; background: #fff; border: 1px solid var(--hp-line); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.12); }
.hp .hp-chip-menu button { display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: 8px; background: transparent; text-align: left; cursor: pointer; }
.hp .hp-chip-menu button:hover, .hp .hp-chip-menu button.on { background: #f5f5f5; }
.hp .hp-search-body { flex: 1; overflow-y: auto; padding: 10px 14px; }
.hp .hp-search-empty { margin: 64px 0; text-align: center; color: var(--hp-soft); font-size: 16px; }
.hp .hp-search-hit { display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; border-radius: 10px; animation: hp-rise-in 0.22s ease both; animation-delay: calc(var(--i, 0) * 22ms); transition: background 0.1s; }
.hp .hp-search-hit mark { background: color-mix(in srgb, var(--hp-accent) 18%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.hp .hp-search-hit.cursor { background: color-mix(in srgb, var(--hp-accent) 8%, #fff); }
.hp .hp-search-hit-title { font-size: 15px; font-weight: 500; }
.hp .hp-search-hit-crumb { font-size: 12px; color: var(--hp-soft); }
.hp .hp-search-hit-snippet { font-size: 13px; color: var(--hp-soft); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hp .hp-search-foot { display: flex; gap: 24px; padding: 12px 20px; border-top: 1px solid var(--hp-line); color: var(--hp-soft); font-size: 14px; }
.hp .hp-search-foot span { display: inline-flex; align-items: center; gap: 6px; }
.hp .hp-search-foot kbd { display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 6px; border: 1px solid #d4d4d4; border-radius: 6px; background: #fff; font: 12px var(--hp-sans); }

/* ── Notices + footer ────────────────────────────────────────────────── */
.hp .hp-notice p { margin-top: 10px; font-size: 16px; color: var(--hp-soft); }
.hp .hp-notice a { color: var(--hp-accent); text-decoration: underline; }
.hp .hp-offline { flex: 1; display: grid; place-items: center; text-align: center; padding: 80px 24px; }
.hp .hp-footer { background: var(--hp-footer); color: #fff; padding: 40px 0; font-size: 14px; }
.hp .hp-footer-inner { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding: 0 48px 0 calc(var(--hp-rail) + 48px); }
.hp .hp-footer-brand { max-width: 320px; }
.hp .hp-footer-logo { display: inline-flex; align-items: center; font-size: 16px; font-weight: 600; }
.hp .hp-footer-logo img { height: 26px; width: auto; filter: brightness(0) invert(1); }
.hp .hp-footer-text { margin-top: 28px; font-size: 13px; color: #d6d6d6; line-height: 1.55; }
.hp .hp-footer-cols { display: flex; gap: 28px; flex-wrap: wrap; }
.hp .hp-footer-col { min-width: 130px; }
.hp .hp-footer-head { font-weight: 600; margin-bottom: 18px; }
.hp .hp-footer-col li { margin-bottom: 12px; }
.hp .hp-footer-col a:hover { opacity: 0.8; }

/* ── Narrow screens ──────────────────────────────────────────────────── */
@media (max-width: 1400px) { .hp { --hp-rail: 260px; --hp-toc: 240px; } .hp .hp-content { padding: 32px 40px 72px; } .hp .hp-footer-inner { padding: 0 40px 0 calc(var(--hp-rail) + 40px); } }
@media (max-width: 1180px) {
  .hp .hp-docs.with-toc { grid-template-columns: var(--hp-rail) minmax(0, 1fr); }
  .hp .hp-toc-col { display: none; }
  .hp .hp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 900px) {
  .hp { --hp-top: 56px; }
  .hp .hp-top-inner { padding: 0 16px; }
  .hp .hp-top-tabs, .hp .hp-top-search { display: none; }
  .hp .hp-top-right { gap: 8px; }
  .hp .hp-top-mobile-search, .hp .hp-top-mobile-nav { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 8px; background: transparent; color: var(--hp-ink); cursor: pointer; }
  .hp .hp-top-mobile-search:hover, .hp .hp-top-mobile-nav:hover { background: #f5f5f5; }
  .hp .hp-hero { min-height: 240px; padding: 32px 16px; }
  .hp .hp-hero-title { font-size: 32px; }
  .hp .hp-hero-search { height: 46px; margin-top: 24px; font-size: 15px; }
  .hp .hp-hero-search kbd { display: none; }
  .hp .hp-docs, .hp .hp-docs.with-toc { grid-template-columns: minmax(0, 1fr); }
  .hp .hp-rail { position: fixed; top: var(--hp-top); bottom: 0; left: 0; z-index: 45; width: min(320px, 86vw); border-right: 1px solid var(--hp-line); box-shadow: 0 20px 60px rgba(0,0,0,0.18); transform: translateX(-104%); transition: transform 0.26s cubic-bezier(0.2, 0.7, 0.2, 1); view-transition-name: none; }
  .hp .hp-rail.open { transform: none; }
  .hp .hp-rail-backdrop { position: fixed; inset: var(--hp-top) 0 0; z-index: 40; background: rgba(20,20,20,0.35); opacity: 0; transition: opacity 0.22s ease; }
  .hp .hp-rail-backdrop.in { opacity: 1; }
  .hp .hp-sidebar { position: static; max-height: 100%; height: 100%; padding: 12px 16px 40px; }
  .hp .hp-content { padding: 24px 16px 56px; }
  .hp .hp-cards { grid-template-columns: minmax(0, 1fr); }
  .hp .hp-title { font-size: 28px; }
  .hp .hp-summary { font-size: 16px; }
  .hp .hp-search-overlay { padding: 12px; }
  .hp .hp-search-dialog { height: calc(100vh - 24px); }
  .hp .hp-search-foot { display: none; }
  .hp .hp-footer-inner { padding: 0 16px; flex-direction: column; gap: 36px; }
}

/* ── Less motion when asked ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html:has(.hp) { scroll-behavior: auto; }
  .hp *, .hp *::before, .hp *::after, .hp-lightbox, .hp-lightbox * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}