/* ONE SITE, ONE GROUND (the owner, 5 November 2026: "landing page first page is speaking one language and all other pages are
   speaking another ... I am not suggesting to make same band and stuff, just want to have them harmonised, like it doesnt
   look like a sections from 2 different web sites"). The landing's sheet of grey and its grain behind every public page, its
   headings' face and weight, its rail's left edge, and words stepped up to read on it. A paper's cream sheet stays cream and
   keeps its serif: it is a document on the desk. Every rule starts at `html body`, so it holds over the rules a page writes
   after this file. */

:root {
    --metal-ground: #33373c;
    /* the sheet and the band, 40 and 64 pixels wide: their shades arrive with this file, so the first paint of a page already has
       them and the big pictures only add the detail (the owner, 5 November: "some piece is coming later than other") */
    --metal-tiny: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAwICQsJCAwLCgsODQwOEh4UEhEREiUbHBYeLCcuLisnKyoxN0Y7MTRCNCorPVM+QkhKTk9OLztWXFVMW0ZNTkv/2wBDAQ0ODhIQEiQUFCRLMisyS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0v/wAARCAA7ACgDASIAAhEBAxEB/8QAGQAAAwEBAQAAAAAAAAAAAAAAAAQFAgMB/8QAJBAAAQQCAgICAwEAAAAAAAAAAQACAwQRIRIxE0EFIhQjUWH/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AIvx0efu7pURKCcDoKb5wxoY1YfbDG4B2goz2g0YBUq5eOOLTsrhLYLva4siLzlyAiY6V+0KlSgAPI+kIJIsE7ygOc8r2Gm49hUYKTQM+0C0cPty7NwDhMOrk6AWWVDy3kIMyWPHHgdoXOxVc12T0hA1PiF2hpYjnPLI6QHCzH/q4D9R2gsRFpaDpYsytDcjGQpL7/jGAUs+66U9oGLV/wAjS32hIvhLjyCFAwJ/xiQUtZuczorXy+rDsf1TlR1DnPKYihI2sVAD6T4H1UHrXgMwUJWQnKEH/9k=');
    --band-tiny: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAwICQsJCAwLCgsODQwOEh4UEhEREiUbHBYeLCcuLisnKyoxN0Y7MTRCNCorPVM+QkhKTk9OLztWXFVMW0ZNTkv/2wBDAQ0ODhIQEiQUFCRLMisyS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0v/wAARCAAbAEADASIAAhEBAxEB/8QAGQAAAwEBAQAAAAAAAAAAAAAAAgQFAAMB/8QAIhAAAgICAgICAwAAAAAAAAAAAQIAAxEhBDESQRNRBSJh/8QAGAEAAwEBAAAAAAAAAAAAAAAAAQIDAAT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIRMUFR/9oADAMBAAIRAxEAPwCXwuGMgtLFd9fHXC9yQt5OljFSgfs5yYMOGmUl5NluycCdPmwMCT/nA96gtywPcosRJ0PtZ7JnC7mBRhe5Ot5bN0Ys10DvwUde8uckzI+TrcTr8rD/ACPVGuhcsdxC0R2ybXaEEI8v6k7yP3O1cLZqWDJuZvc8LwILGKSwJnmUgncWYnPc2TjuFF4hcjx5IrGou972nAzFxttyz+IprZx5IDCU0//Z');
}
html { background: var(--metal-ground); }
html body { background: transparent; position: relative; }

/* THE SHEET AND ITS GRAIN (his look at the landing: "more grainy and more shades, need it to look dynamic"): long folds of
   light in greys, the grain a small tile the browser lays over them so it stays sharp at any size; where the browser can,
   the sheet drifts as the page scrolls, so the light moves across the sections. */
html body::before {
    content: '';
    position: fixed; top: 0; left: 0; right: 0; height: 100%; z-index: -1;
    background: url('/static/landing/img/metal-grain-2026-11-05.png') repeat,
                var(--metal-veil, linear-gradient(transparent, transparent)),
                url('/static/landing/img/metal-sheet-2026-11-05.jpg') center top / cover no-repeat,
                var(--metal-tiny) center top / cover no-repeat,
                var(--metal-ground);
    background-blend-mode: overlay, normal, normal, normal;
}
@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
        html body::before {
            height: 190%;
            animation: metal-drift linear both;
            animation-timeline: scroll(root);
        }
        @keyframes metal-drift {
            from { transform: translate3d(0, 0, 0); }
            to { transform: translate3d(0, -47.3%, 0); }
        }
    }
}

/* the public pages: the sheet a shade calmer than the landing's, because they carry more small print */
html body.ql-public {
    --metal-veil: linear-gradient(rgba(20, 22, 26, 0.26), rgba(20, 22, 26, 0.26));
    --bg-primary: #2c3035;
    --bg-secondary: #25282d;
    --surface-reading: transparent;
    --text-primary: #f6f7f8;
    --text-secondary: #e2e5e8;
    --text-tertiary: #c6cbd0;
    --border-primary: rgba(255, 255, 255, 0.16);
    --border-color: rgba(255, 255, 255, 0.16);
    --border-secondary: rgba(255, 255, 255, 0.16);
}
/* the landing's size: the shell's 0.8 density zoom made every public page's type a fifth smaller than the landing's, the
   first thing that read as another site. An article keeps it: its long text is set for it. */
html body.ql-public { --app-zoom: 1; zoom: 1; }
html body.ql-public:has(.article-main) { --app-zoom: 0.8; zoom: 0.8; }
@media (max-width: 900px) {
    html body.ql-public:has(.article-main) { --app-zoom: 1; zoom: 1; }
}
/* what each page painted itself is gone; the desk's warm tokens give way to the landing's */
html body .research-desk,
html body .about-main,
html body .contact-main,
html body .article-main,
html body .articles-main,
html body .proof-main,
html body .pub-subscribe-band {
    background: transparent;
}
html body .research-desk {
    --text-primary: #f6f7f8;
    --text-secondary: #e2e5e8;
    --text-tertiary: #c6cbd0;
    --rs-line: rgba(255, 255, 255, 0.16);
    --rs-line-soft: rgba(255, 255, 255, 0.10);
    --border-primary: rgba(255, 255, 255, 0.16);
    --border-color: rgba(255, 255, 255, 0.16);
    --border-secondary: rgba(255, 255, 255, 0.16);
}

/* the landing's headings: its face and its weights, on every page but inside a paper */
html body .ri-h1, html body .dp-h1, html body .articles-title, html body .about-name, html body .contact-title,
html body .proof-title, html body .article-title {
    font-family: 'DM Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 300; letter-spacing: -0.02em; line-height: 1.08; color: #ffffff;
}
html body .ri-series, html body .dp-h2, html body .sv-service-title {
    font-family: 'DM Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 500; letter-spacing: -0.02em; color: #ffffff;
}

/* ONE RAIL (his look, 5 November: "for some reason the alignments between these pages all different, can we harmonise them?"):
   every page starts where the landing starts, its breadcrumb and its title on the same lines. */
html body .ri-wrap, html body .dp-wrap, html body .about-container, html body .contact-container, html body .articles-container,
html body .research-container, html body.ql-band .legal-page {
    max-width: 1320px;
}
html body.ql-band .article-container { max-width: calc(1320px / var(--app-zoom)); }
@media (min-width: 761px) {
    html body .ri-wrap, html body .dp-wrap, html body .about-container, html body .contact-container, html body .articles-container,
    html body .research-container, html body.ql-band .legal-page {
        padding-left: 48px; padding-right: 48px; padding-top: 40px;
    }
    html body.ql-band .article-container {
        padding-left: calc(48px / var(--app-zoom)); padding-right: calc(48px / var(--app-zoom)); padding-top: calc(40px / var(--app-zoom));
    }
    html body.ql-band .article-main > .article-container > .article-breadcrumb,
    html body.ql-band .article-main > .article-container > .article-header,
    html body.ql-band .article-main > .article-container > .article-content,
    html body.ql-band .article-main > .article-container > .related-articles,
    html body.ql-band .article-main > .article-container > .back-to-knowledge { margin-left: 0; }
    html body.ql-band .legal-page > * { max-width: 760px; }
    html body.ql-band .legal-page > .band-end { max-width: none; }
}
@media (min-width: 1200px) {
    html body .ri-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    html body .ri-wrap, html body .dp-wrap, html body .about-container, html body .contact-container, html body .articles-container,
    html body.ql-band .legal-page {
        padding-left: 24px; padding-right: 24px;
    }
}
/* the same breadcrumb, the same title and the same first paragraph on every page */
@media (min-width: 769px) {
    html body.ql-band .research-breadcrumb, html body.ql-band .articles-breadcrumb, html body.ql-band .dp-crumbs,
    html body.ql-band .about-breadcrumb, html body.ql-band .contact-breadcrumb {
        display: flex; align-items: center; gap: 8px; min-height: 20px; margin: 0 0 22px; padding: 0;
        font-size: .8rem; line-height: 20px; letter-spacing: 0; color: var(--text-tertiary);
    }
    html body.ql-band .article-breadcrumb {
        min-height: calc(20px / var(--app-zoom)); margin: 0 0 calc(10px / var(--app-zoom));
        font-size: calc(.8rem / var(--app-zoom)); line-height: calc(20px / var(--app-zoom));
    }
    html body.ql-band .dp-crumbs a { color: var(--text-secondary); text-decoration: none; }
    html body.ql-band .dp-crumbs span { margin: 0; opacity: 1; }
    html body.ql-band .ri-h1, html body.ql-band .dp-h1, html body.ql-band .articles-title, html body.ql-band .about-name,
    html body.ql-band .contact-title, html body.ql-band .legal-page h1 {
        font-family: 'DM Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
        font-size: 3.05rem; font-weight: 300; letter-spacing: -0.02em; line-height: 1.08; color: #ffffff; margin: 0 0 16px;
    }
    /* a legal page has no breadcrumb: its title stands on the same line all the same */
    html body.ql-band .legal-page h1 { margin-top: 42px; }
    html body.ql-band .article-title { font-size: calc(3.05rem / var(--app-zoom)); }
    html body.ql-band .ri-lede, html body.ql-band .dp-lede, html body.ql-band .articles-subtitle {
        font-size: 1.06rem; line-height: 1.66; max-width: 765px;
    }
    html body.ql-band .about-header { padding-bottom: 22px; margin-bottom: 26px; }
    html body.ql-band .about-body p { max-width: 765px; }
    html body.ql-band .contact-body p { max-width: 765px; }
}

/* the house green reads on near-black; on the grey its links and eyebrows take the pale one */
html body .dp-wrap a:not(.dp-btn), html body .ri-lede a, html body .about-body a, html body .contact-container a {
    color: #a9ecd0; text-decoration-color: rgba(169, 236, 208, 0.5);
}
html body .ri-lede { color: var(--text-secondary); }
html body .pub-footer, html body footer.pub-footer { background: rgba(0, 0, 0, 0.24); }

/* THE BAND (his looks, 5 November: "greens can also be used as I can see in some places like shown", then "I also see that height
   of the band is different in all pages because me how I drew, can we also hrmonise that, only one doesnt have green band should be
   the pricing"). The landing hero's own field, full width, from the nav down to one line on every page, the grey below it and a
   page's body starting at one place. A template says where its head ends with <div class="band-end">; the float beside the head
   holds that marker down to the common line, and when a window so narrow that the head runs longer pushes the marker further, the
   band follows it, so no head ever crosses the edge. On a phone each page's band ends where its head ends. public_base.html gives
   the class to its pages, but not to a window (?embed=1) or the share-card renderer; the plans page has its own head and none. */
html body.ql-band {
    --band-end: 472px;
    /* the field's lower edge is cut off: its pale corner would sit on the band's end and take the eye */
    --band-size: max(calc(100vw / var(--app-zoom)), calc(1600px / var(--app-zoom)));
    --band-y: calc(100% + 80px);
    --band-field: url('/static/landing/img/hero-field-2026-10-07.jpg') center var(--band-y) / var(--band-size) auto no-repeat,
                  var(--band-tiny) center var(--band-y) / var(--band-size) auto no-repeat,
                  #1e3a2f;
    overflow-x: clip;
}
@media (min-width: 769px) {
    html body.ql-band .ri-wrap::before, html body.ql-band .dp-wrap::before, html body.ql-band .articles-container::before,
    html body.ql-band .about-container::before, html body.ql-band .contact-container::before, html body.ql-band .legal-page::before,
    html body.ql-band .article-container::before {
        content: ''; float: left; width: 0; height: calc((var(--band-end) - 96px) / var(--app-zoom));
    }
}
html body.ql-band .band-end { display: flow-root; clear: both; position: relative; height: 0; }
html body.ql-band .band-end::before, html body.ql-band .rs-cols::before {
    content: '';
    position: absolute; z-index: -1; pointer-events: none;
    left: 50%; bottom: 0; width: calc(100vw / var(--app-zoom)); margin-left: calc(-50vw / var(--app-zoom)); height: calc(1600px / var(--app-zoom));
    background: var(--band-field);
}
html body.ql-band .band-end + * { margin-top: calc(34px / var(--app-zoom)); }
/* a long head on a narrow window would run off the top of the field and show its flat colour: there the field is drawn large */
@media (max-width: 1000px) {
    html body.ql-band { --band-size: calc(2400px / var(--app-zoom)); }
}
/* what stands on the green: a page's door turns white like a paper's, the pale links stay out of the breadcrumb, an address's
   copy button turns pale; the Articles jump bar is gone from the public page (his look: "we can remove this black band and all") */
html body.ql-band .articles-jumpnav { display: none; }
html body.ql-band .dp-cta a.dp-btn { background: #ffffff; color: #14213a; border-color: #ffffff; }
html body.ql-band .dp-wrap .dp-crumbs a { color: var(--text-secondary); text-decoration: none; }
html body.ql-band .cn-addr button.dp-ask-go { color: #d8f6e8; border-color: rgba(169, 236, 208, 0.55); }
html body.ql-band .article-main > .article-container > .share-row { margin-left: 0; margin-top: calc(24px / var(--app-zoom)); }

/* a paper: the band runs straight across behind the sheet and its rail, to the same line as every page (his look: "the cut i asked
   for is not looking so great, can we make it more complete?") */
html body.ql-band .rs-cols { position: relative; }
html body.ql-band .rs-head { max-width: none; }
html body.ql-band .rs-cols::before { bottom: calc(100% + 23px); }
@media (min-width: 1181px) {
    html body.ql-band .rs-cols { justify-content: space-between; }
    html body.ql-band .rs-cols::before { bottom: calc(100% - 149px); }
}
@media (min-width: 769px) and (max-width: 1180px) {
    html body.ql-band .research-container::before { content: ''; float: left; width: 0; height: calc(var(--band-end) + 23px - 96px); }
    html body.ql-band .rs-cols { clear: both; }
}
/* a paper's live door was green words for a dark ground: on the green they turn pale */
html body.ql-band .research-orient .rs-door-row a.rs-door.rs-live, html body.ql-band .rs-doors-strip .rs-door-row a.rs-door.rs-live {
    background: rgba(8, 28, 20, 0.42); color: #d8f6e8; border-color: rgba(169, 236, 208, 0.55);
}
html body.ql-band .research-orient .rs-door-row a.rs-door.rs-live:hover, html body.ql-band .rs-doors-strip .rs-door-row a.rs-door.rs-live:hover {
    background: rgba(8, 28, 20, 0.6); color: #ffffff; border-color: #a9ecd0;
}
html body.ql-band .research-orient .rs-live-dot, html body.ql-band .rs-doors-strip .rs-live-dot { background: #a9ecd0; }
html body.ql-band .rs-doors-strip .rs-listen-line, html body.ql-band .rs-doors-strip .rs-listen-line * { color: #d8f6e8; opacity: 1; }

/* Services: the sample report in the same box as the landing's study, the same columns and the same reach past the rail (his look:
   "the validation report can be as big as the landing page study announcement box"). The words that fit stay on the green and the
   rest of them start the grey; where report and words stack, the band ends under the words. */
html body.ql-band .dp-wrap.sv { position: relative; }
html body.ql-band .dp-wrap.sv > .band-end { position: absolute; top: calc(var(--band-end) - 56px); left: 48px; right: 48px; clear: none; }
html body.ql-band .dp-wrap.sv > .band-end + * { margin-top: 0; }
@media (min-width: 1181px) {
    html body.ql-band .sv-hero { align-items: start; grid-template-columns: 1fr 1.2fr; gap: 44px; padding-top: 0; }
    html body.ql-band .sv-hero .dp-lede { max-width: none; }
    html body.ql-band .sv-hero-head { min-height: calc(var(--band-end) + 34px - 138px); }
    html body.ql-band .sv-hero-doc img { aspect-ratio: 1200 / 546; object-fit: cover; object-position: top; border-radius: 8px; }
    html body.ql-band .sv-hero-cap { margin-top: 24px; }
}
@media (min-width: 1460px) {
    html body.ql-band .sv-hero-doc { margin-right: -56px; }
}
@media (max-width: 1180px) {
    html body.ql-band .sv-hero { grid-template-columns: 1fr; gap: 36px; }
    html body.ql-band .sv-hero-doc { max-width: 520px; }
    html body.ql-band .dp-wrap.sv > .band-end { display: none; }
    html body.ql-band .sv-hero-text { position: relative; }
    html body.ql-band .sv-hero-text::before {
        content: ''; position: absolute; z-index: -1; pointer-events: none;
        left: 50%; bottom: -18px; width: 100vw; margin-left: -50vw; height: 1600px; background: var(--band-field);
    }
}

/* a report and a test's page: a sheet on the desk, the band behind its top */
html body.ql-band .report-desk, html body.ql-band .proof-main { position: relative; }
html body.ql-band .report-desk::before, html body.ql-band .proof-main::before {
    content: ''; position: absolute; z-index: -1; pointer-events: none;
    top: 0; left: 50%; width: 100vw; margin-left: -50vw; height: calc(var(--band-end) - 56px); background: var(--band-field);
}
@media (min-width: 761px) {
    html body.ql-band .proof-main { max-width: 1320px; padding-left: 48px; padding-right: 48px; padding-top: 40px; }
    html body.ql-band .proof-main > .proof { max-width: 860px; margin-left: 0; }
    html body.ql-band .report-desk { padding-left: 48px; padding-right: 48px; }
    html body.ql-band .report-bar, html body.ql-band .report-share, html body.ql-band .report-share-note, html body.ql-band .report-paper { max-width: 1224px; }
}
html body.ql-band .proof-eyebrow { color: #d8f6e8; }

/* the grey sheet and the band are for the screen: a printed report or paper keeps its white page */
@media print {
    html { background: #ffffff; }
    html body::before, html body.ql-band .band-end::before, html body.ql-band .rs-cols::before, html body.ql-band .sv-hero-text::before,
    html body.ql-band .report-desk::before, html body.ql-band .proof-main::before { display: none !important; }
}

html body .ri-card-link:hover .ri-name { color: #a9ecd0; }

/* THE PHONE (the owner, 5 November: "Can you properly harnonise the phone views as well"). One structure on every public page: the
   green holds the title and nothing else, the title stands at one place in one size, the band ends at one line (room for a title of
   three lines; only an article's longer title pushes it), and all the rest starts at one place on the grey. There is no breadcrumb:
   Research and a paper had none on a phone already, and the menu is one tap away. A paper keeps its doors on the green and its sheet
   lies across the band's end, as on a computer. */
@media (max-width: 768px) {
    html body.ql-band { --band-y: calc(100% + 400px); }
    html body.ql-band .ri-wrap, html body.ql-band .dp-wrap, html body.ql-band .about-container, html body.ql-band .contact-container,
    html body.ql-band .articles-container, html body.ql-band .legal-page, html body.ql-band .article-container, html body.ql-band .proof-main {
        padding-top: 28px; padding-left: 24px; padding-right: 24px;
    }
    html body.ql-band .articles-breadcrumb, html body.ql-band .dp-crumbs, html body.ql-band .about-breadcrumb,
    html body.ql-band .contact-breadcrumb, html body.ql-band .article-breadcrumb { display: none; }

    html body.ql-band .ri-h1, html body.ql-band .dp-h1, html body.ql-band .articles-title, html body.ql-band .about-name,
    html body.ql-band .contact-title, html body.ql-band .legal-page h1, html body.ql-band .article-title {
        position: relative; display: block;
        font-family: 'DM Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
        font-size: 2.2rem; font-weight: 300; letter-spacing: -0.02em; line-height: 1.08; color: #ffffff;
        min-height: calc(3 * 1.08em); margin: 0 0 48px;
    }
    html body.ql-band .ri-h1::before, html body.ql-band .dp-h1::before, html body.ql-band .articles-title::before, html body.ql-band .about-name::before,
    html body.ql-band .contact-title::before, html body.ql-band .legal-page h1::before, html body.ql-band .article-title::before {
        content: ''; position: absolute; z-index: -1; pointer-events: none;
        left: 50%; bottom: -24px; width: 100vw; margin-left: -50vw; height: 1600px;
        background: var(--band-field);
    }
    html body.ql-band .band-end, html body.ql-band .sv-hero-text::before, html body.ql-band .rs-cols::before { display: none; }

    /* a paper, a report, a shared test: a sheet on the desk, the band behind its top, ending at the same line */
    html body.ql-band .research-layout { position: relative; }
    html body.ql-band .research-layout::before, html body.ql-band .report-desk::before, html body.ql-band .proof-main::before {
        content: ''; position: absolute; z-index: -1; pointer-events: none;
        top: 0; left: 0; right: 0; width: auto; margin-left: 0; height: 166px;
        background: var(--band-field);
    }

    html body.ql-band .sv-hero { padding-top: 0; }

    /* what is left of a head comes under the title: the About's and the Contact's rule goes, an article's label follows its title */
    html body.ql-band .about-header { display: block; padding: 0; margin: 0; border: 0; }
    html body.ql-band .article-header { display: flex; flex-direction: column; }
    html body.ql-band .article-title { order: 0; }
    html body.ql-band .article-category { order: 1; margin: 0 0 6px; }
    html body.ql-band .article-meta { order: 2; }

    /* one size of words and of section headings */
    html body.ql-band .dp-lede, html body.ql-band .articles-subtitle, html body.ql-band .dp-p, html body.ql-band .about-body p,
    html body.ql-band .contact-body p, html body.ql-band .legal-page p, html body.ql-band .legal-page li {
        font-size: 1rem; line-height: 1.6;
    }
    html body.ql-band .legal-page .legal-meta { font-size: .85rem; }
    html body.ql-band .article-content p, html body.ql-band .article-content li { font-size: 1.0625rem; line-height: 1.65; }
    html body.ql-band .dp-h2, html body.ql-band .articles-category-title, html body.ql-band .legal-page h2 {
        font-family: 'DM Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
        font-size: 1.4rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; color: #ffffff;
    }
}

/* the bar holds one tab more at the landing's size: the menu takes over before it runs out of room (at 1100px wide it stuck
   out 47px and the page scrolled sideways) */
@media (min-width: 1081px) and (max-width: 1160px) {
    html body .site-nav { gap: 12px; }
    html body .site-nav .site-nav-links { display: none; }
    html body .site-nav a.site-nav-solo { display: inline-flex; margin-left: auto; }
    html body .site-nav .site-nav-menu { display: block; }
    html body .site-nav .site-nav-panel-btns a.site-nav-btn--primary { display: none; }
}

/* FROM PAGE TO PAGE (the owner, 5 November: "when I am changing page to page, there are jumps and some piece is coming later than
   other milisecond jumpy feelings"). What was measured: a page without a scrollbar sat half a scrollbar to the right of one with
   it, and the pictures and the font arrived after the first paint. So the scrollbar is always there, the pictures and the font come
   from the browser's own store (app.py, public_base.html), and where the browser can, one page fades into the next with the bar
   standing still. */
html { overflow-y: scroll; }
html:has(> body.embed) { overflow-y: auto; }
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}
html body .site-nav { view-transition-name: ql-site-nav; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 140ms; }
::view-transition-group(ql-site-nav) { animation: none; }
::view-transition-old(ql-site-nav) { display: none; }
::view-transition-new(ql-site-nav) { animation: none; }

/* the plans page inside the landing's window: no sheet of its own, a plain ground */
html body.embed::before { display: none; }
html body.embed { background: #25282d; }