/* EurekaLog - design system (the application's single stylesheet).
 *
 * Derived from the owner-approved direction of 2026-09-12 (design/handoff/): EurekaLog blue for
 * service actions, orange with navy ink for purchase, thin separators.
 * This file is the authority; design/mockup.css is the mockup that preceded it.
 *
 * Rules: no external requests and no font CDN; every interactive target at least 44 px high;
 * focus always visible; motion short and respectful of prefers-reduced-motion; no layout shift on
 * hover. UTF-8 with LF endings.
 */

/* Fontsource variable fonts 5.3.0, served unchanged from this release under SIL OFL 1.1.
   Latin extensions and italic faces load only when needed; licenses live beside the files. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-5.3.0/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-5.3.0/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-5.3.0/inter-latin-ext-wght-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-5.3.0/inter-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Cascadia Code";
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("/fonts/cascadia-code-5.3.0/cascadia-code-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Cascadia Code";
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("/fonts/cascadia-code-5.3.0/cascadia-code-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Cascadia Code";
  font-style: italic;
  font-weight: 200 700;
  font-display: swap;
  src: url("/fonts/cascadia-code-5.3.0/cascadia-code-latin-ext-wght-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Cascadia Code";
  font-style: italic;
  font-weight: 200 700;
  font-display: swap;
  src: url("/fonts/cascadia-code-5.3.0/cascadia-code-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  --el-blue: #0057e7;
  --el-blue-hover: #0047be;
  --el-navy: #071b4d;
  --el-text: #344d70;
  --el-muted: #526784;
  --el-eyebrow: #6b7a90;
  --el-white: #ffffff;
  --el-surface: #f4faff;
  --el-band: #e7f4ff;
  --el-border: #cbdcf0;
  --el-orange: #ff6a00;
  --el-orange-hover: #e85f00;
  --el-orange-dark: #b83f00;
  --el-error: #c62828;
  --el-error-surface: #fff0f0;
  --el-ok: #1b6e3c;
  --el-ok-border: #bfe0cb;
  --el-ok-surface: #f1faf4;
  --el-code-bg: #102c43;
  --el-font-sans: "Inter", "Segoe UI", Arial, sans-serif;
  --el-font-mono: "Cascadia Code", Consolas, "Liberation Mono", monospace;
  --el-content-max: 1240px;
  --el-reading-max: 70ch;
  /* The page gutter is a floor outside the content box, not an inset inside it: `.wrap` keeps 28 px
     of breathing room only where the viewport is narrower than the content box, and from there up
     the container's own margin is the whole gutter - so a full-width section never narrows the
     content it carries (owner's request, 2026-09-28). */
  --el-page-padding: 28px;
  --el-header-height: 84px;
  --el-radius-control: 6px;
  --el-radius-panel: 8px;
  --el-control-min-height: 48px;
  --el-hero-control-height: 56px;
  --el-body-size: 18px;
  --el-body-leading: 1.55;
  --el-home-title-size: clamp(40px, 5.1vw, 74px);
  --el-page-title-size: clamp(34px, 3.9vw, 56px);
  --el-section-title-size: clamp(28px, 2.8vw, 36px);
  --el-title-leading: 1.06;
  --el-label-size: 12px;
  --el-label-tracking: 0.12em;
  --el-report-shadow: 0 8px 24px rgb(7 27 77 / 12%);
  --el-focus-outline: 3px solid var(--el-blue);
  --el-focus-offset: 3px;
  --el-transition: 140ms linear;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--el-white);
  color: var(--el-text);
  font-family: var(--el-font-sans);
  font-size: var(--el-body-size);
  line-height: var(--el-body-leading);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; color: var(--el-navy); line-height: var(--el-title-leading); letter-spacing: -0.015em; }
h1 { font-size: var(--el-home-title-size); font-weight: 800; }
h2 { font-size: var(--el-section-title-size); font-weight: 800; }
h3 { font-size: 1.125rem; font-weight: 700; }
p { margin: 0; }
a { color: var(--el-blue); }
:focus-visible { outline: var(--el-focus-outline); outline-offset: var(--el-focus-offset); }

/* The content box is 1240 px wide at every width it fits, and the gutter sits outside it: the
   container is the content box plus one gutter on each side, so the margin the centring already
   produces joins it instead of being added to it. */
.wrap { max-width: calc(var(--el-content-max) + 2 * var(--el-page-padding)); margin: 0 auto; padding: 0 var(--el-page-padding); }
.label { font-size: var(--el-label-size); font-weight: 600; letter-spacing: var(--el-label-tracking); text-transform: uppercase; color: var(--el-blue); }
.lead { max-width: 60ch; }
.small { font-size: 0.875rem; }
.muted { color: var(--el-muted); }
.nowrap { white-space: nowrap; }

/* header ------------------------------------------------------------------ */
header.site { position: relative; z-index: 20; border-bottom: 1px solid var(--el-border); background: var(--el-white); }
header.site .wrap { display: flex; align-items: center; gap: 24px; min-height: var(--el-header-height); }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--el-navy); font-size: 1.375rem; font-weight: 800; letter-spacing: -0.02em; text-decoration: none; }
header.site .brand { flex: 0 0 295px; }
.brand img { display: block; max-width: 100%; height: auto; }
.main-desktop { margin-left: auto; }
.primary-menu { display: none; }
.primary-menu > summary { min-height: 44px; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border: 1px solid var(--el-border); border-radius: var(--el-radius-control); color: var(--el-navy); font-weight: 600; cursor: pointer; list-style: none; }
.primary-menu > summary::-webkit-details-marker { display: none; }
.primary-menu > summary::after { content: "+"; }
.primary-menu[open] > summary::after { content: "\2212"; }
/* The signed-in identity: the header names the account, and its menu holds the account links and
   the way out (owner's request for Kevin's report, 2026-10-28: ten tabs and no way to tell the
   accounts apart). */
.account-menu { position: relative; }
.account-menu > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; max-width: 34ch; color: var(--el-navy); font-weight: 500; cursor: pointer; list-style: none; }
.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu > summary::after { content: "\25BE"; color: var(--el-navy); font-size: 1rem; line-height: 1; }
.account-menu[open] > summary::after { content: "\25B4"; }
.account-menu > summary:hover { color: var(--el-blue); }
.account-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu > nav.main { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; min-width: 260px; padding: 8px 0; border: 1px solid var(--el-border); border-radius: var(--el-radius-control); background: var(--el-white); box-shadow: var(--el-report-shadow); }
.account-menu > nav.main a,
.account-menu > nav.main button { justify-content: flex-start; width: 100%; padding: 10px 18px; text-align: left; }
.account-menu > nav.main button.login { margin-top: 4px; border-top: 1px solid var(--el-border); border-left: 0; padding-left: 18px; }
nav.main { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; font-size: 0.9375rem; }
nav.main a,
nav.main button { display: inline-flex; align-items: center; min-height: 44px; color: var(--el-navy); font-weight: 500; text-decoration: none; }
nav.main button { border: 0; background: none; font: inherit; font-weight: 500; cursor: pointer; }
nav.main a:hover,
nav.main button:hover { color: var(--el-blue); }
nav.main a[aria-current="page"] { color: var(--el-blue); font-weight: 700; }
nav.main .login { border-left: 1px solid var(--el-border); padding-left: 18px; min-height: 44px; }
/* The release history is a stack of disclosures: the version line is the control, the notes are
   what opens. `.card` is used as a link on the documentation index, so it carries no link colour. */
.release > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding: 14px 0; border-top: 1px solid var(--el-border); cursor: pointer; list-style: none; }
.release > summary::-webkit-details-marker { display: none; }
.release > summary::after { content: "\25BE"; margin-left: auto; color: var(--el-muted); font-size: 1.25rem; }
.release[open] > summary::after { content: "\25B4"; }
/* The reader's own page size, kept beside the history it applies to. */
.release-per-page { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.release-per-page label { margin: 0; font-weight: 600; color: var(--el-navy); }
.release-per-page select { min-height: 40px; padding: 0 10px; border: 1px solid var(--el-border); border-radius: var(--el-radius-control); background: var(--el-white); color: var(--el-navy); font: inherit; }
.release > summary:hover .h3 { color: var(--el-blue); }
/* The direct downloads the release offers, at the right edge of the version line: they take the
   free space, and the disclosure caret - which holds it when it is alone - follows them (owner's
   request, 2026-09-28). */
.release > summary .release-downloads { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.release > summary:has(.release-downloads)::after { margin-left: 10px; }
.release > summary .release-downloads .btn { min-height: 44px; padding: 0 16px; font-size: 0.9375rem; }
.release .body { padding-bottom: 8px; }
/* The changelog is a panel of its own, at the small size: set as body copy it ran at the same size
   and rhythm as the release's own heading, so the version line and the notes read as one block
   (owner's report, 2026-09-28). */
.release-notes { padding: 16px 18px; border: 1px solid var(--el-border); border-radius: var(--el-radius-control); background: var(--el-surface); font-size: 0.9375rem; line-height: 1.5; }
.cards a.card { color: inherit; text-decoration: none; }
.cards a.card:hover { border-color: var(--el-blue); }

/* controls ---------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--el-control-min-height); padding: 0 22px; border: 1px solid transparent; border-radius: var(--el-radius-control); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; transition: background-color var(--el-transition), border-color var(--el-transition); }
.btn.hero { min-height: var(--el-hero-control-height); padding: 0 28px; font-size: 1.0625rem; }
.btn.blue { background: var(--el-blue); color: #fff; }
.btn.blue:hover { background: var(--el-blue-hover); }
.btn.buy { background: var(--el-orange); color: var(--el-navy); }
.btn.buy:hover { background: var(--el-orange-hover); }
.btn.outline { background: var(--el-white); border-color: var(--el-border); color: var(--el-navy); }
.btn.outline:hover { border-color: var(--el-blue); color: var(--el-blue); }
.btn.danger { border-color: var(--el-error); background: var(--el-error); color: #fff; }
.btn.danger:hover { background: #a51f1f; }
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn.quiet { min-height: 44px; padding: 0 10px; border-color: transparent; background: transparent; color: var(--el-blue); font-weight: 600; }
/* A secondary action beside a purchase button: normal weight, and never glued to the primary. */
.btn.plain { font-weight: 400; }
.purchase-actions { display: grid; gap: 10px; }
.link-cta { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; text-decoration: none; }
.play { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--el-blue); color: #fff; font-size: 0.625rem; }

/* hero and report --------------------------------------------------------- */
/* The desktop hero of the 2026-10-27 handoff (eurekalog-hero-handoff/expected/desktop-1280.png):
   a flat surface for its whole height, two columns, and the before/after pair the owner asked for. */
.hero { border-bottom: 1px solid var(--el-border); background: var(--el-surface); }
/* The hero keeps the page gutter: `padding-block` leaves `.wrap`'s inline padding alone, where a
   `padding` shorthand on this element would silently cancel it (owner's report, 2026-09-28). */
.hero .grid { display: grid; grid-template-columns: 45fr 55fr; gap: 48px; align-items: start; padding-block: 56px 32px; }
/* Both columns open with a block of the same height - the label's 18.6 px line box and the callout's
   35 px - so the two grey eyebrows fall on one line, as in the handoff. The 26 px ride of decision 43
   belonged to the previous composition and is gone. */
.hero-copy .label { margin: 0 0 12px; }
.hero-eyebrow { margin: 0 0 8px; font-size: var(--el-label-size); font-weight: 600; letter-spacing: var(--el-label-tracking); text-transform: uppercase; color: var(--el-eyebrow); }
/* The window a user meets before EurekaLog: drawn here rather than shipped as a bitmap, because its
   message reflows (two lines at 1280, three at 390) and the text is content while the chrome is
   decoration. Segoe UI because it has to read as a Windows window, not as part of the page. */
.crash-dialog { width: 100%; max-width: 420px; overflow: hidden; border: 1px solid #8a9ab0; border-radius: 8px; background: var(--el-white); box-shadow: 0 12px 28px rgb(7 27 77 / 10%); color: #1a1a1a; font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; user-select: none; -webkit-user-select: none; }
/* The bar carries the same tint as the EurekaLog window it is compared with: the artwork's title
   bar samples #CDE3F7 through its whole height. */
.crash-dialog-bar { display: flex; align-items: center; height: 34px; padding: 0 10px 0 14px; border-bottom: 1px solid #c6d8e8; background: #cde3f7; }
.crash-dialog-name { font-size: 13px; }
.crash-dialog-close { width: 10px; height: 10px; margin-left: auto; fill: none; stroke: #1a1a1a; stroke-width: 1.1; stroke-linecap: round; }
.crash-dialog-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; padding: 10px 18px 16px; }
.crash-dialog-icon { width: 31px; height: 31px; margin-top: 4px; }
.crash-dialog-message { margin: 0; font-size: 13px; line-height: 1.5; }
.crash-dialog-foot { display: flex; justify-content: flex-end; padding: 12px; border-top: 1px solid #e6e6e6; background: #f0f0f0; }
.crash-dialog-ok { display: inline-flex; align-items: center; justify-content: center; width: 82px; height: 25px; border: 2px solid #0b5cad; border-radius: 4px; background: var(--el-white); color: #000000; font-size: 13px; }
/* The promise is the heading; the message the developer actually saw now lives in the window above. */
.hero h1 { margin: 24px 0 12px; font-size: 28px; }
.cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 28px; }
/* The screenshot column. The callout is painted above the annotation so the connector can run up
   behind it and end on its lower edge; the annotation shares the image's own coordinate system. */
.hero-callout { position: relative; z-index: 2; width: fit-content; max-width: 100%; margin: 0 0 8px auto; padding: 8px 16px; border-radius: 8px; background: var(--el-navy); box-shadow: 0 10px 24px rgb(7 27 77 / 18%); color: var(--el-white); font-size: 13px; line-height: 1.4; }
.hero-callout strong { color: var(--el-orange); font-weight: 700; }
/* The artwork is never upscaled: 722 px is the file's own width, and every layout takes it
   narrower. `isolation` confines the row's blend to this box, so the multiply below sees the
   screenshot and nothing behind it. */
.hero-shot { position: relative; max-width: 722px; isolation: isolate; }
/* The highlighted call-stack row: the box the orange frame draws, filled with the owner's #fce8da
   and multiplied into the screenshot. Multiply darkens the light pixels to the tint and leaves the
   glyphs dark, so the row stays the sharpest thing in the picture; painting an opaque fill over it
   would cover the address and the method. */
.hero-row-tint { position: absolute; left: 3.74%; top: 35.93%; width: 80.89%; height: 3.2%; background: #fce8da; mix-blend-mode: multiply; pointer-events: none; }
.hero-annotation { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* The artwork carries its own window, transparency and shadow; the column sets its width, so the
   browser resamples it to ~647 px at 1280 - the file itself stays byte for byte the owner's. */
.report-shot { display: block; width: 100%; height: auto; }
.hero-caption { max-width: 340px; margin: 16px 0 0; font-size: 15px; line-height: 1.35; color: var(--el-navy); }
@media (min-width: 1000px) {
  .hero .grid { padding-block: 56px 64px; }
  .hero-copy .label { margin-bottom: 23px; }
  .hero-callout { margin: 5px 0 2px auto; }
  .hero-copy .hero-eyebrow { margin-bottom: 4px; }
  /* Owner's nudge of 2026-10-27: the right eyebrow moves 8 px right and 8 px down. The offset is
     drawn, not laid out, so the callout, the screenshot and the caption keep their positions. */
  .hero-stage .hero-eyebrow { position: relative; top: 8px; left: 8px; margin: 0 0 7px; }
  .hero h1 { margin: 30px 0 14px; }
  .hero .lead { line-height: 1.65; }
  .hero-actions { margin-top: 21px; }
  .hero-caption { margin: 22px 0 0 auto; max-width: 400px; text-align: right; }
}
/* Below the two-column composition (tablet and phone, still to be drawn properly on 2026-10-27): the
   columns stack, the connector would have nothing to point at, so only it and the arrow go; the frame
   and the row's tint stay, because they are what the callout talks about. The stage runs in the
   reading order of the phone plate - eyebrow, screenshot, callout, caption - and the callout lands
   under the picture as a plain card. */
@media (max-width: 999px) {
  .hero .grid { grid-template-columns: minmax(0, 1fr); }
  .hero-connector, .hero-arrow { display: none; }
  .hero-stage { display: flex; flex-direction: column; margin-top: 40px; }
  .hero-stage .hero-eyebrow { order: 1; }
  .hero-shot { order: 2; }
  .hero-callout { order: 3; margin: 16px 0 8px; }
  .hero-caption { order: 4; text-align: left; }
}

/* bands, sections, editorial --------------------------------------------- */
.band { border-bottom: 1px solid var(--el-border); background: var(--el-band); }
.clients { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding-block: 22px; }
.clients[href] { color: inherit; text-decoration: none; }
.client-logo { display: grid; place-items: center; min-height: 62px; padding: 8px; border: 1px solid var(--el-border); border-radius: var(--el-radius-control); background: var(--el-white); }
.client-logo img { max-width: 100%; object-fit: contain; }
.clients-grid { display: grid; grid-template-columns: minmax(170px, 1.5fr) repeat(5, minmax(104px, 1fr)); gap: 12px; }
/* The home client strip shows the logos in grey at 65% opacity and returns their own colours at full
   opacity under the pointer (owner's requests, 2026-10-27). The band, the tiles and their borders
   keep the shared palette. The customers page repeats the strip without `.clients-band`'s grey
   state - it carries `.clients-static` - so every logo stays in its own colour, with no pointer
   change (owner's request, 2026-10-27). */
.clients-band:not(.clients-static) .client-logo img { filter: grayscale(1); opacity: .65; transition: filter var(--el-transition), opacity var(--el-transition); }
/* The Siemens teal greys to a lighter tone than Honeywell's red: darken this one file so the row
   reads as one grey (owner's report, 2026-10-27). The hover rule below comes later at equal
   specificity, so the brand colour still returns under the pointer. */
.clients-band:not(.clients-static) .client-logo img.logo-siemens { filter: grayscale(1) brightness(.65); }
/* A square emblem carries less ink than a wordmark at the same height, so the BMW roundel takes the
   tile's full height instead of the 34 px cap: 44 px inside 8 px of padding keeps the 62 px tile,
   and the width of the row does not move (owner's request, 2026-10-27). */
.client-logo img.logo-bmw { max-height: 44px; }
.clients-band:not(.clients-static) .client-logo:hover img { filter: none; opacity: 1; }
.compatibility-strip { border-bottom: 1px solid var(--el-border); background: var(--el-white); }
.compatibility-strip .wrap { display: grid; grid-template-columns: minmax(220px, 0.85fr) minmax(300px, 1.35fr) auto; gap: 24px 40px; align-items: center; padding-top: 26px; padding-bottom: 26px; }
.compatibility-strip p { max-width: 68ch; }
.home-testimonials blockquote { margin: 0; }
.home-next-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(240px, 0.85fr); gap: 20px; align-items: stretch; }
.home-next-card { display: flex; flex-direction: column; align-items: flex-start; }
.home-next-card .btn,
.home-next-card .link-cta { margin-top: auto; }
.home-resource-list { padding: 20px 0 20px 20px; border-left: 1px solid var(--el-border); }
/* One spacing per boundary, not one per section: 32 px above and below put 64 px between the content
   of two neighbouring sections instead of the 128 px two 64 px insets added up to, and the 1 px
   separator stays in the middle where the rhythm reads from (owner's request, 2026-09-28). */
section.block { padding: 32px 0; border-bottom: 1px solid var(--el-border); }
section.block.tint { background: var(--el-surface); }
section.block.deep { color: #c8d6ea; background: var(--el-navy); border-bottom: 0; }
section.block.deep h2 { color: #fff; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.items { margin: 0; padding: 0; border-top: 1px solid var(--el-border); list-style: none; }
.item { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--el-border); }
.item .idx { font-family: var(--el-font-mono); font-size: 1.125rem; font-weight: 700; color: var(--el-blue); }
.item p { margin-top: 4px; }
.arrowlist a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--el-border); color: var(--el-navy); font-weight: 600; text-decoration: none; }
.arrowlist a:hover { color: var(--el-blue); }
.media { display: grid; place-items: center; aspect-ratio: 16 / 10; border: 1px solid var(--el-border); border-radius: var(--el-radius-panel); background: var(--el-surface); color: var(--el-muted); box-shadow: var(--el-report-shadow); }
.finalcta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }

/* tables, badges ---------------------------------------------------------- */
/* Native tables keep their semantics; their labelled, focusable wrapper owns horizontal scrolling. */
.table-scroll { max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; }
.table-scroll table { min-width: max(100%, 40rem); }
.table-scroll td, .table-scroll th { overflow-wrap: break-word; }
.account-columns > *, .split > *, .cards > *, .field-row > *, .form > * { min-width: 0; }
.hash { overflow-wrap: anywhere; font-family: var(--el-font-mono); font-size: 0.75rem; color: var(--el-muted); }
table.data { width: 100%; border-collapse: collapse; background: #fff; font-size: 1rem; }
table.data caption { padding-bottom: 10px; color: var(--el-muted); font-size: 0.875rem; text-align: left; }
table.data th { padding: 12px; border-bottom: 1px solid var(--el-border); color: var(--el-muted); font-size: var(--el-label-size); font-weight: 600; letter-spacing: var(--el-label-tracking); text-align: left; text-transform: uppercase; }
table.data td { padding: 14px 12px; border-bottom: 1px solid var(--el-surface); vertical-align: top; }
table.data td.num, table.data th.num { font-family: var(--el-font-mono); text-align: right; }
table.data tr:last-child td { border-bottom: 1px solid var(--el-border); }
/* A two-column sheet on a phone leaves the value a sliver of the viewport, and a version list becomes a
   column of two words per line: the label goes above its value, which then reads as a paragraph. */
@media (max-width: 700px) {
    table.data.sheet, table.data.sheet tbody, table.data.sheet tr, table.data.sheet th, table.data.sheet td { display: block; }
    table.data.sheet th { padding-bottom: 2px; border-bottom: 0; }
    table.data.sheet td { padding-top: 0; }
}
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; }
.badge.ok { border-color: var(--el-ok-border); background: var(--el-ok-surface); color: var(--el-ok); }
.badge.warn { border-color: #f2d3b8; background: #fff6ee; color: var(--el-orange-dark); }
.badge.expired { border-color: #f0c8c8; background: var(--el-error-surface); color: var(--el-error); }
/* A catalogue product that is out of sale: readable, and visibly not sellable. */
tr.product-off > th, tr.product-off > td { opacity: 0.55; }
tr.product-off { background: repeating-linear-gradient(135deg, transparent, transparent 6px, rgba(0, 0, 0, 0.02) 6px, rgba(0, 0, 0, 0.02) 12px); }
.badge.neutral { border-color: var(--el-border); background: var(--el-surface); color: var(--el-muted); }
.asset { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--el-border); border-radius: var(--el-radius-control); background: #fff; }
.asset .grow { flex: 1; min-width: 0; }
.asset .file { overflow: hidden; font-weight: 600; color: var(--el-navy); text-overflow: ellipsis; white-space: nowrap; }

/* forms ------------------------------------------------------------------- */
.form { display: grid; gap: 16px; max-width: 620px; }
.field label, .form label, .field .field-label { display: block; margin-bottom: 6px; color: var(--el-navy); font-weight: 600; }
/* A value the form states rather than collects: the address a reset belongs to comes from the link,
   and the broker checks it together with the token, so the page shows it and carries it in a hidden
   field (owner's report, 2026-10-24). */
.field .field-value { margin: 0; color: var(--el-navy); font-weight: 600; overflow-wrap: anywhere; }
/* A box is not a text field, and this is the one place that decides it. The width, the padding and the
   control height belong to the inputs that take typing, so every rule handing them out excludes the
   box and button types - a checkbox or a radio that a page forgot to wrap in `.check` keeps its own
   size instead of inheriting a text field's 100 % width and 44 px height (owner's report, 2026-09-18,
   and again 2026-10-12 when the back office's operations page grew a giant square). A new surface
   inherits the standard here rather than rediscovering the trap. */
.field :where(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"])), .form :where(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"]), select, textarea), .field select, .field textarea, .docs-sidebar-search-row input { width: 100%; min-height: var(--el-control-min-height); padding: 10px 12px; border: 1px solid var(--el-border); border-radius: var(--el-radius-control); background: #fff; color: inherit; font: inherit; }
/* The other half of the same standard, and the one rule the whole site shares: a box takes its own
   size and the site's accent colour wherever it appears - inside a field, inside a form, inside a
   consent list, or on a surface nobody has written yet. It beats the field rule above on specificity
   (an attribute selector counts), so no future container can turn it back into a giant square. The
   label owns the row (`.check`). */
input[type="checkbox"], input[type="radio"] { width: 1rem; height: 1rem; min-height: 0; padding: 0; margin: 0; flex: 0 0 auto; accent-color: var(--el-blue); }
.field .hint { margin-top: 5px; color: var(--el-muted); font-size: 0.8125rem; }
/* A tip on the label's own line: smaller and lighter than the label, but not a second block. */
.field label .hint { display: inline; margin: 0 0 0 8px; font-weight: 400; }
/* The tip beside the Message label carries the size, weight and colour of the sign-in page's "Keep me
   signed in on this device" line (`.check`: 0.9375rem, 400, navy), not the muted caption the other
   hints use (owner's request, 2026-10-26). */
.field .message-tip { display: inline; margin: 0 0 0 8px; color: var(--el-navy); font-size: 0.9375rem; font-weight: 400; }

/* account area ------------------------------------------------------------ */
.accountnav { display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: 20px; border-bottom: 1px solid var(--el-border); }
.accountnav a { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 0; border-bottom: 2px solid transparent; color: var(--el-navy); font-weight: 600; text-decoration: none; }
.accountnav a[aria-current="page"] { border-bottom-color: var(--el-blue); color: var(--el-blue); }
.settingsnav { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 12px; font-size: .875rem; }
.settingsnav a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 4px; }
.settingsnav a[aria-current="page"] { color: var(--el-navy); font-weight: 700; text-decoration-thickness: 2px; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { padding: 20px; border: 1px solid var(--el-border); border-radius: var(--el-radius-panel); background: #fff; }
/* The consent card ends with its boxes, and a `.check` row already carries the space its label needs
   above and below the text: the card's own bottom padding would add a second gap under the last one. */
.card.notices { padding-bottom: 0; }
.card .k { color: var(--el-muted); font-size: 0.8125rem; }
.card .v { margin-top: 4px; color: var(--el-navy); font-family: var(--el-font-mono); font-size: 1.375rem; font-weight: 700; }

/* footer ------------------------------------------------------------------ */
footer.site { padding: 44px 0 28px; background: var(--el-navy); color: #c8d6ea; font-size: 0.9375rem; }
footer.site .cols { display: grid; grid-template-columns: minmax(240px, 1.6fr) repeat(4, minmax(120px, 1fr)); gap: 32px 48px; margin-bottom: 32px; }
footer.site .cols > * { min-width: 0; max-width: 100%; }
footer.site strong { display: block; margin-bottom: 8px; color: #fff; }
footer.site a { color: #c8d6ea; text-decoration: none; }
footer.site a:hover { color: #fff; }
.footer-identity { display: grid; align-content: start; gap: 14px; max-width: 34ch; }
.footer-wordmark { color: #fff !important; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
.footer-legal { padding-top: 20px; border-top: 1px solid rgb(203 220 240 / 24%); }
.footer-links { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.footer-links li { min-width: 0; }
.footer-links .signout button { min-height: 44px; padding: 0; color: inherit; }

/* responsive -------------------------------------------------------------- */
@media (max-width: 1279px) {
  header.site .wrap { position: relative; flex-wrap: nowrap; gap: 16px; min-height: 0; padding-top: 8px; padding-bottom: 8px; }
  header.site .brand { flex: 0 1 auto; }
  header.site .brand img { width: auto; height: 52px; }
  nav.main.main-desktop { display: none; }
  .primary-menu { display: block; flex: none; margin-left: auto; }
  .primary-menu > summary { display: flex; }
  .primary-menu > nav.main {
    position: absolute;
    top: 100%;
    right: var(--el-page-padding);
    left: var(--el-page-padding);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 20px;
    padding: 12px;
    border: 1px solid var(--el-border);
    border-radius: 0 0 var(--el-radius-panel) var(--el-radius-panel);
    background: var(--el-white);
    box-shadow: var(--el-report-shadow);
  }
  .primary-menu nav.main a,
  .primary-menu nav.main .login { min-height: 48px; padding: 10px 12px; overflow-wrap: anywhere; }
  .primary-menu nav.main .login { border-left: 0; }
  .primary-menu nav.main button.login { width: 100%; text-align: left; }
  .primary-menu nav.main .account-menu { grid-column: 1 / -1; }
  .account-menu { width: 100%; }
  .account-menu > summary { width: 100%; max-width: none; min-height: 48px; padding: 10px 12px; }
  .account-menu > nav.main { position: static; min-width: 0; margin-top: 4px; padding: 0; border: 0; box-shadow: none; }
  .account-menu > nav.main a,
  .account-menu > nav.main button { min-height: 48px; padding: 10px 12px; }
}
@media (max-width: 1199px) {
  .split { grid-template-columns: 1fr; }
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  :root { --el-body-size: 16px; --el-header-height: 60px; }
  header.site .brand img { height: 40px; }
  .accountnav { gap: 0 16px; }
  .accountnav a { flex: 1 1 120px; }
  .cards { grid-template-columns: 1fr; }
  .item { grid-template-columns: 40px 1fr; }
}
@media (max-width: 399px) {
  .primary-menu > nav.main { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  :root { --el-transition: 0ms; }
}


/* Utilities used by the templates ------------------------------------------------------------- */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 10; padding: 12px 16px; background: var(--el-navy); color: #fff; text-decoration: none; }
.skip-link:focus { left: 0; }
.d-block { display: block; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Authentication pages ------------------------------------------------------------------------- */
.auth { padding: 56px 0 72px; }
.auth-card { max-width: 520px; margin: 0 auto; padding: 28px; border: 1px solid var(--el-border); border-radius: var(--el-radius-panel); background: var(--el-white); }
/* The sign-in and registration cards take the blue-topped panel of the trial download box, with its
   tinted ground, so the card reads as a panel of the page rather than as a white form on white
   (owner's request, 2026-10-24). The other credential pages keep the plain card. */
.auth-card.accent { border-top: 4px solid var(--el-blue); background: var(--el-surface); }
.auth-card h1 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
/* The purchase review uses the authentication card. Its title is the offer line, not a page hero:
   one row at the card's width, with the price and notes separated by blank lines. */
.auth-card .review-title { font-size: clamp(1rem, 2.2vw, 1.2rem); line-height: 1.3; }
.review-seats { display: inline-flex; align-items: center; gap: 6px; }
.review-card .review-upgrade, .review-card .review-form { padding-top: 20px; border-top: 1px solid var(--el-border); }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 0.9375rem; }
/* A group of boxes reads as one wrapped set rather than a tall column: the lookup's category filter
   is a handful of choices in one box of its own. Each box keeps the site's own touch height and the
   site-wide size rule; only the arrangement changes. */
.check-set { display: flex; flex-wrap: wrap; gap: 0 20px; }
/* The box's own size and accent colour come from the site-wide standard in the form section above;
   here the label owns the row, so a consent line reads as one line with the box beside its text. */
.field label.check, .form label.check { display: flex; font-weight: 400; }
/* A password field owns its reveal control: the icon button sits inside the field's right edge, so
   the control reads as part of the input rather than as a stray button under it, and the input keeps
   its text clear of it. The visible name is the icon; the accessible name is the hidden span. */
.password-control { position: relative; }
.password-control input { padding-right: 52px; }
.password-toggle { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--el-radius-control); background: transparent; color: var(--el-muted); cursor: pointer; }
.password-toggle:hover { color: var(--el-navy); background: var(--el-surface); }
.password-toggle:focus-visible { outline: 2px solid var(--el-blue); outline-offset: 2px; }
.password-toggle .icon-eye-off { display: none; }
.password-toggle[aria-pressed="true"] .icon-eye { display: none; }
.password-toggle[aria-pressed="true"] .icon-eye-off { display: inline; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.field .error { margin-top: 5px; color: var(--el-error); font-size: 0.8125rem; }
/* Three-line messages (context / what happened / ways out) keep their line breaks wherever they are
   rendered: the strings carry the newlines, and the surfaces only say so (ELX-SITE.md decision 75). */
.message-lines { white-space: pre-line; }
.note { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--el-ok-border); border-radius: var(--el-radius-control); background: var(--el-ok-surface); font-size: 0.9375rem; }
.note.error { border-color: #f0c8c8; background: var(--el-error-surface); color: var(--el-error); }

/* The provider buttons under the password form (ELX-SITE.md decision 83): the e-mail form stays the
   primary way in, "or" separates the alternative, and each button is the ordinary outline control
   with its provider mark. The rule is the divider's own hairline, drawn across the whole card.
   The label is the form's weight, not the control's (owner's report, 2026-10-11: at 700 the two
   labels read heavier than the fields above them), and the mark is the provider's own - the brand
   colours are the markup's, so nothing here repaints them. */
.social-divider { display: flex; align-items: center; gap: 12px; color: var(--el-muted); font-size: 0.875rem; text-transform: uppercase; letter-spacing: var(--el-label-tracking); }
.social-divider::before, .social-divider::after { content: ""; flex: 1; border-top: 1px solid var(--el-border); }
.social-buttons { display: grid; gap: 10px; margin-top: 12px; }
.social-btn { width: 100%; font-weight: 400; }
.social-btn svg { flex: 0 0 auto; }

/* Account area --------------------------------------------------------------------------------- */
.page-title { font-size: var(--el-page-title-size); }
.h3 { font-size: 1.125rem; font-weight: 700; }
.empty { max-width: 640px; padding: 28px; border: 1px dashed var(--el-border); border-radius: var(--el-radius-panel); background: var(--el-surface); }
.empty p { margin-top: 8px; }

/* A license on the overview is a block of its own, in the language the Buy Now editions use: the
   owner asked for the same frame and the same blue top border (2026-10-13). */
.license-card { padding: 22px; border-top: 4px solid var(--el-blue); }
@media (max-width: 767px) { .license-card { padding: 16px 12px; } }
/* The state badges are a two-line box against the card's right edge, their first line on the
   heading's line (owner's request, 2026-10-20). "Earlier license", when it applies, sits above the
   maintenance badge, both the same width (owner's request, 2026-10-21). The stack is taken out of
   the flow, so the heading alone sets the head's height; the heading reserves the badge column. A
   phone puts the badges back in the flow and lets them wrap under the title, which keeps the
   heading readable at 390 px. */
.license-card-head { position: relative; }
.license-card-head .h3 { min-width: 0; padding-right: 9rem; text-wrap: balance; }
.license-card-head .license-card-badges { position: absolute; top: 0; right: 0; display: grid; gap: 4px; width: 8rem; }
.license-card-head .license-card-badges .badge { width: 100%; justify-content: center; margin: 0; padding-block: 2px; line-height: 1.2; text-align: center; }
/* The seat count is a line of its own, between the heading and the maintenance window, at a size
   between the two (owner's request, 2026-10-20); the people icon is one em, so it grows with the
   text and shares its colour. */
.license-seats { display: flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--el-navy); font-size: 1rem; }
.license-seats-icon { flex: none; width: 1em; height: 1em; }
@media (max-width: 767px) {
    .license-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }
    .license-card-head .h3 { padding-right: 0; }
    .license-card-head .license-card-badges { position: static; flex: none; margin-left: auto; }
}
/* The license list is a table of boxes: one bordered, rounded card per license, separated by a gap
   instead of ruled lines (owner's request, 2026-10-21). The license column carries the overview's
   title and window; Maintenance holds only its badge, and Installers only the version number, both
   centred in the narrower tracks. */
table.data.license-list { border-collapse: separate; border-spacing: 0 14px; table-layout: fixed; background: transparent; }
table.data.license-list th { border-bottom: 0; }
table.data.license-list th:nth-child(1) { width: 50%; }
table.data.license-list th:nth-child(2) { width: 14%; }
table.data.license-list th:nth-child(3) { width: 10%; }
table.data.license-list th:nth-child(4) { width: 26%; }
table.data.license-list--staff th:nth-child(1) { width: 52%; }
table.data.license-list--staff th:nth-child(2) { width: 16%; }
table.data.license-list--staff th:nth-child(3) { width: 12%; }
table.data.license-list--staff th:nth-child(4) { width: 20%; }
table.data.license-list th:nth-child(2), table.data.license-list th:nth-child(3) { text-align: center; }
table.data.license-list td { padding: 16px; background: var(--el-white); border-top: 1px solid var(--el-border); border-bottom: 1px solid var(--el-border); }
table.data.license-list tbody td:first-child { border-left: 1px solid var(--el-border); border-radius: var(--el-radius-panel) 0 0 var(--el-radius-panel); }
table.data.license-list tbody td:last-child { border-right: 1px solid var(--el-border); border-radius: 0 var(--el-radius-panel) var(--el-radius-panel) 0; }
table.data.license-list tr:last-child td { border-bottom: 1px solid var(--el-border); }
.license-flag { margin: 0 0 6px; }
.license-maintenance, .license-installers { text-align: center; }
.license-maintenance .badge { justify-content: center; line-height: 1.2; text-align: center; }
.license-list .license-tree { margin: 10px 0 0; }
/* Below the desktop width the four tracks are too narrow for the build number and the actions, so
   the list takes the responsive card shape the phone uses, from the tablet width down. */
@media (max-width: 1023px) {
    .table-scroll table.data.license-list { min-width: 0; }
    table.data.license-list { border-spacing: 0; table-layout: auto; }
    table.data.license-list thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
    table.data.license-list tbody, table.data.license-list tbody tr { display: block; }
    table.data.license-list td { display: block; text-align: left; overflow-wrap: anywhere; }
    table.data.license-list td[data-label]::before { content: attr(data-label); display: block; color: var(--el-muted); font: 600 .75rem var(--el-font-sans); }
    table.data.license-list .btn { max-width: 100%; white-space: normal; }
    /* The box stays, around the block the row becomes. */
    table.data.license-list tbody tr { width: 100%; padding: 16px; border: 1px solid var(--el-border); border-radius: var(--el-radius-panel); background: var(--el-white); }
    table.data.license-list tbody tr + tr { margin-top: 14px; }
    table.data.license-list tbody tr td, table.data.license-list tbody tr td:first-child, table.data.license-list tbody tr td:last-child { padding: 4px 0; border: 0; border-radius: 0; background: transparent; }
    table.data.license-list .license-maintenance, table.data.license-list .license-installers { text-align: left; }
    table.data.license-list .license-maintenance .badge { justify-content: flex-start; }
}

/* The account page title carries the one action about a license the customer does not own yet:
   buying a new one, as against renewing or upgrading the licenses listed below (owner's request,
   2026-10-13). */
.account-intro { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; }
.account-intro .btn { flex: none; }
/* Every action in the block fills it and stands on its own row (owner's request, 2026-10-13) - the
   installer download, the renewal, the upgrades, the installation file and the catalogue link alike,
   so the column reads as one line per action instead of a ragged row. */
.license-card .form-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
.license-card .form-actions > *, .license-card .form-actions .btn { width: 100%; }
/* An upgrade is a purchase of its own, so it sits in a tinted sub-box inside the license card
   (owner's request, 2026-10-21): the renewal and the upgrade never read as one block. */
.consolidation { margin-top: 16px; padding: 14px; border: 1px solid var(--el-border); border-radius: var(--el-radius-control); background: var(--el-surface); }
.consolidation-title { margin: 0; }
/* The consumed licenses are a list, one line each, with the id kept in the form rather than read. */
.consolidation .consume-list { margin: 6px 0 0; padding-left: 20px; }
.consolidation .consume-list li { margin-top: 2px; }

.download-group { margin-top: 32px; }
.download-group h2 { display: flex; align-items: baseline; gap: 10px; }
table.data td.actions { display: flex; flex-wrap: wrap; gap: 10px; }

.account-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
@media (max-width: 900px) { .account-columns { grid-template-columns: 1fr; } }
.legend { padding: 0; margin-bottom: 8px; color: var(--el-navy); font-weight: 600; }
fieldset.field { border: 0; padding: 0; margin: 0; }

/* Marketing pages ------------------------------------------------------------------------------ */
.body { max-width: var(--el-reading-max); color: var(--el-text); }
.body p { margin-bottom: 14px; }
.release .badge, .news-item h2 { margin-left: 6px; }
.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.list { max-width: var(--el-reading-max); padding-left: 20px; }
.list li { margin-bottom: 8px; }
.news-article { max-width: var(--el-reading-max); }
.news-article-body { overflow-wrap: anywhere; }
.releases-page .release-filter { max-width: 620px; }
.search-summary { overflow-wrap: anywhere; }
.support-confirmation p { margin: 0; }
.support-confirmation p + p { margin-top: 6px; }
.reseller-directory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.reseller-country { min-width: 0; padding: 20px; border-top: 3px solid var(--el-blue); background: var(--el-surface); }
.reseller-country h3 { margin: 0; color: var(--el-navy); }
.reseller-list { margin: 16px 0 0; padding: 0; list-style: none; }
.reseller-card + .reseller-card { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--el-border); }
.reseller-card h4 { margin: 0; font-size: 1rem; }
.reseller-details { display: grid; gap: 12px; margin: 12px 0 0; }
.reseller-details > div { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 10px; }
.reseller-details dt { color: var(--el-muted); font-size: 0.8125rem; font-weight: 600; }
.reseller-details dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.reseller-details a { overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .reseller-directory { grid-template-columns: minmax(0, 1fr); }
  .reseller-country { padding: 18px; }
}

/* Pricing: choose coverage first, then compare the two editions at that exact price. */
.pricing-intro { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; }
.pricing-intro .page-title { font-size: clamp(34px, 3.4vw, 48px); }
.pricing-alternatives { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 0.875rem; }
.pricing-alternatives a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.pricing-step { margin-top: 24px; }
.pricing-step h2 { display: flex; align-items: center; gap: 12px; font-size: clamp(20px, 2vw, 26px); line-height: 1.2; }
.pricing-licenses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.pricing-license { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; min-height: 96px; padding: 16px; border: 1px solid var(--el-border); border-radius: var(--el-radius-control); color: var(--el-navy); font-weight: 600; text-align: center; text-decoration: none; transition: border-color var(--el-transition), background-color var(--el-transition); }
.pricing-license-detail { font-size: 0.875rem; font-weight: 400; line-height: 1.45; }
.pricing-license:hover { border-color: var(--el-blue); }
.pricing-license[aria-current="true"] { border-color: var(--el-blue); background: var(--el-surface); box-shadow: inset 0 0 0 1px var(--el-blue); }
.pricing-editions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 12px; }
.pricing-edition { display: flex; flex-direction: column; min-width: 0; padding: 22px; border-top: 4px solid var(--el-blue); }
.pricing-edition-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.pricing-edition h3 { margin-top: 6px; font-size: clamp(28px, 2.5vw, 34px); }
/* The source-code qualifier reads as body copy beside the edition name, not as part of the title. */
.pricing-edition-qualifier { color: var(--el-text); font-size: var(--el-body-size); font-weight: 400; letter-spacing: normal; }
.pricing-quote { margin: 12px 0; }
.pricing-price { margin-bottom: 6px; color: var(--el-navy); font-size: clamp(32px, 3.2vw, 44px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.pricing-comparison { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--el-border); }
/* The owner asked for this block to span the page (2026-09-29): its four items are license terms, not
   a paragraph, so the shared reading measure does not cap them. */
.pricing-comparison .list { max-width: none; }
.pricing-comparison h2 { font-size: 24px; }
.pricing-purchase { margin-top: auto; padding-top: 16px; }
.pricing-purchase .btn { width: 100%; padding-top: 10px; padding-bottom: 10px; }
.pricing-purchase > p { text-align: center; }
.pricing-reassurance { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 20px; font-size: 0.875rem; }
.pricing-reassurance strong { color: var(--el-navy); }
.pricing-details { display: grid; grid-template-columns: 1fr 2fr; align-items: start; gap: 64px; }
.pricing-details > *, .pricing-trial > * { min-width: 0; }
.disclosure { border-top: 1px solid var(--el-border); }
.disclosure:last-child { border-bottom: 1px solid var(--el-border); }
.disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 16px 0; color: var(--el-navy); font-weight: 600; cursor: pointer; list-style: none; }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::after { content: "+"; flex: none; color: var(--el-blue); font-size: 1.375rem; font-weight: 400; }
.disclosure[open] > summary::after { content: "\2212"; }
.disclosure > summary:hover { color: var(--el-blue); }
.disclosure .body { padding: 0 28px 8px 0; font-size: 1rem; }
.pricing-trial { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.pricing-trial > div { max-width: 65ch; }
.pricing-trial .btn { flex: none; }
#license-types { scroll-margin-top: 24px; }
@media (max-width: 1000px) {
  .pricing-intro { align-items: start; }
  .pricing-edition { padding: 22px; }
  .pricing-details { gap: 32px; }
  .pricing-trial { flex-wrap: wrap; gap: 24px; }
}
@media (max-width: 767px) {
  .pricing-intro { flex-direction: column; align-items: start; gap: 8px; }
  .pricing-details { grid-template-columns: minmax(0, 1fr); }
  .pricing-license { padding: 8px; font-size: 0.875rem; }
  .pricing-license-detail { font-size: 0.8125rem; }
  .pricing-step { margin-top: 20px; }
  .pricing-editions { gap: 12px; }
  .pricing-edition { padding: 16px 10px; }
  .pricing-edition h3 { font-size: clamp(18px, 4.6vw, 28px); }
  .pricing-edition .label { font-size: 12px; letter-spacing: 0.04em; }
  .pricing-edition .small, .pricing-quote > p:not(.pricing-price) { font-size: 0.8125rem; }
  .pricing-edition-qualifier { font-size: 0.8125rem; }
  .pricing-price { font-size: clamp(24px, 6.4vw, 36px); }
  .pricing-purchase .btn { padding: 10px 6px; font-size: 0.875rem; }
  .pricing-reassurance { gap: 12px; }
  .pricing-page .btn { max-width: 100%; text-align: center; }
}

/* Public downloads: the trial leads; file metadata stays secondary. */
.downloads-page .split > *, .downloads-page .cards > * { min-width: 0; }
.downloads-page .btn, .downloads-page .link-cta, .downloads-page .arrowlist a { max-width: 100%; overflow-wrap: anywhere; }
.downloads-page .btn { padding-top: 10px; padding-bottom: 10px; text-align: center; }
.download-trial { padding: clamp(24px, 3.33vw, 44px); border: 1px solid var(--el-border); border-top: 4px solid var(--el-blue); border-radius: var(--el-radius-panel); background: var(--el-surface); align-items: start; }
.download-terms { padding: 16px; border: 1px solid var(--el-border); border-radius: var(--el-radius-control); background: var(--el-white); }
.download-compatibility { padding-left: 24px; border-left: 1px solid var(--el-border); }
.download-package { display: flex; flex-direction: column; }
.download-package-file { margin-top: auto; }
.download-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 0; margin-bottom: 0; list-style: none; }
.download-meta li { overflow-wrap: anywhere; }
.download-files { margin: 0; padding: 0; list-style: none; }
.download-files > li { padding: 12px 0; border-bottom: 1px solid var(--el-border); }
.download-files .download-meta { margin-top: 0; }
@media (max-width: 1199px) {
  .download-trial { gap: 28px; }
  .download-compatibility { padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--el-border); }
}

/* Brand and product imagery -------------------------------------------------------------------- */
/* The logo is the official file, so only its size is set here: no redrawing, no recolouring. */
.brand img { display: block; height: 68px; width: auto; }
/* A logo keeps its own proportions inside the 102 x 34 box the row has always used: the vectors on
   the home strip are transparent and carry no inner frame, and the raster files still used by
   /customers are already 102 x 34. */
.clients img { display: block; max-width: min(102px, 100%); max-height: 34px; width: auto; height: auto; }
.shot { margin: 0; }
.shot img { display: block; width: auto; max-width: 100%; height: auto; border: 1px solid var(--el-border); border-radius: var(--el-radius-panel); background: var(--el-white); }
/* The caption must not decide the figure's intrinsic width: a long line of caption text is far wider
   than its screenshot, and a flex row that shares its deficit by intrinsic width would then zoom the
   two images by different factors. Contained, the caption lays out at the figure's width and wraps -
   the figure is the screenshot's own width, so the caption runs exactly under it.
   No reading-measure cap here: a caption that stops short of its image reads as a cut-off line. */
.shot figcaption { contain: inline-size; margin-top: 10px; color: var(--el-muted); font-size: 0.875rem; }

/* the developer book ------------------------------------------------------ */
/* The chapters are rendered Markdown, so the type is the content: headings take the site's own, code
   takes the code palette, and the measure is the one the rest of the site reads at. No scripts are
   involved anywhere in this area - the search is a form. */
.book { max-width: var(--el-reading-max); overflow-wrap: anywhere; }
.book h2 { margin: 38px 0 10px; font-size: 1.375rem; scroll-margin-top: 24px; }
.book h3, .book h4, .book h5, .book h6 { scroll-margin-top: 24px; }
.book h3 { margin: 26px 0 8px; font-size: 1.125rem; }
.book p, .book li { line-height: 1.65; }
.book p { margin: 10px 0; }
.book ul, .book ol { margin: 10px 0; padding-left: 22px; }
.book li { margin: 5px 0; }
.book a { color: var(--el-blue); }
.book code { padding: 1px 5px; border-radius: 4px; background: var(--el-surface); font-family: var(--el-font-mono); font-size: 0.875em; }
.book pre { margin: 14px 0; padding: 14px 16px; overflow-x: auto; border-radius: var(--el-radius-control); background: var(--el-code-bg); color: #e6eef7; font-family: var(--el-font-mono); font-size: 0.8125rem; line-height: 1.5; }
.book pre code { padding: 0; background: none; color: inherit; font-size: 1em; }

/* Delphi, coloured on the server (App\Docs\DelphiHighlighter) - the palette a Delphi developer already
   reads in the IDE and in VS Code, kept on the site's own code background. */
.book pre .tok-directive { color: #c586c0; }
.book pre .tok-comment { color: #6a9955; }
.book pre .tok-string { color: #ce9178; }
.book pre .tok-number { color: #b5cea8; }
.book pre .tok-keyword { color: #79c0ff; }
.book pre .tok-type { color: #4ec9b0; }
.book table { width: 100%; margin: 14px 0; border-collapse: collapse; font-size: 0.9375rem; }
.book th, .book td { padding: 8px 12px; border-bottom: 1px solid var(--el-border); text-align: left; vertical-align: top; }
.book th:first-child, .book td:first-child { min-width: 8rem; }
.book th { color: var(--el-muted); font-weight: 600; }
.book hr { margin: 30px 0; border: 0; border-top: 1px solid var(--el-border); }
.book blockquote { margin: 14px 0; padding-left: 14px; border-left: 3px solid var(--el-border); color: var(--el-muted); }
.bookcontents > summary { cursor: pointer; color: var(--el-navy); font-weight: 600; }
.bookcontents .label { margin-bottom: 4px; }
.book-contents, .on-this-page { max-width: var(--el-reading-max); }
.book-contents > summary, .on-this-page > summary { cursor: pointer; color: var(--el-navy); font-weight: 600; }
.book-contents .label { margin-bottom: 4px; }
.on-this-page { padding: 14px 18px; border: 1px solid var(--el-border); border-radius: var(--el-radius-panel); background: var(--el-surface); }
.on-this-page-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.on-this-page-list li { min-width: 0; overflow-wrap: anywhere; }
.on-this-page-level-3 { padding-left: 16px; }
.on-this-page-level-4 { padding-left: 32px; }
.on-this-page-level-5 { padding-left: 48px; }
.on-this-page-level-6 { padding-left: 64px; }
.doc-starting-points { max-width: var(--el-reading-max); padding: 20px; border: 1px solid var(--el-border); border-radius: var(--el-radius-panel); background: var(--el-surface); }
.doc-starting-point-list { display: grid; gap: 16px; }
.doc-starting-point { padding-top: 16px; border-top: 1px solid var(--el-border); }
.doc-starting-point:first-child { padding-top: 0; border-top: 0; }
.doc-starting-point > p { color: var(--el-navy); font-weight: 600; }
.search-result-content { min-width: 0; overflow-wrap: anywhere; }
.search-result-chapter { margin: 0 0 4px; }
.search-result-section { color: var(--el-muted); font-size: 0.8125rem; }
/* Two dialogs at one zoom. A figure keeps its screenshot's own pixel size when that fits, and when
   the row is shorter than the pair the space is shared in proportion to the two widths, so both
   images are scaled by the same factor: the simple dialog is genuinely the smaller dialog. Neither
   image is ever grown past its pixels - an upscaled screenshot is blurry. */
.gallery { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 28px; }
.shot { flex: 0 1 auto; min-width: 0; }
.shot img { width: auto; max-width: 100%; }
@media (max-width: 900px) { .gallery { flex-direction: column; align-items: stretch; } }

/* Staff actions: compact forms that sit inside a table cell, one per row. */
.actions-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 6px; }
.actions-inline input { padding: 4px 6px; font: inherit; }

/* Forms with several short fields on one line, as the back office uses. A fieldset is one of those
   fields: the kind filter is a group of boxes, and a group is what a fieldset means. */
.field-row { display: flex; flex-wrap: wrap; gap: 14px; }
.field-row > div, .field-row > fieldset { flex: 1 1 140px; }

/* The business fields are secondary at the payment step: closed, the disclosure reads as one line
   with its native marker; open, it reveals the two fields it promises. It works without JavaScript. */
.billing-more > summary { cursor: pointer; color: var(--el-navy); font-weight: 600; font-size: 0.9375rem; }

/* Sign-out is a POST, so it is a form; it has to read like the links it sits beside. */
form.signout { display: inline; margin: 0; }
form.signout button {
    background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer;
}

/* The back-office and maintenance pages use a narrower column. Defined here rather than renamed in
   five views: the class is what those pages mean, and the stylesheet is where a meaning becomes a
   look. */
.narrow { max-width: 880px; margin: 0 auto; }
.notice {
    margin: 18px 0; padding: 14px 16px; border-radius: var(--el-radius-control);
    background: var(--el-blue-pale, #eef4ff); border: 1px solid var(--el-border);
}
/* A notice that opens a card sits on the card's own padding: its outer margin would double the gap
   above the heading (measured on the failed-purchase page, 2026-10-28). */
.card > .notice:first-child { margin-top: 0; }

/* Private workspaces reuse public controls without the marketing page hierarchy. */
.account-shell, .staff-shell { --el-page-title-size: clamp(1.625rem, 3vw, 2.25rem); }
.staff-shell { font-size: 1rem; }
.staff-shell h1 { font-size: var(--el-page-title-size); }
.staff-shell h2 { font-size: 1.375rem; }
.staff-shell .lead { max-width: 75ch; font-size: 1rem; }
.staff-shell main { min-height: 65vh; }
/* The back office shell: a menu column that keeps its own place and its own scroll, and the work
   beside it scrolling with the page. The top cell carries the brand and the account, the bottom cell
   the session controls. */
.staff-layout { display: grid; grid-template-columns: 264px minmax(0, 1fr); align-items: start; transition: grid-template-columns .18s ease; }
.staff-sidebar {
    position: sticky; top: 0; z-index: 2; align-self: start;
    display: flex; flex-direction: column;
    width: 264px; height: 100vh; height: 100dvh;
    overflow: hidden;
    border-right: 1px solid var(--el-border); background: var(--el-surface);
    transition: width .18s ease, box-shadow .18s ease;
}
.staff-side-top { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--el-border); }
.staff-side-brand { flex: none; display: grid; place-items: center; width: 32px; height: 32px; }
.staff-side-brand img { display: block; width: 16px; height: 16px; }
.staff-side-name { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--el-navy); font-size: .875rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.staff-side-toggle { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--el-border); border-radius: var(--el-radius-control); background: var(--el-white); color: var(--el-navy); cursor: pointer; }
.staff-side-toggle:hover { border-color: var(--el-blue); color: var(--el-blue); }
.staff-side-toggle-expand { display: none; }
.staff-side-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 8px 16px; }
.staff-main { min-width: 0; }
.staff-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.staffnav { display: block; margin: 0; font-size: .9375rem; }
.staffnav-entry { margin-top: 2px; }
.staffnav-entry:first-child { margin-top: 0; }
/* The parent is a row of its own: icon, label and chevron, on the same left rule as its children. The
   children sit one step deeper, which is what makes the two levels readable at a glance. */
.staffnav-group { border-radius: var(--el-radius-panel); }
.staffnav-group > summary {
    display: flex; align-items: center; gap: 10px;
    min-height: 40px; padding: 8px 10px 8px 16px;
    border-left: 3px solid transparent; color: var(--el-navy); cursor: pointer; list-style: none;
}
.staffnav-group > summary::-webkit-details-marker { display: none; }
.staffnav-group > summary:hover { background: var(--el-white); color: var(--el-blue); }
.staffnav-icon { flex: none; display: block; color: var(--el-muted); }
.staffnav-group > summary:hover .staffnav-icon { color: var(--el-blue); }
.staffnav-label { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: .875rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.staffnav-chevron { flex: none; color: var(--el-muted); transform: rotate(-90deg); transition: transform var(--el-transition); }
.staffnav-group[open] > summary .staffnav-chevron { transform: rotate(0deg); }
/* The group of the page being read is one card: header and children together, lifted off the surface.
   The page inside it stays bold blue; the card says which group it belongs to. */
.staffnav-group[data-current] {
    margin: 4px 0 8px;
    background: var(--el-white); border-radius: var(--el-radius-panel); overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--el-border), 0 4px 14px rgba(7, 27, 77, .07);
}
.staffnav-group[data-current] > summary { border-left-color: transparent; background: transparent; }
.staffnav-group[data-current] > summary .staffnav-icon,
.staffnav-group[data-current] > summary .staffnav-chevron { color: var(--el-blue); }
.staffnav-group[data-current] > summary:focus-visible { outline-offset: -3px; }
.staffnav-group[data-current] .staffnav-list a:focus-visible { outline-offset: -3px; }
.staffnav-list { margin: 0; padding: 0; list-style: none; }
.staffnav-list a { display: flex; align-items: center; min-height: 36px; padding: 7px 12px 7px 56px; border-left: 3px solid transparent; color: var(--el-navy); font-size: .875rem; text-decoration: none; }
.staffnav-list a:hover { background: var(--el-white); color: var(--el-blue); }
.staffnav-list a[aria-current="page"] { border-left-color: transparent; background: transparent; color: var(--el-blue); font-weight: 700; }
/* A single page is not a group, and must not read as a member of the list above it: it gets the same
   top-level row as a group, with its icon and no chevron. When it is the current page it carries the
   same card as a selected group. */
.staffnav-single .staffnav-list a { gap: 10px; padding-left: 16px; font-weight: 600; }
.staffnav-single .staffnav-list a:hover .staffnav-icon { color: var(--el-blue); }
.staffnav-single .staffnav-list a[aria-current="page"] {
    background: var(--el-white); border-radius: var(--el-radius-panel); font-weight: 700;
    box-shadow: inset 0 0 0 1px var(--el-border), 0 4px 14px rgba(7, 27, 77, .07);
}
.staffnav-single .staffnav-list a[aria-current="page"] .staffnav-icon { color: var(--el-blue); }
.staff-side-bottom { flex: none; display: flex; flex-direction: column; gap: 2px; padding: 8px; border-top: 1px solid var(--el-border); }
.staff-side-bottom form { margin: 0; }
.staff-side-bottom a, .staff-side-bottom button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 6px 8px; border: 0; border-radius: var(--el-radius-control); background: none; color: var(--el-muted); font: inherit; font-size: .8125rem; text-align: left; text-decoration: none; cursor: pointer; }
.staff-side-bottom a:hover, .staff-side-bottom button:hover { background: var(--el-white); color: var(--el-blue); }
.staff-side-icon { flex: none; color: currentColor; }
/* The rail is the same menu at 72 px: only the icons, with the selected group lit by its icon and
   left rule. It does not open flyouts; hovering or focusing the rail widens it back over the work,
   with the full menu, and leaving it returns to the icons. The persisted state does not change. */
@media (min-width: 1100px) {
  html.staff-nav-collapsed .staff-layout { grid-template-columns: 72px minmax(0, 1fr); }
  html.staff-nav-collapsed .staff-sidebar { width: 72px; }
  html.staff-nav-collapsed.staff-nav-peek .staff-sidebar { width: 264px; z-index: 20; box-shadow: 4px 0 24px rgba(7, 27, 77, .14); }
  html.staff-nav-collapsed .staff-side-toggle-collapse { display: none; }
  html.staff-nav-collapsed .staff-side-toggle-expand { display: block; }
  html.staff-nav-collapsed:not(.staff-nav-peek) .staff-side-top { justify-content: center; padding: 10px 8px; }
  html.staff-nav-collapsed:not(.staff-nav-peek) .staff-side-brand,
  html.staff-nav-collapsed:not(.staff-nav-peek) .staff-side-name { display: none; }
  html.staff-nav-collapsed:not(.staff-nav-peek) .staff-side-scroll { padding: 10px 0 16px; }
  html.staff-nav-collapsed:not(.staff-nav-peek) .staffnav-group > summary { justify-content: center; min-height: 40px; padding: 8px 0; }
  html.staff-nav-collapsed:not(.staff-nav-peek) .staffnav-group > summary .staffnav-label,
  html.staff-nav-collapsed:not(.staff-nav-peek) .staffnav-single .staffnav-label,
  html.staff-nav-collapsed:not(.staff-nav-peek) .staff-side-link-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html.staff-nav-collapsed:not(.staff-nav-peek) .staffnav-chevron { display: none; }
  html.staff-nav-collapsed:not(.staff-nav-peek) .staffnav-list { display: none; }
  html.staff-nav-collapsed:not(.staff-nav-peek) .staffnav-single .staffnav-list { display: block; }
  html.staff-nav-collapsed:not(.staff-nav-peek) .staffnav-single .staffnav-list a { justify-content: center; min-height: 40px; padding: 8px 0; }
  html.staff-nav-collapsed:not(.staff-nav-peek) .staff-side-bottom a,
  html.staff-nav-collapsed:not(.staff-nav-peek) .staff-side-bottom button { justify-content: center; padding: 8px 0; }
  html.staff-nav-collapsed:not(.staff-nav-peek) .staffnav-group[data-current] { margin: 2px 0; background: none; box-shadow: none; overflow: visible; }
  html.staff-nav-collapsed:not(.staff-nav-peek) .staffnav-group[data-current] > summary { border-left-color: var(--el-blue); }
  html.staff-nav-collapsed:not(.staff-nav-peek) .staffnav-single .staffnav-list a[aria-current="page"] { background: none; box-shadow: none; border-radius: 0; border-left-color: var(--el-blue); }
}
.panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.panel-grid.license-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 767px) { .panel-grid.license-grid { grid-template-columns: 1fr; } }
.panel-grid > *, .detail-grid > * { min-width: 0; }
.detail-grid { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(0, 2fr); gap: 8px 24px; margin: 16px 0; }
.detail-grid dt { color: var(--el-muted); font-weight: 600; }
.detail-grid dd { margin: 0; overflow-wrap: anywhere; }
.staff-shell pre { max-width: 100%; overflow-x: auto; padding: 16px; border: 1px solid var(--el-border); background: var(--el-surface); font-size: .8125rem; }
.mail-preview { white-space: pre-wrap; overflow-wrap: anywhere; }
.view-as-banner { padding: 12px 0; border-bottom: 2px solid var(--el-orange); background: #fff6ee; color: var(--el-navy); }
.view-as-banner .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.view-as-banner p { margin: 0; }
.filter-form { max-width: none; margin: 20px 0; }
.filter-form .field-row { align-items: end; }
/* The actions are a fixed pair of controls, never a column: they take the width their two buttons
   need - a pair wrapping into two stacked lines is what a 140 px basis gave - while the fields on the
   row keep growing into the space that is left. */
.filter-form .field-row > .form-actions { flex: 0 0 auto; }

/* The builds filter is a panel of its own (owner's request, 2026-10-13): the blue-topped box the
   releases page uses, whose actions sit on a line of their own - the filter pair on the left, the
   two page links on the right, all four the same height because they are all `.btn`s. */
.builds-filter-actions { justify-content: space-between; }
.builds-filter-actions > * { display: flex; flex-wrap: wrap; gap: 14px; }

/* The kind filter is a disclosure, not a single-choice select: a filter is one kind or several, and
   a select cannot say that (owner's request, 2026-10-13). Closed, it reads as the control it
   replaces; open, the boxes come out as a panel over the page below, the way the releases caret and
   the header menu behave. Opening and closing it needs no JavaScript. */
.check-dropdown { position: relative; }
.check-dropdown > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    min-height: var(--el-control-min-height); padding: 10px 12px;
    border: 1px solid var(--el-border); border-radius: var(--el-radius-control);
    background: var(--el-white); cursor: pointer; list-style: none; overflow-wrap: anywhere;
}
.check-dropdown > summary::-webkit-details-marker { display: none; }
.check-dropdown > summary::after { content: "\25BE"; flex: none; color: var(--el-muted); font-size: 0.75rem; }
.check-dropdown[open] > summary { border-color: var(--el-blue); }
.check-dropdown[open] > summary::after { content: "\25B4"; }
.check-dropdown > .check-menu {
    position: absolute; z-index: 5; left: 0; right: 0; margin-top: 6px; padding: 2px 12px;
    border: 1px solid var(--el-border); border-radius: var(--el-radius-control);
    background: var(--el-white); box-shadow: var(--el-report-shadow);
}
.check-menu > .check { min-height: 40px; }

/* The back-office action form asks one question first and then the fields that answer needs. The
   radio is the state: `data-action` on a block lists the actions it belongs to (two actions share the
   destination block), and `:has()` turns the checked radio into the visible block. Only while a block
   is on screen does the browser validate or submit it as the operator expects; the fields of the
   actions nobody chose carry no `required` attribute - the server decides what each action needs
   (`CustomerActionsController`), so a hidden block can never block the form. Without `:has()` (or
   without the stylesheet) every block stays visible, which is the page's earlier behaviour and the
   readable fallback rather than a form whose fields cannot be reached. */
.choice-set { padding: 14px 16px 6px; border: 1px solid var(--el-border); border-radius: var(--el-radius-panel); background: var(--el-surface); }
.option { align-items: flex-start; }
.option .hint, .action-fields .hint, .choice-set .hint { display: block; margin-top: 2px; color: var(--el-muted); font-size: 0.8125rem; }
.action-fields { margin-top: 20px; border: 0; padding: 0; }
@supports selector(:has(*)) {
  .action-fields { display: none; }
  .action-form:has(input[name="action"][value="email"]:checked) .action-fields[data-action~="email"],
  .action-form:has(input[name="action"][value="merge"]:checked) .action-fields[data-action~="merge"],
  .action-form:has(input[name="action"][value="transfer"]:checked) .action-fields[data-action~="transfer"] { display: block; }
}
@media (max-width: 767px) {
  .account-shell .accountnav { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; font-size: .875rem; }
  .account-shell .accountnav a { padding: 8px 0; }
  .staff-shell .narrow { max-width: none; }
  .detail-grid { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .detail-grid dd { margin-bottom: 12px; }
  .table-scroll table.responsive { min-width: 0; }
  table.responsive thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
  table.responsive tbody, table.responsive tr { display: block; }
  table.responsive tr { padding: 12px 0; border-bottom: 1px solid var(--el-border); }
  table.responsive td, table.responsive td.actions, table.responsive td.num { display: block; padding: 6px 0; border: 0; text-align: left; overflow-wrap: anywhere; }
  table.responsive td[data-label]::before { content: attr(data-label); display: block; color: var(--el-muted); font: 600 .75rem var(--el-font-sans); }
  table.responsive .btn { max-width: 100%; white-space: normal; padding-top: 10px; padding-bottom: 10px; }
}
/* Public-page visual correction --------------------------------------------------------------- */

.page-hero, .docs-index-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
    gap: clamp(32px, 6vw, 88px);
    align-items: stretch;
}
.page-hero > * { min-width: 0; }
.page-hero-copy { align-self: start; }
.page-hero-panel {
    padding: clamp(24px, 3vw, 36px);
    border: 1px solid var(--el-border);
    border-top: 4px solid var(--el-blue);
    border-radius: var(--el-radius-panel);
    background: var(--el-surface);
}
.page-hero-panel h2 { font-size: clamp(22px, 2vw, 30px); }
.page-hero-panel .list { max-width: none; }

/* The support page is one centered column, like sign-in and registration: the copy above the form and
   the form itself share the same measure, and the aside that used to fill the right side is gone
   (owner's request, 2026-10-26). */
.support-page { max-width: 700px; margin: 0 auto; }
/* The column has no side panel, so the hero is one column: the page-hero grid would otherwise keep the
   copy in its 1.12fr track and wrap every line at a third of the measure. */
.support-page .page-hero { display: block; }
.support-form-panel {
    padding: clamp(24px, 3vw, 36px);
    border: 1px solid var(--el-border);
    border-top: 4px solid var(--el-blue);
    border-radius: var(--el-radius-panel);
    /* The same surface the sign-in and registration cards use (`.auth-card.accent`), so the two
       centred forms read as the same kind of page. */
    background: var(--el-surface);
}
.support-form-panel .form { max-width: none; }
/* The policy note sits above the form inside the panel. It carried a top margin but none at the
   bottom, so the first field's label touched its border (owner's report, 2026-11-04). */
.support-policy-summary { margin-bottom: 24px; }
/* The version block opens and closes with the topic: its height and opacity animate, and the script
   sets `hidden` only when the collapse is over, so the fields leave the tab order while out of sight.
   Reduced motion gets the jump cut on purpose (owner's request, 2026-10-26).
   The clip that makes the collapse readable cuts at the padding box, and the focus ring of the
   leftmost field (3 px outline, 3 px offset) fell outside it and lost its left side at the block's
   edge (owner's report, 2026-10-31). The inline padding moves the clip out by the ring's own width
   and the equal negative margin puts the fields back on the form's own column, so the animation and
   the alignment stay as they were. */
.support-versions { padding-inline: 8px; margin-inline: -8px; overflow: hidden; transition: height .28s ease, opacity .2s ease; }
@media (prefers-reduced-motion: reduce) {
    .support-versions { transition: none; }
}

.reseller-directory-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 12px 32px;
}
.reseller-directory-heading > p { max-width: 72ch; }
.reseller-index {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
    padding: 16px;
    border: 1px solid var(--el-border);
    border-radius: var(--el-radius-control);
    background: var(--el-surface);
}
.reseller-index a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 6px 12px;
    border: 1px solid var(--el-border);
    border-radius: 999px;
    background: var(--el-white);
    color: var(--el-navy);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}
.reseller-index a:hover { border-color: var(--el-blue); color: var(--el-blue); }
.reseller-directory { align-items: stretch; }
.reseller-country {
    border-radius: var(--el-radius-panel);
    box-shadow: 0 8px 20px rgb(7 27 77 / 5%);
}

.docs-index-hero, .docs-index-columns { align-items: start; }
.docs-index-rail {
    display: grid;
    gap: 16px;
    align-content: start;
    padding: 20px;
}
.docs-index-rail .label { margin-bottom: -8px; }
.docs-index-rail ul { margin: 0; padding-left: 20px; }
.docs-index-rail li + li { margin-top: 10px; }
.docs-index-columns .doc-starting-points { max-width: none; }
.docs-chapter-list { min-width: 0; }
.docs-chapter-list h2:first-child { margin-top: 0; }

.docs-chapter-layout {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: start;
}
.docs-sidebar {
    position: sticky;
    top: 24px;
    display: grid;
    gap: 18px;
    align-self: start;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding-right: 4px;
}
.docs-sidebar-search { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--el-border); border-radius: var(--el-radius-panel); background: var(--el-white); }
.docs-sidebar-search label,
.docs-sidebar-heading { color: var(--el-navy); font-size: 0.9375rem; font-weight: 700; }
.docs-sidebar-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.docs-sidebar-search-row input { min-width: 0; }
.docs-sidebar-search-row .btn { padding-right: 14px; padding-left: 14px; }
.docs-sidebar-desktop { display: grid; gap: 14px; }
.docs-sidebar-mobile { display: none; }
.docs-nav-panel {
    padding: 16px;
    border: 1px solid var(--el-border);
    border-radius: var(--el-radius-panel);
    background: var(--el-white);
}
.docs-sidebar .book-contents,
.docs-sidebar .on-this-page { max-width: none; }
.docs-sidebar .on-this-page { padding: 16px; }
.docs-breadcrumb { display: flex; flex-wrap: wrap; gap: 6px 9px; color: var(--el-muted); font-size: 0.875rem; }
.docs-breadcrumb a { color: var(--el-blue); }
.docs-chapter-title {
    max-width: 24ch;
    font-size: clamp(2rem, 3.5vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
}
.docs-chapter-main { min-width: 0; max-width: 820px; }
.docs-chapter-main .book { max-width: 78ch; }
.docs-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.docs-pagination .btn { max-width: 100%; white-space: normal; text-align: left; }
.docs-pagination-top { margin: 24px 0 32px; padding-bottom: 20px; border-bottom: 1px solid var(--el-border); }
.docs-pagination-bottom { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--el-border); }
.release-hero { align-items: start; }
.release-filter-panel,
.builds-filter-panel {
    padding: clamp(24px, 3vw, 32px);
    border: 1px solid var(--el-border);
    border-top: 4px solid var(--el-blue);
    border-radius: var(--el-radius-panel);
    background: var(--el-surface);
}
/* The panel's own padding is the form's margin: the box is the only thing around it. */
.builds-filter-panel .filter-form { margin: 0; }
/* The Kind field's label is a legend over a fieldset, and `.legend` carries 8 px where every sibling
   label carries 6: inside this panel the two are levelled, so the three controls on the row line up
   with each other to the pixel (owner's report, 2026-10-13). */
.builds-filter-panel legend { margin-bottom: 6px; }
.releases-page .release-filter { max-width: none; margin-top: 0; }
.release-history { margin-top: 48px; }

.customers-hero { align-items: start; }
.customers-proof {
    padding: clamp(24px, 3vw, 36px);
    border: 1px solid var(--el-border);
    border-top: 4px solid var(--el-blue);
    border-radius: var(--el-radius-panel);
    background: var(--el-surface);
}
.customers-proof h2 { font-size: clamp(22px, 2vw, 30px); }
.customers-proof .list { max-width: none; margin-bottom: 0; }
.customer-quote { margin: 0; }

.news-hero { align-items: start; }
.news-empty { max-width: none; height: 100%; }
.news-list { max-width: 900px; margin: 48px auto 0; }
.news-list .news-item {
    padding: 24px 0;
    border-top: 1px solid var(--el-border);
}
.news-list .news-item:first-child { padding-top: 0; border-top: 0; }
.news-list .news-item h2 { margin-left: 0; }

/* Video tutorials (owner's decision 79): the five classic recordings, one player each, 800x600
   native and scaled down to the column; the files come from the release itself. */
.videos-list { max-width: 900px; }
.video-item { padding: 32px 0; border-top: 1px solid var(--el-border); }
.video-item:first-child { padding-top: 0; border-top: 0; }
.video-item video {
    display: block;
    width: 100%;
    max-width: 800px;
    height: auto;
    border: 1px solid var(--el-border);
    border-radius: var(--el-radius-panel);
    background: var(--el-surface);
}
.video-copy { margin-top: 16px; max-width: 68ch; }

/* The intro column carries the section's headline and its own call to action as free text: it was a
   bordered surface holding a title, one line and a link, and the border drew more attention than
   the three words inside it (owner's report, 2026-10-27). */
.home-proof { align-items: start; row-gap: 32px; }
/* The differentiators sit in one line under the two columns, spanning both: the claims a buyer
   weighs against an alternative, separated from the steps above by a rule so they do not read as a
   fourth step (owner's request, 2026-10-27). */
.home-differentiators {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 28px;
    margin: 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--el-border);
    list-style: none;
    color: var(--el-navy);
    font-size: 0.9375rem;
    font-weight: 600;
}
.home-differentiators li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: baseline; }
.home-differentiators li::before { content: "\2713"; font-family: var(--el-font-mono); font-weight: 700; line-height: 1; color: var(--el-blue); }
@media (max-width: 1000px) { .home-differentiators { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .home-differentiators { grid-template-columns: minmax(0, 1fr); } }
/* Developer voices: the two quotes share the row, half each. The generic three-column card grid put
   the first quote in a third of the width and left the section taller than half a screen, mostly
   empty space (owner's report, 2026-09-28). The type stays as it is; the cards stretch and the
   attribution sits on the pair's own baseline. */
.home-testimonials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-testimonials .card { display: flex; flex-direction: column; margin: 0; }
.home-testimonials figcaption { margin-top: auto; padding-top: 12px; }
@media (max-width: 767px) { .home-testimonials { grid-template-columns: minmax(0, 1fr); } }
.product-overview { align-items: stretch; }
.product-next-step {
    height: 100%;
    padding: clamp(24px, 3vw, 40px);
    border: 1px solid var(--el-border);
    border-top: 4px solid var(--el-blue);
    border-radius: var(--el-radius-panel);
    background: var(--el-surface);
}
.pricing-edition { min-height: 100%; }

@media (max-width: 1100px) {
    .clients-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .clients-grid > .small { grid-column: 1 / -1; }
    .compatibility-strip .wrap { grid-template-columns: minmax(0, 1fr) auto; }
    .compatibility-strip .wrap > div { grid-column: 1 / -1; }
    .home-next-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-resource-list { grid-column: 1 / -1; padding: 20px 0 0; border-top: 1px solid var(--el-border); border-left: 0; }
}

@media (max-width: 1000px) {
    footer.site .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-identity { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
    .page-hero,
    .docs-index-columns,
    .docs-chapter-layout { grid-template-columns: minmax(0, 1fr); }
    .docs-sidebar { position: static; max-height: none; overflow: visible; padding-right: 0; }
    .docs-sidebar-desktop { display: none; }
    .docs-sidebar-mobile { display: grid; gap: 14px; }
    .docs-sidebar-mobile .book-contents,
    .docs-sidebar-mobile .on-this-page { padding: 14px 18px; border: 1px solid var(--el-border); border-radius: var(--el-radius-panel); background: var(--el-surface); }
    .docs-chapter-main { max-width: none; }
    .docs-chapter-title { max-width: none; }
    .docs-index-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .docs-index-rail .label { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
    .page-hero { gap: 24px; }
    .docs-index-rail { grid-template-columns: minmax(0, 1fr); }
    .docs-index-rail .label { grid-column: auto; }
    .support-form-panel,
    .page-hero-panel,
    .customers-proof,
    .release-filter-panel { padding: 24px 20px; }
    .reseller-directory-heading { display: block; }
    .reseller-directory-heading > p { margin-top: 12px; }
    .release-history { margin-top: 32px; }
    .news-list { margin-top: 32px; }
}
@media (max-width: 600px) {
    .clients-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .compatibility-strip .wrap,
    .home-next-grid { grid-template-columns: minmax(0, 1fr); }
    .compatibility-strip .wrap > div { grid-column: auto; }
    .compatibility-strip .link-cta { justify-self: start; }
    .docs-pagination .btn,
    .docs-pagination .link-cta { width: 100%; }
    footer.site .cols { grid-template-columns: minmax(0, 1fr); }
    .footer-identity { grid-column: auto; }
}
.mt-48 { margin-top: 48px; }
.mb-24 { margin-bottom: 24px; }
.release-history .empty { max-width: 760px; margin-right: auto; margin-left: auto; }
.page-compact { max-width: 520px; }
.page-narrow { max-width: 640px; }
.content-width-small { max-width: 420px; }
.content-width-medium { max-width: 520px; }

/* License families and order groups ------------------------------------------------------------ */
/* A license chain is a linear hierarchy: the license a customer holds today anchors the row, and the
   licenses it replaced fold underneath it. Native <details>/<summary>, like the release history, so
   nothing here needs JavaScript and the printed page keeps whatever the reader opened. */

.license-tree { margin-bottom: 8px; }
.license-tree > summary {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 32px; padding: 4px 10px;
    border: 1px solid var(--el-border); border-radius: var(--el-radius-control);
    background: var(--el-surface); color: var(--el-muted);
    font-size: 0.8125rem; font-weight: 600; cursor: pointer; list-style: none;
}
.license-tree > summary::-webkit-details-marker { display: none; }
.license-tree > summary::after { content: "+"; font-family: var(--el-font-mono); font-weight: 700; }
.license-tree[open] > summary::after { content: "\2212"; }
.license-tree > summary:hover { border-color: var(--el-blue); color: var(--el-blue); }
.license-tree-list { display: grid; gap: 2px; margin: 8px 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--el-border); list-style: none; }
.license-tree-list li { padding: 6px 0; font-size: 0.9375rem; }
.license-tree-list a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; color: inherit; text-decoration: none; }
.license-tree-list a:hover .license-tree-label { color: var(--el-blue); }
.license-tree-label { font-weight: 600; }
.license-tree-list .badge { font-size: 0.75rem; }
.license-tree-folded { color: var(--el-muted); font-size: 0.8125rem; }

.order-groups { display: grid; gap: 16px; }
.order-group { border: 1px solid var(--el-border); border-radius: var(--el-radius-panel); background: #fff; }
.order-group > summary {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
    min-height: 44px; padding: 14px 16px;
    cursor: pointer; list-style: none;
}
.order-group > summary::-webkit-details-marker { display: none; }
.order-group > summary::after { content: "\25BE"; margin-left: auto; color: var(--el-muted); font-size: 0.75rem; }
.order-group[open] > summary::after { content: "\25B4"; }
.order-group > summary:hover .order-group-heading strong { color: var(--el-blue); }
.order-group-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.order-group-meta { color: var(--el-muted); font-size: 0.8125rem; }
.order-group > .table-scroll { padding: 0 16px 16px; }
.order-group table.data { margin-top: 0; }

/* One column below the sidebar's width: the menu becomes a strip above the work rather than a column
   beside it, and its groups run across so the page is not pushed a screen down before it begins. */
@media (max-width: 1099px) {
  .staff-layout { grid-template-columns: minmax(0, 1fr); }
  .staff-sidebar { position: static; width: 100%; height: auto; overflow: visible; border-right: 0; border-bottom: 1px solid var(--el-border); }
  .staff-side-top { padding: 10px 16px; }
  .staff-side-toggle { display: none; }
  .staff-side-scroll { overflow: visible; padding: 6px 16px 12px; }
  .staffnav { display: flex; flex-wrap: wrap; gap: 4px 32px; }
  /* One entry per line: with entries of different widths the wrap put a single link beside the next
     group's heading, and the link then read as a member of that group. Vertical order is unambiguous. */
  .staffnav-entry { flex: 1 1 100%; margin-top: 4px; }
  .staffnav-group > summary { min-height: 40px; padding: 6px 0; border-left: 0; }
  .staffnav-group[data-current] { margin: 4px 0; background: transparent; box-shadow: none; overflow: visible; }
  .staffnav-group[data-current] > summary { border-left-color: transparent; background: transparent; color: var(--el-blue); }
  .staffnav-single { margin-top: 4px; }
  .staffnav-list { display: flex; flex-wrap: wrap; gap: 0 18px; }
  .staffnav-list a { padding: 8px 0; border-left: 0; border-bottom: 2px solid transparent; }
  .staffnav-list a[aria-current="page"] { border-left-color: transparent; border-bottom-color: var(--el-blue); background: transparent; }
  .staffnav-single .staffnav-list a { padding-left: 0; }
  .staffnav-single .staffnav-list a[aria-current="page"] { background: transparent; box-shadow: none; border-radius: 0; }
  .staff-side-bottom { flex-direction: row; flex-wrap: wrap; gap: 0 16px; padding: 4px 16px 8px; border-top: 1px solid var(--el-border); }
  .staff-side-bottom form { display: flex; }
  .staff-side-bottom a, .staff-side-bottom button { width: auto; min-height: 40px; padding: 6px 0; }
}