/* Site chrome: the header and the footer of every marketing page, at every
   width. ONE sheet (2026-09-29; phones only since 2026-09-24).

   The header (lib/site-header.js, views/partials/header.html) is a
   floating white pill with four menu panels and a Pricing link from 1024px
   (section 3b, since 2026-10-11; a full-width band before) and a band below
   that, where the same <nav> is a full-height sheet opened by the menu button. The footer
   (lib/site-footer.js, views/partials/footer.html) is the homepage's footer
   with one link set, the same size on every page. Before this each family
   (home-2026, light-page, vs-page, for-page, case-study, blog-2026 and ~60
   inline <style> blocks) drew its own pill and footer; those rules are gone.

   How it wins: it is the LAST stylesheet in <head> on every marketing page
   (sync-nav.js inserts it and --check enforces it; the homepage, the three
   rendered templates, blog-chrome.js, network-pages.js and the hosting
   generator carry it by hand). Several families keep <style> blocks inside
   <body> and style bare elements (details, summary, p, h2, a), so every
   selector starts with `html body` and names a class: (0,1,2) or more beats
   any element rule a page has. `!important` appears only where a11y.css or
   paper.css already put it on the same property (focus outlines, the
   footer heads' weight, the overlays hidden under the open sheet).

   Tokens are --sc-* / --sh-* on :root, never a page's own --text or --ink.
   No :has(): an engine without it (Android emulator Chrome < 105) drops the
   whole rule. No overflow on <html>/<body>: that turns <body> into a scroll
   container and the sticky header scrolls away (site-chrome.js blocks the
   scroll gestures while the sheet is open instead).

   Behaviour: site-chrome.js (ES5). Without JavaScript the desktop panels
   still open by click (<details>), and on phones the menu button is a link
   to #sh-nav that shows the sheet through :target until the script has run
   (html.sh-ready; the inline snippet's html.sh-js only paints the band). */

@font-face {
    font-family: 'Newsreader'; font-style: normal; font-weight: 300 600; font-display: swap;
    src: url(/assets/fonts/newsreader-var-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Newsreader'; font-style: normal; font-weight: 300 600; font-display: swap;
    src: url(/assets/fonts/newsreader-var-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --sc-paper: #f9f8f4;
    --sc-paper-2: #f1efe8;
    --sc-ink: #15161a;
    --sc-text: #3d3d3a;
    --sc-dim: #64625c;
    --sc-rule: #e4e1d8;
    --sc-rule-2: #d6d2c6;
    --sc-hair: #ece9e1;
    --sc-accent: #2733d9;
    --sc-accent-deep: #1f2abf;
    --sc-accent-edge: #1e28b4;
    --sc-hover: rgba(20, 20, 19, .05);
    --sc-item-hover: #f6f5f0;
    --sc-sans: 'Schibsted Grotesk', -apple-system, 'Segoe UI', sans-serif;
    --sc-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
    --sc-serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
    --sc-ease: cubic-bezier(.22, 1, .36, 1);
    --sh-h: 64px;
    --sh-pad: 28px;
    --sh-shell: 1240px;
}

/* ══ 1. Header: the band ═══════════════════════════════════════════════ */
/* Sticky, full width, height never changes. Without the inline snippet
   (NoScript, Tor "Safest") it is a solid paper band with a hairline, so
   nothing scrolls visibly under a transparent bar; with it (html.sh-js) it
   sits on the page at the top and turns frosted once the page moves. */
html body .sh {
    position: sticky; top: 0; z-index: 100;
    display: block; box-sizing: border-box; width: auto; max-width: none; min-width: 0;
    margin: 0; padding: 0; align-self: stretch; flex: none;
    background: var(--sc-paper); border: 0; border-bottom: 1px solid var(--sc-rule);
    box-shadow: none; border-radius: 0; transform: none;
    font: 400 1rem/1.5 var(--sc-sans); color: var(--sc-text); text-align: left;
    letter-spacing: normal; text-transform: none;
    -webkit-font-smoothing: antialiased;
    transition: background-color .2s ease, border-color .2s ease;
}
html body .sh *, html body .sh *::before, html body .sh *::after { box-sizing: border-box; }
html.sh-js body .sh { background: transparent; border-bottom-color: transparent; }
html.sh-js body .sh.is-scrolled {
    background: rgba(249, 248, 244, .92);
    -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
    border-bottom-color: var(--sc-rule);
}
/* A menu panel open: band and panel are one white surface. */
html.sh-js body .sh.has-panel {
    background: #fff; border-bottom-color: var(--sc-hair);
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
html body .sh-bar {
    position: static; display: flex; align-items: center;
    max-width: var(--sh-shell); height: var(--sh-h); margin: 0 auto; padding: 0 var(--sh-pad);
    background: none; border: 0;
}
html body .sh-sr {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* The logo slot: mark + wordmark (any lockup <=26px tall fits here). */
html body .sh-logo {
    display: inline-flex; align-items: center; gap: 10px; flex: none;
    margin: 0 32px 0 0; padding: 0; background: none; border: 0;
    font: 700 1.1875rem/1 var(--sc-sans); letter-spacing: -.02em; color: var(--sc-ink);
    text-decoration: none; text-transform: none; white-space: nowrap;
}
html body .sh-logo .logo-mark,
html body .sf-logo .logo-mark {
    display: flex; align-items: center; justify-content: center; flex: none;
    width: 26px; height: 26px; margin: 0; padding: 0; border: 0; border-radius: 8px;
    background: var(--sc-ink); color: #fff; box-shadow: none;
}
html body .sh-logo .logo-mark svg,
html body .sf-logo .logo-mark svg { display: block; width: 13px; height: 13px; color: #fff; }
html body .sh-word, html body .sf-word { color: inherit; }

/* ══ 2. Header: the menu (desktop, >=1024) ═════════════════════════════ */
/* Four <details> disclosures + one link. `name="sh-dd"` keeps one open at a
   time; site-chrome.js adds hover intent, arrow keys and closing. Pages
   style bare nav/details/summary/p (the light-page pill was `body nav`, the
   pricing FAQ `details summary::after{content:'+'}`), so every property a
   page might set is set here. */
html body .sh .sh-nav {
    display: flex; align-items: center; flex: 1 1 auto; min-width: 0;
    position: static; top: auto; left: auto; right: auto; bottom: auto; z-index: auto;
    width: auto; height: auto; max-width: none; margin: 0; padding: 0;
    background: none; border: 0; border-radius: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
html body .sh-menu { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
html body .sh-li { display: block; position: static; margin: 0; padding: 0; list-style: none; border: 0; }
html body .sh-li::before, html body .sh-li::after { content: none; }
html body .sh-dd { display: block; position: static; margin: 0; padding: 0; border: 0; background: none; }
html body .sh-dd > summary { list-style: none; }
html body .sh-dd > summary::-webkit-details-marker,
html body .sh-lang > summary::-webkit-details-marker { display: none; }
html body .sh-top {
    position: relative; display: inline-flex; align-items: center; gap: 6px;
    height: 40px; margin: 0; padding: 0 12px; border: 0; border-radius: 8px; background: transparent;
    font: 500 .9375rem/1 var(--sc-sans); letter-spacing: -.005em; color: var(--sc-text);
    text-decoration: none; text-transform: none; white-space: nowrap;
    cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
    transition: color .15s, background-color .15s;
}
html body .sh-top::after { content: none; }
html body .sh-top:hover,
html body .sh-dd[open] > .sh-top { color: var(--sc-ink); background: var(--sc-hover); }
html body .sh-chev { display: block; width: 10px; height: 10px; flex: none; opacity: .55; transition: transform .2s var(--sc-ease); }
html body .sh-dd[open] > .sh-top .sh-chev,
html body .sh-lang[open] > .sh-lang-sum .sh-chev { transform: rotate(180deg); opacity: .8; }
/* The section this page belongs to: ink + a 2px rule on the band's edge. */
html body .sh-top.is-current { color: var(--sc-ink); }
html body .sh-top.is-current::after {
    content: ''; position: absolute; left: 12px; right: 12px; bottom: calc((var(--sh-h) - 40px) / -2 - 1px);
    height: 2px; border-radius: 2px 2px 0 0; background: var(--sc-accent); transform: none;
}
html body .sh-dd[open] > .sh-top.is-current::after { display: none; }
html body .sh-arrow { display: none; }

/* The panel: a full-bleed white sheet under the band; its content sits on
   the 1240px shell, so the first column starts under the logo. */
html body .sh-panel {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 1;
    margin: 0; padding: 0; background: #fff; border: 0; border-bottom: 1px solid var(--sc-rule);
    box-shadow: 0 30px 60px -36px rgba(20, 20, 19, .34);
    color: var(--sc-text); cursor: auto; text-align: left;
}
html body .sh-panel-in {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px;
    max-width: var(--sh-shell); margin: 0 auto; padding: 26px calc(var(--sh-pad) - 12px) 30px;
}
html body .sh-span-3 { grid-column: span 3; }
html body .sh-span-4 { grid-column: span 4; }
html body .sh-span-5 { grid-column: span 5; }
html body .sh-span-8 { grid-column: span 8; }
html body .sh-col { min-width: 0; margin: 0; padding: 0; }
html body .sh .sh-h {
    margin: 2px 0 8px; padding: 0 12px; border: 0; background: none; animation: none;
    font: 600 .8125rem/1.4 var(--sc-sans); letter-spacing: 0; text-transform: none; color: var(--sc-dim);
}
html body .sh-grid2, html body .sh-stack, html body .sh-list, html body .sh-menu, html body .sh-lang-list,
html body .sh-grid2 > li, html body .sh-stack > li, html body .sh-list > li, html body .sh-lang-list > li { font-size: 1rem; line-height: 1.5; }
html body .sh-grid2, html body .sh-stack, html body .sh-list { margin: 0; padding: 0; list-style: none; }
html body .sh-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; }
html body .sh-stack { display: grid; gap: 2px; }
html body .sh-list { display: grid; gap: 1px; }
html body .sh-list-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
html body .sh-grid2 > li, html body .sh-stack > li, html body .sh-list > li,
html body .sh-lang-list > li { display: block; margin: 0; padding: 0; list-style: none; border: 0; }
html body .sh-grid2 > li::before, html body .sh-stack > li::before, html body .sh-list > li::before,
html body .sh-lang-list > li::before { content: none; }
/* Rich items: title, mono field caption, one line of description. */
html body .sh-item {
    display: block; margin: 0; padding: 10px 12px 11px; border: 0; border-radius: 10px;
    background: transparent; color: inherit; text-decoration: none; transition: background-color .12s;
}
html body .sh-item-r { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
html body .sh-item-t {
    display: inline-flex; align-items: center; gap: 6px; min-width: 0;
    font: 600 .9375rem/1.3 var(--sc-sans); letter-spacing: -.005em; color: var(--sc-ink);
}
html body .sh-item-t::after {
    content: '\2192'; font-weight: 500; color: var(--sc-accent-deep);
    opacity: 0; transform: translateX(-3px); transition: opacity .15s, transform .15s var(--sc-ease);
}
html body .sh-item-c { flex: none; font: 500 .6875rem/1.3 var(--sc-mono); letter-spacing: 0; color: var(--sc-dim); white-space: nowrap; }
html body .sh-item-d {
    display: block; margin-top: 3px;
    font: 400 .8438rem/1.45 var(--sc-sans); color: var(--sc-dim); text-wrap: pretty;
}
html body .sh-item:hover { background: var(--sc-item-hover); }
html body .sh-item:hover .sh-item-t,
html body .sh-item[aria-current] .sh-item-t { color: var(--sc-accent-deep); }
html body .sh-item:hover .sh-item-t::after { opacity: 1; transform: none; }
html body .sh-item[aria-current] .sh-item-t::before,
html body .sh-list a[aria-current]::before {
    content: ''; order: -1; flex: none; width: 6px; height: 6px; margin-right: 2px; border-radius: 50%; background: var(--sc-accent);
}
/* Title-only rows (industries, fraud patterns, company). */
html body .sh-list a {
    display: flex; align-items: center; gap: 6px; min-height: 36px; margin: 0; padding: 0 12px; border: 0; border-radius: 8px;
    background: transparent; font: 500 .9063rem/1.3 var(--sc-sans); color: var(--sc-text); text-decoration: none;
}
html body .sh-list a:hover { background: var(--sc-item-hover); color: var(--sc-ink); }
html body .sh-list a.sh-all,
html body .sh-list a[aria-current] { color: var(--sc-accent-deep); }

/* One card per panel: paper inside the white sheet, a serif title. */
html body .sh-feature {
    align-self: start; min-width: 0; margin: 0 12px 0 0; padding: 20px 22px 22px; border: 0; border-radius: 14px;
    background: var(--sc-paper); box-shadow: inset 0 0 0 1px var(--sc-rule);
}
html body .sh .sh-feature-k {
    margin: 0; padding: 0; animation: none;
    font: 600 .8125rem/1.4 var(--sc-sans); letter-spacing: 0; text-transform: none; color: var(--sc-accent-deep);
}
html body .sh .sh-feature-t {
    margin: 10px 0 8px; padding: 0; animation: none; color: var(--sc-ink);
    font: 400 1.5625rem/1.12 var(--sc-serif); letter-spacing: -.015em;
    font-optical-sizing: none; font-variation-settings: 'opsz' 36; text-transform: none; text-wrap: balance;
}
html body .sh .sh-feature-p {
    margin: 0; padding: 0; animation: none;
    font: 400 .8438rem/1.5 var(--sc-sans); color: var(--sc-text); text-wrap: pretty;
}
html body .sh-feature-a {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
    font: 600 .875rem/1.3 var(--sc-sans); color: var(--sc-accent-deep); text-decoration: none;
}
html body .sh-feature-a:hover { text-decoration: underline; text-underline-offset: 3px; }
html body .sh-code {
    margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--sc-rule);
    font: 400 .75rem/1.75 var(--sc-mono); color: var(--sc-ink); white-space: pre; overflow-x: auto; text-align: left;
}
html body .sh-code .c { color: var(--sc-dim); }
html body .sh-code .s { color: var(--sc-accent-deep); }
/* The IP lookup: a plain GET to /ip?addr= (302 to /ip/<addr>, a bad address
   back to /ip-lookup#lookup-invalid), so it works without scripts. */
html body .sh-tool { display: flex; gap: 8px; margin: 14px 0 0; padding: 0; border: 0; background: none; }
html body .sh-tool-in {
    flex: 1 1 auto; width: auto; min-width: 0; height: 40px; margin: 0; padding: 0 12px;
    border: 1px solid var(--sc-rule-2); border-radius: 9px; background: #fff; box-shadow: none; color: var(--sc-ink);
    font: 400 .8125rem/1 var(--sc-mono); letter-spacing: 0; -webkit-appearance: none; appearance: none;
}
html body .sh-tool-in::placeholder { color: #8b887f; opacity: 1; }
html body .sh-tool-btn {
    flex: none; height: 40px; margin: 0; padding: 0 16px; border: 1px solid var(--sc-accent-edge); border-radius: 9px;
    background: var(--sc-accent); color: #fff; cursor: pointer;
    font: 600 .875rem/1 var(--sc-sans); letter-spacing: 0; text-transform: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(20, 20, 19, .14);
}
html body .sh-tool-btn:hover { background: var(--sc-accent-deep); }
/* A strip along the panel's foot: one fact and one link. */
html body .sh-foot {
    grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px;
    margin: 18px 12px 0; padding: 16px 0 0; border-top: 1px solid var(--sc-hair);
    font: 400 .875rem/1.5 var(--sc-sans); color: var(--sc-text);
}
html body .sh-foot-k { font: 600 .8125rem/1.4 var(--sc-sans); letter-spacing: 0; text-transform: none; color: var(--sc-dim); }
html body .sh-foot-a { margin-left: auto; font-weight: 600; color: var(--sc-accent-deep); text-decoration: none; white-space: nowrap; }
html body .sh-foot-a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* A light scrim over the page while a menu panel is open (not the
   language popover); a click on it closes the panel. It starts UNDER the
   band: from top 0 it showed through the band (transparent at the page
   top, 92% when scrolled) while that faded to white, a ~0.1 s grey flash
   of the band and the open item on every panel open (owner, 2026-09-30). */
html body .sh-scrim {
    display: block; position: fixed; top: calc(var(--sh-h) + 1px); right: 0; bottom: 0; left: 0; z-index: 90;
    margin: 0; padding: 0; background: rgba(21, 22, 26, .10);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .18s, visibility 0s .18s;
}
html.sh-panel-open body .sh-scrim { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .18s; }

/* ══ 3. Header: the right side ═════════════════════════════════════════ */
html body .sh-actions { display: flex; align-items: center; gap: 4px; flex: none; margin: 0 0 0 auto; padding: 0; }
html body .sh-lang { position: relative; display: block; margin: 0; padding: 0; border: 0; background: none; }
html body .sh-lang-sum {
    display: inline-flex; align-items: center; gap: 7px; height: 36px; margin: 0; padding: 0 10px;
    border: 0; border-radius: 8px; background: transparent; list-style: none; cursor: pointer;
    font: 600 .75rem/1 var(--sc-mono); letter-spacing: .06em; text-transform: none; color: var(--sc-text);
}
html body .sh-lang-sum::after { content: none; }
html body .sh-lang-sum:hover, html body .sh-lang[open] > .sh-lang-sum { color: var(--sc-ink); background: var(--sc-hover); }
html body .sh-globe { display: block; width: 15px; height: 15px; flex: none; opacity: .75; }
html body .sh-lang-pop {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 2; width: 220px; margin: 0; padding: 6px;
    background: #fff; border: 0; border-radius: 12px;
    box-shadow: 0 0 0 1px rgba(20, 20, 19, .08), 0 18px 40px -18px rgba(20, 20, 19, .32);
}
html body .sh-lang-list { margin: 0; padding: 0; list-style: none; }
html body .sh-lang-list a {
    display: flex; align-items: center; gap: 10px; min-height: 40px; margin: 0; padding: 0 10px; border-radius: 8px;
    font: 500 .9063rem/1.2 var(--sc-sans); color: var(--sc-text); text-decoration: none; background: transparent;
}
html body .sh-lang-list a:hover { background: var(--sc-item-hover); color: var(--sc-ink); }
html body .sh-tick { display: block; width: 16px; height: 16px; flex: none; color: var(--sc-accent); visibility: hidden; }
html body .sh-lang-list a[aria-current] { color: var(--sc-ink); font-weight: 600; }
html body .sh-lang-list a[aria-current] .sh-tick { visibility: visible; }
html body .sh-lang-tag { margin-left: auto; font: 500 .6875rem/1 var(--sc-mono); letter-spacing: .08em; color: var(--sc-dim); }
html body .sh-sep { display: block; flex: none; width: 1px; height: 20px; margin: 0 6px; background: var(--sc-rule-2); }
html body .sh-login {
    display: inline-flex; align-items: center; height: 40px; margin: 0; padding: 0 12px; border: 0; border-radius: 8px;
    background: transparent; font: 500 .9375rem/1 var(--sc-sans); letter-spacing: 0; text-transform: none;
    color: var(--sc-text); text-decoration: none; white-space: nowrap;
    transition: color .15s, background-color .15s;
}
html body .sh-login:hover { color: var(--sc-ink); background: var(--sc-hover); }
html body .sh-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; margin: 0 0 0 6px; padding: 0 18px;
    border: 1px solid var(--sc-accent-edge); border-radius: 10px; background: var(--sc-accent);
    font: 600 .9063rem/1 var(--sc-sans); letter-spacing: -.005em; text-transform: none;
    color: #fff; text-decoration: none; white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(20, 20, 19, .14);
    transition: background-color .15s;
}
html body .sh-cta:hover { background: var(--sc-accent-deep); color: #fff; }
html body .sh-cta-arrow { display: block; width: 15px; height: 15px; flex: none; }
/* Signed in (html.mb-signed-in, set by the snippet before the header
   paints): one "Dashboard" button. Without inline script: "Get started". */
html body .sh-cta-in, html body .sh-sheet-cta.sh-cta-in { display: none; }
html.mb-signed-in body .sh-cta-in { display: inline-flex; }
html.mb-signed-in body .sh-cta-out,
html.mb-signed-in body .sh-login,
html.mb-signed-in body .sh-sheet-login { display: none; }
/* Phone-only parts. */
html body .sh-burger, html body .sh-burger-close, html body .sh-sheet-foot { display: none; }

/* Focus: 2px accent ring (a11y.css sets outlines !important site-wide). */
html body .sh a:focus-visible, html body .sh summary:focus-visible, html body .sh button:focus-visible,
html body .sf a:focus-visible, html body .sf button:focus-visible {
    outline: 2px solid var(--sc-accent) !important; outline-offset: 2px !important;
}
html body .sh .sh-top:focus-visible, html body .sh .sh-item:focus-visible, html body .sh .sh-list a:focus-visible { outline-offset: -2px !important; }
html body .sh .sh-tool-in:focus-visible { outline: 2px solid var(--sc-accent) !important; outline-offset: 0 !important; border-color: transparent; }
/* A tap on the menu button focuses the sheet itself (tabindex -1, set by
   site-chrome.js): no ring around the whole sheet (a11y.css rings every
   [tabindex]:focus-visible !important). */
html body .sh .sh-nav[tabindex]:focus, html body .sh .sh-nav[tabindex]:focus-visible { outline: none !important; }

@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
    /* Not on a panel swapped in from another (.sh-instant stays on it until
       it closes; a class removed mid-open would restart the fade: a blink). */
    html body .sh-dd[open]:not(.sh-instant) > .sh-panel { animation: sh-in .18s var(--sc-ease); }
    html body .sh-lang[open] > .sh-lang-pop { animation: sh-in .16s var(--sc-ease); }
    @keyframes sh-in { from { opacity: 0; transform: translateY(-4px); } }
}
@media (prefers-reduced-motion: reduce) {
    html body .sh, html body .sh *, html body .sh-scrim { transition: none !important; animation: none !important; }
}

/* Narrow desktops (1024-1279): German is the longest row; the spacing
   tightens and the language code steps aside first (at 1200-1279 it and
   the old FREE tag left German 21px between Preise and the actions). */
@media (min-width: 1024px) and (max-width: 1279px) {
    :root { --sh-pad: 20px; }
    html body .sh-logo { margin-right: 18px; }
    html body .sh-top { padding: 0 9px; }
    html body .sh-top.is-current::after { left: 9px; right: 9px; }
    html body .sh-lang-code {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
    html body .sh-login { padding: 0 9px; }
    html body .sh-cta { padding: 0 14px; }
    html body .sh-sep { margin: 0 4px; }
}

/* ══ 3b. Desktop: a floating pill (2026-10-11) ═════════════════════════ */
/* Owner, after comparing the homepage with a reference site ("take
   inspiration from there"): from 1024px the band is transparent and the
   bar is a white pill 12px under the top edge, on the same 1184px line as
   the hero frame and every section below; the menu sits in its middle and
   a panel opens as a card 8px under it. The pill is white in every state
   (top, scrolled, a panel open), so nothing fades over the scrim (the
   09-30 flicker came from a band fading to white over it) and the scrim
   can cover the whole page around the pill. --sh-stick is where a page's
   own sticky bar goes under the header (the DPA and whitepaper toolbars).
   Phones and tablets keep the band (section 4). */
:root { --sh-stick: calc(var(--sh-h) + 1px); }
@media (min-width: 1024px) {
    :root { --sh-gap: 12px; --sh-stick: calc(var(--sh-gap) + var(--sh-h) + 8px); }
    html body .sh, html.sh-js body .sh, html.sh-js body .sh.is-scrolled, html.sh-js body .sh.has-panel {
        padding: var(--sh-gap) var(--sh-pad) 0;
        background: transparent; border-bottom-color: transparent; border-bottom-width: 0;
        -webkit-backdrop-filter: none; backdrop-filter: none;
        pointer-events: none;   /* the page shows (and stays clickable) around the pill */
    }
    html body .sh-bar {
        position: relative; max-width: calc(var(--sh-shell) - 56px); padding: 0 10px 0 20px;
        background: #fff; border-radius: 16px; pointer-events: auto;
        box-shadow: 0 0 0 1px rgba(20, 20, 19, .08), 0 1px 2px rgba(20, 20, 19, .04);
        transition: box-shadow .2s ease;
    }
    html.sh-js body .sh.is-scrolled .sh-bar {
        box-shadow: 0 0 0 1px rgba(20, 20, 19, .08), 0 12px 32px -16px rgba(20, 20, 19, .24);
    }
    html body .sh-logo { margin-right: 16px; }
    /* The current section: a short rule under its name, inside the pill. */
    html body .sh-top.is-current::after { bottom: 3px; }
    html body .sh-panel {
        top: calc(100% + 8px); border: 0; border-radius: 16px;
        box-shadow: 0 0 0 1px rgba(20, 20, 19, .08), 0 28px 56px -28px rgba(20, 20, 19, .3);
    }
    /* The 8px between pill and card still belongs to the open menu, so the
       pointer crossing it never leaves the <details>. */
    html body .sh-panel::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
    html body .sh-panel-in { max-width: none; padding: 22px 12px 24px; }
    html body .sh-lang-pop { top: calc(100% + 22px); }
    html body .sh-scrim { top: 0; }
}
/* The tight row (1024-1279): room back inside the pill so German keeps
   ~30px between Preise and the language button (it had 0.3px), the menu
   after the logo so a row that is too long never covers it, and the
   Developers sample line wraps instead of hiding "vpn". */
@media (min-width: 1024px) and (max-width: 1279px) {
    html body .sh-bar { padding: 0 8px 0 16px; }
    html body .sh-logo { margin-right: 12px; }
    html body .sh-top { padding: 0 8px; }
    html body .sh-top.is-current::after { left: 8px; right: 8px; }
    html body .sh-login { padding: 0 8px; }
    html body .sh-cta { padding: 0 12px; }
    html body .sh-sep { margin: 0 2px; }
    html body .sh-code { white-space: pre-wrap; overflow-wrap: anywhere; }
}
/* From 1280px the menu sits on the pill's centre line, the same on every
   page and signed in or out (centred in the leftover space it moved up to
   79px between pages): logo | menu | actions as 1fr auto 1fr. */
@media (min-width: 1280px) {
    html body .sh-bar { display: grid; grid-template-columns: 1fr auto 1fr; column-gap: 24px; }
    html body .sh-logo { justify-self: start; margin-right: 0; }
    html body .sh-actions { justify-self: end; margin: 0; }
}
/* From 1180px the pill takes the page's 28px gutter, so its edges line up
   with the sections and the live check's tray; at 1024-1179 German needs
   the 20px of the tight row. */
@media (min-width: 1180px) { :root { --sh-pad: 28px; } }

/* ══ 4. Header: phones and tablets (<=1023) ════════════════════════════ */
/* A solid paper bar (iOS Safari tints its toolbar from it; a filtered
   ancestor would also trap the fixed sheet), the CTA and the menu button;
   the same <nav> becomes a full-height sheet under the bar. */
@media (max-width: 1023px) {
    :root { --sh-h: 60px; --sh-pad: 20px; }
    html body .sh, html.sh-js body .sh, html.sh-js body .sh.is-scrolled, html.sh-js body .sh.has-panel {
        background: var(--sc-paper); -webkit-backdrop-filter: none; backdrop-filter: none;
    }
    /* A hairline once the page moves or the sheet is open (always without
       the snippet: see the band above). */
    html.sh-js body .sh.is-scrolled, html.sh-js.sh-open body .sh { border-bottom-color: var(--sc-rule); }
    html body .sh-logo { margin-right: auto; }
    html body .sh-lang, html body .sh-sep, html body .sh-login { display: none; }
    html body .sh-actions { margin-left: 12px; gap: 4px; }
    html body .sh-cta { height: 36px; margin: 0; padding: 0 14px; border-radius: 9px; font-size: .875rem; }
    html body .sh-cta-arrow { display: none; }
    html.sh-open body .sh-actions .sh-cta { visibility: hidden; }
    html body .sh-burger, html body .sh-burger-close {
        position: relative; align-items: center; justify-content: center; flex: none;
        width: 44px; height: 44px; margin: 0 -10px 0 2px; padding: 0; border: 0; border-radius: 10px;
        background: none; color: var(--sc-ink); cursor: pointer; text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }
    html body .sh-burger { display: inline-flex; }
    html body .sh-burger:hover { background: var(--sc-hover); }
    /* A tap leaves :hover stuck on touch screens; only real pointers get it. */
    @media (hover: none) { html body .sh-burger:hover { background: none; } }
    html body .sh-burger > span, html body .sh-burger-close > span { position: relative; display: block; width: 18px; height: 12px; }
    html body .sh-burger > span::before, html body .sh-burger > span::after,
    html body .sh-burger-close > span::before, html body .sh-burger-close > span::after {
        content: ''; position: absolute; left: 0; right: 0; height: 1.75px; border-radius: 2px; background: currentColor;
    }
    html body .sh-burger > span::before { top: 2px; }
    html body .sh-burger > span::after { top: 8.25px; }
    html.sh-open body .sh-burger > span::before,
    html body .sh-burger-close > span::before { top: 5.125px; transform: rotate(45deg); }
    html.sh-open body .sh-burger > span::after,
    html body .sh-burger-close > span::after { top: 5.125px; transform: rotate(-45deg); }

    /* The sheet: the same <nav> and <details>, as an accordion. */
    html body .sh .sh-nav {
        display: none; position: fixed; left: 0; right: 0; bottom: 0; top: var(--sh-sheet-top, calc(var(--sh-h) + 1px)); z-index: 99;
        flex-direction: column; align-items: stretch;
        overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
        padding: 4px var(--sh-pad) calc(20px + env(safe-area-inset-bottom));
        background: var(--sc-paper);
    }
    html.sh-open body .sh .sh-nav { display: flex; }
    /* Without JavaScript the menu button is a link to #sh-nav; the close
       link goes to #sh. Once site-chrome.js has run (html.sh-ready) the
       script owns the sheet; the inline snippet's sh-js is not enough (the
       script file can still fail to arrive). */
    html:not(.sh-ready) body .sh .sh-nav:target { display: flex; }
    html:not(.sh-ready) body .sh .sh-nav:target ~ .sh-actions .sh-burger { display: none; }
    html:not(.sh-ready) body .sh .sh-nav:target ~ .sh-actions .sh-burger-close { display: inline-flex; }
    html:not(.sh-ready) body .sh .sh-nav:target ~ .sh-actions .sh-cta { visibility: hidden; }
    html body .sh-nav > .sh-menu, html body .sh-nav > .sh-sheet-foot { width: 100%; max-width: 640px; margin-left: auto; margin-right: auto; }
    html body .sh-menu { display: block; flex: none; }
    html body .sh-li { border-bottom: 1px solid var(--sc-rule); }
    html body .sh-top, html body .sh-top:hover, html body .sh-dd[open] > .sh-top, html body .sh-top[aria-current] {
        display: flex; width: 100%; height: auto; min-height: 64px; padding: 0 2px; justify-content: flex-start;
        border-radius: 0; background: none; color: var(--sc-ink);
        font: 400 1.625rem/1.1 var(--sc-serif); letter-spacing: -.015em;
        font-optical-sizing: none; font-variation-settings: 'opsz' 36;
    }
    html body .sh-chev { width: 14px; height: 14px; margin-left: auto; opacity: .5; }
    html body .sh-top.is-current::after,
    html body .sh-dd[open] > .sh-top.is-current::after {
        display: block; position: static; order: 1; width: 6px; height: 6px; margin: 0 0 0 10px; border-radius: 50%; background: var(--sc-accent);
    }
    html body .sh-top .sh-chev { order: 2; }
    html body .sh-top-link .sh-arrow { display: block; order: 3; margin-left: auto; font: 400 1.125rem/1 var(--sc-sans); color: var(--sc-ink); opacity: .45; }
    html body .sh-top-link.is-current::after { order: 2; }
    html body .sh-panel { position: static; background: none; border: 0; box-shadow: none; animation: none; }
    html body .sh-panel-in { display: block; max-width: none; padding: 0 0 18px; }
    html body .sh-panel-in > * + * { margin-top: 14px; }
    html body .sh .sh-h { padding: 0 2px; margin: 0 0 4px; }
    html body .sh-grid2, html body .sh-stack, html body .sh-list, html body .sh-list-2 { display: block; }
    html body .sh-item, html body .sh-list a {
        display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 2px; border-radius: 0; background: none;
        font: 500 1rem/1.3 var(--sc-sans); color: var(--sc-text);
    }
    html body .sh-item:hover, html body .sh-list a:hover { background: none; }
    html body .sh-item-r { display: flex; align-items: center; }
    html body .sh-item-t { font: inherit; color: inherit; }
    html body .sh-item-t::after, html body .sh-item-c, html body .sh-item-d { display: none; }
    html body .sh-feature, html body .sh-foot { display: none; }
    /* The IP lookup card stays: it is a tool, not decoration. */
    html body .sh-feature.sh-keep { display: block; margin: 12px 0 0; padding: 16px; }
    html body .sh .sh-keep .sh-feature-t { margin: 6px 0 4px; font-size: 1.25rem; }
    html body .sh .sh-keep .sh-feature-p { display: none; }
    /* 16px text: iOS Safari zooms the page into a smaller field on focus
       (and the fixed sheet stays zoomed); 44px targets. */
    html body .sh-tool-in { height: 44px; font-size: 1rem; }
    html body .sh-tool-btn { height: 44px; }

    html body .sh-sheet-foot { display: grid; gap: 12px; flex: none; margin-top: auto; padding-top: 28px; }
    html body .sh-seg {
        display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px;
        border-radius: 12px; background: var(--sc-paper-2);
    }
    html body .sh-seg a {
        display: flex; align-items: center; justify-content: center; min-height: 40px; border-radius: 9px;
        font: 500 .875rem/1 var(--sc-sans); color: var(--sc-dim); text-decoration: none; white-space: nowrap;
    }
    html body .sh-seg a[aria-current] {
        background: #fff; color: var(--sc-ink); font-weight: 600;
        box-shadow: 0 1px 2px rgba(20, 20, 19, .1), 0 0 0 1px rgba(20, 20, 19, .06);
    }
    html body .sh-sheet-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
    /* A sheet taller than the screen (a section open on a small phone): the
       account buttons stay at the thumb. The foot steps out of the way
       (display: contents) so the button row is the sheet's own child and can
       stick to its bottom edge. */
    html body .sh-nav.is-overflowing > .sh-sheet-foot { display: contents; }
    html body .sh-nav.is-overflowing .sh-seg { flex: none; width: 100%; max-width: 640px; margin: 28px auto 0; }
    html body .sh-nav.is-overflowing .sh-sheet-actions {
        position: sticky; bottom: calc(-20px - env(safe-area-inset-bottom)); z-index: 1; flex: none;
        margin: 12px calc(-1 * var(--sh-pad)) 0; padding: 12px var(--sh-pad) calc(32px + env(safe-area-inset-bottom));
        background: var(--sc-paper); border-top: 1px solid var(--sc-rule);
    }
    html body .sh-sheet-actions a {
        display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
        border-radius: 10px; font: 600 .9375rem/1 var(--sc-sans); text-decoration: none; white-space: nowrap;
    }
    html body .sh-sheet-login { background: #fff; color: var(--sc-ink); box-shadow: inset 0 0 0 1px var(--sc-rule-2); }
    html body .sh-sheet-cta {
        background: var(--sc-accent); color: #fff; border: 1px solid var(--sc-accent-edge);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(20, 20, 19, .14);
    }
    html.mb-signed-in body .sh-sheet-cta.sh-cta-in { display: flex; }
    html body .sh-scrim { display: none; }
    /* Overlays that covered the sheet's buttons (the chat launcher, the
       Chat button chat.js shows signed-in and GPC visitors, the sticky CTA
       bars, the blog's reading bar) step aside while it is open. */
    html.sh-open #widgo-root, html.sh-open #mb-chat-control, html.sh-open .mb-chat,
    html.sh-open #scta-bar, html.sh-open #mob-cta-bar,
    html.sh-open .mob-cta-bar, html.sh-open .read-progress { visibility: hidden !important; }
}
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
    html body .sh-burger > span::before, html body .sh-burger > span::after { transition: transform .22s var(--sc-ease), top .22s var(--sc-ease); }
    html.sh-open body .sh .sh-nav { animation: sh-sheet .22s var(--sc-ease); }
    @keyframes sh-sheet { from { opacity: 0; transform: translateY(-6px); } }
}
@media (max-width: 640px) { :root { --sh-h: 56px; --sh-pad: 16px; } }
@media (max-width: 380px) {
    html body .sh-top, html body .sh-top:hover, html body .sh-dd[open] > .sh-top, html body .sh-top[aria-current] { font-size: 1.4375rem; }
}
/* 320px holds the mark, the button and the menu button; the wordmark stays
   in the link's name. */
@media (max-width: 359px) {
    html body .sh-word {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
}

/* ══ 5. Footer ═════════════════════════════════════════════════════════ */
/* The homepage footer on every page: brand 4fr beside a 4-column link
   grid, the bottom row under a hairline, the same 1184px shell as the
   header. One size everywhere (pages used to range 79-757px). */
html body .sf {
    display: block; position: static; box-sizing: border-box; width: auto; max-width: none; min-width: 0;
    margin: 0; padding: 72px 28px 40px; align-self: stretch; flex: none; float: none; clear: both;
    background: var(--sc-paper); border: 0; border-top: 1px solid var(--sc-rule); border-radius: 0; box-shadow: none;
    font: 400 1rem/1.6 var(--sc-sans); color: var(--sc-dim); text-align: left; letter-spacing: normal; text-transform: none;
    -webkit-font-smoothing: antialiased;
}
html body .sf *, html body .sf *::before, html body .sf *::after { box-sizing: border-box; }
html body .sf-in {
    display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px;
    max-width: 1184px; margin: 0 auto; padding: 0; border: 0;
}
html body .sf-brand { min-width: 0; margin: 0; padding: 0; }
html body .sf-logo {
    display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 0;
    font: 700 1.05rem/1 var(--sc-sans); letter-spacing: -.02em; color: var(--sc-ink); text-decoration: none;
}
html body .sf-logo .logo-mark { width: 24px; height: 24px; border-radius: 7px; }
html body .sf-logo .logo-mark svg { width: 12px; height: 12px; }
html body .sf .sf-tag {
    max-width: 30ch; margin: 12px 0 0; padding: 0; animation: none;
    font: 400 .9rem/1.6 var(--sc-sans); color: var(--sc-dim);
}
html body .sf .sf-cols {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px;
    position: static; top: auto; z-index: auto; width: auto; height: auto; max-width: none; margin: 0; padding: 0;
    background: none; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
html body .sf-group { min-width: 0; margin: 0; padding: 0; border: 0; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
html body .sf .sf-h {
    margin: 0 0 15px; padding: 0; border: 0; background: none;
    font-family: var(--sc-mono); font-size: .6875rem; font-weight: 500 !important; line-height: 1.4; font-style: normal;
    letter-spacing: .12em; text-transform: uppercase; color: var(--sc-dim);
    font-optical-sizing: auto; font-variation-settings: normal;
}
html body .sf-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
html body .sf-list > li, html body .sf-legal > li { display: block; margin: 0; padding: 0; list-style: none; border: 0; }
/* The row is the link's own line (a 16px strut made every row 26px); pages
   that size bare ul/li (the DPA) must not reach it either. */
html body .sf-list, html body .sf-list > li { font-size: .85rem; line-height: 1.62; }
html body .sf-legal, html body .sf-legal > li { font-size: inherit; line-height: inherit; }
html body .sf-list > li::before, html body .sf-legal > li::before { content: none; }
html body .sf-list a {
    display: inline; margin: 0; padding: 0; border: 0; background: none;
    font: 400 .85rem/1.62 var(--sc-sans); color: var(--sc-dim); text-decoration: none; transition: color .15s;
}
html body .sf-list a:hover { color: var(--sc-ink); }
html body .sf-bottom {
    grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px;
    margin: 0; padding: 26px 0 0; border: 0; border-top: 1px solid var(--sc-rule);
    font: 400 .75rem/1.5 var(--sc-sans); color: var(--sc-dim);
}
html body .sf .sf-co { margin: 0; padding: 0; animation: none; font: inherit; color: inherit; }
html body .sf-legal { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; }
html body .sf-bottom a { color: var(--sc-dim); text-decoration: none; }
html body .sf-bottom a:hover { color: var(--sc-ink); }
html body .sf .footer-status { display: inline-flex; align-items: center; gap: 8px; }
/* A neutral dot: a static green one read as "all systems operational"
   while /status could be reporting a failing check. */
html body .sf .footer-status::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .45; }
/* The language row (trilingual pages only): English / Deutsch / Eesti. */
html body .sf-lang { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
html body .sf-globe { display: block; flex: none; opacity: .5; }
html body .sf-lang a { white-space: nowrap; }
html body .sf-lang a[aria-current] { color: var(--sc-ink); font-weight: 700; }

/* Tablets: the brand above the groups, 2 columns, 4 from 740px. */
@media (max-width: 1023px) {
    html body .sf { padding: 56px 24px 36px; }
    html body .sf-in { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    html body .sf .sf-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 28px; }
    html body .sf-bottom { justify-content: flex-start; gap: 10px 24px; }
    html body .sf .sf-co { order: 9; flex: 1 1 100%; text-wrap: pretty; }
    /* The language row as a segmented control, each language in its name. */
    html body .sf-lang { display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; padding: 3px; border-radius: 12px; background: var(--sc-paper-2); }
    html body .sf-globe { display: none; }
    html body .sf-lang a {
        display: flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 12px; border-radius: 9px;
        font: 500 .8125rem/1 var(--sc-sans); color: var(--sc-dim);
    }
    html body .sf-lang a[aria-current] {
        background: #fff; color: var(--sc-ink); font-weight: 600;
        box-shadow: 0 1px 2px rgba(20, 20, 19, .1), 0 0 0 1px rgba(20, 20, 19, .06);
    }
}
@media (min-width: 740px) and (max-width: 1023px) {
    html body .sf .sf-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 20px; }
}

/* Phones (<=640): the brand, then the four groups as rows that fold open
   (site-chrome.js adds .sf-folds; without it every link shows), then one
   bottom block: Privacy / Terms / System status on one line, the language
   control, the company line last. */
@media (max-width: 640px) {
    html body .sf { padding: 48px 20px 32px; }
    html body .sf-in { gap: 28px; }
    html body .sf .sf-tag { max-width: 34ch; font-size: .9375rem; line-height: 1.55; }
    html body .sf .sf-cols { display: block; border-top: 1px solid var(--sc-rule); }
    html body .sf-group { padding: 0 0 12px; border-bottom: 1px solid var(--sc-rule); }
    html body .sf .sf-h {
        margin: 0; padding: 16px 2px 6px;
        font: 600 1rem/1.3 var(--sc-sans); font-weight: 600 !important; letter-spacing: -.005em; text-transform: none; color: var(--sc-ink);
    }
    html body .sf-list { display: block; }
    html body .sf-list a { display: block; padding: 9px 2px; font-size: .9375rem; line-height: 1.35; color: var(--sc-text); }
    html body .sf.sf-folds .sf-group { padding: 0; }
    html body .sf.sf-folds .sf-group.is-open { padding-bottom: 12px; }
    html body .sf.sf-folds .sf-h { padding: 0; }
    html body .sf.sf-folds .sf-group:not(.is-open) > .sf-list { display: none; }
    html body .sf-fold {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        width: 100%; min-height: 48px; margin: 0; padding: 0 6px 0 2px;
        border: 0; background: none; color: inherit; cursor: pointer; text-align: left;
        font: inherit; letter-spacing: inherit; -webkit-tap-highlight-color: transparent;
    }
    html body .sf-fold::after {
        content: ''; flex: none; width: 7px; height: 7px; margin-top: -4px;
        border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
        transform: rotate(45deg); opacity: .45; transition: transform .2s, margin .2s;
    }
    html body .sf-fold[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 4px; }
    html body .sf-bottom { gap: 4px 20px; padding: 0; border-top: 0; font-size: .875rem; }
    html body .sf-legal { gap: 4px 20px; }
    html body .sf-bottom a { display: inline-flex; align-items: center; min-height: 40px; color: var(--sc-text); white-space: nowrap; }
    html body .sf-lang { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 1 1 100%; margin: 12px 0 4px; }
    html body .sf-lang a { min-height: 40px; }
    html body .sf .sf-co { margin-top: 10px; font-size: .8125rem; line-height: 1.6; }
}
/* Estonian "Privaatsus · Tingimused · Süsteemi olek" fits 280px only this tight. */
@media (max-width: 359px) {
    html body .sf-bottom, html body .sf-legal { column-gap: 14px; }
}

/* Room under the footer for a phone's fixed CTA bar (the blog's and the
   homepage's #mob-cta-bar set body.mob-cta-on while it shows). */
@media (max-width: 768px) {
    html body.mob-cta-on .sf { padding-bottom: calc(32px + 84px + env(safe-area-inset-bottom)); }
}
/* Printed pages (the DPA, the whitepaper, legal pages) carry neither. */
@media print {
    html body .sh, html body .sh-scrim, html body .sf { display: none; }
}

/* ══ 6. The sticky CTA bar steps aside at the footer ═══════════════════ */
/* Hidden, not just moved: its links must not take focus off-screen. */
html.sc-at-footer #scta-bar.scta-visible {
    transform: translateY(110%) !important; visibility: hidden; pointer-events: none;
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), visibility 0s .35s;
}

/* ══ 7. Forced colours (Windows High Contrast) ═════════════════════════ */
/* Edges drawn with box-shadow vanish there: the language popover, the
   cards, the sheet's Log in and the current language get a
   real border; the logo keeps its ink square and white glyph. Lines drawn
   as a background (the menu button's bars and its close cross, the current
   section's rule or dot) would be painted Canvas, i.e. disappear. */
@media (forced-colors: active) and (min-width: 1024px) {
    html body .sh-bar, html body .sh-panel { border: 1px solid CanvasText; }
}
@media (forced-colors: active) {
    html body .sh-lang-pop, html body .sh-feature, html body .sh-code, html body .sh-sheet-login,
    html body .sh-seg a[aria-current], html body .sf-lang a[aria-current] { border: 1px solid CanvasText; }
    html body .sh .logo-mark, html body .sf .logo-mark { forced-color-adjust: none; }
    html body .sh-burger > span::before, html body .sh-burger > span::after,
    html body .sh-burger-close > span::before, html body .sh-burger-close > span::after { forced-color-adjust: none; background: CanvasText; }
    html body .sh-top.is-current::after, html body .sh-item[aria-current] .sh-item-t::before,
    html body .sh-list a[aria-current]::before { forced-color-adjust: none; background: Highlight; }
}