/*  Hypersamples — one stylesheet for the whole site.

    Self-contained on purpose: no web fonts, no CDN, nothing of ours loaded from
    anybody else's server. That is not frugality, it is the privacy policy - a
    page that loads a font from another company's server has told that company
    you were here.

    One exception, added deliberately and visible in the head of every page:
    iubenda, which carries the cookie banner and the two policies. It is the
    only third party the site talks to, it is asked for consent by the banner
    it brings with it, and assets/iubenda.js says exactly what it loads.

    So the display face has to be one the reader already owns. Bahnschrift is
    Microsoft's cut of DIN 1451, the German drafting standard, and it ships with
    every Windows 10 and 11: condensed, monoline, squared terminals - which is
    also a description of the Hypersamples wordmark, and the reason it was
    chosen over the alternatives. A Mac has no Bahnschrift, so it falls to
    Avenir Next Condensed and then Arial Narrow, both close enough in width and
    colour that the page does not change character.

    It carries the headings and all the small furniture - navigation, labels,
    buttons, table keys. Paragraphs stay in the UI sans, which is what long
    text is for.

    ---------------------------------------------------------------------

    The page is dark where it sells and light where it informs. Marketing -
    hero, features, the buy block - sits on near-black; the reference matter -
    requirements, terms, privacy, contact - sits on white, because nobody
    should read a licence agreement in light-on-dark.

    A band does nothing but re-point the variables below. Every component
    reads its colours from whichever band it sits in, so none of them has to
    know, and moving a section between bands is a class name and nothing else.
*/

:root {
    color-scheme: dark;

    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    --font-tech: "Bahnschrift SemiCondensed", "Avenir Next Condensed",
                 "Helvetica Neue Condensed", "Arial Narrow", Arial, sans-serif;

    /* the default: near-black */
    --ink:        #f1f4f7;
    --ink-2:      #a7b1bb;
    --ink-3:      #78828c;
    --paper:      #0a0c0f;
    --paper-2:    #12161b;
    --paper-3:    #1b2027;
    --line:       #242c35;

    --accent:     #4f8ff0;
    --accent-ink: #ffffff;
    --flag:       #ffc24d;      /* the early-bird tag, and nothing else */
    --step-number: #f0912f;     /* the numbers in How it works */

    /*  The buying colour: a diagonal ramp between two oranges rather than one
        flat fill, which gives the button a little depth without a shadow.

        CONTRAST, SAID ONCE AND LEFT HERE: white on the bright end is about
        2.6:1, and the floor for text of any size is 4.5:1. The choice is
        deliberate and it is the owner's; the alternatives, if it is ever
        revisited, are near-black ink on this same orange (over 8:1) or holding
        the light end at #bf560f, where white clears the line. */
    --buy-from:    #ff7a6b;
    --buy-to:      #e8541f;
    --buy-ink:     #ffffff;

    --measure:    38rem;
    --radius:     6px;
    --bar:        64px;         /* height of the sticky buy bar */
}

.band-dark  { --paper: #141515; --paper-2: #1d1e1e; --paper-3: #262828; --line: #2f3031; }
.band-black { --paper: #000000; --paper-2: #0c0c0d; --line: #1f2021; }

.band-light {
    --ink:        #10151b;
    --ink-2:      #3c4753;
    --ink-3:      #6c7885;
    --paper:      #ffffff;
    --paper-2:    #f7f5f1;
    --paper-3:    #efece6;
    --line:       #e5e0d8;
    --accent:     #2059b8;
    --accent-ink: #ffffff;
}

.band-light, .band-dark, .band-black {
    background: var(--paper);
    color: var(--ink);
}

/*  The dark fields are ramps rather than flat fills: a shade lighter at the top,
    deeper at the foot, the same move the first field of the page makes. Stated
    on the section rather than on --paper so that anything inside which follows
    that variable - a card, a panel - keeps its own flat colour. */
section.band-dark { background: linear-gradient(to bottom, #1d1e1e, #0f1011); }

/*  The steps band takes over from the screenshot band above it, so it starts on
    the colour that one ends on: begun on its own lighter grey, the join showed
    as a line across the page. Less air above the heading too - the band opened
    with more room than it needed. */
#how { background: linear-gradient(to bottom, #0e0f10, #0a0b0b);
       padding-top: 1.8rem; }

/*  The steps band is the hinge between the dark half of the page and the white
    one: it starts on the colour the screenshot band ends on and arrives at the
    page's white, so the change of ground happens across a field instead of at a
    line. The dark end is held for the first third, where the heading and its
    line of light text sit - a white heading over a mid grey would be the price
    of a ramp that starts moving immediately. */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;

    /*  The scrollbar's room is kept whether the page needs it or not. Without
        this the home, which fits in a tall window, is fifteen pixels wider than
        the product page, which does not - so every band changes width and the
        whole layout jumps sideways by half of that as you move between them.
        Same frame everywhere, measured the same way.

        Two declarations because they cover different browsers: the second is
        the modern one, the first is what an older Safari understands. Where
        scrollbars float over the page, as on a Mac, neither takes any room and
        there was never a jump to fix. */
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 18px/1.58 var(--font-body);

    /*  The foot goes to the bottom of the window on a page too short to fill it,
        instead of stopping halfway down with white underneath. 100dvh rather
        than 100vh: on a phone the browser's own bars come and go, and vh counts
        them as if they were always there. */
    min-height: 100dvh; display: flex; flex-direction: column;
}

/*  Every heading, label, key and control on the site - one rule rather than
    the same declaration in twenty places. */
.site-head nav a,
.site-foot nav a,
/*  One display face for everything that announces something: the wordmark's own
    condensed type. The body face is left for what is read rather than seen. */
.eyebrow,
.hero h1,
.hero .formats,
.btn,
.buybar,
.flag,
.buy-card h2,
.section-head h2,
.feature h3,
.usecase h3,
.steps li b,
.steps li::before,
.specs th,
.legal h2,
.legal h3,
.shot figcaption {
    font-family: var(--font-tech);
}

/*  The sticky buy bar is not on any page at the moment - it was taken off the
    product page because it led to a checkout that is not connected yet. The
    rules below are kept so that putting it back is one line of markup: add
    class="has-buybar" to <body> and the <button class="buybar"> before the
    closing tag. */
/*  Only the page carrying the sticky bar needs the room. */
body.has-buybar { padding-bottom: var(--bar); }

img { max-width: 100%; height: auto; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

.wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; }
.narrow { max-width: var(--measure); }

/* ---------------------------------------------------------------- header */
.site-head {
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0;
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    backdrop-filter: blur(8px);
    z-index: 10;
}

.site-head .wrap {
    display: flex; align-items: center; gap: 1.5rem;
    min-height: 72px; flex-wrap: wrap;
    padding-top: .55rem; padding-bottom: .55rem;
}

/*  The brand is the full lockup - symbol and wordmark in one image - so there
    is no text beside it to set. The name lives in the alt attribute. The file
    is white on a transparent ground and the header is always black. */
.brand { display: flex; align-items: center; text-decoration: none; }
.brand img { height: 38px; width: auto; }

.site-head nav { margin-left: auto; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.site-head nav a {
    color: #fff; text-decoration: none;
    font-family: var(--font-tech); font-size: 1.01rem;
    letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
}
.site-head nav a:hover { color: #6cc6ff; }

/* ------------------------------------------------------- currency switch */
/*  Two small buttons at the end of the bar, set like the links beside them so
    the bar keeps one voice. The chosen one is filled; the other is an outline,
    which is also how the two buttons on the buy card are told apart.

    Hidden until currency.js finds a price to switch. The bar is one shared file
    across ten pages and only the product page carries figures, so everywhere
    else the buttons would be a control that visibly does nothing when pressed.
    The script adds .live where there is something to change, which means a
    second product page lights it up on its own - and a reader with no scripting
    is not offered a switch that needs scripting to work. The euro pair is the
    one written into the markup, so that reader still sees a price.

    It was hidden outright between 15 and 18 August, when the catalogue carried
    dollars only and a euro switch would have promised what the checkout does not
    honour. That promise is still owed by the catalogue, not by this file: before
    the till opens FastSpring has to carry both pairs, and the page has to ask
    for a currency in a way FastSpring documents - currency.js calls
    builder.currency(), which is not one of their methods and so does nothing at
    all, silently. */
.currency { display: none; border: 1px solid #3a3d3f; border-radius: var(--radius); overflow: hidden; }
.currency.live { display: inline-flex; }

.currency button {
    appearance: none; border: 0; cursor: pointer;
    background: transparent; color: #a7b1bb;
    font-family: var(--font-tech); font-size: .9rem; font-weight: 700;
    letter-spacing: .06em; padding: .28rem .55rem; line-height: 1.4;
}

.currency button + button { border-left: 1px solid #3a3d3f; }
.currency button:hover { color: #fff; }
/*  Lit, not white: a light grey fill still reads as "this one is chosen" next
    to the outline of the other, without a white block shouting from a black
    bar. Near-black ink on it clears 11:1, so it stays legible. */
.currency button.on { background: #c9cfd4; color: #10151b; }

/* ------------------------------------------------------------------ hero */
/*  The first field of the page: a vertical ramp instead of a flat grey,
    lighter at the top where the wordmark sits and deeper at the foot. The
    screenshot band underneath is painted with the colour this ends on, so the
    two read as one field rather than meeting at a seam. */
.hero { padding: 4rem 0 3.5rem;
        background: linear-gradient(to bottom, #202021, #0e0f10); }

.hero-shot { background: #0e0f10; }

.hero-grid {
    display: grid; gap: 3rem;
    grid-template-columns: 1.25fr .75fr;
    align-items: start;
}

.eyebrow {
    font-size: .84rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--ink-3); font-weight: 700;
    margin: 0 0 1rem;
}

/*  The one thing left in the reading sans at size: it is the line the product
    is sold on, and a condensed face would make it look like a specification. */
.hero h1 {
    /*  Smaller since the wordmark went above it: two large voices one under the
        other were competing, and the mark is the one that should be loudest. */
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);

    /*  The home's ramp, carried a step further round: the same red at the start,
        but arriving at a yellow rather than at an orange. The two pages are lit
        by one colour and the product page is the warmer end of it, which is
        also where the buy button and the price sit. On the 35 degrees the
        buttons and the cards use.

        The colour is a painted background showing through the letters, so a
        browser that cannot clip a background to text keeps the plain colour
        declared first and the line stays readable rather than disappearing. */
    color: #ffd24a;
    background-image: linear-gradient(35deg, #ff6a58, #ffd24a);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.08; letter-spacing: -.025em;
    margin: 0 0 1.1rem; max-width: 18ch;
}

.hero .lede {
    font-size: clamp(1.08rem, 1.6vw, 1.22rem); font-weight: 400;
    color: #fff; max-width: 62ch; margin: 0 0 1.8rem;
}

/*  The format line, where a plug-in page would put its formats. */
.hero .formats {
    font-size: .92rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-3); font-weight: 650; margin: 0;
    border-top: 1px solid var(--line); padding-top: 1.2rem;
}

/* --------------------------------------------------------- the buy card */
/*  A light panel on the dark hero: the one thing on the page meant to be
    looked at before anything else is read. */
/*  The card paints itself white but sits inside a dark band, so it has to
    re-point the band's variables on itself: without this, anything inside it
    that follows --ink or --line - a secondary button, for one - keeps the dark
    band's light colours and vanishes into the white. */
.buy-card {
    --ink:    #10151b;
    --ink-2:  #4a5763;
    --ink-3:  #98a2ac;
    --line:   #d7dde4;
    /*  The deep blue, for the same reason the LAUNCH PRICE tag states it: this
        is a white card sitting inside a dark band, so it inherits the bright
        --accent meant for dark ground. On white that blue is 3.1:1, which is
        under the floor for the small print this card is full of. Set on the
        card rather than on one link, so the next link put here is right too. */
    --accent: #2059b8;

    background: #fff; color: #10151b;
    border-radius: var(--radius);
    padding: 1.6rem 1.5rem;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}

.buy-card h2 {
    /*  A shade under a section heading: it is the product's name on the panel
        that sells it, and the price sits right beneath it - two large voices
        one on top of the other cancel each other out. */
    margin: 0 0 .25rem; font-size: clamp(1.25rem, 2.4vw, 1.7rem);
    text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
}

.buy-card .price { display: flex; align-items: baseline; gap: .55rem; margin: 0 0 1.5rem; }
/*  The figure in the buying colour, brightened as far as white will carry it:
    at #d2660f it is 3.7:1, which is the floor for text this size (24px bold
    counts as large). The bright #f0912f of the button would be 2.2:1 - a price
    that has to be squinted at. */
.buy-card .now { font-size: 1.5rem; font-weight: 500; letter-spacing: -.01em;
                 color: #d2660f; }

/*  Said once, beside the figure, so nobody reads the number as the total and
    then meets a different one at the till. */
.buy-card .excl { font-size: .82rem; color: #6d767f; }
/*  The struck price is quiet but it is still a price, and 3.1:1 put it below
    the floor for text this size. #6c7885 clears 4.5:1 on the card and still
    reads as the lesser of the two figures. */
.buy-card .was { font-size: 1rem; color: #6c7885; text-decoration: line-through; }

/*  The row is aligned on the baseline, which is right for the three runs of
    text in it and wrong for the tag. A tag is a box, not a word: sitting its
    text on the same baseline hangs the whole coloured block below the line,
    because the padding and the descender space go under the baseline while the
    price beside it is twice the size and reads from its middle. Centred in the
    row it lines up with what it is next to. */
.buy-card .price .flag { align-self: center; }
.buy-card .vat { font-size: .78rem; color: #6d767f; margin: 0 0 1.2rem; }

.flag {
    display: inline-block;
    font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    /*  The site's deep blue rather than the bright one: white on #4f8ff0 is
        2.6:1, on this it is 6.9:1. Stated as a value because the tag sits on a
        white card inside a dark band, where --accent is the light blue. */
    background: #2059b8; color: #fff;
    padding: .2rem .5rem; border-radius: 2px;
}

.buy-card .fine { font-size: .8rem; color: #6d767f; margin: 1rem 0 0; }

/* --------------------------------------------------------------- buttons */
.buy-row { display: flex; gap: .9rem; flex-wrap: wrap; align-items: center; justify-content: center; }

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: .6rem; padding: .85rem 1.6rem;
    border-radius: var(--radius); border: 1px solid transparent;
    font-size: .98rem; font-weight: 700; cursor: pointer;
    text-transform: uppercase; letter-spacing: .05em;
    text-decoration: none; font-family: var(--font-tech); text-align: center;
}
.btn-primary { background: linear-gradient(35deg, var(--buy-from), var(--buy-to));
               color: var(--buy-ink); border-color: transparent; }
.btn-primary:hover { filter: brightness(1.1); }

/*  A button held shut has to look held shut. The browser greys out a plain
    button on its own, but not one painted with a gradient of our own, so it
    would sit there looking pressable. Faded and with the ordinary arrow, and
    the brightening on hover taken back off, since nothing happens on hover. */
.btn[disabled] { opacity: .55; cursor: default; }
.btn[disabled]:hover { filter: none; }

/*  Same treatment for a button that is not a button at all: the macOS download
    is a span until the .dmg exists, because an <a> with nothing at the end of
    it is a 404 with a nice label on it. Faded the same amount as a disabled
    one, so the two read as the same kind of "not yet" wherever they appear. */
.btn-soon { opacity: .55; cursor: default; }
/*  The quiet button, but not an invisible one. What made it disappear was the
    colour, not the weight: a hairline in --line is lost against the white card
    it sits on. One pixel in the mid grey is plenty, and it keeps the button the
    same size as the one under it without compensating anywhere. */
.btn-secondary {
    background: transparent; color: var(--ink);
    border: 1px solid var(--ink-3);
}

/*  A very light grey, stated rather than taken from the band: --paper-3 is the
    dark band's own step, and on the white card that hover turned the button
    almost black. Ink and edge are stated with it, so the pair stays legible
    wherever the button is used. */
.btn-secondary:hover { background: #eee; color: #10151b; border-color: #10151b; }
/*  The two controls in the card are what the page is for, so they carry more
    type than a button elsewhere on the site. */
.buy-card .btn-block { font-size: 1.1rem; padding: .95rem 1.6rem; }
.buy-card .btn-block + .btn-block { margin-top: .6rem; }

.btn-block { display: flex; width: 100%; }

/*  The platform mark on a download button. currentColor and 1em so it takes
    the button's colour and follows its type size without a second rule. */
.btn .os { width: 1em; height: 1em; fill: currentColor; flex: none; }

.note { font-size: .88rem; color: var(--ink-3); margin: .9rem 0 0; }

/* -------------------------------------------------------------- sections */
section { padding: 4rem 0; }
section + section { border-top: 1px solid var(--line); }

/*  A centred introduction: caps headline, a sentence-case line under it, then
    the paragraph. Used at the top of every section that has one. */
.section-head { text-align: center; max-width: 46rem; margin: 0 auto 3rem; }

/*  For a section whose head is only a title: 3rem of air under a single line
    reads as a gap rather than a space. */
.section-head.tight { margin-bottom: 1.6rem; }

/*  The opening band holds nothing but its own heading now that the feature
    blocks have their own field. The 3rem the head reserves for what usually
    follows it becomes empty floor, and the title floats above centre.
    Removed, and the band shallower to match. */
#what { padding: 2.8rem 0; }
#what .section-head { margin-bottom: 0; max-width: none; }

/*  The home has one heading and one panel under it, so the room a section
    normally keeps above and below its title is twice what this needs. */
#products { padding: 2rem 0; }

/*  Twice the size of a section heading, in the blue that nothing else on the
    page uses - the colour is painted behind the letters and clipped to them,
    with a plain blue declared first for anything that cannot clip. */
#products .section-head h2 {
    font-size: clamp(1.48rem, 4.6vw, 3.36rem); letter-spacing: .06em;
    /*  The two ends of StemWrapper's own icon - the aqua wave and the violet one,
        sampled from the artwork rather than guessed. Both are darkened from the
        screen values: on white, #02ffff is 1.3:1 and would not be a word so much
        as a suggestion of one. */
    color: #1f8fa8;
    background-image: linear-gradient(35deg, #14a5bd, #7a2fd6);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
#products .section-head { margin-bottom: 3rem; }

/*  The heading and the line under it are one statement, so they are set as one:
    the .7rem a section heading normally leaves under itself put a gap between
    them wide enough to read as two. */
#products .section-head h2 { margin-bottom: .07rem; }
#products .products { margin-top: 0; }

#what { padding-bottom: 1.4rem; }

/*  The blocks continue the sentence the paragraph above them starts, so the
    two sections meet on one gap rather than on the sum of two: a full band's
    padding under the text and another over the first block read as a page
    break where there is none. */
.features-band { padding-top: 1.4rem; }
.section-head h2 {
    font-size: clamp(1.79rem, 3.3vw, 2.44rem);
    margin: 0 0 .7rem;
    text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
}
.section-head .sub {
    font-size: 1.1rem; color: var(--ink); margin: 0 0 1rem; font-weight: 640;
}
.section-head p { color: var(--ink-2); margin: 0; font-size: 1.06rem; font-weight: 400; }

/* -------------------------------------------------------------- features */
/*  Screenshot on one side, words on the other, sides swapping as you go down.
    The screenshots are the only pictures this product has, so they carry the
    page rather than sitting under it as evidence. */
.feature {
    display: grid; gap: 2.75rem; align-items: center;
    grid-template-columns: 1.15fr .85fr;
    margin-bottom: 4rem;
}
.feature:last-child { margin-bottom: 0; }

.feature .shot-frame { order: 0; }
.feature .feature-text { order: 1; }
.feature.flip .shot-frame { order: 1; }
.feature.flip .feature-text { order: 0; }

.feature h3 {
    font-size: 1.74rem; margin: 0 0 .5rem;
    text-transform: uppercase; letter-spacing: .09em; font-weight: 700;
}
.feature .sub { font-weight: 650; margin: 0 0 .8rem; color: var(--ink); font-size: 1.1rem; }
.feature p { color: var(--ink-2); margin: 0; font-size: 1.02rem; font-weight: 400; }
.feature p + p { margin-top: .85rem; }

/* ----------------------------------------------------------- screenshots */
/*  The images are exported at 1088px so a full-width figure is 1:1 on a
    desktop and only ever scales down. width and height on the tag reserve the
    box before the bytes land, so nothing jumps when they do. */
.shot { margin: 0; }

/*  An even dark margin on all four sides, and the picture inside it.

    The frame used to be a border drawn tight against the screenshot, which
    meant it was only visible where the shot happened to be light at the edge:
    down the sides and along the bottom, where panels are pale, and not across
    the top, where the application's own header is nearly black. A frame you can
    see on three sides reads as a mistake rather than as a frame. */
.shot-frame {
    padding: 3px;
    background: #000;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.shot-frame img { display: block; width: 100%; height: auto; border-radius: 1px; }

.shot figcaption {
    margin-top: .75rem; font-size: .88rem; color: var(--ink-3); max-width: 62ch;
}

/*  The one that runs the width of the page, straight under the hero. */
.hero-shot { padding: 0 0 4rem; }

/* ------------------------------------------------------------- use cases */
.usecases {
    display: grid; gap: 1rem; margin-top: 2.5rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

/*  The row is alone on its band again, so the margin it carries for the case
    where something sits above it would only make the field lopsided. */
.usecase-band { padding: 3.2rem 0; }
.usecase-band .usecases { margin-top: 0; }

/*  Light cards on a dark band, exactly as the steps are: they now sit on the
    same ground and there is no reason for them to be a different object. The
    variables are re-pointed on the card so the type inside follows without any
    rule below having to know which band it is standing on. */
.usecase {
    --ink:      #0b1016;
    --ink-2:    #2f3a45;
    --ink-3:    #6f7b87;
    --line:     #ddd7cd;
    --accent:   #2059b8;

    background: linear-gradient(35deg, #faf8f4, #e6e1d9);
    border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.3rem;
    color: var(--ink-2);
}
.usecase h3 {
    margin: 0 0 .5rem; font-size: 1.21rem;
    text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
}
.usecase p { margin: 0; color: var(--ink-2); font-size: 1rem; font-weight: 400; }

/* ----------------------------------------------------------------- steps */
/*  Five across, always: auto-fit let the last card stretch to fill the row,
    which made one step look more important than the others. */
.steps {
    counter-reset: step; list-style: none; padding: 0;
    margin: 0; display: grid; gap: 1rem;
    grid-template-columns: repeat(5, 1fr);
}
/*  Light cards on the dark band - five light panels in a row read faster than
    five dark ones on dark, and the ground behind them is already black. Grey
    rather than white: white on near-black is a harder edge than the content
    deserves.

    The card re-points the light band's variables on itself rather than naming
    six colours: the number, the label and the body below all follow from it,
    and none of those rules has to know it is sitting on a dark section. */
.steps li {
    --ink:      #0b1016;
    --ink-2:    #2f3a45;   /* was #4a5763: too faint on a card this small */
    --ink-3:    #6f7b87;
    --paper-2:  #e9edf1;
    --line:     #ddd7cd;
    --accent:   #2059b8;

    counter-increment: step;

    /*  A shallow ramp instead of a flat grey, on the same 35 degrees as the
        buying buttons. Kept close to the flat panels in the use-case row, so
        the two families of card look related: enough movement to be seen, not
        enough to become a feature of its own. */
    background: linear-gradient(35deg, #faf8f4, #e6e1d9);
    border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.2rem;
    color: var(--ink-2); font-size: 1rem; font-weight: 400;
}

/*  The number rides on the label's own line. Putting it on b::before rather
    than li::before is what allows that: a counter is readable anywhere below
    the element that increments it. */
.steps li b {
    display: block; color: var(--ink); font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; font-size: 1.05rem;
    margin-bottom: .5rem;
}
/*  Grey, not accent: at this size the number would otherwise be the loudest
    thing in the section, and it is a marker, not a heading. */
.steps li b::before {
    content: counter(step);
    margin-right: .5rem; font-weight: 700;
    font-size: 1.55rem; line-height: 1;

    /*  The step numbers are the one warm mark on the page, so that the eye can
        find the sequence without reading it. The same amber as the launch tag
        rather than a second orange: two warm colours a screen apart look like
        an accident. */
    color: var(--step-number);
}

/* ----------------------------------------------------------------- specs */
/*  Held to a narrower measure than the rest of the page: a five-row table
    stretched across 72rem is mostly empty, which is what made this section
    look far bigger than the amount of information in it. */
.specs {
    width: 100%; max-width: 50rem; margin: 0 auto;
    border-collapse: collapse; font-size: .92rem;
}
.specs th, .specs td { text-align: left; padding: .5rem .8rem; border-bottom: 1px solid var(--line); }
.specs th {
    color: var(--ink-3); font-weight: 600; width: 34%;
    text-transform: uppercase; letter-spacing: .06em; font-size: .85rem;
}

.price-line { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 1.2rem; justify-content: center; }
.price-line .now { font-size: 2.4rem; font-weight: 720; letter-spacing: -.02em; }
.price-line .was { font-size: 1.1rem; color: var(--ink-3); text-decoration: line-through; }

/* -------------------------------------------------------- sticky buy bar */
/*  Pinned rather than revealed on scroll, because revealing it would need a
    script and this site does not run one of its own. */
.buybar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    background: linear-gradient(35deg, var(--buy-from), var(--buy-to));
    border: 0; width: 100%; height: var(--bar);
    color: var(--buy-ink); font-family: var(--font-tech);
    font-size: .92rem; font-weight: 750;
    text-transform: uppercase; letter-spacing: .06em;
    cursor: pointer;
}
.buybar:hover { filter: brightness(1.08); }
.buybar .sub { font-weight: 500; letter-spacing: .02em; text-transform: none; opacity: .85; }

/* ------------------------------------------------------------ legal pages */
.legal { padding: 3rem 0 4rem; }
/*  Every page on the site - home, product, text page, and the two pages on the
    licence server - is framed by the same .wrap, so the logo, the menus, the
    page title and the footer links all begin on one vertical line. A text page
    still needs a reading measure, but it gets it by holding the text back from
    the right edge rather than by centring a narrower column: a centred column
    would start further in than everything above it, which is the one thing that
    makes two pages of the same site look like two different sites. */
.legal .wrap > * { max-width: 56rem; }
/*  Set like a section heading on the home rather than like a document title:
    the same condensed face, the same uppercase, the same scale. A page is a
    page whichever part of the site it belongs to. */
.legal h1 {
    font-family: var(--font-tech);
    font-size: clamp(1.58rem, 3.6vw, 2.66rem);
    text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
    margin: 0 0 1.2rem;
}
.legal h2 {
    font-size: 1.52rem; margin: 2.4rem 0 .7rem;
    text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
}
.legal h3 {
    font-size: 1.27rem; margin: 1.6rem 0 .45rem;
    text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
}
.legal p, .legal li { color: var(--ink-2); font-size: 1.06rem; font-weight: 400; }
.legal li { margin-bottom: .35rem; }
.legal hr { border: 0; border-top: 1px solid var(--line); margin: 2.2rem 0; }

.legal table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: .93rem; }
.legal th, .legal td { text-align: left; padding: .55rem .7rem; border: 1px solid var(--line); vertical-align: top; }
.legal th { background: var(--paper-2); }

.legal blockquote {
    margin: 1.5rem 0; padding: .9rem 1.1rem;
    background: var(--paper-2); border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--ink-2); font-size: .93rem;
}

.legal code {
    background: var(--paper-2); border: 1px solid var(--line);
    padding: .1rem .35rem; border-radius: 4px; font-size: .88em;
}

/*  The only address on the site. Set at reading size like everything else:
    it is a fact on the page, not a headline. */
/* -------------------------------------------------- the two licence pages */
/*  activate/ and seats/ live on the licence server and are written in PHP, but
    they are pages of this site and are set like one: same frame, same bar, same
    foot. What follows is only what those two need and no page here has - a
    title on a dark field, a badge to mark which of the two you are on, and a
    form held to a width somebody can read across.

    Declared here rather than in each page's own <style> so the two cannot drift
    apart, and so a change to the site reaches them without being copied twice. */
.licence-page .hero { padding: 2.6rem 0 2.2rem; }

.licence-page .hero h1 {
    font-family: var(--font-tech);
    font-size: clamp(1.58rem, 3.6vw, 2.66rem);
    text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
    margin: 0 0 .6rem; color: #fff;
    /*  The hero on the product page paints its heading with a gradient clipped
        to the letters, and holds it to eighteen characters so a claim breaks
        where it should. Neither applies to a three-word instruction. */
    background: none; -webkit-text-fill-color: currentColor;
    max-width: none;
}

.licence-page .hero .lede { color: var(--ink-2); margin: 0; font-size: 1.06rem; }

/*  The same badge the contact page uses, inverted: those sit on white and are
    graphite, these sit on black and are light. Same shape, same size, so the
    two pairs read as one family. */
.licence-badge { width: 62px; height: 62px; display: block; margin: 0 0 1rem; }
.licence-badge .glyph {
    fill: none; stroke: #0d1116; stroke-width: 5;
    stroke-linecap: round; stroke-linejoin: round;
}
.licence-badge .glyph-solid { fill: #0d1116; stroke: none; }

/*  A licence form is four short answers, and a field the width of the page
    reads as though it wanted a paragraph. */
.licence-page form,
.licence-page .answer,
.licence-page .note,
.licence-page .licence-head,
.licence-page textarea.licence { max-width: 42rem; }

.licence-page .note { color: var(--ink-3); font-size: .92rem; }

/*  Their section headings, set like every other section heading on the site
    rather than like a paragraph in bold. */
.licence-page section h2 {
    font-family: var(--font-tech); font-size: 1.52rem;
    text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
    margin: 0 0 .7rem;
}
.licence-page .licence-head h2 { font-size: 1.15rem; margin: 0; }

/* ------------------------------------------------------- embedded policies */
/*  The privacy and cookie pages are our page with iubenda's text inside them.
    Asked for with the "nostyle" class, so iubenda sends the words and none of
    its own styling, and the headings and paragraphs below fall to the rules
    the rest of the site is set with.

    Its wrapper still arrives with padding and a width of its own, which would
    put the text on a different left edge from the title above it. Cleared
    here, and nowhere else - these class names are iubenda's, and they are only
    ever seen on these two pages. */
/*  The policy arrives in a frame, so none of our type reaches it - what we can
    do is give the frame the shape of the page it sits in: the reading measure,
    a hairline instead of the browser's default border, and enough height that
    it reads as a document rather than as a slot. It scrolls inside itself.

    Tall on purpose. A short frame with a long policy in it is the arrangement
    everybody hates. */
.policy-frame {
    display: block; width: 100%; max-width: 56rem;
    height: 78vh; min-height: 30rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: #fff;
}

.policy-away { margin-top: 1rem; font-size: .95rem; }

/* ---------------------------------------------------------------- footer */
/*  Takes the room that is left, so the foot below it lands on the bottom of
    the window rather than partway up. */
main { flex: 1 0 auto; }

.site-foot {
    margin-top: auto;
    border-top: 1px solid var(--line);
    padding: 2.5rem 0 3rem;
    font-size: .92rem; color: var(--ink-2);
    text-align: center;
}
.site-foot nav {
    display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.2rem;
    justify-content: center;
}
/*  Set exactly as the links in the bar at the top: same face, same size, same
    weight, same white, same hover. The foot is the same band as the head and
    holds the same kind of thing, so a second, quieter style for it only made
    the site look like it had two of everything. */
.site-foot nav a {
    color: #fff; text-decoration: none;
    font-size: 1.01rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
}
.site-foot nav a:hover { color: #6cc6ff; }

/*  The company identity, cut back to the name, the VAT number and the one
    address. Note that art. 2250 c.c. asks an S.r.l. for more than this in its
    "spazi elettronici"; the rest of it is on the Contact page. Set small
    because it is a legal disclosure, not a piece of the brand. */
.legal-identity {
    font-size: .72rem; font-family: var(--font-body); line-height: 1.55; color: var(--ink-3);
    margin: 0 auto; max-width: 90ch;
}

/*  The copyright line and the terms of sale, under the company identity and a
    shade quieter than it: they are the small print of the small print. */
.legal-fine {
    font-size: .72rem; line-height: 1.6; color: var(--ink-3);
    margin: .8rem auto 0; max-width: 68ch;
}

/*  The terms of sale are one sentence and are meant to be read as one line, so
    they are given the whole frame rather than a reading measure. On a phone
    they wrap, as anything must. */
.legal-fine.wide { max-width: none; margin-top: .35rem; }

/*  A VAT number that wraps away from its label reads as a stray number. */
.nowrap { white-space: nowrap; }

/* -------------------------------------------------------------- narrower */
@media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; gap: 2.25rem; }
    .hero h1 { max-width: none; }

    /*  Five columns stop being readable well before the phone. */
    .steps { grid-template-columns: repeat(2, 1fr); }

    .feature { grid-template-columns: 1fr; gap: 1.5rem; }
    .feature .shot-frame, .feature.flip .shot-frame { order: 0; }
    .feature .feature-text, .feature.flip .feature-text { order: 1; }
}

@media (max-width: 640px) {
    .hero { padding: 2.5rem 0 2rem; }
    section { padding: 2.75rem 0; }
    .steps { grid-template-columns: 1fr; }
    .hero-shot { padding-bottom: 2.75rem; }
    .site-foot { text-align: left; }
    .site-foot nav { justify-content: flex-start; }
    .legal-identity { margin: 0; }

    /*  The bar is a fixed height, so its label has to fit on one line at
        this width. The trial is a section of the page anyway. */
    .buybar { font-size: .85rem; }
    .buybar .sub { display: none; }
}

/*  A 1088px screenshot of a dense table shrunk into a 343px phone is a smudge,
    and shrinking it further as the phone narrows only makes it worse. Below
    this width the image keeps a size it can actually be read at and scrolls
    sideways inside its own frame; the caption stays put. */
@media (max-width: 700px) {
    .shot-frame { overflow-x: auto; }
    .shot-frame img { width: 640px; max-width: none; }
}

/*  The StemWrapper wordmark above the headline, where the product name used to
    be typed out. Sized by height rather than width: it is a line of type, and
    it should sit like one - about the size of the eyebrow it replaced. */
.hero .wordmark { display: block; height: 26px; width: auto; margin: 0 0 1rem; }

@media (max-width: 40rem) { .hero .wordmark { height: 22px; } }

/*  A button for something that is not there yet. Legible, plainly not
    pressable, and it keeps its place in the row so the pair reads as two
    platforms rather than one platform and a gap. */
.btn.is-soon { opacity: .5; cursor: default; pointer-events: none; }

/*  The join between the dark half of the page and the white one: a field of
    triangles that breaks up as it descends, dark at the top and white by the
    bottom, so the change of ground happens by dissolving rather than at a line.

    A separate file rather than 180 paths inline: it keeps the page readable and
    the browser caches it once for however many bands use it. The SVG carries
    preserveAspectRatio="none" itself, so as an <img> it still stretches to any
    width at a fixed height, and shape-rendering="crispEdges" keeps the seams
    between triangles from showing as hairlines when they are antialiased.

    The negative margin closes the gap rounding leaves under an image of
    fractional height. */

/*  The band's own floor is now the teeth, so the padding that used to hold the
    last row off the edge belongs above them instead. */

/*  The agreement itself, in the row that names it. Small and black: it is a
    document to keep, not an offer, and it should not compete with the two
    controls that sell the product. */
.btn-pdf {
    display: inline-block; padding: .2rem .7rem;
    background: #10151b; color: #fff; text-decoration: none;
    border-radius: var(--radius); font-family: var(--font-tech);
    font-size: .84rem; letter-spacing: .08em; font-weight: 700;
}

.btn-pdf:hover { background: #2f3a45; }

/* --------------------------------------------------------- the two ways in */
/*  The contact page opens on two badges rather than on a form: the answer that
    is already written, and the message that has to be waited for. Centred and
    at the same weight, because which one is right depends on the reader and
    not on us. */
/*  The contact page is the one page built around two centred columns, so its
    title is centred over them rather than set against the left edge like the
    titles of pages that are read straight down. */
.legal h1.centred { text-align: center; max-width: none; }

/*  A page that is two paragraphs long has nothing to line up with: set against
    the left edge it reads as the top of a document that never arrives. Centred,
    it reads as a statement, which is what it is. Only About and Contact are
    built this way; anything meant to be read down the page is not. */
.legal.centred-page .wrap > * {
    max-width: 46rem; margin-left: auto; margin-right: auto; text-align: center;
}

.legal .paths-lead {
    max-width: 44rem; margin: 0 auto 3.2rem; text-align: center;
    padding-top: 1.6rem; border-top: 1px solid var(--line);
}

.paths {
    display: grid; gap: 3rem 2.5rem; margin: 0 auto 3.4rem;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    max-width: 56rem; text-align: center;
}

.path { display: flex; flex-direction: column; align-items: center; }

/*  A rounded square in a colour ramp, with the sign cut out of it in the
    page's own white: at this size a line drawing would be thinner than the
    heading under it and would read as an outline somebody forgot to fill. */
/*  The same badge the two licence pages carry: a light rounded square with the
    sign cut into it in near-black. There the ground is black and the badge is
    the light thing on it; here the page is white, so the badge gets a hairline
    of its own edge colour - without it a white square on white paper is only a
    glyph floating in the air. */
.path-icon { width: 76px; height: 76px; margin-bottom: 1.3rem; }

.path-icon .badge { stroke: #d8dde2; stroke-width: 2; }

.path-icon .glyph {
    fill: none; stroke: #0d1116; stroke-width: 5;
    stroke-linecap: round; stroke-linejoin: round;
}
.path-icon .glyph-dot { fill: #0d1116; }

.legal .path h2 { margin: 0 0 .8rem; font-size: 1.59rem; }
.legal .path p  { margin: 0; }

/*  Pushed to the foot of its column, so two columns of unequal text still put
    their buttons on one line. */
/*  Written with the page class in front of it on purpose: `.legal .path p`
    sets a margin of zero on every paragraph in these columns, and that beats a
    bare `.path-do`. Without this the buttons sat wherever their own text ended
    - one higher than the other, since the two paragraphs are not the same
    length. */
.legal .path .path-do { margin-top: auto; padding-top: 1.6rem; }

/* ------------------------------------------------------------ contact form */
.contact-form { max-width: 40rem; margin-top: 1.2rem; }

.form-field { margin: 1.2rem 0 0; }
.form-field label { display: block; font-size: .95rem; font-weight: 600; margin-bottom: .35rem; }

.form-field input, .form-field textarea {
    width: 100%; padding: .7rem .8rem;
    font: inherit; font-size: 1rem; color: var(--ink);
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--radius);
}

.form-field textarea { height: 9rem; resize: vertical; }

.form-field input:focus, .form-field textarea:focus {
    outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent;
}

.form-field .hint { font-size: .87rem; color: var(--ink-3); margin: .35rem 0 0; }

/*  The honeypot. Off the page rather than display:none, because a bot that
    checks for hidden fields treats the obvious ones as a trap - and a screen
    reader is told to skip it by aria-hidden on the wrapper. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.answer { padding: .9rem 1.1rem; border-radius: var(--radius); margin: 1.4rem 0 0;
          max-width: 40rem; border-left: 3px solid; background: var(--paper-2); }
.answer.good { border-left-color: #3b7f52; }
.answer.bad  { border-left-color: #b3453a; }
.answer p { margin: 0; }

/* --------------------------------------------------------------- products */
/*  A product is a black tile with its own mark in it, and the whole tile is the
    link: no button to aim at, and nothing said here that the product's own page
    says better. The row is a grid, so the second product is another <a> and
    nothing else changes. */
.products {
    display: grid; gap: 1.4rem; margin-top: 1.6rem;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 22rem));
    justify-content: center;
}

/*  A wide panel: the mark on its own square tile at the left, the words at the
    right. Everything inside is the same link, so there is nothing small to aim
    at. A second product is another <a> and the row wraps by itself. */
.products { display: grid; gap: 1.4rem; margin-top: 1.6rem; grid-template-columns: 1fr; }

.product {
    text-decoration: none; color: inherit;
    display: grid; grid-template-columns: 200px 1fr; gap: 1.6rem; align-items: center;
    background: var(--paper-2); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.3rem;
}

.product:hover { border-color: var(--ink-3); }

/*  A black square holding a picture of the program. The corners are the site's
    own radius - barely there - because a strongly rounded tile would be the
    only soft shape on a page built out of straight bands. The ground is
    declared here as well as painted into the image, so a slow-loading picture
    leaves a black square rather than a white gap. */
.product-tile {
    display: block; background: #050507;
    border-radius: var(--radius); overflow: hidden;
}
.product-tile img { display: block; width: 100%; height: auto; }

.product-text { display: block; }
.product-name { display: block; font-family: var(--font-tech);
                font-size: 1.35rem; letter-spacing: .05em; text-transform: uppercase;
                font-weight: 700; color: var(--ink); }

.product-desc { display: block; margin-top: .45rem; font-size: 1rem; font-weight: 400;
                color: var(--ink-2); }

.product-os { display: flex; gap: .9rem; margin-top: .9rem; }
.product-os svg { width: 18px; height: 18px; fill: var(--ink-3); }
.product:hover .product-os svg { fill: var(--ink); }

@media (max-width: 40rem) {
    .product { grid-template-columns: 1fr; }
    .product-tile { max-width: 200px; }
}

/* ------------------------------------------------------------- home hero */
/*  The whole opening is three things: the mark, what we make, and who for.
    Centred, and nothing else on the field - a paragraph here would be read
    before either line and would make both of them smaller. */
.home-hero { text-align: center; padding: 4.2rem 0 5.4rem; }

.home-mark { display: block; width: min(378px, 67vw); height: auto;
             margin: 0 auto 2.02rem; }

/*  Colour painted behind the letters and clipped to them. The plain colour
    declared first is what a browser that cannot clip keeps, so the line stays
    readable rather than vanishing. */
.home-kicker {
    font-family: var(--font-tech); text-transform: uppercase;
    font-size: clamp(1.8rem, 5.4vw, 4rem); letter-spacing: .06em;
    font-weight: 700; margin: 0 0 .7rem; line-height: 1.05;
    /*  Bright red into bright orange, on the 35 degrees the rest of the site is
        painted at. Both ends clear the 4.5:1 floor on this ground - 6.1:1 at
        the red, 9.7:1 at the orange - which the earlier cobalt end did not. The
        plain colour declared first is the orange, the lighter of the two: it is
        what a browser that cannot clip a background to text keeps. */
    color: #ffb347;
    background-image: linear-gradient(35deg, #ff6a58, #ffb347);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}

/*  Written as .hero .home-claim, not .home-claim: the heading rule for the
    product page - .hero h1 - is a class and an element, which outranks a class
    on its own. That is why this line came out orange, wrapped to three lines and
    pushed left: it was still being drawn by the other page's headline, gradient,
    measure and all. Each of those three properties is undone by name here. */
.hero .home-claim {
    font-family: var(--font-tech); text-transform: uppercase;
    font-size: clamp(1.15rem, 2.7vw, 2rem); line-height: 1.2;
    letter-spacing: .07em; font-weight: 500; margin: 0 auto;
    max-width: none;
    color: #fff;
    background-image: none;
    -webkit-text-fill-color: currentColor;
}

/*  Held to a reading measure and centred under the two lines above it: the
    claim is a statement, this is the sentence that explains it, so it is
    smaller, quieter and set in the body face rather than the display one. */
.home-blurb {
    max-width: 54ch;
    /*  The same .7rem the kicker leaves under itself, so the three lines are
        spaced by one rhythm rather than by three decisions. */
    margin: .7rem auto 0;
    font-size: clamp(1rem, 1.71vw, 1.24rem); font-weight: 400;
    color: #fff;
}

/* --------------------------------------------------------- products menu */
/*  A details/summary pair rather than script: it opens on a click and with the
    keyboard on its own, and hover is added on top for the mouse. Nothing here
    depends on JavaScript loading. */
.menu { position: relative; display: flex; align-items: center; }

.menu > summary {
    list-style: none; cursor: pointer;
    color: #fff; font-family: var(--font-tech); font-size: 1.01rem;
    letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
    display: inline-flex; align-items: center; gap: .4rem;
}

.menu > summary::-webkit-details-marker { display: none; }

/*  The arrow is drawn rather than typed: a character would take the page's own
    font and sit differently in each one. */
.menu > summary::after {
    content: ""; width: .42em; height: .42em; margin-top: -.2em;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); transition: transform .15s;
}

.menu[open] > summary::after { transform: rotate(-135deg); margin-top: .12em; }
.menu > summary:hover, .menu[open] > summary { color: #6cc6ff; }

/*  The panel is always rendered and hidden by opacity rather than by display,
    which is the only way it can fade: display has no in-between state to
    animate. A browser hides the contents of a closed <details> for you, so the
    display below is undoing that on purpose.

    visibility carries the rest of the work: it keeps a hidden panel out of the
    tab order and out of the way of the mouse, and it is switched with a delay
    on the way out so the fade has time to finish before the panel stops
    existing for the pointer. */
/*  WHY THIS RULE HAS TO EXIST
    ---------------------------
    Chrome no longer hides the contents of a closed <details> with display:none
    on its children. It puts them inside ::details-content and sets
    content-visibility: hidden on that. That hides the whole subtree, and no
    display, opacity or visibility written on the panel below can bring it back
    - which is why the menu never opened on hover, whatever the hover rule said.

    So the panel is taken out of the browser's hands and hidden by ours: the
    content stays rendered, and the opacity and visibility further down decide
    whether it is seen. Firefox and Safari, which still use display:none, are
    served by the `display: block` in the same rule.

    Kept behind @supports so that a browser which does not know the pseudo does
    not throw the whole block away. */
@supports selector(::details-content) {
    .menu::details-content { content-visibility: visible; }
}

.menu > ul {
    position: absolute; right: 0; top: calc(100% + .55rem);
    /*  As wide as what is in it, not as wide as the widest menu on the site:
        a panel holding one word does not need the room that "Terms and
        conditions" needs. The floor is there so a single short item does not
        come out narrower than the label it hangs from. */
    margin: 0; padding: .4rem; list-style: none;
    min-width: max(8rem, 100%); width: max-content;
    background: #0e0f10; border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
    z-index: 20;

    display: block;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .5s ease, transform .5s ease, visibility 0s linear .5s;
}

/*  The panel hangs half a rem below the label, and that gap used to close the
    menu on the way down: the panel is out of the flow, so the details box is
    only as tall as its summary and the pointer leaves it while crossing.

    The bridge is part of the panel itself - an empty strip filling exactly that
    gap - so hovering it still counts as hovering the menu. It is invisible, it
    is only there while the panel is, and it is no wider than the panel. */
.menu > ul::before {
    content: ""; position: absolute;
    left: 0; right: 0; top: -.55rem; height: .55rem;
}

.menu[open] > ul {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: none;
    transition: opacity .5s ease, transform .5s ease, visibility 0s;
}

.menu ul a {
    display: block; padding: .5rem .7rem; border-radius: var(--radius);
    color: #fff; text-decoration: none;
    font-family: var(--font-tech); font-size: .92rem;
    letter-spacing: .05em; text-transform: uppercase; font-weight: 700;
}

.menu ul a:hover { background: #1b1d1f; color: #6cc6ff; }

/*  The mouse gets hover as well: on a pointer device having to click a menu
    that is one item deep is a click nobody asked for. Left out where there is
    no pointer, since hover on a touch screen means the first tap is eaten. */
@media (hover: hover) and (pointer: fine) {
    .menu:hover > ul,
    .menu:focus-within > ul {
        opacity: 1; visibility: visible; pointer-events: auto;
        transform: none;
        transition: opacity .5s ease, transform .5s ease, visibility 0s;
    }
}

/*  Somebody who has asked their system for less movement gets the menu without
    the slide, and without the wait on the way out. */
@media (prefers-reduced-motion: reduce) {
    .menu > ul { transform: none; transition: opacity .01s linear, visibility 0s; }
    .menu[open] > ul, .menu:hover > ul, .menu:focus-within > ul { transition: opacity .01s linear, visibility 0s; }
}

/* ------------------------------------------------------- page contents bar */
/*  The links to a page's own sections, under the site bar rather than in it.
    Right-aligned, quieter than the bar above, and it does not stick: it is a
    table of contents, and one that follows you down the page is a second menu
    competing with the first. */
.subnav { border-bottom: 1px solid var(--line); }

.subnav .wrap { display: flex; justify-content: flex-end; padding-top: .5rem; padding-bottom: .5rem; }
.subnav nav { display: flex; gap: 1.4rem; flex-wrap: wrap; justify-content: flex-end; }

.subnav a {
    color: var(--ink-2); text-decoration: none;
    font-family: var(--font-tech); font-size: .86rem;
    letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
}

.subnav a:hover { color: #6cc6ff; }

/* ------------------------------------------------------------ the bar on a phone */
/*  One set of links, two shapes. On a wide screen the button is not drawn and
    <nav> is the row it has always been; under 48rem the row becomes a panel and
    the button opens it.

    The panel is a <details>, like everything else in this bar, so the whole
    navigation works with the script blocked - which is the state a slow phone
    on a train spends a good part of its time in. */
/*  The switch is a child of the bar, not of the panel, so that on a phone it
    stays visible beside the button. On a wide screen that would put it before
    the two menus, which is not where a setting belongs, so the order is set
    here rather than by the markup: menus first, switch last. */
.burger { margin-left: auto; order: 2; }
.site-head .currency { order: 3; margin-left: .9rem; }
.burger > summary { display: none; }
.burger::details-content { content-visibility: visible; }

@media (max-width: 48rem) {
    .burger > summary {
        display: inline-flex; align-items: center; list-style: none;
        cursor: pointer; padding: .5rem .1rem .5rem .45rem; color: #fff;
    }
    .burger > summary::-webkit-details-marker { display: none; }
    .burger > summary svg { width: 24px; height: 18px; fill: currentColor; }
    .burger[open] > summary { color: #6cc6ff; }

    /*  The panel hangs from the bar and covers what is under it rather than
        pushing the page down: a bar that grows to half the screen when you
        touch it is the thing people hate about phone menus. */
    /*  Scoped to a nav that is actually inside the button, and not to every nav
        in the bar. The difference matters the day the stylesheet arrives on the
        server before the pages do: with a bare `.site-head nav` the panel gets
        built around markup that has no way to close it, and it sits open across
        the page. This way an old page simply keeps its old row. */
    .burger nav {
        position: absolute; right: 1.5rem; left: 1.5rem; top: calc(100% + .5rem);
        flex-direction: column; align-items: stretch; gap: .1rem;
        background: #0e0f10; border: 1px solid var(--line);
        border-radius: var(--radius); padding: .6rem;
        box-shadow: 0 18px 40px rgba(0, 0, 0, .6); z-index: 30;
    }

    .burger:not([open]) > nav { display: none; }

    /*  Inside the panel the two menus are rows that expand in place. No hover
        on a touch screen, no floating panel over a floating panel: the item
        list simply appears under its own heading. */
    .menu { display: block; width: 100%; }
    .menu > summary { padding: .6rem .7rem; }

    .menu > ul {
        position: static; width: auto; min-width: 0;
        opacity: 1; visibility: visible; transform: none; pointer-events: auto;
        background: transparent; border: 0; box-shadow: none;
        padding: 0 0 .3rem .7rem; transition: none;
    }

    /*  On a phone the panel is a list, not a set of drawers: every section is
        already open, so what you came for is one tap away instead of two. With
        four items in total there is nothing to save by folding them, and a
        heading that has to be opened before it shows anything is the thing that
        makes phone menus feel like a maze.

        The headings stay <summary> elements - the markup is the same one the
        desktop bar uses - but they are set as labels and their arrow is gone,
        because nothing here opens or closes. */
    .menu > ul { display: block; }
    .menu > ul::before { content: none; }
    .menu > summary { cursor: default; color: var(--ink-3); font-size: .82rem; }
    .menu > summary::after { display: none; }
    .menu > summary:hover, .menu[open] > summary { color: var(--ink-3); }
    .menu ul a { padding: .55rem .7rem; font-size: 1rem; }

    /*  The currency pair keeps its own line at the foot of the panel, where a
        setting belongs - not wedged between two menu headings. */
    /*  On a phone the pair reads right to left: the switch, then the button.
        Both are pushed to the right end of the bar by the switch's own margin,
        so the button keeps the corner it is looked for in. */
    /*  The bar's own 1.5rem gap is what stood between the switch and the
        button. It is right between a logo and a menu and wrong between two
        controls that belong together, so here the pair closes it up. */
    .site-head .wrap { column-gap: .4rem; }
    .site-head .currency { order: 2; margin-left: auto; margin-right: 0; }
    /*  One automatic margin puts the group in the corner; two of them share the
        free space instead of spending it, and the group drifts to the middle.
        So the margin belongs to whichever of the two comes first, and which one
        that is changes by page: the switch is only shown where there are prices
        to switch. The button carries it by default and gives it up when the
        switch is there in front of it - which is what .live says. */
    .burger { order: 3; margin-left: auto; }
    .site-head .currency.live ~ .burger { margin-left: 0; }
}