/* avestein.com in the AVESTEIN house style, the same as the plugins and
   AVESTEIN Connect (Shared/House Style/Theme.h in AVESTEIN SOURCE): a gray
   brushed faceplate between rack ears, black printed lettering, engraved
   section frames, raised push buttons with pilot lamps, white-backlit
   windows and black glass bezels. */

:root {
    --plate: #c4c5c1;
    --plate-top: #cdcec9;
    --plate-bottom: #b3b4af;
    --ink: #131313;
    --ink-2: #2b2c29;
    --ink-dim: #4a4b47;
    --ink-faint: #6b6c67;
    --groove: #3b3c39;
    --bevel-light: rgba(255, 255, 255, .6);
    --button-top: #f1f1ee;
    --button-bottom: #b2b3ae;
    --face-light: #fdfeff;
    --face-edge: #c2c7cc;
    --face-ink: #15171a;
    --face-ink-dim: #4a4f56;
    --bezel: #18191b;
    --bezel-2: #26272a;
    --lamp-red: #ff3324;
    --lamp-green: #35f25f;
    --lamp-amber: #ffbf3a;
    --good: #1f6b2a;
    --bad: #9b1c14;
    --radius: 5px;
    --font: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --print: "Bahnschrift SemiBold", "Bahnschrift", "DIN Alternate", "DIN Condensed", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --mono: Consolas, Menlo, "SFMono-Regular", monospace;
    --screw: #f2f2ef 0 1.5px, #a3a49f 2px, #5e5f5b 4.5px, rgba(0,0,0,.4) 5px, transparent 5.5px;
    color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: #1c1d1f; }
body {
    margin: 0;
    color: var(--ink-2);
    font: 16px/1.6 var(--font);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* The faceplate: an even painted gray with a fine brushed grain (even, so
       the printed frame titles sit cleanly in their grooves). */
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, rgba(0,0,0,.025) 1px 2px, transparent 2px 4px),
        var(--plate);
}
main { flex: 1; }
img { max-width: 100%; display: block; }
a { color: inherit; }
p a, li a, .link { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(0,0,0,.35); text-underline-offset: 3px; }
p a:hover, li a:hover, .link:hover { text-decoration-color: var(--ink); }
h1, h2, h3 { color: var(--ink); line-height: 1.12; margin: 0 0 .5em; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
h2 { font-size: clamp(1.45rem, 2.8vw, 2rem); }
h3 { font-size: 1.15rem; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
[hidden] { display: none !important; }

/* Rack ears, with their screws, at the sides of wide screens. */
@media (min-width: 1320px) {
    body::before, body::after {
        content: "";
        position: fixed;
        top: 0; bottom: 0;
        width: 34px;
        z-index: 0;
        pointer-events: none;
        background:
            radial-gradient(circle at 50% 120px, #f2f2ef 0 2px, #a3a49f 2.5px, #5e5f5b 6px, rgba(0,0,0,.45) 7px, transparent 7.5px),
            radial-gradient(circle at 50% calc(100% - 120px), #f2f2ef 0 2px, #a3a49f 2.5px, #5e5f5b 6px, rgba(0,0,0,.45) 7px, transparent 7.5px),
            repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px),
            linear-gradient(180deg, #a9aaa5, #8e8f8a);
        box-shadow: inset -1px 0 0 rgba(255,255,255,.45), inset 1px 0 0 rgba(0,0,0,.35);
    }
    body::before { left: 0; border-right: 1px solid rgba(0,0,0,.4); }
    body::after { right: 0; border-left: 1px solid rgba(0,0,0,.4); }
}

.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; position: relative; z-index: 1; }
.narrow { width: min(780px, 100% - 32px); margin-inline: auto; position: relative; z-index: 1; }
.section { padding: clamp(40px, 6vw, 80px) 0; position: relative; z-index: 1; }
.section.tight { padding: 32px 0; }
/* Printed capitals, like the plugin's labels. */
.eyebrow {
    font: 600 .8rem/1 var(--print);
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--ink);
    margin: 0 0 12px;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.muted { color: var(--ink-dim); }
.dim { color: var(--ink-faint); }
.small { font-size: .875rem; }
.center { text-align: center; }
.mono { font-family: var(--mono); }
.stack > * + * { margin-top: 16px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.spread { display: flex; gap: 16px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.spaced { margin-top: 2.5em; }

/* ---- Header: the top of the faceplate ----------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px),
        linear-gradient(180deg, #d4d5d0, #bdbeb9);
    border-bottom: 1px solid rgba(0,0,0,.45);
    box-shadow: 0 1px 0 rgba(255,255,255,.4), 0 6px 18px rgba(0,0,0,.18);
}
.site-header .wrap { display: flex; align-items: center; gap: 22px; height: 74px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
/* The logo is white artwork: printed black here, like on the plugin. */
.brand img { filter: brightness(0); opacity: .9; }
.brand img.mark { height: 36px; width: auto; }
.brand img.word { height: 14px; width: auto; }
.nav { display: flex; gap: 8px; flex: 1; }
.nav a { text-decoration: none; }
.header-actions { display: flex; gap: 10px; align-items: center; }
.menu-button { display: none !important; }

@media (max-width: 1060px) {
    .site-header .wrap { gap: 12px; }
    .menu-button { display: inline-flex !important; margin-left: auto; }
    .nav {
        display: none;
        position: absolute;
        top: 74px; left: -16px; right: -16px;
        flex-direction: column;
        align-items: stretch;
        padding: 14px 16px 18px;
        background: linear-gradient(180deg, #c8c9c4, #b5b6b1);
        border-bottom: 1px solid rgba(0,0,0,.45);
    }
    .nav.open { display: flex; }
    .brand img.word { display: none; }
}

/* ---- Push buttons with pilot lamps (the plugin's SPACE / ROOM buttons) --------- */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 11px 20px;
    border-radius: var(--radius);
    border: 1px solid #2c2d2a;
    background: linear-gradient(180deg, var(--button-top), #d7d8d3 45%, var(--button-bottom));
    color: var(--ink);
    font: 600 .82rem/1 var(--print);
    letter-spacing: .18em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -2px 0 rgba(0,0,0,.12), 0 2px 0 #4c4d49, 0 4px 10px rgba(0,0,0,.28);
    transition: transform .06s ease, filter .15s ease, box-shadow .06s ease;
    white-space: nowrap;
}
.button:hover { filter: brightness(1.04); }
.button:active, .button[aria-current="page"], .button[aria-selected="true"] {
    transform: translateY(2px);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.22), inset 0 -1px 0 rgba(255,255,255,.5), 0 1px 3px rgba(0,0,0,.25);
    background: linear-gradient(180deg, #d9dad5, #c3c4bf);
}
.button:disabled { opacity: .55; cursor: not-allowed; filter: none; transform: none; }
/* The pilot lamp in the button: dark glass, or lit. */
.button::before {
    content: "";
    width: 9px; height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    background: radial-gradient(circle at 35% 30%, #d6d8da 0 15%, #7b7f84 55%, #3d4044 100%);
    box-shadow: 0 0 0 1.5px #232421, inset 0 0 1px rgba(0,0,0,.6);
}
.button[aria-current="page"]::before, .button[aria-selected="true"]::before, .button.lit::before {
    background: radial-gradient(circle at 35% 30%, #fff 0 30%, #e9f0fa 60%, #aeb8c4 100%);
    box-shadow: 0 0 0 1.5px #232421, 0 0 10px 2px rgba(255,255,255,.95);
}
.button.go::before {
    background: radial-gradient(circle at 35% 30%, #effff2 0 15%, var(--lamp-green) 50%, #149234 100%);
    box-shadow: 0 0 0 1.5px #232421, 0 0 9px 2px rgba(53,242,95,.75);
}
.button.danger::before {
    background: radial-gradient(circle at 35% 30%, #fff0ee 0 15%, var(--lamp-red) 50%, #9d150c 100%);
    box-shadow: 0 0 0 1.5px #232421, 0 0 9px 2px rgba(255,51,36,.6);
}
.button.plain::before { display: none; }
.button.dark {
    background: linear-gradient(180deg, #3a3b3e, #232427);
    color: #ecebe6;
    border-color: #0e0f10;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 0 #0b0b0c, 0 4px 10px rgba(0,0,0,.3);
}
.button.ghost { background: transparent; box-shadow: none; border-color: rgba(0,0,0,.45); }
.button.ghost:hover { background: rgba(255,255,255,.25); }
.button.ghost::before { display: none; }
.button.small { padding: 8px 13px; font-size: .72rem; gap: 8px; }
.button.small::before { width: 7px; height: 7px; }
.button.big { padding: 15px 26px; font-size: .9rem; }

/* ---- Lamps on the plate --------------------------------------------------------- */

.lamp {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #d6d8da 0 15%, #7b7f84 55%, #3d4044 100%);
    box-shadow: 0 0 0 1.5px #232421;
    vertical-align: middle;
    flex-shrink: 0;
}
.lamp.green { background: radial-gradient(circle at 35% 30%, #effff2 0 15%, var(--lamp-green) 50%, #149234 100%); box-shadow: 0 0 0 1.5px #232421, 0 0 10px 2px rgba(53,242,95,.7); }
.lamp.red { background: radial-gradient(circle at 35% 30%, #fff0ee 0 15%, var(--lamp-red) 50%, #9d150c 100%); box-shadow: 0 0 0 1.5px #232421, 0 0 10px 2px rgba(255,51,36,.6); }
.lamp.white { background: radial-gradient(circle at 35% 30%, #fff 0 30%, #e9f0fa 60%, #aeb8c4 100%); box-shadow: 0 0 0 1.5px #232421, 0 0 10px 2px rgba(255,255,255,.95); }
.lamp.amber { background: radial-gradient(circle at 35% 30%, #fff8e6 0 15%, var(--lamp-amber) 50%, #a26a07 100%); box-shadow: 0 0 0 1.5px #232421, 0 0 10px 2px rgba(255,191,58,.6); }

/* ---- Engraved section frames with a printed title (the plugin's "SOUND", "MODE") --- */

.panel {
    position: relative;
    border: 1.5px solid var(--groove);
    border-radius: 7px;
    padding: 30px clamp(18px, 3vw, 26px) clamp(18px, 3vw, 24px);
    box-shadow: 0 1px 0 var(--bevel-light), inset 0 1px 0 var(--bevel-light);
}
:not(.grid):not(.download-choice):not(.stat-grid) > .panel + .panel { margin-top: 28px; }
.panel h2, .panel h3 { margin-top: 0; }
.panel-title {
    position: absolute;
    top: -.62em; left: 16px;
    margin: 0;
    padding: 0 10px;
    font: 600 .82rem/1.2 var(--print);
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--plate);
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

/* A raised plate with four screws (cards). */
.plate {
    position: relative;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,.5);
    background:
        radial-gradient(circle at 12px 12px, var(--screw)),
        radial-gradient(circle at calc(100% - 12px) 12px, var(--screw)),
        radial-gradient(circle at 12px calc(100% - 12px), var(--screw)),
        radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), var(--screw)),
        repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px),
        linear-gradient(180deg, #d3d4cf, #b8b9b4);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 10px 24px rgba(0,0,0,.25), 0 2px 0 rgba(0,0,0,.22);
}

/* ---- Lit windows: the white backlit meter face ----------------------------------- */

.backlight {
    background: radial-gradient(130% 160% at 50% 0%, var(--face-light), #eef1f4 55%, var(--face-edge));
    color: var(--face-ink);
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,.55);
    box-shadow: inset 0 2px 6px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.65);
    padding: 11px 14px;
}
.key {
    font: 600 clamp(.95rem, 2.3vw, 1.15rem)/1.3 var(--mono);
    letter-spacing: .06em;
    word-break: break-all;
    color: var(--face-ink);
}

/* Black glass bezels around pictures (the plugin's 3D window). */
.bezel {
    position: relative;
    border-radius: 9px;
    padding: 30px 12px 12px;
    background:
        radial-gradient(circle at 10px 10px, #5a5c60 0 2px, transparent 3px),
        radial-gradient(circle at calc(100% - 10px) 10px, #5a5c60 0 2px, transparent 3px),
        radial-gradient(circle at 10px calc(100% - 10px), #5a5c60 0 2px, transparent 3px),
        radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), #5a5c60 0 2px, transparent 3px),
        linear-gradient(180deg, var(--bezel-2), var(--bezel));
    border: 1px solid #050506;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 12px 30px rgba(0,0,0,.35), 0 2px 0 rgba(0,0,0,.3);
}
.bezel-title {
    position: absolute;
    top: 9px; left: 0; right: 0;
    text-align: center;
    font: 600 .7rem/1 var(--print);
    letter-spacing: .32em;
    text-transform: uppercase;
    color: #e9e9e4;
}
.bezel > img, .bezel .screen { border-radius: 5px; width: 100%; box-shadow: 0 0 0 1px #000; }
.bezel .screen { aspect-ratio: 16 / 10; background: radial-gradient(120% 140% at 50% 0%, #fff, #d7dce1); display: grid; place-items: center; }
.bezel .screen img { width: 34%; filter: brightness(0); opacity: .25; }

/* ---- Hero ----------------------------------------------------------------------- */

.hero { position: relative; z-index: 1; border-bottom: 1px solid rgba(0,0,0,.25); box-shadow: 0 1px 0 rgba(255,255,255,.45); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 44px; align-items: center; padding: clamp(40px, 7vw, 92px) 0; }
.hero h1 { margin-bottom: 16px; }
.hero p.lead { font-size: 1.18rem; color: var(--ink-2); max-width: 34em; margin: 0 0 26px; }
.hero .row { align-items: flex-start; }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; gap: 28px; } }

.price { font: 600 1.55rem/1 var(--print); letter-spacing: .04em; color: var(--ink); }
.price s { color: var(--ink-faint); font-size: 1rem; margin-left: 8px; }
.badge {
    display: inline-flex; align-items: center; gap: 6px;
    font: 600 .66rem/1 var(--print); letter-spacing: .2em; text-transform: uppercase;
    padding: 5px 8px; border-radius: 3px;
    color: #ecebe6; background: #2a2b2e; border: 1px solid #0e0f10;
}
.badge.sale { background: var(--bad); border-color: #4a0c07; }
.badge.light { color: var(--ink); background: rgba(255,255,255,.4); border-color: rgba(0,0,0,.35); }

/* ---- Purchase, and under it "Try it" (the same wherever a plugin is sold) -------- */

.buy-box { display: inline-grid; gap: 10px; justify-items: stretch; min-width: 230px; }
.try-note { font: 600 .72rem/1.3 var(--print); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim); margin: 0; text-align: center; }

/* ---- Product cards: small faceplates ---------------------------------------------- */

.grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.card { display: flex; flex-direction: column; text-decoration: none; padding: 18px 18px 20px; transition: transform .15s ease; }
a.card:hover { transform: translateY(-3px); }
.card .picture { border-radius: 7px; padding: 8px; background: linear-gradient(180deg, var(--bezel-2), var(--bezel)); border: 1px solid #050506; }
.card .picture img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; }
.card .picture img.no-picture, .license-card .thumb img.no-picture {
    object-fit: contain; padding: 18%; background: radial-gradient(120% 140% at 50% 0%, #fff, #d7dce1); filter: none; }
.card .body { padding: 16px 4px 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card h3 { margin: 0; font-size: 1.2rem; }
.card p { margin: 0; color: var(--ink-dim); font-size: .95rem; }
.card .foot { margin-top: auto; padding-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }

/* ---- Forms: fields are lit windows -------------------------------------------------- */

label { display: block; font: 600 .74rem/1.2 var(--print); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); margin-bottom: 7px; }
.field { margin-bottom: 16px; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="search"], select, textarea {
    width: 100%;
    background: radial-gradient(130% 160% at 50% 0%, var(--face-light), #eef1f4 60%, #d6dbe0);
    border: 1px solid rgba(0,0,0,.6);
    border-radius: 4px;
    padding: 10px 12px;
    color: var(--face-ink);
    box-shadow: inset 0 2px 5px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.6);
}
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: #000; box-shadow: inset 0 2px 5px rgba(0,0,0,.25), 0 0 0 3px rgba(255,255,255,.7); }
input.code { font: 600 1.6rem/1 var(--mono); letter-spacing: .45em; text-align: center; }
.check { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-2); font: 400 .93rem/1.5 var(--font); letter-spacing: 0; text-transform: none; }
.check input[type="checkbox"], .check input[type="radio"] { margin-top: 4px; width: 17px; height: 17px; accent-color: #2b2c29; flex-shrink: 0; }
.check input[type="date"] { width: auto; padding: 6px 10px; margin-top: -4px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0 16px; }
.link-button { background: none; border: 0; padding: 0; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: .93rem; }

.notice { border-radius: 4px; padding: 11px 14px; font-size: .93rem; margin: 12px 0; border: 1px solid rgba(0,0,0,.5);
          background: radial-gradient(130% 160% at 50% 0%, var(--face-light), #e7ebef); box-shadow: inset 0 1px 4px rgba(0,0,0,.2);
          display: flex; gap: 10px; align-items: baseline; }
.notice::before { content: ""; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; transform: translateY(1px); background: #7b7f84; }
.notice.ok { color: var(--good); }
.notice.ok::before { background: var(--lamp-green); box-shadow: 0 0 8px rgba(53,242,95,.8); }
.notice.error { color: var(--bad); }
.notice.error::before { background: var(--lamp-red); box-shadow: 0 0 8px rgba(255,51,36,.7); }
.notice.info { color: var(--face-ink); }
.notice.info::before { background: #fff; box-shadow: 0 0 0 1px #888, 0 0 8px rgba(255,255,255,.9); }

/* ---- Tables, lists ---------------------------------------------------------------- */

table.data { width: 100%; border-collapse: collapse; font-size: .93rem; }
table.data th { text-align: left; font: 600 .68rem/1 var(--print); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); padding: 10px; border-bottom: 1.5px solid var(--groove); }
table.data td { padding: 11px 10px; border-bottom: 1px solid rgba(0,0,0,.18); vertical-align: top; }
table.data tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; }

ul.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
ul.ticks li { display: flex; gap: 12px; align-items: baseline; }
ul.ticks li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; transform: translateY(-1px);
    background: radial-gradient(circle at 35% 30%, #fff 0 30%, #e9f0fa 60%, #aeb8c4 100%); box-shadow: 0 0 0 1.5px #232421, 0 0 8px 1px rgba(255,255,255,.9); }

dl.specs { display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; margin: 0; }
dl.specs dt { font: 600 .74rem/1.6 var(--print); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); }
dl.specs dd { margin: 0; }

details.faq { border-bottom: 1px solid rgba(0,0,0,.25); box-shadow: 0 1px 0 rgba(255,255,255,.4); padding: 2px 0; }
details.faq summary { cursor: pointer; list-style: none; padding: 15px 34px 15px 0; font-weight: 600; color: var(--ink); position: relative; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; position: absolute; right: 6px; top: 10px; font-size: 1.4rem; color: var(--ink-dim); font-weight: 300; }
details.faq[open] summary::after { content: "\2212"; }
details.faq .answer { padding: 0 0 18px; color: var(--ink-2); white-space: pre-line; }
.faq-plugin { margin-top: 2em; }

/* ---- Tabs: a row of push buttons (the plugin's SPACE / ROOM / ROOM EQ) ----------- */

.tabs { display: flex; gap: 10px; margin-bottom: 32px; flex-wrap: wrap; }
.tabs .count { display: inline-block; min-width: 20px; padding: 2px 6px; border-radius: 9px; background: #2a2b2e; color: #ecebe6; font-size: .68rem; letter-spacing: 0; }

/* ---- Dialogs: a plate floating over the page -------------------------------------- */

dialog {
    border: 1px solid rgba(0,0,0,.6);
    border-radius: 8px;
    padding: 0;
    width: min(540px, 100% - 32px);
    color: var(--ink-2);
    background:
        radial-gradient(circle at 12px 12px, var(--screw)),
        radial-gradient(circle at calc(100% - 12px) 12px, var(--screw)),
        radial-gradient(circle at 12px calc(100% - 12px), var(--screw)),
        radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), var(--screw)),
        var(--plate);
    box-shadow: 0 30px 70px rgba(0,0,0,.6);
}
dialog::backdrop { background: rgba(0, 0, 0, .55); }
dialog .dialog-body { padding: 30px; }
dialog h2 { font-size: 1.4rem; }

/* ---- Footer: the bottom of the plate ------------------------------------------------ */

.site-footer { position: relative; z-index: 1; margin-top: 40px; border-top: 1px solid rgba(0,0,0,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
               background: linear-gradient(180deg, #b6b7b2, #a4a5a0); }
.site-footer .wrap { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 32px; padding: 44px 0 26px; }
.site-footer img { filter: brightness(0); opacity: .85; }
.site-footer h4 { font: 600 .72rem/1 var(--print); letter-spacing: .24em; text-transform: uppercase; color: var(--ink); margin: 0 0 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer a { color: var(--ink-2); text-decoration: none; font-size: .93rem; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }
.site-footer .legal { border-top: 1px solid rgba(0,0,0,.25); padding: 16px 0 26px; color: var(--ink-dim); font-size: .8rem; }
@media (max-width: 760px) { .site-footer .wrap { grid-template-columns: 1fr 1fr; } }

/* ---- Pages -------------------------------------------------------------------------- */

.page-head { padding: clamp(36px, 6vw, 64px) 0 8px; position: relative; z-index: 1; }
.page-head p { color: var(--ink-dim); max-width: 40em; font-size: 1.08rem; }
.prose { color: var(--ink-2); }
.prose h2 { font-size: 1.3rem; margin-top: 2em; }
.prose h3 { margin-top: 1.6em; }
.prose li { margin: 6px 0; }
.two-col { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 36px; align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

.license-card { display: grid; grid-template-columns: 150px 1fr; gap: 22px; }
.license-card .thumb { border-radius: 6px; padding: 6px; background: linear-gradient(180deg, var(--bezel-2), var(--bezel)); border: 1px solid #050506; align-self: start; }
.license-card .thumb img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 3px; }
@media (max-width: 560px) { .license-card { grid-template-columns: 1fr; } .license-card .thumb { display: none; } }
.key-row { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
.computers { display: grid; gap: 8px; margin: 12px 0 0; }
.computer { display: flex; align-items: center; gap: 12px; padding: 9px 12px; font-size: .92rem; border-radius: 4px;
            border: 1px solid rgba(0,0,0,.3); background: rgba(255,255,255,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.computer .what { flex: 1; min-width: 0; }
.slots { display: inline-flex; gap: 6px; align-items: center; }

.download-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 22px; }
.download-choice .panel { display: flex; flex-direction: column; gap: 6px; }
.download-choice .button { width: 100%; white-space: normal; text-align: center; }

/* Support: a conversation, like a little chat. */
.chat { display: grid; gap: 12px; margin: 10px 0 18px; }
.message { max-width: min(560px, 88%); padding: 10px 14px; border-radius: 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.message .who { font: 600 .66rem/1 var(--print); letter-spacing: .18em; text-transform: uppercase; margin-bottom: 6px; display: block; white-space: normal; }
.message.mine { justify-self: end; color: #ecebe6; background: linear-gradient(180deg, #3a3b3e, #26272a); border: 1px solid #0e0f10; }
.message.mine .who { color: #b9b9b4; }
.message.theirs { justify-self: start; background: radial-gradient(130% 160% at 50% 0%, var(--face-light), #e7ebef); color: var(--face-ink);
                  border: 1px solid rgba(0,0,0,.5); box-shadow: inset 0 1px 3px rgba(0,0,0,.18); }
.message.theirs .who { color: var(--face-ink-dim); }
.ticket-row { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 5px; cursor: pointer; text-decoration: none; width: 100%; text-align: left;
              border: 1px solid rgba(0,0,0,.3); background: rgba(255,255,255,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.ticket-row:hover { background: rgba(255,255,255,.35); }
.ticket-row + .ticket-row { margin-top: 8px; }
.ticket-row .what { flex: 1; min-width: 0; }

.skeleton { background: linear-gradient(90deg, rgba(255,255,255,.15), rgba(255,255,255,.4), rgba(255,255,255,.15)); background-size: 200% 100%;
            animation: shimmer 1.4s infinite; border-radius: 6px; min-height: 120px; border: 1px solid rgba(0,0,0,.15); }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }