/* Sigil - the site stylesheet.
 *
 * The site wears the client's own chrome: a title bar for navigation, roster
 * header strips over paper panels, presence dots for list rows, list views for
 * tables, a framed window for dialogs and a status bar for the footer. Every
 * color below is taken from the client's palette, so the page and the product
 * shots on it read as one thing.
 *
 * No JavaScript, and no external requests: the typefaces are self-hosted,
 * and the chrome labels use Tahoma where the system has it. */

/* ── Typefaces ──────────────────────────────────────────────────────────── */
/* Self-hosted, both under the SIL Open Font License (the license texts sit
   beside the files). Variable fonts, so one file covers every weight, split
   by unicode-range the way the upstream distribution splits them: a page
   without a Latin Extended character never fetches that file, and a page
   without monospaced text never fetches JetBrains Mono. Libre Franklin has no
   Cyrillic, so the Cyrillic pages are set in Manrope, the client's own
   typeface, cut from the client's copy into the same three ranges. */
@font-face {
  font-family: "Libre Franklin"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/libre-franklin-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Libre Franklin"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/libre-franklin-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("fonts/jetbrains-mono-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("fonts/manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ── Tokens ─────────────────────────────────────────────────────────────── */

:root {
  --bg:            #ece9d8;   /* the page: the client's window face */
  --paper:         #fbfaf3;   /* panels */
  --row-off:       #f3f0e2;   /* a row that is not available */
  --line:          #d4cfb4;   /* structural hairline */
  --line-soft:     #e6e1cb;   /* hairline between rows */
  --ink:           #1c1c1c;
  --ink-2:         #424242;   /* body copy */
  --meta:          #606060;   /* captions, labels */
  --head:          #17345a;   /* headings */
  --link:          #144889;
  --link-hover:    #0c2e5e;
  --navy:          #0c2e5e;
  --on-navy:       #c8dcf2;
  --blue-border:   #11407e;
  --strip-border:  #95acc7;
  --beige-border:  #b3ad8a;
  --select:        #1e5fae;   /* the selected row of a list view */

  --titlebar: linear-gradient(180deg, #79b3f0 0%, #5b9be8 10%, #2e6ec4 40%, #1e5fae 100%);
  --strip:    linear-gradient(180deg, #d6e3f5 0%, #b6cbe8 100%);
  --beige:    linear-gradient(180deg, #f6f4e8 0%, #e4dfc6 100%);
  --primary:  linear-gradient(180deg, #3f7fd6 0%, #2e6ec4 45%, #1a549e 100%);
  --sealed:   linear-gradient(180deg, #c8efd7 0%, #88d29f 100%);
  --shadow:   0 18px 48px rgba(8, 32, 70, .28), 0 2px 6px rgba(8, 32, 70, .18);

  --sans:   "Libre Franklin", "Segoe UI", Helvetica, Arial, sans-serif;
  --chrome: Tahoma, Verdana, "Libre Franklin", sans-serif;
  --mono:   "JetBrains Mono", Consolas, "Liberation Mono", monospace;

  --gutter: 48px;
  --gap:    88px;             /* between sections */
}

/* A Cyrillic page wears Manrope throughout, its Latin names included, so a line never mixes two faces. */
html[lang="sr-Cyrl"] {
  --sans:   "Manrope", "Segoe UI", Helvetica, Arial, sans-serif;
  --chrome: Tahoma, Verdana, "Manrope", sans-serif;
}

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

/* A section a link jumps to stops under the title bar, level with the rail. */
html { scroll-padding-top: 88px; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }

a { color: var(--link); }
a:hover { color: var(--link-hover); }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--blue-border); outline-offset: 2px; }
img, svg { max-width: 100%; }
code, .mono { font-family: var(--mono); font-size: .88em; }

/* ── Layout ─────────────────────────────────────────────────────────────── */

.container { padding: 0 var(--gutter); }
.section   { padding-bottom: var(--gap); }
.section__head { display: flex; flex-direction: column; gap: 12px; padding-bottom: 40px; }
.section__title { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--head); }
.section__sub   { font-size: 18px; color: var(--ink-2); }

/* The emphasized band: paper from edge to edge, ruled above and below. */
.band { margin-bottom: var(--gap); padding: 72px 0; background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band--tight { padding: 64px 0; }

.grid    { display: grid; gap: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split   { display: grid; gap: 80px; grid-template-columns: minmax(0, 1fr) 440px; align-items: center; }
.split--figure { gap: 56px; grid-template-columns: minmax(0, 1fr) 516px; align-items: start; }
.split--about  { grid-template-columns: 600px minmax(0, 1fr); align-items: start; }
.split--statement { grid-template-columns: 440px minmax(0, 1fr); }
.statement { font-size: 19px; line-height: 1.6; color: var(--ink-2); }
.stack   { display: flex; flex-direction: column; gap: 20px; }
.stack--text { gap: 14px; }
.stack--text p { font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.stack--text .actions { padding-top: 14px; }
.br-wide { display: inline; }   /* a line break that only wide screens take */

.page-head { display: flex; flex-direction: column; gap: 16px; padding: 64px 0 48px; }
.page-head__title { font-size: clamp(36px, 5vw, 56px); font-weight: 800; line-height: 1.08; letter-spacing: -.025em; color: var(--head); }
.page-head__lead  { font-size: 20px; line-height: 1.55; color: var(--ink-2); }

.caption { font-size: 13.5px; line-height: 1.5; color: var(--meta); }
.fineprint { font-size: 14px; color: var(--meta); }
.listview-wrap + .fineprint { padding-top: 16px; }

/* ── Title bar (navigation) ─────────────────────────────────────────────── */

.site-nav { position: sticky; top: 0; z-index: 100; background: var(--titlebar); border-bottom: 1px solid var(--blue-border); }
.site-nav__inner {
  padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; min-height: 64px;
}
.site-nav__brand { display: flex; align-items: center; height: 44px; }
.site-nav__brand img { display: block; width: 87px; height: 34px; }
.site-nav__links { display: flex; align-items: center; gap: 8px; }
.site-nav__link {
  display: flex; align-items: center; height: 44px; padding: 0 14px; border-radius: 4px;
  font-size: 15px; font-weight: 600; color: #fff; text-decoration: none; text-shadow: 0 1px 0 rgba(8, 32, 70, .55);
}
.site-nav__link:hover { color: #fff; background: rgba(8, 32, 70, .18); }
.site-nav__link[aria-current="page"] { background: rgba(8, 32, 70, .32); box-shadow: inset 0 1px 2px rgba(8, 32, 70, .55); }
.site-nav__link:focus-visible, .site-nav__brand:focus-visible { outline-color: #fff; }
.site-nav__links .btn { margin-left: 12px; }

/* CSS-only mobile menu: the hidden checkbox sits before .site-nav__inner, the
   burger is its <label>, and the sibling combinator opens the drawer when it
   is checked. The checkbox is moved off-screen rather than display:none so it
   stays focusable: Tab to the burger, Space opens the menu. */
.site-nav__toggle { position: absolute; width: 1px; height: 1px; margin: -1px; opacity: 0; pointer-events: none; }
.site-nav__burger {
  display: none; align-items: center; justify-content: center; width: 44px; height: 44px; cursor: pointer;
  border: 1px solid var(--beige-border); border-radius: 4px; background: var(--beige); box-shadow: inset 0 1px 0 #fff;
}
.site-nav__burger-icon, .site-nav__burger-icon::before, .site-nav__burger-icon::after {
  display: block; width: 18px; height: 2px; background: var(--ink); position: relative; transition: transform .2s ease;
}
.site-nav__burger-icon::before, .site-nav__burger-icon::after { content: ""; position: absolute; left: 0; }
.site-nav__burger-icon::before { top: -6px; }
.site-nav__burger-icon::after  { top: 6px; }
.site-nav__toggle:focus-visible ~ .site-nav__inner .site-nav__burger { outline: 2px solid #fff; outline-offset: 2px; }

/* The strip under the title bar: what state the product is in, and the offer. */
.site-strip { background: var(--paper); border-bottom: 1px solid var(--line); font-family: var(--chrome); font-size: 12.5px; color: var(--ink-2); }
.site-strip__inner {
  padding: 0 var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 16px; min-height: 36px; padding-top: 6px; padding-bottom: 6px;
}
.site-strip__state { display: flex; align-items: center; gap: 14px; margin-right: auto; }
/* The language switcher closes the strip: each language named in itself, the page's own marked. */
.site-strip__langs { display: flex; align-items: center; }
.site-strip__langs a { padding: 2px 8px; border-left: 1px solid var(--line); text-decoration: none; }
.site-strip__langs a:first-child { border-left: 0; }
.site-strip__langs a:hover { color: var(--link-hover); text-decoration: underline; }
.site-strip__langs a[aria-current] { color: var(--ink); font-weight: 700; }
.pill-sealed {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; white-space: nowrap;
  background: var(--sealed); border: 1px solid #5fae7b; border-radius: 11px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1a5a36;
}
.pill-sealed::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2e8b57; }

/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 28px; border-radius: 4px; cursor: pointer;
  font-family: var(--sans); font-size: 17px; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap;
  color: var(--ink); background: var(--beige); border: 1px solid var(--beige-border); box-shadow: inset 0 1px 0 #fff;
}
.btn:hover { color: var(--ink); background: linear-gradient(180deg, #fbfaf3 0%, #ece7d2 100%); }
.btn:active { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25); }

/* One per screen: the thing you want clicked. */
.btn-primary {
  color: #fff; background: var(--primary); border-color: var(--blue-border); text-shadow: 0 1px 0 rgba(8, 32, 70, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 2px rgba(8, 32, 70, .28);
}
.btn-primary:hover { color: #fff; background: linear-gradient(180deg, #4a8be0 0%, #3477cd 45%, #1e5fae 100%); }

/* Not available yet: the checkout links do not exist, so the button says so. */
.btn-soon { border-style: dashed; background: transparent; box-shadow: none; color: var(--meta); cursor: default; }
.btn-soon:hover { background: transparent; color: var(--meta); }
.btn-soon__tag { font-family: var(--chrome); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.row--selected .btn-soon, .listview tr.is-selected .btn-soon { color: #fff; border-color: rgba(255, 255, 255, .7); }

.btn--sm   { min-height: 44px; padding: 0 20px; font-size: 15px; }
.btn--full { display: flex; width: 100%; }
.actions   { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

.link-strong { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; white-space: nowrap; }

/* ── Presence dots ──────────────────────────────────────────────────────── */
/* A row is a roster entry: available features are online, planned ones are
   away, and what is not available is offline. */

.dot { display: inline-block; flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; background: #4caf50; border: 1px solid #2f8a35; }
.dot--away { background: #f0ad4e; border-color: #c98a26; }
.dot--busy { background: #d9534f; border-color: #a33a36; }
.dot--off  { background: #b8b8b8; border-color: #8a8a8a; }
.dot--sm   { width: 10px; height: 10px; }

/* ── Panels ─────────────────────────────────────────────────────────────── */

.panel { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--strip-border); border-radius: 6px; overflow: clip; }
.panel__strip {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; padding: 4px 14px;
  background: var(--strip); border-bottom: 1px solid var(--strip-border); font-family: var(--chrome); font-size: 12px; color: var(--head);
}
.panel__label { display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.panel__label::before { content: ""; border: 4px solid transparent; border-top: 5px solid var(--head); border-bottom: 0; }
.panel__body { display: flex; flex-direction: column; gap: 8px; flex-grow: 1; padding: 24px; color: var(--ink-2); }
.panel__title { font-size: 22px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.panel__body .btn { align-self: flex-start; margin-top: 8px; }
.panel__body--roomy { gap: 18px; }
.panel__body--split { display: grid; gap: 24px 64px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.panel__body--split .btn { margin-top: 0; }

/* Roster rows: dot, label, description. */
.row { display: grid; grid-template-columns: 28px 250px minmax(0, 1fr); align-items: start; padding: 16px 18px; border-bottom: 1px solid var(--line-soft); }
.row:last-child { border-bottom: 0; }
.row .dot { margin-top: 7px; }
.row__label { padding-right: 12px; font-weight: 700; }
.row__desc  { display: flex; flex-direction: column; align-items: flex-start; color: var(--ink-2); }
.row--off   { background: var(--row-off); }
.row--action { grid-template-columns: 28px 250px minmax(0, 1fr) auto; column-gap: 0; }
.row--action .link-strong { margin: -10px 0 -10px 24px; }
.rows--narrow .row { grid-template-columns: 28px 210px minmax(0, 1fr); }
.presence { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.presence span { display: inline-flex; align-items: center; gap: 6px; }

/* One factual limit, stated once, in the shape of a tooltip. */
.note { display: inline-block; margin-top: 8px; padding: 6px 10px; background: #ffffe1; border: 1px solid #c9b458; border-radius: 4px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }

.facts { display: grid; gap: 40px; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 32px; color: var(--ink-2); }
.facts li { display: flex; gap: 12px; }
.facts .dot { margin-top: 7px; }

/* ── List views (tables) ────────────────────────────────────────────────── */

.listview-wrap { background: var(--paper); border: 1px solid var(--beige-border); border-radius: 6px; overflow: hidden; }
.listview { width: 100%; border-collapse: collapse; }
.listview th {
  height: 34px; padding: 0 18px; text-align: left; white-space: nowrap;
  background: var(--beige); border-bottom: 1px solid var(--beige-border); border-left: 1px solid #cfc9ae;
  font-family: var(--chrome); font-size: 12px; font-weight: 700; color: var(--ink-2);
}
.listview th:first-child { border-left: 0; }
.listview td { height: 68px; padding: 10px 18px; border-bottom: 1px solid var(--line-soft); line-height: 1.4; color: var(--ink-2); }
.listview tr:last-child td { border-bottom: 0; }
.listview td.listview__name { font-size: 18px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.listview td.listview__name .dot { margin-right: 12px; }
.listview td.listview__action { text-align: right; white-space: nowrap; }
.listview td.listview__file { font-family: var(--mono); font-size: 13.5px; }
.listview strong { font-size: 18px; color: var(--ink); }
.listview tr.is-selected td { background: var(--select); border-bottom-color: var(--blue-border); color: #fff; }
.listview tr.is-selected td.listview__name, .listview tr.is-selected strong, .listview tr.is-selected a:not(.btn) { color: #fff; }
.listview tr.is-off td { background: var(--row-off); }
/* The downloads: two tables on one page, so their columns are given widths and line up. */
.listview--downloads th:nth-child(1) { width: 170px; }
.listview--downloads th:nth-child(3) { width: 160px; }
/* The editions: the account count and the price never break across lines. */
.listview--editions td:nth-child(3), .listview--editions td:nth-child(4) { white-space: nowrap; }

/* ── The checkout (buy.html) ────────────────────────────────────────────── */
/* One window, as the client's main window is laid out: the editions on the
   left, on the window's canvas, each a radio button; the one chosen on the
   right, on paper, with its price and its Buy button. The style sheet shows
   the chosen one, so the page reads the same without a script. */

.order__inner { max-width: 1040px; margin: 0 auto; }
.order .page-head { padding-bottom: 32px; }
.order__window { margin-bottom: 16px; background: var(--paper); border: 1px solid var(--blue-border); border-radius: 8px 8px 6px 6px; overflow: hidden; box-shadow: var(--shadow); }
.order__body { display: grid; grid-template-columns: 380px minmax(0, 1fr); }
.order__picks { min-width: 0; margin: 0; padding: 0 0 12px; background: var(--bg); border: 0; border-right: 1px solid var(--line); }
.order__picks legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.order__group {
  display: flex; align-items: center; gap: 8px; min-height: 30px; margin-top: 12px; padding: 4px 16px;
  background: var(--strip); border-top: 1px solid var(--strip-border); border-bottom: 1px solid var(--strip-border);
  font-family: var(--chrome); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--head);
}
.order__product + .order__group { margin-top: 0; border-top: 0; }
/* A product's heading over its editions, with its seal: the server's ring is bronze, the client's blue. */
.order__product { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--paper); border-bottom: 1px solid var(--strip-border); }
.order__product + .order__product, .pick + .order__product { margin-top: 12px; border-top: 1px solid var(--strip-border); }
.order__product img { display: block; flex: 0 0 auto; width: 40px; height: 40px; }
.order__product strong { display: block; font-size: 15px; font-weight: 800; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--head); }
.order__product span span { display: block; font-size: 13.5px; line-height: 1.35; color: var(--meta); }
.order__group::before { content: ""; border: 4px solid transparent; border-top: 5px solid var(--head); border-bottom: 0; }

.pick { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; column-gap: 14px; align-items: center; min-height: 60px; padding: 8px 16px; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.pick input { position: absolute; width: 1px; height: 1px; margin: -1px; opacity: 0; }
.pick::before { content: ""; grid-row: 1 / span 2; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 1px solid var(--beige-border); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18); }
.pick__name  { grid-column: 2; font-size: 16.5px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.pick__meta  { grid-column: 2; font-size: 13.5px; line-height: 1.35; color: var(--meta); }
.pick__price { grid-column: 3; grid-row: 1 / span 2; font-size: 17px; font-weight: 700; white-space: nowrap; color: var(--ink); }
.pick__price small { font-size: 12.5px; font-weight: 600; color: var(--meta); }
.pick:hover { background: rgba(30, 95, 174, .08); }
.pick:has(input:checked) { background: var(--select); border-bottom-color: var(--blue-border); }
.pick:has(input:checked) .pick__name, .pick:has(input:checked) .pick__price { color: #fff; }
.pick:has(input:checked) .pick__meta, .pick:has(input:checked) small { color: var(--on-navy); }
.pick:has(input:checked)::before { background: radial-gradient(circle, var(--select) 0 3px, #fff 4px); border-color: #fff; box-shadow: none; }
.pick:has(input:focus-visible) { outline: 2px solid var(--link); outline-offset: -4px; }
.pick:has(input:checked:focus-visible) { outline-color: #fff; }

.order__details { display: flex; flex-direction: column; gap: 16px; padding: 32px 40px 28px; }
.order__detail { display: none; flex-direction: column; align-items: stretch; gap: 10px; }
.order:has(#pick-home:checked) #home, .order:has(#pick-community:checked) #community, .order:has(#pick-business:checked) #business,
.order:has(#pick-enterprise:checked) #enterprise, .order:has(#pick-client-personal:checked) #client-personal,
.order:has(#pick-client-business:checked) #client-business { display: flex; }
.order__kind { display: flex; align-items: center; gap: 10px; font-family: var(--chrome); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--meta); }
.order__name { font-size: 30px; font-weight: 800; line-height: 1.15; letter-spacing: -.015em; color: var(--head); }
.order__for { color: var(--ink-2); }
.order__facts { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
.order__facts li { position: relative; padding-left: 22px; color: var(--ink-2); }
.order__facts li::before { content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; border-radius: 50%; background: #4caf50; border: 1px solid #2f8a35; }
.order__price { padding-top: 4px; font-size: 16px; color: var(--meta); }
.order__price strong, .order__price output { margin-right: 6px; font-size: 44px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--ink); }
/* The name the license carries and the chosen edition's Buy button, below its details. */
.order__buy { display: flex; flex-direction: column; gap: 8px; }
.order__buy > [data-edition] { display: none; margin-top: 6px; }
.order:has(#pick-home:checked) [data-edition="home"], .order:has(#pick-community:checked) [data-edition="community"],
.order:has(#pick-business:checked) [data-edition="business"], .order:has(#pick-enterprise:checked) [data-edition="enterprise"],
.order:has(#pick-client-personal:checked) [data-edition="client-personal"], .order:has(#pick-client-business:checked) [data-edition="client-business"] { display: flex; }
.order:has(#pick-enterprise:checked) .licensee, .order:has(#pick-enterprise:checked) .licensee__hint { display: none; }
.licensee { display: flex; flex-direction: column; gap: 6px; font-weight: 700; color: var(--ink); }
.licensee input {
  height: 40px; padding: 0 10px;
  font: inherit; font-weight: 400; color: var(--ink); background: #fff; border: 1px solid var(--beige-border); border-radius: 4px;
}
.licensee input:focus-visible { outline: 2px solid var(--blue-border); outline-offset: 2px; }
.licensee__hint { font-size: 13.5px; line-height: 1.45; color: var(--meta); }
.order__note { padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: 14px; color: var(--meta); }

/* A Buy button before the checkout is open reads like the "soon" buttons. */
.btn:disabled { border-style: dashed; background: transparent; box-shadow: none; color: var(--meta); cursor: default; text-shadow: none; }
.quantity { display: flex; align-items: center; gap: 12px; padding-top: 4px; font-weight: 700; color: var(--ink); }
.quantity input {
  width: 5.5em; height: 40px; padding: 0 10px;
  font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--beige-border); border-radius: 4px;
}
.quantity input:focus-visible { outline: 2px solid var(--blue-border); outline-offset: 2px; }
.checkout-closed { margin-bottom: 24px; padding: 14px 18px; background: #ffffe1; border: 1px solid #c9b458; border-radius: 6px; color: var(--ink-2); }
/* The server editions in two tables, by use: a heading and who it is for above each. */
.editions + .editions { margin-top: 32px; }
.editions__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding-bottom: 12px; }

/* ── The thank-you page (thanks.html) ───────────────────────────────────── */
/* Where a buyer lands from the checkout: the seal stamped on a navy band,
   light breaking out behind it and confetti thrown over it. The stamp and the
   throw play once and the rays turn slowly; reduced motion stills all three,
   and the still frame, the one the screen tests keep, is the finished one. */

.thanks { --seal-y: 136px; position: relative; overflow: hidden; margin-bottom: var(--gap); padding: 72px 0 88px; background: var(--navy); text-align: center; }
.thanks::before, .thanks::after { content: ""; position: absolute; left: 50%; top: var(--seal-y); border-radius: 50%; pointer-events: none; }
.thanks::before {
  width: 1600px; height: 1600px; margin: -800px 0 0 -800px;
  background: repeating-conic-gradient(rgba(121, 179, 240, .16) 0deg 6deg, transparent 6deg 15deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, transparent 50%); mask-image: radial-gradient(circle, #000 0, transparent 50%);
  animation: thanks-turn 120s linear infinite;
}
.thanks::after { width: 520px; height: 520px; margin: -260px 0 0 -260px; background: radial-gradient(circle, rgba(240, 173, 78, .42) 0, rgba(240, 173, 78, 0) 65%); }
.thanks__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.thanks__seal { display: block; width: 128px; height: 128px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35)); animation: thanks-stamp .7s cubic-bezier(.2, 1.5, .4, 1) both; }
.thanks__title { font-size: clamp(52px, 8vw, 96px); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: #fff; text-shadow: 0 3px 0 rgba(8, 32, 70, .6); }
.thanks__lead { max-width: 640px; font-size: 20px; line-height: 1.55; color: var(--on-navy); }
.thanks__actions { justify-content: center; padding-top: 40px; }

.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i { position: absolute; width: 10px; height: 16px; border-radius: 2px; transform: rotate(var(--r)); animation: thanks-throw 1.6s cubic-bezier(.2, .8, .3, 1) both; }
.confetti i:nth-child(3n+2) { width: 11px; height: 11px; border-radius: 50%; }
.confetti i:nth-child(3n) { width: 5px; height: 22px; }
.confetti i:nth-child(5n+1) { background: #f0ad4e; }
.confetti i:nth-child(5n+2) { background: #88d29f; }
.confetti i:nth-child(5n+3) { background: #79b3f0; }
.confetti i:nth-child(5n+4) { background: #fbfaf3; }
.confetti i:nth-child(5n)   { background: #d9534f; }
.confetti i:nth-child(4n+1) { animation-delay: .15s; }
.confetti i:nth-child(4n+2) { animation-delay: .3s; }
.confetti i:nth-child(4n+3) { animation-delay: .45s; }
.confetti i:nth-child(1) { left: 6%; top: 14%; --r: 20deg; }
.confetti i:nth-child(2) { left: 12%; top: 48%; --r: -35deg; }
.confetti i:nth-child(3) { left: 18%; top: 24%; --r: 60deg; }
.confetti i:nth-child(4) { left: 9%; top: 78%; --r: 15deg; }
.confetti i:nth-child(5) { left: 23%; top: 60%; --r: -70deg; }
.confetti i:nth-child(6) { left: 28%; top: 12%; --r: 40deg; }
.confetti i:nth-child(7) { left: 35%; top: 28%; --r: -20deg; }
.confetti i:nth-child(8) { left: 20%; top: 90%; --r: 80deg; }
.confetti i:nth-child(9) { left: 3%; top: 40%; --r: -50deg; }
.confetti i:nth-child(10) { left: 26%; top: 94%; --r: 25deg; }
.confetti i:nth-child(11) { left: 64%; top: 26%; --r: 35deg; }
.confetti i:nth-child(12) { left: 72%; top: 10%; --r: -45deg; }
.confetti i:nth-child(13) { left: 79%; top: 50%; --r: 70deg; }
.confetti i:nth-child(14) { left: 76%; top: 72%; --r: -15deg; }
.confetti i:nth-child(15) { left: 84%; top: 20%; --r: 10deg; }
.confetti i:nth-child(16) { left: 91%; top: 62%; --r: -60deg; }
.confetti i:nth-child(17) { left: 96%; top: 32%; --r: 45deg; }
.confetti i:nth-child(18) { left: 82%; top: 90%; --r: 20deg; }
.confetti i:nth-child(19) { left: 61%; top: 7%; --r: -30deg; }
.confetti i:nth-child(20) { left: 39%; top: 7%; --r: 55deg; }
.confetti i:nth-child(21) { left: 92%; top: 88%; --r: -25deg; }
.confetti i:nth-child(22) { left: 14%; top: 4%; --r: 30deg; }

@keyframes thanks-stamp { from { transform: scale(1.8); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes thanks-throw { from { transform: translateY(-220px) rotate(calc(var(--r) - 360deg)); opacity: 0; } 25% { opacity: 1; } to { transform: rotate(var(--r)); opacity: 1; } }
@keyframes thanks-turn  { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) {
  .thanks::before, .thanks__seal, .confetti i { animation: none; }
}

/* ── The window frame ───────────────────────────────────────────────────── */
/* The reminder, the error page and the company details are windows. */

.window { width: 100%; max-width: 440px; border: 1px solid var(--blue-border); border-radius: 8px 8px 0 0; overflow: hidden; background: var(--bg); box-shadow: 0 12px 32px rgba(8, 32, 70, .28), 0 2px 6px rgba(8, 32, 70, .18); }
.window--wide  { max-width: 560px; }
.window--props { max-width: 600px; }
.window__bar { display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 0 5px 0 8px; background: var(--titlebar); }
.window__title { display: flex; align-items: center; gap: 6px; font-family: var(--chrome); font-size: 13px; font-weight: 700; color: #fff; text-shadow: 0 1px 0 rgba(8, 32, 70, .55); }
.window__title img { display: block; width: 16px; height: 16px; }
.window__close { position: relative; width: 21px; height: 21px; border: 1px solid #fff; border-radius: 3px; background: linear-gradient(180deg, #f08a7a 0%, #b8312a 100%); }
.window__close::before, .window__close::after { content: ""; position: absolute; top: 9px; left: 4px; width: 11px; height: 2px; border-radius: 1px; background: #fff; transform: rotate(45deg); }
.window__close::after { transform: rotate(-45deg); }
.window__body { display: flex; flex-direction: column; gap: 16px; padding: 22px 22px 18px; }
.dialog__head { display: flex; align-items: flex-start; gap: 10px; }
.dialog__head img { display: block; flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; }
.dialog__head svg { display: block; flex: 0 0 auto; width: 40px; height: 40px; }
.dialog__heading { font-family: var(--chrome); font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--ink); }
.dialog__text { font-family: var(--chrome); font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.dialog__hint { align-self: flex-end; font-family: var(--chrome); font-size: 11.5px; color: var(--meta); }
.dialog__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
/* A drawing of a button inside a drawing of a window: not a control. */
.fakebtn { display: inline-flex; align-items: center; height: 34px; padding: 0 18px; border-radius: 4px; font-family: var(--chrome); font-size: 13px; font-weight: 700; color: var(--ink); background: var(--beige); border: 1px solid var(--beige-border); }
.fakebtn--primary { color: #fff; background: var(--primary); border-color: var(--blue-border); text-shadow: 0 1px 0 rgba(8, 32, 70, .55); }
.window-figure { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.window-figure figcaption { text-align: center; }

.error-page { display: flex; align-items: center; justify-content: center; padding: 120px var(--gutter); }
.error-page h1 { font-size: 24px; font-weight: 800; line-height: 1.25; color: var(--head); }
.error-page p { padding-top: 6px; color: var(--ink-2); }
.error-page .window__body { gap: 22px; padding: 26px 26px 22px; }
.error-page .dialog__head { gap: 18px; }

.props { margin: 14px; padding: 6px 14px; background: var(--paper); border: 1px solid var(--beige-border); }
.props__row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.props__row:last-child { border-bottom: 0; }
.props dt { font-size: 14px; color: var(--meta); }
.props dd { font-size: 15.5px; line-height: 1.5; }

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero { padding: 64px 0 var(--gap); }
.hero__by { padding-bottom: 16px; font-family: var(--chrome); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--meta); }
.hero__title { font-size: clamp(38px, 6vw, 72px); font-weight: 800; line-height: 1.05; letter-spacing: -.025em; color: var(--head); }
.hero__row { display: grid; gap: 40px 48px; grid-template-columns: minmax(0, 660px) minmax(0, 1fr); align-items: start; padding-top: 32px; }
.hero__row .showcase-figure { grid-column: 1 / -1; }
.hero .showcase { width: 100%; }
.hero__sub { font-size: 20px; line-height: 1.55; color: var(--ink-2); }
.hero__cta { display: none; flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 28px; }
.hero .showcase-figure { padding-top: 0; }
.hero__aside { display: grid; gap: 20px; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.rows--compact .row { grid-template-columns: 24px 120px minmax(0, 1fr); padding: 10px 14px; font-size: 15px; }
.rows--compact .row .dot { margin-top: 7px; }

/* Skins: each row is a radio button. "All four" leaves the crossfade running;
   a theme holds the showcase on its frame. A swatch is that frame, small. */
.skin { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 4px 14px; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; color: var(--link); cursor: pointer; }
.skin:last-child { border-bottom: 0; }
.skin:hover { color: var(--link-hover); }
.skin input { position: absolute; width: 1px; height: 1px; margin: -1px; opacity: 0; }
.skin:has(input:checked) { background: var(--select); color: #fff; }
.skin:has(input:focus-visible) { outline: 2px solid var(--link); outline-offset: -4px; }
.skin__swatch { flex: 0 0 auto; width: 42px; height: 27px; border: 1px solid var(--strip-border); border-radius: 3px; background-repeat: no-repeat; background-size: 100% 100%; }
/* Swatches drawn at their own size (tests/screens/swatches.sh), never a full capture shrunk. */
.skin__swatch--vellum { background-image: image-set(url("screens/swatch-vellum.webp") 1x, url("screens/swatch-vellum-2x.webp") 2x); }
.skin__swatch--slate  { background-image: image-set(url("screens/swatch-slate.webp") 1x, url("screens/swatch-slate-2x.webp") 2x); }
.skin__swatch--navy   { background-image: image-set(url("screens/swatch-navy.webp") 1x, url("screens/swatch-navy-2x.webp") 2x); }
.skin__swatch--dark   { background-image: image-set(url("screens/swatch-dark.webp") 1x, url("screens/swatch-dark-2x.webp") 2x); }
.skin__swatch--all    { background-image: image-set(url("screens/swatch-all.webp") 1x, url("screens/swatch-all-2x.webp") 2x); }
.hero:has(.skins input:checked:not([value="all"])) .showcase__slide + .showcase__slide { animation: none; opacity: 0; }
.hero:has(.skins input[value="slate"]:checked) .showcase__slide:nth-child(2),
.hero:has(.skins input[value="navy"]:checked) .showcase__slide:nth-child(3),
.hero:has(.skins input[value="dark"]:checked) .showcase__slide:nth-child(4) { opacity: 1; }

/* ── Product showcase ───────────────────────────────────────────────────── */
/* Real captures of the client. The crossfade is pure CSS. The first capture
   sits in normal flow: it sizes the frame, it is what a visitor sees before
   any animation runs, and it is what reduced-motion users see instead of one.
   The others are stacked over it and run the same keyframes offset by their
   slot, so each fades in over the previous one, holds, and fades out; when the
   last one fades out the first is underneath again, so the loop has no seam.
   Twenty-second loop, four seconds a slot; a figure that shows one screen in
   each of the four themes (.showcase--themes) runs four slots in sixteen.
   Hovering holds the current frame. */

/* The captures are taken at 2x: a 1050 CSS px window is 2100 px, so the
   frame stays sharp at every desktop scale and on high-density screens. On
   narrow screens the frame shrinks and the image scales down with it. */
.showcase-figure { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.showcase-figure--spaced { padding-top: 48px; }
.showcase { position: relative; width: 1050px; max-width: 100%; margin: 0 auto; overflow: hidden; background: var(--paper); box-shadow: var(--shadow); }
.showcase__slide { display: block; width: 100%; height: auto; }
.showcase__slide + .showcase__slide { position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 100%; object-fit: cover; opacity: 0; animation: showcase-fade 20s ease-in-out infinite; }
.showcase__slide:nth-child(2) { animation-delay: 4s; }
.showcase__slide:nth-child(3) { animation-delay: 8s; }
.showcase__slide:nth-child(4) { animation-delay: 12s; }
.showcase__slide:nth-child(5) { animation-delay: 16s; }
.showcase:hover .showcase__slide, .showcase:focus-within .showcase__slide { animation-play-state: paused; }

/* A small window, the create-account form, at its natural size. */
.showcase--dialog { width: 516px; }
.showcase--themes .showcase__slide + .showcase__slide { animation-name: showcase-fade-themes; animation-duration: 16s; }

/* Opacity only: a scale drift looked nice and resampled every frame. */
@keyframes showcase-fade {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  20%  { opacity: 1; }
  24%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes showcase-fade-themes {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  25%  { opacity: 1; }
  30%  { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  /* As specific as the rules that start the crossfade, and after them. */
  .showcase .showcase__slide + .showcase__slide { animation: none; }   /* the first capture stays, in flow */
}

/* ── Wizard ─────────────────────────────────────────────────────────────── */

.wizard { display: grid; grid-template-columns: 260px minmax(0, 1fr); background: var(--paper); border: 1px solid var(--strip-border); border-radius: 6px; overflow: hidden; }
.wizard__side { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 32px; text-align: center; background: var(--navy); color: var(--paper); }
.wizard__side img { display: block; width: 124px; height: 124px; }
.wizard__title { display: block; font-size: 18px; font-weight: 700; }
.wizard__sub   { display: block; font-size: 14px; color: var(--on-navy); }
.wizard__step { display: flex; flex-direction: column; gap: 6px; padding: 22px 32px; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.wizard__step:last-child { border-bottom: 0; }
.wizard__count { font-family: var(--chrome); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--meta); }
.wizard__step h3 { font-size: 21px; font-weight: 700; line-height: 1.25; color: var(--ink); }

/* ── Questions ──────────────────────────────────────────────────────────── */

.faq details { border-bottom: 1px solid var(--line-soft); }
.faq details:last-child { border-bottom: 0; }
.faq summary { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: start; padding: 18px; cursor: pointer; list-style: none; font-size: 17px; font-weight: 700; line-height: 1.4; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; font-family: var(--chrome); color: var(--meta); }
.faq details[open] summary::before { content: "-"; }
.faq details > p { padding: 0 18px 20px 46px; color: var(--ink-2); }

/* ── Code ───────────────────────────────────────────────────────────────── */

.code { margin: 0; padding: 18px 20px; border-radius: 4px; background: var(--navy); color: #e6f0fa; font-family: var(--mono); font-size: 14px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.code .c { color: #9bc0e6; }
.keyline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font-size: 14px; }
.keyline__label { font-family: var(--chrome); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--meta); }
.keyline code { font-size: 14px; overflow-wrap: anywhere; }

/* ── Call to action band ────────────────────────────────────────────────── */

.cta-band { padding: 80px 0; background: var(--navy); color: var(--paper); }
.cta-band__inner { display: grid; gap: 40px 80px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.cta-band__title { font-size: clamp(30px, 4vw, 46px); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.cta-band__sub { padding-top: 14px; font-size: 18px; color: var(--on-navy); }
.cta-band .link-strong { color: #fff; font-size: 17px; font-weight: 600; text-underline-offset: 4px; }

/* ── Document pages ─────────────────────────────────────────────────────── */

/* The rail: every page carries one, the way a site of the period kept its
   left column. It sticks under the title bar. */
.layout { display: grid; gap: 40px; grid-template-columns: 280px minmax(0, 1fr); align-items: start; padding: 0 var(--gutter); }
.layout__main { min-width: 0; }
.layout__main .container { padding: 0; }
.layout__main .band { border: 1px solid var(--line); border-radius: 6px; }
.layout__main .band .container { padding: 0 40px; }
.rail { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 20px; margin: 64px 0 var(--gap); }
.rail__toc a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 14px; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; text-decoration: none; }
.rail__toc a:last-child { border-bottom: 0; }
/* The section in view is the selected row, as in a list view. Chromium only for now; elsewhere the list stays plain. */
.rail__toc { scroll-target-group: auto; }
.rail__toc a:target-current { background: var(--select); color: #fff; }
.rail__release .panel__body { gap: 12px; padding: 18px; }
.rail__release .panel__body .btn { align-self: stretch; margin-top: 0; }
.rail__platforms { font-family: var(--chrome); font-size: 13px; font-weight: 700; color: var(--ink-2); }
.rail__link { font-size: 14.5px; font-weight: 600; }
.rail__release .fineprint { font-size: 13px; line-height: 1.5; }
.doc__body { padding: 32px 48px 40px; font-size: 16.5px; line-height: 1.7; color: var(--ink); }
.doc__body h2 { padding-top: 28px; font-size: 24px; font-weight: 800; line-height: 1.25; color: var(--head); }
.doc__body h2:first-child { padding-top: 0; }
.doc__body p, .doc__body ul, .doc__body ol { padding-top: 10px; }
.doc__body ul { display: flex; flex-direction: column; gap: 8px; }
.doc__body ul li { position: relative; padding-left: 22px; }
.doc__body ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 10px; border-radius: 50%; background: #4caf50; border: 1px solid #2f8a35; }
.doc__body ol { list-style: decimal; padding-left: 24px; }
.doc__meta { font-size: 14px; line-height: 1.6; color: var(--meta); }
.warn { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 24px; padding: 18px 20px; background: #ffffe1; border: 1px solid #c9b458; border-radius: 6px; color: var(--ink-2); }
.warn::before { content: "!"; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #f5c878; border: 1px solid #946523; font-weight: 800; font-size: 20px; line-height: 1; color: #774815; }
.warn__title { display: block; font-weight: 700; color: var(--ink); }
.advisory { padding: 20px 24px; border-bottom: 1px solid var(--line-soft); }
.advisory:last-child { border-bottom: 0; }
.advisory__meta { font-family: var(--chrome); font-size: 12px; color: var(--meta); }

/* ── Footer and status bar ──────────────────────────────────────────────── */

.site-footer { border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }
.site-footer__inner { display: grid; gap: 48px; grid-template-columns: minmax(0, 1fr) 180px 220px 260px; padding-top: 56px; padding-bottom: 40px; }
.site-footer__brand { display: flex; flex-direction: column; gap: 12px; }
.site-footer__brand img { display: block; width: 87px; height: 34px; }
.site-footer__tagline { font-weight: 600; color: var(--head); }
.site-footer__col { display: flex; flex-direction: column; gap: 4px; }
.site-footer__heading { padding-bottom: 8px; font-family: var(--chrome); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--head); }
.site-footer__link { display: flex; align-items: center; min-height: 32px; text-decoration: none; }
.site-footer__link:hover { text-decoration: underline; }
.site-footer__legal { display: flex; flex-direction: column; gap: 4px; padding-bottom: 16px; font-size: 13.5px; color: var(--meta); }
.statusbar { border-top: 1px solid var(--line); box-shadow: inset 0 1px 0 #fff; font-family: var(--chrome); font-size: 12px; color: var(--ink-2); }
.statusbar__inner { display: flex; align-items: stretch; gap: 4px; min-height: 34px; padding-top: 4px; padding-bottom: 4px; }
.statusbar__cell { display: flex; align-items: center; gap: 6px; padding: 2px 10px; background: #f6f4e8; border: 1px solid var(--line); }
.statusbar__cell--grow { flex-grow: 1; }
.statusbar__cell--sealed::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2e8b57; }

/* ── Narrow screens ─────────────────────────────────────────────────────── */

@media (min-width: 1700px) {
  .hero__row { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); }
  .hero__row { grid-template-rows: auto 1fr; }
  .hero__row .showcase-figure { grid-column: 2; grid-row: 1 / span 2; }
  .hero__aside { grid-column: 1; grid-row: 2; grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1040px) {
  .split, .split--about, .hero__row { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rail { display: none; }
  .split--figure { grid-template-columns: minmax(0, 1fr); }
  .hero__cta { display: flex; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .panel__body--split { grid-template-columns: minmax(0, 1fr); }
  .window, .window-figure { margin-left: auto; margin-right: auto; }
  .site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-band__inner { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  :root { --gutter: 20px; --gap: 56px; }
  .grid, .grid--2 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .br-wide { display: none; }
  .band { padding: 40px 0; }
  .hero { padding-top: 40px; }
  .hero .showcase-figure { padding-top: 32px; }
  .hero__sub { font-size: 17px; line-height: 1.6; }
  .hero__cta, .hero__cta .actions { align-items: stretch; width: 100%; }
  .hero__cta .actions { flex-direction: column; }
  .hero__cta .fineprint { text-align: center; }
  .hero__aside { grid-template-columns: minmax(0, 1fr); }
  .page-head { padding: 40px 0 32px; }
  .page-head__lead { font-size: 17px; }
  .section__head { padding-bottom: 24px; }
  .section__sub { font-size: 16px; }
  .cta-band { padding: 48px 0; }
  .cta-band .actions { flex-direction: column; align-items: stretch; }
  .error-page { padding: 56px var(--gutter); }
  .thanks { --seal-y: 104px; padding: 48px 0 56px; }
  .thanks__seal { width: 112px; height: 112px; }
  .thanks__lead { font-size: 17px; }
  .confetti { bottom: 62%; }   /* thrown around the seal, clear of the words */
  .confetti i { scale: .8; }

  /* The title bar collapses into a drawer under the bar. */
  html { scroll-padding-top: 76px; }
  .site-nav__inner { min-height: 60px; }
  .site-nav__burger { display: flex; }
  .site-nav__links {
    display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter) 16px; background: var(--paper); border-bottom: 1px solid var(--blue-border); box-shadow: 0 12px 24px rgba(8, 32, 70, .18);
  }
  .site-nav__toggle:checked ~ .site-nav__inner .site-nav__links { display: flex; }
  .site-nav__link { height: auto; min-height: 48px; padding: 0; border-radius: 0; border-bottom: 1px solid var(--line-soft); color: var(--link); text-shadow: none; }
  .site-nav__link:hover { color: var(--link-hover); background: transparent; }
  .site-nav__link[aria-current="page"] { background: transparent; box-shadow: none; color: var(--ink); }
  .site-nav__links .btn { margin: 16px 0 0; }
  .site-nav__toggle:checked ~ .site-nav__inner .site-nav__burger-icon { background: transparent; }
  .site-nav__toggle:checked ~ .site-nav__inner .site-nav__burger-icon::before { transform: translateY(6px) rotate(45deg); }
  .site-nav__toggle:checked ~ .site-nav__inner .site-nav__burger-icon::after  { transform: translateY(-6px) rotate(-45deg); }
  .site-strip__state { display: none; }
  .site-strip__langs a { padding: 12px 10px; }

  .row, .rows--narrow .row, .rows--compact .row, .row--action { grid-template-columns: 24px minmax(0, 1fr); padding: 14px 16px; }
  .row__label { grid-column: 2; padding-right: 0; }
  .row__desc, .row--action .link-strong { grid-column: 2; }
  .row--action .link-strong { margin: 0; }

  /* A list view becomes a stack of cards: the header row goes, each row is a block. */
  .listview thead { display: none; }
  .listview, .listview tbody, .listview tr, .listview td { display: block; }
  .listview tr { padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
  .listview tr:last-child { border-bottom: 0; }
  .listview td, .listview tr.is-selected td, .listview tr.is-off td { height: auto; padding: 2px 0; border: 0; background: transparent; }
  .listview tr.is-selected { background: var(--select); }
  .listview tr.is-off { background: var(--row-off); }
  .listview td.listview__action { padding-top: 10px; text-align: left; }
  .listview td.listview__file { overflow-wrap: anywhere; }

  .order__body { grid-template-columns: minmax(0, 1fr); }
  .order__picks { border-right: 0; border-bottom: 1px solid var(--line); }
  .order__details { padding: 24px 20px; }
  .order__name { font-size: 26px; }
  .order__price strong, .order__price output { font-size: 36px; }

  .wizard { grid-template-columns: minmax(0, 1fr); }
  .wizard__side { flex-direction: row; justify-content: flex-start; padding: 16px 20px; text-align: left; }
  .wizard__side img { width: 48px; height: 48px; }
  .wizard__step { padding: 18px 20px; }
  .wizard__step h3 { font-size: 19px; }

  .props__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .doc__body { padding: 24px 20px 28px; font-size: 16px; }
  .faq details > p { padding-left: 18px; }
  .site-footer__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 40px; }
  .site-footer__link { min-height: 44px; }
  .statusbar__cell--grow { display: none; }
  .statusbar__cell--sealed { flex-grow: 1; }
}