/* Shared navigation and reading layouts for every public page. Graphite/copper on zinc neutrals. Copper (#B85C38) fills buttons and marks; copper text uses --site-accent-text, which is darker on light surfaces (#AD5533, 4.9:1 on #FAFAFA) and lighter on dark ones (#E0916B, 5.3:1 on #2F2F33), because #B85C38 itself only reaches 4.5:1 on pure white. */ @font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/inter-latin.woff2') format('woff2')} /* Metric-matched local fallback, so the swap to Inter barely moves the text. One face per weight band, because Inter is wider than Arial by a different amount at each weight (measured on this site's copy: 6.7% at 400, 7.7% at 500; against Arial Bold 1.3% at 600, 2.2% at 700, 3.4% at 800). ascent and descent are Inter's (0.969 and 0.242 em) divided by each size-adjust. */ @font-face{font-family:'Inter Fallback';font-weight:100 450;src:local('Arial'),local('ArialMT'),local('Liberation Sans'),local('LiberationSans-Regular');size-adjust:106.7%;ascent-override:90.8%;descent-override:22.7%;line-gap-override:0%} @font-face{font-family:'Inter Fallback';font-weight:451 550;src:local('Arial'),local('ArialMT'),local('Liberation Sans'),local('LiberationSans-Regular');size-adjust:107.7%;ascent-override:89.9%;descent-override:22.5%;line-gap-override:0%} @font-face{font-family:'Inter Fallback';font-weight:551 650;src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('LiberationSans-Bold');size-adjust:101.3%;ascent-override:95.6%;descent-override:23.9%;line-gap-override:0%} @font-face{font-family:'Inter Fallback';font-weight:651 750;src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('LiberationSans-Bold');size-adjust:102.2%;ascent-override:94.8%;descent-override:23.7%;line-gap-override:0%} @font-face{font-family:'Inter Fallback';font-weight:751 900;src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('LiberationSans-Bold');size-adjust:103.4%;ascent-override:93.7%;descent-override:23.4%;line-gap-override:0%} :root{--site-raised:#FFFFFF;--site-scrim:rgba(24,24,27,.45);--site-menu-shadow:0 4px 12px rgba(0,0,0,.08);--site-ink:#27272A;--site-paper:#FFFFFF;--site-alt:#FAFAFA;--site-text:#3F3F46;--site-muted:#71717A;--site-line:#E4E4E7;--site-accent:#B85C38;--site-accent-text:#AD5533;--site-mark:#B85C38;--site-on-accent:#FFFFFF;--site-focus:#B85C38;--site-font:Inter,'Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif} /* One primary button for every page family and both colour schemes: copper fill, white text (4.54:1), darker copper on hover (white on #9A4A2C 6.19:1). home.css, product-refresh.css, doc.css and the /pricing/ and /contact/ styles all point their primary buttons here. */ :root{--btn-primary-bg:#B85C38;--btn-primary-fg:#FFFFFF;--btn-primary-hover:#9A4A2C} /* One heading scale: display 44px (the home hero, the largest step), then one H1 size for every other page, product pages included (40px), one H2 (32px) and one H3 (22px), each easing down on small screens. The home hero stops at 44px because its sentence-long H1 shares the row with the product visual: larger, it runs to six lines. */ :root{--fs-display:clamp(1.75rem,.9rem + 2.6vw,2.75rem); --fs-h1:clamp(1.75rem,1.2rem + 1.45vw,2.5rem);--fs-h2:clamp(1.5rem,1.2rem + .9vw,2rem);--fs-h3:clamp(1.125rem,1rem + .4vw,1.375rem)} *,*::before,*::after{box-sizing:border-box} /* One jump offset for every page family: the sticky header plus about 24px (80px under 600px). Targets add no scroll-margin of their own, which would double it. */ html{scroll-padding-top:112px} body.site-page{font-family:var(--site-font);line-height:1.7} body.site-page h1,body.site-page h2,body.site-page h3,body.site-page h4{letter-spacing:0;overflow-wrap:break-word} body.site-page :focus-visible{outline:3px solid var(--site-focus);outline-offset:4px} .sss-container{width:min(1200px,100%);padding:0 32px;margin:0 auto} .sss-skip{position:fixed;left:16px;top:8px;z-index:100;padding:12px 24px;background:var(--site-ink);color:var(--site-paper);transform:translateY(-160%)} .sss-skip:focus{transform:translateY(0)} /* Header. Desktop: Products and Company open panels; Pricing, Insights and Docs are direct links; Contact is the one filled button. */ .sss-header{position:sticky;top:0;z-index:40;background:var(--site-paper);border-bottom:1px solid var(--site-line);color:var(--site-ink)} .sss-header .sss-container{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:88px} .sss-brand{display:inline-flex;align-items:center;gap:24px;font:800 1rem/1.2 var(--site-font);text-decoration:none!important;color:var(--site-ink);white-space:nowrap} .sss-brand{min-height:44px} .sss-brand img{display:block;width:40px;height:40px;flex:none} .sss-brand .sss-brand-name span{color:var(--site-mark)} .sss-header a:hover,.sss-footer a:hover{color:var(--site-accent-text)} .sss-desktop{display:flex;align-items:center;gap:4px;font-size:.95rem;font-weight:500;white-space:nowrap} .sss-desktop>a,.sss-dropdown>summary{display:flex;align-items:center;min-height:44px;padding:8px 12px;color:var(--site-ink);text-decoration:none;cursor:pointer;list-style:none;border-radius:4px} .sss-desktop>a[aria-current=page],.sss-dropdown:has([aria-current=page])>summary{color:var(--site-accent-text);text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:2px} .sss-dropdown{position:relative;margin:0;border:0} .sss-dropdown>summary::-webkit-details-marker,.sss-mobile>summary::-webkit-details-marker{display:none} .sss-dropdown summary{gap:8px} .sss-dropdown summary svg{width:16px;height:16px;transition:transform .15s} .sss-dropdown[open]>summary svg{transform:rotate(180deg)} .sss-dropdown-panel{position:absolute;top:100%;left:-12px;width:256px;background:var(--site-paper);border:1px solid var(--site-line);border-radius:8px;padding:8px;box-shadow:0 4px 12px rgba(0,0,0,.08);display:grid;gap:4px;white-space:normal} .sss-dropdown-products .sss-dropdown-panel{width:320px} .sss-dropdown-panel>a{display:grid;gap:2px;min-height:44px;align-content:center;padding:12px 16px;color:var(--site-text);text-decoration:none;border-radius:4px;font-size:.95rem;line-height:1.4} .sss-dropdown-panel>a strong{color:var(--site-ink);font-weight:600} .sss-dropdown-panel>a small{color:var(--site-muted);font-size:.8125rem;font-weight:400;line-height:1.4} .sss-dropdown-panel>a:hover,.sss-dropdown-panel>a[aria-current=page]{background:var(--site-alt);color:var(--site-accent-text)} .sss-dropdown-panel>a:hover strong,.sss-dropdown-panel>a[aria-current=page] strong{color:var(--site-accent-text)} .sss-desktop>a.sss-contact{margin-left:8px;background:var(--site-ink);color:var(--site-paper);padding:8px 24px;text-decoration:none} .sss-desktop>a.sss-contact:hover{background:var(--site-accent);color:var(--site-on-accent)} .sss-desktop>.sss-language{justify-content:center;min-width:44px;margin-left:12px;padding:8px 0 8px 16px;border-left:1px solid var(--site-line);border-radius:0;font-size:.9rem} .sss-mobile{display:none} /* Breadcrumb: every link is a 44px-high target. */ .sss-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:0 8px;padding-top:12px;padding-bottom:4px;color:var(--site-muted);font-size:.8125rem;line-height:1.5} .sss-breadcrumb a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 4px;color:var(--site-text);text-decoration:none} .sss-breadcrumb a:first-child{margin-left:-4px} .sss-breadcrumb a:hover{text-decoration:underline} .sss-breadcrumb span:last-child{color:var(--site-muted);overflow-wrap:anywhere;padding-block:12px} /* Footer: graphite in both colour schemes. */ .sss-footer{max-width:none!important;margin:0!important;padding:48px 0 32px!important;border-top:1px solid var(--site-line);background:var(--site-alt);color:var(--site-text);font-family:var(--site-font);font-size:.9rem} .sss-footer{--site-ink:#FFFFFF;--site-paper:#27272A;--site-alt:#27272A;--site-text:#E4E4E7;--site-muted:#A1A1AA;--site-line:#3F3F46;--site-accent:#B85C38;--site-accent-text:#E0916B;--site-mark:#E0916B;--site-focus:#FFFFFF} .sss-footer-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));gap:32px} .sss-footer nav{display:flex;flex-direction:column;align-items:flex-start} .sss-footer nav strong{color:var(--site-ink);margin-bottom:4px} .sss-footer a{font-family:var(--site-font);color:var(--site-text);text-decoration:none;font-size:inherit} .sss-footer nav a,.sss-footer-contact a{display:inline-flex;align-items:center;min-width:44px;min-height:44px;line-height:1.4} .sss-footer .sss-brand{font-size:1rem;color:var(--site-ink)} .sss-footer p{margin:16px 0 0;font-size:.9rem;line-height:1.7} .sss-footer p.sss-footer-contact{display:flex;flex-direction:column;align-items:flex-start;margin-top:8px} .sss-legal-line{margin-top:32px;border-top:1px solid var(--site-line);padding-top:24px;font-size:.8125rem;color:var(--site-muted)} .sss-legal-line p{font-size:inherit;margin:4px 0} .sss-footer-extra{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:24px;font-size:.8125rem} /* Reading pages have one content column and a separate, persistent index. */ .site-reading .doc-head{padding:32px 0;border-bottom:1px solid var(--site-line)} .site-reading .doc-head>.wrap{max-width:1200px;padding-inline:32px} .site-reading .doc-head h1{max-width:880px;font-size:var(--fs-h1);font-weight:800;line-height:1.15;margin-bottom:24px} .site-reading .doc-head .sub{font-size:1.05rem;line-height:1.7;max-width:760px;margin-bottom:16px} .site-reading .kick{font:600 .8125rem/1.5 var(--site-font);letter-spacing:0;text-transform:none;color:var(--site-accent-text);margin-bottom:16px} .site-reading .meta{font:400 .8125rem/1.6 var(--site-font);color:var(--site-muted);gap:8px 24px} /* The index column takes the rest of the row, so full-width sections (.pg-wide) end on the same edge as the header and footer. */ .site-reading>main{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,760px) minmax(240px,1fr);gap:48px;padding:32px 32px 80px;align-items:start} .site-reading>main>.wrap{width:100%;max-width:none;margin:0;padding:0;min-width:0} .site-reading>main:not(:has(.page-toc)){display:block} .site-reading>main:not(:has(.page-toc))>.wrap{max-width:880px} /* The title block (H1 and intro) is inside
, so the skip link lands on it: it spans the whole grid row, aligned with main's content edges. */ .site-reading>main>.doc-head{grid-column:1/-1;padding:0 0 32px} .site-reading>main:has(>.doc-head){row-gap:32px} .site-reading>main>.doc-head>.wrap{max-width:none;padding-inline:0} .site-reading>main:not(:has(.page-toc))>.doc-head{margin-bottom:32px} .site-reading main h2{font-size:var(--fs-h2);line-height:1.2;font-weight:700;margin:48px 0 16px;scroll-margin-top:0} .site-reading main h3{font-size:var(--fs-h3);line-height:1.3;margin:32px 0 16px} /* Running text keeps a readable measure (about 70-75 characters a line); tables, code and full-width panels still use the whole column. */ .site-reading main p{font-size:1rem;line-height:1.7;max-width:38em} .site-reading main .wrap>ul,.site-reading main .wrap>ol,.site-reading main .wrap>blockquote{max-width:38em} .site-reading main li{line-height:1.7} .site-reading main .mono,.site-reading main code,.site-reading main a{overflow-wrap:anywhere} .site-reading main .sss-email{overflow-wrap:normal} /* A bold product name inside a link is still a link: link colour, not ink. */ .site-reading main a strong,.site-reading main a b{color:inherit} .site-reading .doc-grid{gap:16px} .site-reading .doc-card{border-radius:8px;padding:24px;box-shadow:none;min-width:0} .site-reading .doc-card h2,.site-reading .doc-card h3{font-size:1.05rem;line-height:1.5;margin:0 0 12px} .site-reading .doc-card p{font-size:.95rem} .site-reading .doc-card:hover{transform:none} .site-reading .callout{border-radius:4px;box-shadow:none;padding:16px 24px} /* A callout's label is an eyebrow like every other (uppercase sans, not mono), and company registration values are text, not code. */ .site-reading .callout .lbl{font:600 .8125rem/1.5 var(--site-font);letter-spacing:.06em;text-transform:uppercase;color:var(--site-muted)} .reg-id{font-variant-numeric:tabular-nums;white-space:nowrap} .site-reading .table-wrap{max-width:100%;overflow-x:auto} .site-reading table{font-size:.9rem;line-height:1.6} /* No text under 13px: a note in a table cell keeps the floor. */ .site-reading table small{font-size:.8125rem} .site-reading .num{white-space:normal} .site-reading .acronym h3,.site-reading .phases h3{margin-top:0} .page-toc{position:sticky;top:112px;min-width:0} .page-toc details{border-left:1px solid var(--site-line);padding-left:24px} .page-toc summary{font:600 .9rem/1.5 var(--site-font);color:var(--site-ink);cursor:pointer} .page-toc nav{display:flex;flex-direction:column;gap:12px;max-height:calc(100dvh - 192px);overflow-y:auto;padding:4px;margin-top:12px} .page-toc a{font-size:.8125rem;line-height:1.5;color:var(--site-muted);text-decoration:none;overflow-wrap:anywhere} .page-toc a:hover,.page-toc a[aria-current=location]{color:var(--site-accent-text);text-decoration:underline;text-underline-offset:4px} .page-toc .sss-print{margin-top:24px} .site-reading main:has(.page-toc) .jump,.site-reading .artefact .page-toc .sss-print{display:none} .sss-icon-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:8px;background:var(--site-paper);border:1px solid var(--site-line);border-radius:4px;color:var(--site-text);cursor:pointer;font:500 .8125rem/1.5 var(--site-font)} .sss-icon-button svg{width:16px;height:16px;flex:none} /* Documentation: readable defaults, accessible mobile chapter navigation. */ .site-docs{--bg:var(--site-paper);--panel:var(--site-paper);--panel2:var(--site-alt);--line:var(--site-line);--text:var(--site-ink);--muted:var(--site-text);--dim:var(--site-muted);--accent:var(--site-accent-text);--accent-dark:var(--site-ink);background:var(--site-paper);color:var(--site-text)} .site-docs .layout{max-width:1200px;grid-template-columns:256px minmax(0,1fr);padding-inline:32px;gap:32px} .site-docs .layout>main{min-width:0;padding:24px 0 80px} .sss-doc-nav{position:sticky;top:112px;align-self:start;border-right:1px solid var(--site-line);margin:24px 0 0;min-width:0} .sss-doc-nav>summary{display:none} .site-docs .sidebar{display:block;position:static;top:auto;height:auto;max-height:calc(100dvh - 144px);padding:0 24px 24px 0;border:0;overflow-y:auto} /* A label, not a link: muted uppercase like the other eyebrows. */ .site-docs .sidebar .eyebrow{font:600 .8125rem/1.5 var(--site-font);letter-spacing:.06em;text-transform:uppercase;margin:0 0 12px 8px;color:var(--site-muted)} .site-docs .toc-top{font-size:.9rem;padding:8px} .site-docs .toc-top[aria-current=page]{background:var(--site-alt);color:var(--site-accent-text);border-left:3px solid var(--site-accent)} .site-docs .toc-sub{font-size:.8125rem;line-height:1.6;overflow-wrap:anywhere} /* The sidebar box starts 12px left of the column, so the link text (after its 2px rule and 10px padding) and the eyebrow both sit on the page's left edge, with the breadcrumb and the logo; the hover fill still has room around it. */ @media(min-width:901px){.site-docs .sidebar{margin-left:-12px}.site-docs .sidebar .eyebrow{margin-left:12px}} .site-docs .page-head h1{font-size:var(--fs-h1);line-height:1.2;font-weight:800;overflow-wrap:anywhere} .site-docs .doc{padding:24px 0} .site-docs .doc h2{font-size:var(--fs-h2);line-height:1.25;margin:40px 0 16px;scroll-margin-top:0} .site-docs .doc h2 code{font-size:.75em} .site-docs .doc h3{font-size:1.05rem;line-height:1.5;margin:24px 0 12px;scroll-margin-top:0} .site-docs .doc h4{font-size:1rem;line-height:1.5;scroll-margin-top:0} .site-docs .doc p,.site-docs .doc ul,.site-docs .doc ol{font-size:1rem;line-height:1.7} .site-docs .doc :not(pre)>code{white-space:normal;overflow-wrap:anywhere} .site-docs .doc pre{position:relative;border-radius:4px;box-shadow:none;padding:56px 16px 16px;max-width:100%} .site-docs .doc pre code{font-size:.8125rem} .sss-copy{position:absolute;top:6px;right:6px} .sss-copy-status{position:absolute;top:16px;right:60px;margin:0;font:500 .8125rem/1.5 var(--site-font);color:var(--site-muted);white-space:nowrap} .site-docs .hub-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .site-docs .hub-card{display:block;border:1px solid var(--site-line);border-radius:8px;padding:24px;background:var(--site-paper);text-decoration:none} .site-docs .hub-card h2,.site-docs .hub-card h3{font-size:1.05rem;line-height:1.5;color:var(--site-ink);margin:0 0 12px} .site-docs .hub-card p{font-size:.95rem;margin:0;color:var(--site-text)} .site-docs .hub-card:hover{border-color:var(--site-accent)} .sss-next{margin-top:32px;padding-top:24px;border-top:1px solid var(--site-line);display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:.9rem} .sss-next a{display:inline-flex;align-items:center;min-height:44px} /* A rule above only: the .page-head around it draws the one below. */ .sss-setup{padding:24px 0 0;border-top:1px solid var(--site-line);margin-top:24px} .sss-setup h2{font-size:1.5rem;margin:0 0 16px;color:var(--site-ink)} .sss-setup ol{padding-left:24px;margin:0;line-height:1.7;font-size:.95rem} .sss-setup li+li{margin-top:8px} /* Product FAQs disclose one answer at a time without hiding it from no-JS users. */ .site-product .faq{display:block;max-width:760px} .sss-faq-item{border-bottom:1px solid var(--site-line);margin:0} .sss-faq-item summary{display:flex;align-items:flex-start;gap:12px;cursor:pointer;color:var(--site-ink);font-size:1rem;font-weight:600;line-height:1.5;padding:24px 0;list-style:none} .sss-faq-item summary::-webkit-details-marker{display:none} /* A drawn marker of a fixed 8px width, so the answer below can start exactly where the question text does (8px + the 12px gap). */ .sss-faq-item summary::before{content:"";flex:none;width:0;height:0;margin-top:7px;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent var(--site-accent);transition:transform .15s} .sss-faq-item[open]>summary::before{transform:rotate(90deg)} .sss-faq-answer{padding:0 24px 24px 20px} .site-product .faq .sss-faq-answer p{font-size:1rem;line-height:1.7} .site-product .product-jump{gap:8px 24px} .site-product .product-detail>summary{font-size:1rem} .site-product .wrap{min-width:0} .sss-filters{display:flex;align-items:end;gap:16px;margin:0 0 24px;flex-wrap:wrap} .sss-filters label{display:flex;flex:1;flex-direction:column;gap:8px;font-size:.9rem;font-weight:600;min-width:192px} .sss-filters input,.sss-filters select{font:400 1rem/1.5 var(--site-font);min-height:48px;width:100%;padding:12px 16px;border:1px solid var(--site-line);border-radius:4px;background:var(--site-paper);color:var(--site-ink)} .sss-filter-count{font-size:.8125rem;color:var(--site-muted);margin:0 0 16px} [hidden]{display:none!important} .site-reading .fourohfour{padding-top:24px} .site-reading .fourohfour h1{font-size:var(--fs-h1)} .site-reading .fourohfour .where{margin-top:32px} @media(max-width:1100px){.sss-desktop{font-size:.9rem}.sss-desktop>a,.sss-dropdown>summary{padding-inline:8px}.sss-brand{gap:16px}} @media(max-width:1000px){.site-reading>main{gap:32px;grid-template-columns:minmax(0,1fr) 192px}.sss-footer-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}.sss-footer-company{grid-column:1/-1}} /* The full desktop row (brand, five items, Contact, language) needs about 1000px; below that the header switches to the grouped menu. */ @media(max-width:1023px){ .sss-desktop{display:none}.sss-mobile{display:block} .sss-mobile>summary{list-style:none;width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--site-line);border-radius:4px;cursor:pointer} .sss-mobile>summary svg{width:24px;height:24px} .sss-mobile .sss-icon-close,.sss-mobile[open] .sss-icon-menu{display:none} .sss-mobile[open] .sss-icon-close{display:block} /* Open: a scrim over the page below the header (a tap on it closes the menu, site.js), and the page itself does not scroll behind the panel. In dark mode the panel is a raised surface over a stronger scrim, so it reads as a layer rather than more page (the tokens are set with the palette). */ .sss-mobile[open]::before{content:"";position:fixed;inset:var(--sss-header-h,89px) 0 0;z-index:-1;background:var(--site-scrim)} html:has(.sss-mobile[open]){overflow:hidden} .sss-mobile nav{position:absolute;top:100%;left:0;right:0;padding:0 32px 24px;background:var(--site-raised);border-bottom:1px solid var(--site-line);display:block;max-height:calc(100dvh - 88px);overflow-y:auto;box-shadow:var(--site-menu-shadow)} .sss-mobile-group{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;padding:12px 0 8px;border-bottom:1px solid var(--site-line)} .sss-mobile-group>strong{grid-column:1/-1;padding:4px 0;color:var(--site-muted);font-size:.8125rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase} .sss-mobile nav a{display:flex;align-items:center;min-height:48px;color:var(--site-ink);font-size:1rem;text-decoration:none} .sss-mobile nav a[aria-current=page]{color:var(--site-accent-text);font-weight:600} .sss-mobile-actions{display:flex;align-items:center;gap:16px;margin-top:24px} .sss-mobile nav a.sss-mobile-contact{flex:1;justify-content:center;background:var(--site-ink);color:var(--site-paper);border-radius:4px;font-weight:600} .sss-mobile nav a.sss-mobile-contact:hover{background:var(--site-accent);color:var(--site-on-accent)} .sss-mobile-language{display:flex;align-items:center;justify-content:center;gap:4px;margin:0;color:var(--site-muted);font-size:1rem} .sss-mobile-language>a,.sss-mobile-language>.sss-language-current{justify-content:center;min-width:48px;min-height:48px} .sss-language-current{display:inline-flex;align-items:center;color:var(--site-ink);font-weight:700} } @media(max-width:900px){ .site-reading>main{display:flex;flex-direction:column;gap:24px;padding-bottom:48px} .page-toc{position:static;width:100%;order:-1} .site-reading>main>.doc-head{order:-2;padding-bottom:24px} .page-toc details{border:1px solid var(--site-line);border-radius:4px;padding:16px 24px} /* The whole padded bar is the disclosure's tap target, not just its label. */ .page-toc summary{margin:-16px -24px;padding:16px 24px} .sss-doc-nav>summary{margin:-16px -24px;padding:16px 24px} .page-toc nav{max-height:320px;margin-top:16px}.page-toc .sss-print{display:none} .site-docs .layout{display:block} .sss-doc-nav{position:static;border:1px solid var(--site-line);border-radius:4px;padding:16px 24px;margin-top:24px} .sss-doc-nav>summary{display:list-item;color:var(--site-ink);font-size:.95rem;font-weight:600;cursor:pointer} .site-docs .sidebar{padding:16px 0 0;max-height:60dvh} .site-docs .layout>main{padding-top:24px} /* Both indexes are open in the HTML (desktop and no-JS), and site.js closes them on narrow screens. Until it has (class sss-ready) their contents stay hidden, so the collapse never moves the page after first paint. The