/* ========================================================================= Flints Help Center Builds on the design tokens in style.css, so light and dark come for free — every colour here is a var(), never a literal. ========================================================================= */ /* style.css pins html,body to height:100% and overflow-x:hidden for the app's fixed full-viewport shell. Both have to be undone here. The overflow one matters most: a sticky element sticks within its nearest ancestor that has a non-visible overflow, not within the viewport. With overflow-x:hidden on (which also computes overflow-y to auto), body became that ancestor — but the viewport is what actually scrolls, so the Contents rail and the sidebar never stuck to anything and simply scrolled away. Restoring visible overflow also fixes scroll restoration and the mobile URL bar, both of which a body-level scroll container breaks. Nothing here overflows horizontally: wide content (tables, code blocks) scrolls inside its own box, so dropping the hidden guard is safe. */ html.help-html, html.help-html body{ height:auto; min-height:100%; overflow:visible; } .help-body{ background: var(--bg); color: var(--ink); font-family: var(--font-ui, Inter, system-ui, sans-serif); margin:0; -webkit-font-smoothing: antialiased; } /* ---- Top bar ----------------------------------------------------------- */ .help-topbar{ position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:24px; height:60px; padding:0 24px; background: var(--bg); border-bottom:1px solid var(--border); } .help-brand{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:16px; color: var(--ink); text-decoration:none; flex:none; } .help-brand .icon{ width:20px; height:20px; color: var(--accent); } .help-topnav{ display:flex; align-items:center; gap:4px; flex:1; } .help-topnav a{ font-size:14px; color: var(--ink-soft); text-decoration:none; padding:7px 12px; border-radius: var(--radius-sm); } .help-topnav a:hover{ background: var(--surface); color: var(--ink); } .help-topnav a.is-current{ color: var(--ink); font-weight:600; } .help-topbar-right{ display:flex; align-items:center; gap:8px; flex:none; } .help-cta{ display:inline-flex; align-items:center; background: var(--accent); color:#fff; text-decoration:none; font-size:13.5px; font-weight:600; padding:8px 16px; border-radius: var(--radius-sm); white-space:nowrap; } .help-cta:hover{ filter:brightness(1.06); } /* Language picker */ .help-lang{ position:relative; } .help-lang-btn{ display:flex; align-items:center; gap:6px; background:transparent; border:1px solid var(--border); color: var(--ink-soft); font-family:inherit; font-size:13px; padding:7px 10px; border-radius: var(--radius-sm); cursor:pointer; } .help-lang-btn:hover{ background: var(--surface); color: var(--ink); } .help-lang-btn .icon{ width:14px; height:14px; } .help-lang-btn .chev{ width:12px; height:12px; } .help-lang-menu{ position:absolute; top:100%; right:0; margin-top:6px; min-width:150px; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding:4px; display:none; z-index:60; } .help-lang-menu.show{ display:block; } .help-lang-menu a{ display:block; padding:8px 10px; border-radius:4px; font-size:13.5px; color: var(--ink); text-decoration:none; } .help-lang-menu a:hover{ background: var(--surface-2); } .help-lang-menu a.active{ color: var(--accent); font-weight:600; } .help-menu-btn{ display:none; } /* ---- Shell ------------------------------------------------------------- */ .help-shell{ display:grid; grid-template-columns: 264px minmax(0, 1fr); max-width:1440px; margin:0 auto; align-items:start; } /* Fixed at every width, not only in the mobile query — it is an overlay, and leaving it in normal flow made it a grid item of .help-shell. */ .help-scrim{ position:fixed; inset:60px 0 0; z-index:69; background:rgba(0,0,0,.4); display:none; } .help-scrim.show{ display:block; } .help-sidebar{ position:sticky; top:60px; /* max-height, not height: a fixed 100vh box claims the whole column even when the nav is short, and pairs with overflow-y:auto to show a scrollbar over empty space. */ max-height:calc(100vh - 60px); overflow-y:auto; padding:24px 14px 40px 20px; box-sizing:border-box; border-right:1px solid var(--border); /* Reserve the scrollbar track so expanding a category does not shift the whole nav sideways when the bar appears. */ scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .help-sidebar::-webkit-scrollbar{ width:8px; } .help-sidebar::-webkit-scrollbar-thumb{ background: var(--border); border-radius:4px; } .help-sidebar::-webkit-scrollbar-track{ background:transparent; } .help-sidebar-label{ font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color: var(--muted); padding:0 10px; margin-bottom:8px; } .help-sidebar-support{ margin-top:24px; padding-top:20px; border-top:1px solid var(--border); } .help-nav-group{ margin-bottom:1px; } .help-nav-cat{ display:flex; align-items:center; gap:8px; width:100%; text-align:left; background:transparent; border:none; font-family:inherit; font-size:13.5px; font-weight:600; color: var(--ink); padding:7px 10px; border-radius: var(--radius-sm); cursor:pointer; line-height:1.35; } .help-nav-cat > span{ flex:1; min-width:0; } .help-nav-cat:hover{ background: var(--surface); } .help-nav-cat .icon{ width:13px; height:13px; color: var(--muted); transition: transform .16s ease; flex:none; } .help-nav-group.open > .help-nav-cat{ color: var(--ink); } .help-nav-group.open > .help-nav-cat .icon{ transform: rotate(90deg); } /* A hairline down the left of an expanded group ties its articles to their category instead of leaving them floating at an arbitrary indent. */ .help-nav-items{ display:none; padding:1px 0 6px; margin-left:16px; border-left:1px solid var(--border); } .help-nav-group.open .help-nav-items{ display:block; } .help-nav-item{ display:block; padding:6px 10px; border-radius:0 var(--radius-sm) var(--radius-sm) 0; font-size:13px; color: var(--ink-soft); text-decoration:none; line-height:1.4; margin-left:-1px; border-left:2px solid transparent; } .help-nav-item:hover{ background: var(--surface); color: var(--ink); } .help-nav-item.active{ color: var(--accent); font-weight:600; background: var(--accent-soft); border-left-color: var(--accent); } .help-nav-overview{ color: var(--muted); font-size:12.5px; } .help-main{ min-width:0; padding:0 40px 0; } /* A shell with no category sidebar — used by standalone documents such as the privacy policy, which still want the article layout and its on-this-page rail but have nothing to put in the left column. */ .help-shell-narrow{ grid-template-columns: minmax(0, 1fr); max-width:1180px; } /* ---- Home -------------------------------------------------------------- */ .help-hero{ padding:64px 0 40px; text-align:center; } .help-hero h1{ font-family: var(--font-serif); font-size:44px; font-weight:600; margin:0 0 14px; letter-spacing:-.02em; line-height:1.1; } .help-hero > p{ font-size:16px; color: var(--ink-soft); margin:0 auto 30px; max-width:560px; line-height:1.6; } .help-search-trigger{ display:flex; align-items:center; gap:12px; width:100%; max-width:640px; margin:0 auto; background: var(--surface); border:1px solid var(--border); border-radius:999px; padding:15px 24px; cursor:pointer; font-family:inherit; font-size:15px; color: var(--muted); text-align:left; transition: box-shadow .15s ease, border-color .15s ease; } .help-search-trigger:hover{ box-shadow: var(--shadow); border-color: var(--muted); } .help-search-trigger .icon{ width:19px; height:19px; flex:none; } .help-hero-chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:22px; } .help-chip{ font-size:13px; color: var(--ink-soft); text-decoration:none; border:1px solid var(--border); background: var(--surface); padding:7px 14px; border-radius:999px; } .help-chip:hover{ color: var(--ink); border-color: var(--muted); } .help-section{ padding:40px 0; } .help-section h2{ font-family: var(--font-serif); font-size:26px; font-weight:600; margin:0 0 22px; letter-spacing:-.01em; } .help-card-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:14px; } .help-card{ display:block; text-decoration:none; padding:22px; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-md); transition: box-shadow .15s ease, border-color .15s ease; } .help-card:hover{ box-shadow: var(--shadow); border-color: var(--muted); } .help-card-icon{ width:38px; height:38px; border-radius:10px; margin-bottom:14px; background: var(--accent-soft); color: var(--accent); display:flex; align-items:center; justify-content:center; } .help-card-icon .icon{ width:19px; height:19px; } .help-card h3{ font-size:16px; font-weight:600; color: var(--ink); margin:0 0 6px; } .help-card p{ font-size:13.5px; color: var(--ink-soft); margin:0; line-height:1.55; } .help-cat-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap:14px; } .help-cat-card{ display:block; text-decoration:none; padding:20px 22px; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-md); transition: box-shadow .15s ease, border-color .15s ease; } .help-cat-card:hover{ box-shadow: var(--shadow); border-color: var(--muted); } .help-cat-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; } .help-cat-head .icon{ width:18px; height:18px; color: var(--accent); flex:none; } .help-cat-head h3{ font-size:16px; font-weight:600; color: var(--ink); margin:0; } .help-cat-card p{ font-size:13.5px; color: var(--ink-soft); margin:0 0 12px; line-height:1.55; } .help-cat-count{ font-size:12px; color: var(--muted); } /* ---- Category page ----------------------------------------------------- */ .help-breadcrumb{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:13px; color: var(--muted); padding:28px 0 0; } .help-breadcrumb a{ color: var(--ink-soft); text-decoration:none; } .help-breadcrumb a:hover{ color: var(--accent); } .help-breadcrumb .icon{ width:13px; height:13px; } .help-page-head{ padding:22px 0 30px; } .help-page-icon{ width:44px; height:44px; border-radius:12px; margin-bottom:16px; background: var(--accent-soft); color: var(--accent); display:flex; align-items:center; justify-content:center; } .help-page-icon .icon{ width:22px; height:22px; } .help-page-head h1{ font-family: var(--font-serif); font-size:34px; font-weight:600; margin:0 0 10px; letter-spacing:-.015em; } .help-page-head p{ font-size:15.5px; color: var(--ink-soft); margin:0; line-height:1.6; max-width:660px; } .help-article-list{ display:flex; flex-direction:column; gap:2px; padding-bottom:20px; } .help-article-row{ display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius: var(--radius-md); text-decoration:none; border:1px solid transparent; } .help-article-row:hover{ background: var(--surface); border-color: var(--border); } .help-article-row > .icon{ width:18px; height:18px; color: var(--accent); flex:none; } .help-article-row-text{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; } .help-article-row-text strong{ font-size:15px; font-weight:600; color: var(--ink); } .help-article-row-text span{ font-size:13.5px; color: var(--ink-soft); line-height:1.5; } .help-article-row-arrow{ width:16px; height:16px; color: var(--muted); flex:none; opacity:0; transition:opacity .15s ease; } .help-article-row:hover .help-article-row-arrow{ opacity:1; } /* ---- Article ----------------------------------------------------------- */ .help-article-layout{ display:grid; grid-template-columns: minmax(0, 1fr) 210px; gap:48px; align-items:start; } .help-article{ min-width:0; max-width:760px; } .help-article-head{ padding:20px 0 26px; border-bottom:1px solid var(--border); margin-bottom:34px; } .help-article-head h1{ font-family: var(--font-serif); font-size:36px; font-weight:600; margin:0 0 12px; letter-spacing:-.02em; line-height:1.2; } .help-article-lede{ font-size:16px; color: var(--ink-soft); margin:0 0 18px; line-height:1.6; } .help-article-meta{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-size:12.5px; color: var(--muted); } .help-copy-link{ display:inline-flex; align-items:center; gap:6px; background:transparent; border:1px solid var(--border); color: var(--ink-soft); font-family:inherit; font-size:12.5px; padding:5px 10px; border-radius: var(--radius-sm); cursor:pointer; } .help-copy-link:hover{ background: var(--surface); color: var(--ink); } .help-copy-link .icon{ width:13px; height:13px; } .help-copy-link.copied{ color: var(--accent); border-color: var(--accent); } /* ---- Prose ------------------------------------------------------------- */ /* Now that html/body no longer clip overflow-x, a single long unbroken token (a URL, a path) could push the page sideways. Wrapping it is the guard. */ .help-prose{ font-size:15.5px; line-height:1.75; color: var(--ink); overflow-wrap: break-word; } .help-prose > *:first-child{ margin-top:0; } .help-prose h2{ font-family: var(--font-serif); font-size:24px; font-weight:600; margin:44px 0 14px; letter-spacing:-.01em; scroll-margin-top:80px; position:relative; } .help-prose h3{ font-family: var(--font-serif); font-size:19px; font-weight:600; margin:32px 0 10px; scroll-margin-top:80px; position:relative; } .help-prose h4{ font-size:16px; font-weight:600; margin:26px 0 8px; scroll-margin-top:80px; } /* The permalink the markdown toc extension emits next to each heading. Hidden until hover so headings stay clean, but always reachable by keyboard — this is what makes a section shareable by copying the URL. */ .help-prose .h-anchor{ margin-left:10px; color: var(--muted); text-decoration:none; font-weight:400; opacity:0; transition:opacity .12s ease; } .help-prose h2:hover .h-anchor, .help-prose h3:hover .h-anchor, .help-prose h4:hover .h-anchor, .help-prose .h-anchor:focus{ opacity:1; } .help-prose .h-anchor:hover{ color: var(--accent); } /* Landing highlight after jumping to a section from the TOC or a shared URL */ .help-prose :target{ animation: helpTargetFlash 1.6s ease; } @keyframes helpTargetFlash{ 0%, 40%{ background: var(--accent-soft); } 100%{ background: transparent; } } .help-prose p{ margin:0 0 16px; } .help-prose a{ color: var(--accent); text-decoration:underline; text-underline-offset:2px; } .help-prose a:hover{ opacity:.82; } .help-prose strong{ font-weight:600; color: var(--ink); } .help-prose ul, .help-prose ol{ margin:0 0 18px; padding-left:24px; } .help-prose li{ margin:0 0 8px; } .help-prose li > ul, .help-prose li > ol{ margin-top:8px; } .help-prose code{ background: var(--surface-2); border:1px solid var(--border); padding:1px 6px; border-radius:5px; font-family: var(--font-mono); font-size:.86em; } .help-prose pre{ background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius-md); padding:16px 18px; overflow-x:auto; margin:0 0 20px; } .help-prose pre code{ background:none; border:none; padding:0; font-size:13.5px; line-height:1.65; } .help-prose blockquote{ border-left:3px solid var(--accent); margin:0 0 20px; padding:2px 0 2px 16px; color: var(--ink-soft); } .help-prose hr{ border:none; border-top:1px solid var(--border); margin:32px 0; } /* Callout box used by the privacy policy for its "what we don't do" notes. Styled here rather than inline so it follows the theme like everything else. */ .help-prose .highlight-box{ background: var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius: var(--radius-sm); padding:14px 18px; margin:0 0 18px; font-size:14px; line-height:1.65; color: var(--ink-soft); } /* Tables scroll inside their own box so a wide one never makes the page scroll sideways. */ .help-prose table{ width:100%; border-collapse:collapse; margin:0 0 20px; font-size:14px; display:block; overflow-x:auto; white-space:nowrap; } .help-prose th, .help-prose td{ border:1px solid var(--border); padding:9px 14px; text-align:left; vertical-align:top; } .help-prose th{ background: var(--surface-2); font-weight:600; } .help-prose td code{ white-space:nowrap; } /* ---- On this page ------------------------------------------------------ */ .help-toc{ position:sticky; top:86px; padding-top:48px; max-height:calc(100vh - 110px); overflow-y:auto; } .help-toc-title{ font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color: var(--muted); margin-bottom:12px; padding-left:10px; } .help-toc-item{ display:block; padding:5px 10px; border-left:2px solid transparent; font-size:13px; color: var(--muted); text-decoration:none; line-height:1.4; } .help-toc-item:hover{ color: var(--ink); } .help-toc-item.active{ color: var(--accent); border-left-color: var(--accent); font-weight:600; } .help-toc-item.lvl-3{ padding-left:20px; font-size:12.5px; } /* ---- Pager ------------------------------------------------------------- */ .help-pager{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:56px; padding-top:28px; border-top:1px solid var(--border); } .help-pager-link{ display:flex; flex-direction:column; gap:6px; padding:16px 18px; border:1px solid var(--border); border-radius: var(--radius-md); text-decoration:none; background: var(--surface); } .help-pager-link:hover{ border-color: var(--accent); } .help-pager-link.next{ text-align:right; align-items:flex-end; } .help-pager-label{ display:flex; align-items:center; gap:6px; font-size:12px; color: var(--muted); } .help-pager-label .icon{ width:13px; height:13px; } .help-pager-link strong{ font-size:14.5px; font-weight:600; color: var(--ink); } /* ---- Footer ------------------------------------------------------------ */ .help-footer{ margin-top:72px; border-top:1px solid var(--border); } .help-footer-cta{ padding:44px 0 36px; text-align:center; } .help-footer-cta h3{ font-family: var(--font-serif); font-size:24px; font-weight:600; margin:0 0 8px; } .help-footer-cta p{ font-size:14.5px; color: var(--ink-soft); margin:0 0 22px; } .help-footer-links{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; } .help-footer-links a{ display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border:1px solid var(--border); border-radius: var(--radius-sm); font-size:14px; color: var(--ink); text-decoration:none; background: var(--surface); } .help-footer-links a:hover{ border-color: var(--accent); color: var(--accent); } .help-footer-links .icon{ width:16px; height:16px; } .help-footer-legal{ display:flex; gap:18px; align-items:center; justify-content:center; flex-wrap:wrap; padding:22px 0 40px; border-top:1px solid var(--border); font-size:12.5px; color: var(--muted); } .help-footer-legal a{ color: var(--muted); text-decoration:none; } .help-footer-legal a:hover{ color: var(--ink); } /* ========================================================================= Blog — same shell and type scale as the Help Center, so the product reads as one site rather than three. ========================================================================= */ .blog-hero{ padding:56px 0 34px; } .blog-eyebrow{ display:inline-block; font-size:11.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color: var(--accent); margin-bottom:12px; } .blog-hero h1{ font-family: var(--font-serif); font-size:42px; font-weight:600; margin:0 0 12px; letter-spacing:-.02em; line-height:1.1; } .blog-hero p{ font-size:16.5px; color: var(--ink-soft); margin:0; max-width:600px; line-height:1.6; } .blog-card-meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12.5px; color: var(--muted); margin-bottom:10px; } .blog-pin{ font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--accent); background: var(--accent-soft); padding:3px 8px; border-radius:999px; } /* Lead card */ .blog-feature{ display:grid; grid-template-columns: minmax(0,1fr) 220px; gap:24px; align-items:center; padding:30px 32px; margin-bottom:18px; text-decoration:none; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-md); transition: box-shadow .16s ease, border-color .16s ease; } .blog-feature:hover{ box-shadow: var(--shadow); border-color: var(--accent); } .blog-feature-body{ min-width:0; } .blog-feature h2{ font-family: var(--font-serif); font-size:28px; font-weight:600; color: var(--ink); margin:0 0 10px; line-height:1.25; letter-spacing:-.015em; } .blog-feature p{ font-size:15px; color: var(--ink-soft); margin:0 0 16px; line-height:1.6; } .blog-readmore{ display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color: var(--accent); } .blog-readmore .icon{ width:15px; height:15px; transition: transform .16s ease; } .blog-feature:hover .blog-readmore .icon{ transform: translateX(3px); } .blog-feature-art{ display:flex; align-items:center; justify-content:center; aspect-ratio:16/10; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--accent-soft), var(--surface-2)); } .blog-feature-art .icon{ width:46px; height:46px; color: var(--accent); opacity:.65; } /* Card grid */ .blog-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:16px; padding-bottom:8px; } .blog-card{ display:block; text-decoration:none; padding:22px 24px; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-md); transition: box-shadow .16s ease, border-color .16s ease; } .blog-card:hover{ box-shadow: var(--shadow); border-color: var(--accent); } .blog-card h3{ font-family: var(--font-serif); font-size:18px; font-weight:600; color: var(--ink); margin:0 0 8px; line-height:1.35; } .blog-card p{ font-size:13.5px; color: var(--ink-soft); margin:0; line-height:1.6; } .blog-more{ margin-top:56px; padding-top:32px; border-top:1px solid var(--border); } .blog-more h2{ font-family: var(--font-serif); font-size:22px; font-weight:600; margin:0 0 18px; letter-spacing:-.01em; } .blog-empty{ display:flex; flex-direction:column; align-items:center; gap:14px; padding:70px 20px; text-align:center; color: var(--muted); } .blog-empty .icon{ width:34px; height:34px; opacity:.55; } .blog-empty p{ margin:0; font-size:15px; } @media (max-width: 720px){ .blog-hero{ padding:36px 0 26px; } .blog-hero h1{ font-size:30px; } .blog-feature{ grid-template-columns: minmax(0,1fr); padding:24px; } .blog-feature-art{ display:none; } .blog-feature h2{ font-size:22px; } } /* ---- Search overlay ---------------------------------------------------- */ .help-search-overlay{ position:fixed; inset:0; z-index:200; background: rgba(0,0,0,.45); backdrop-filter: blur(2px); display:flex; align-items:flex-start; justify-content:center; padding:12vh 20px 20px; } .help-search-overlay[hidden]{ display:none; } .help-search-box{ width:100%; max-width:620px; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); overflow:hidden; } .help-search-field{ display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--border); } .help-search-field .icon{ width:18px; height:18px; color: var(--muted); flex:none; } .help-search-field input{ flex:1; border:none; background:transparent; outline:none; font-family:inherit; font-size:16px; color: var(--ink); } .help-search-field kbd{ font-family: var(--font-mono); font-size:11px; color: var(--muted); border:1px solid var(--border); border-radius:4px; padding:2px 6px; } .help-search-results{ max-height:min(52vh, 460px); overflow-y:auto; padding:6px; } .help-search-result{ display:block; padding:11px 14px; border-radius: var(--radius-sm); text-decoration:none; } .help-search-result:hover, .help-search-result.active{ background: var(--surface-2); } .help-search-result strong{ display:block; font-size:14.5px; font-weight:600; color: var(--ink); margin-bottom:3px; } .help-search-result span{ display:block; font-size:12.5px; color: var(--ink-soft); line-height:1.45; } .help-search-result em{ font-style:normal; color: var(--accent); font-weight:600; } .help-search-cat{ font-size:11px; color: var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-top:4px; } .help-search-empty{ padding:26px; text-align:center; font-size:14px; color: var(--muted); } /* ---- Responsive -------------------------------------------------------- */ @media (max-width: 1180px){ .help-article-layout{ grid-template-columns: minmax(0, 1fr); gap:0; } .help-toc{ display:none; } } @media (max-width: 900px){ .help-shell{ grid-template-columns: minmax(0, 1fr); } .help-main{ padding:0 20px; } .help-menu-btn{ display:flex; } .help-topnav{ display:none; } .help-sidebar{ position:fixed; top:60px; left:0; bottom:0; width:280px; z-index:70; background: var(--bg); border-right:1px solid var(--border); transform: translateX(-100%); transition: transform .2s cubic-bezier(.4,0,.2,1); height:auto; } .help-sidebar.open{ transform: translateX(0); } .help-hero{ padding:40px 0 30px; } .help-hero h1{ font-size:30px; } .help-article-head h1{ font-size:27px; } .help-page-head h1{ font-size:26px; } .help-pager{ grid-template-columns:1fr; } .help-pager-link.next{ text-align:left; align-items:flex-start; } } @media (max-width: 620px){ .help-topbar{ padding:0 14px; gap:10px; } .help-lang-btn span{ display:none; } .help-cta{ padding:8px 12px; font-size:13px; } .help-search-trigger{ font-size:14px; padding:13px 18px; } }