/**
 * site-ui-pages-v2.css — the seven company and legal pages, and /brand/.
 *
 * THE FILENAME CARRIES THE DESIGN VERSION, same rule as site-ui-v2.css:
 * Cloudflare on this site does not vary its cache on ?ver=, so this file
 * replaced site-ui-pages-v1.css by being a different file. v1 is still in the
 * repository; rolling back is one constant in class-ui-assets.php.
 *
 * ONE GRAMMAR, SEVEN PAGES. A 220px rail on the left says what a block is,
 * and a column on the right holds it, never wider than the 800px the
 * Customizer already locks article bodies to. It is the /brand/ page's layout
 * from 1.2.0, promoted to the rule, and it is why a reader scanning About for
 * "how we make money" or Contact for "corrections" finds the answer down one
 * edge without a contents list.
 *
 * The documents use the same grammar with the rail doing a different job:
 * empty on the two legal pages, which are short, and a table of contents on
 * the editorial guidelines, which is not. See class-ui-doc.php for the
 * measurements behind that split.
 *
 * Flat throughout: hairlines and white space. The only filled shapes are the
 * ink buttons, the form fields and the brand page's colour swatches — that
 * page is about colour, so it is the one place colour is an object rather
 * than an accent.
 *
 * Loaded only on a page this plugin renders, and only ever alongside
 * site-ui-v2.css, so the tokens and @font-face rules are taken as given.
 *
 * Scope: everything under .aipr-ui-pg. bimber styles bare h1/h2/p/ul/li/a
 * aggressively and the Customizer's additional CSS adds !important rules of
 * its own, so nothing here relies on a browser default.
 */

.aipr-ui-pg {
    --aipr-ui-read: 800px;
    --aipr-ui-rail: 220px;
    --aipr-ui-pgw: 1080px;
    display: block;
    background: var(--aipr-ui-paper);
    color: var(--aipr-ui-body);
    font-family: var(--aipr-ui-sans);
    -webkit-font-smoothing: antialiased;
}
.aipr-ui-pg *, .aipr-ui-pg *::before, .aipr-ui-pg *::after { box-sizing: border-box; }
.aipr-ui-pg :where(h1,h2,h3,h4,p,ul,ol,li,dl,dd,dt,figure) { margin: 0; padding: 0; }
.aipr-ui-pg :where(ul,ol) { list-style: none; }
.aipr-ui-pg :where(li)::before { content: none; }
.aipr-ui-pg a { color: inherit; text-decoration: none; }
.aipr-ui-pg :focus-visible { outline: 2px solid var(--aipr-ui-accent); outline-offset: 3px; }

.aipr-ui-page { max-width: var(--aipr-ui-pgw); margin: 0 auto; padding: 0 var(--aipr-ui-pad) 96px; }

/* A document with no contents rail is one column, so the page stops being
   1080px wide and becomes the reading measure with its title above it. */
.aipr-ui-page--doc  { max-width: calc(var(--aipr-ui-read) + var(--aipr-ui-pad) * 2); }
.aipr-ui-page--wide { max-width: var(--aipr-ui-pgw); }

/* ─── Hero: h1, one sentence, optional actions ─────────────── */
.aipr-ui-pgh { padding: 52px 0 40px; }
.aipr-ui-pgh-kicker { margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--aipr-ui-accent); }
.aipr-ui-pgh-h1 { font-size: 44px; font-weight: 600; line-height: 1.05; letter-spacing: -.03em; color: var(--aipr-ui-ink); text-wrap: balance; max-width: 18ch; }
.aipr-ui-pgh-dek { margin: 16px 0 0; max-width: 52ch; font-size: 19px; line-height: 1.5; color: var(--aipr-ui-mute); text-wrap: pretty; }
.aipr-ui-pgh-dek--serif { font-family: 'AIPR Serif', ui-serif, Georgia, serif; font-size: 22px; line-height: 1.45; color: var(--aipr-ui-body); max-width: 46ch; }
.aipr-ui-pgh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 28px 0 0; }
.aipr-ui-pgh-note { max-width: 48ch; font-size: 14.5px; line-height: 1.5; color: var(--aipr-ui-mute); }
.aipr-ui-pgh-note a, .aipr-ui-pg .aipr-ui-link { color: var(--aipr-ui-accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.aipr-ui-pg .aipr-ui-link:hover, .aipr-ui-pgh-note a:hover { color: var(--aipr-ui-ink); }

/* Buttons: the header's — ink, square, no shadow. Element selector is
   load-bearing (see site-ui-pages-v1.css). */
.aipr-ui-pg a.aipr-ui-btn, .aipr-ui-pg button.aipr-ui-btn {
    display: inline-block; flex: 0 0 auto; padding: 11px 18px; border: 1px solid var(--aipr-ui-ink);
    background: var(--aipr-ui-ink); color: var(--aipr-ui-paper); font-family: var(--aipr-ui-sans);
    font-size: 14.5px; font-weight: 600; line-height: 1.2; letter-spacing: -.005em; cursor: pointer; transition: opacity 120ms ease;
}
.aipr-ui-pg a.aipr-ui-btn:hover, .aipr-ui-pg button.aipr-ui-btn:hover { opacity: .85; }
.aipr-ui-pg a.aipr-ui-btn--ghost { background: none; color: var(--aipr-ui-ink); }
.aipr-ui-pg a.aipr-ui-btn--ghost:hover { background: var(--aipr-ui-ink); color: var(--aipr-ui-paper); opacity: 1; }

/* ─── Blocks: rail + content ───────────────────────────────── */
.aipr-ui-blk { display: grid; grid-template-columns: var(--aipr-ui-rail) minmax(0, 1fr); gap: 48px; padding: 36px 0; border-top: 1px solid var(--aipr-ui-line); }
.aipr-ui-blk-rail h2 { margin: 0 0 6px; font-size: 22px; font-weight: 600; line-height: 1.15; letter-spacing: -.02em; color: var(--aipr-ui-ink); }
.aipr-ui-blk-rail p { max-width: 26ch; font-size: 13.5px; line-height: 1.45; color: var(--aipr-ui-faint); }
.aipr-ui-blk-body { max-width: var(--aipr-ui-read); font-size: 16px; line-height: 1.6; }
.aipr-ui-blk-body > p { margin: 0 0 16px; max-width: 66ch; color: var(--aipr-ui-body); }
.aipr-ui-blk-body > p:last-child { margin-bottom: 0; }
/* A paragraph that follows a list closes the block — the list's last row has
   had its rule and its padding removed, so without this the sentence sits on
   top of the row above it. */
.aipr-ui-blk-body > ul + p,
.aipr-ui-blk-body > ol + p,
.aipr-ui-blk-body > div + p { margin-top: 22px; }
.aipr-ui-blk-body b, .aipr-ui-blk-body strong { font-weight: 600; color: var(--aipr-ui-ink); }
.aipr-ui-blk-body a:not(.aipr-ui-btn) { color: var(--aipr-ui-accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.aipr-ui-blk-body a:not(.aipr-ui-btn):hover { color: var(--aipr-ui-ink); }
.aipr-ui-blk-body .aipr-ui-lede { font-size: 18px; line-height: 1.55; color: var(--aipr-ui-ink); }

/* Rows: a label column and a text column, repeated. The "what we publish",
   "how to reach us", "facts" and "rules" lists are all this one object. */
.aipr-ui-rows { margin: 0; padding: 0; list-style: none; }
.aipr-ui-rows li { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--aipr-ui-line); font-size: 15px; line-height: 1.5; }
.aipr-ui-rows li:first-child { padding-top: 0; }
.aipr-ui-rows li:last-child { border-bottom: none; padding-bottom: 0; }
.aipr-ui-rows li > b { display: block; font-weight: 600; color: var(--aipr-ui-ink); }
.aipr-ui-rows li > b small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 500; color: var(--aipr-ui-faint); }
.aipr-ui-rows li > span { color: var(--aipr-ui-body); }
.aipr-ui-rows li > span b { font-weight: 600; color: var(--aipr-ui-ink); }
.aipr-ui-rows--3 li { grid-template-columns: 200px minmax(0, 1fr) auto; align-items: start; }
.aipr-ui-rows-act { white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--aipr-ui-ink); }
/* One destination per line. Two inline links in this column ran together as
   "Advertise →support@aipressroom.com". */
.aipr-ui-rows-act a { display: block; color: var(--aipr-ui-ink) !important; text-decoration: none !important; }
.aipr-ui-rows-act a:hover { color: var(--aipr-ui-accent) !important; }
/* The subject-line prefix under an address. Its own line, because it is an
   instruction about the address above it rather than part of it. */
.aipr-ui-rows-act code {
    display: block;
    margin-top: 3px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--aipr-ui-faint);
}

/* A row list that follows prose rather than opening a block. */
.aipr-ui-rows--spaced { margin-top: 22px; }

/* Links and a footnote inside a block body. */
.aipr-ui-blk-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 18px 0 0;
    font-size: 15px;
}
.aipr-ui-blk-note {
    margin: 16px 0 0;
    max-width: 66ch;
    font-size: 14px;
    line-height: 1.55;
    color: var(--aipr-ui-faint);
}
.aipr-ui-blk-note a { color: var(--aipr-ui-faint); text-decoration: underline; text-underline-offset: 2px; }
.aipr-ui-blk-note a:hover { color: var(--aipr-ui-ink); }

/* Reply-time chip: the only place a promise is made, so it is typographic
   and repeated identically wherever the promise applies. */
/* Its own line. Inline, it sat on the baseline of the sentence before it and
   read as part of that sentence rather than as the promise it is. */
.aipr-ui-sla { display: block; width: -moz-fit-content; width: fit-content; margin-top: 10px; padding: 2px 7px; border: 1px solid var(--aipr-ui-line); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--aipr-ui-mute); }

/* Offers (Advertise): name + price | what you get | action. Same row object,
   the price set in 800 because it is the one number on the page. */
.aipr-ui-offers { margin: 0; padding: 0; list-style: none; }
.aipr-ui-offers li { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 24px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--aipr-ui-line); }
.aipr-ui-offers li:first-child { padding-top: 0; }
.aipr-ui-offers li:last-child { border-bottom: none; }
.aipr-ui-offers-name b { display: block; font-size: 16px; font-weight: 600; color: var(--aipr-ui-ink); }
.aipr-ui-offers-name .aipr-ui-price { display: block; margin-top: 4px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--aipr-ui-ink); font-variant-numeric: tabular-nums; }
.aipr-ui-offers-name .aipr-ui-price--text { font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--aipr-ui-mute); }
.aipr-ui-offers-name .aipr-ui-price small { font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: var(--aipr-ui-faint); margin-left: 4px; }
.aipr-ui-offers ul { margin: 0; padding: 0; list-style: none; }
.aipr-ui-offers ul li { display: block; position: relative; padding: 0 0 0 16px; margin: 0 0 4px; border: 0; font-size: 15px; line-height: 1.5; color: var(--aipr-ui-body); }
.aipr-ui-offers ul li::before { content: ''; position: absolute; left: 2px; top: .68em; width: 5px; height: 5px; border-radius: 50%; background: var(--aipr-ui-accent); }
.aipr-ui-offers-note { display: block; margin-top: 8px; font-size: 13px; color: var(--aipr-ui-faint); }

/* Roles (Careers): title | summary + lists | apply */
.aipr-ui-role { padding: 22px 0; border-bottom: 1px solid var(--aipr-ui-line); }
.aipr-ui-role:first-child { padding-top: 0; }
.aipr-ui-role:last-child { border-bottom: none; }
.aipr-ui-role-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 8px; }
.aipr-ui-role-head h3 { font-size: 19px; font-weight: 600; letter-spacing: -.015em; color: var(--aipr-ui-ink); }
.aipr-ui-role-head span { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--aipr-ui-faint); }
.aipr-ui-role p { margin: 0 0 10px; max-width: 66ch; font-size: 15.5px; line-height: 1.55; }
.aipr-ui-role-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 6px 0 14px; }
.aipr-ui-role-cols h4 { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--aipr-ui-faint); margin-bottom: 6px; }
.aipr-ui-role-cols ul li { position: relative; padding-left: 16px; margin-bottom: 4px; font-size: 14.5px; line-height: 1.5; }
.aipr-ui-role-cols ul li::before { content: ''; position: absolute; left: 2px; top: .68em; width: 5px; height: 5px; border-radius: 50%; background: var(--aipr-ui-accent); }

/* Bulleted lists in a block body (rules, what we take / don't). */
.aipr-ui-list { margin: 0 0 14px; padding: 0; list-style: none; max-width: 66ch; }
.aipr-ui-list li { position: relative; padding-left: 18px; margin: 0 0 6px; font-size: 15.5px; line-height: 1.55; }
.aipr-ui-list li::before { content: ''; position: absolute; left: 2px; top: .68em; width: 5px; height: 5px; border-radius: 50%; background: var(--aipr-ui-accent); }
.aipr-ui-list--no li::before { background: none; width: auto; height: auto; top: 0; left: 0; content: '✕'; font-size: 11px; font-weight: 700; color: #b42318; line-height: 1.55; }
.aipr-ui-cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.aipr-ui-cols2 h3 { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--aipr-ui-faint); margin-bottom: 8px; }

/* Principles: three lines, set large — the statement the page is built on. */
.aipr-ui-tenets { margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--aipr-ui-ink); }
.aipr-ui-tenets li { padding: 4px 0 4px 22px; font-size: 20px; line-height: 1.4; font-weight: 500; letter-spacing: -.015em; color: var(--aipr-ui-ink); }

/* Form (Contact): WPForms markup, restyled. Square fields, ink focus. */
.aipr-ui-form { max-width: 560px; }
.aipr-ui-form label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--aipr-ui-ink); }
.aipr-ui-form .aipr-ui-field { margin: 0 0 18px; }
.aipr-ui-form input[type=text], .aipr-ui-form input[type=email], .aipr-ui-form select, .aipr-ui-form textarea {
    width: 100%; padding: 11px 12px; border: 1px solid var(--aipr-ui-faint); border-radius: 0; background: var(--aipr-ui-paper);
    font: 15px/1.4 var(--aipr-ui-sans); color: var(--aipr-ui-ink); -webkit-appearance: none; appearance: none;
}
.aipr-ui-form select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%230e0e12' stroke-width='1.5'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; }
.aipr-ui-form textarea { min-height: 150px; resize: vertical; }
.aipr-ui-form input:focus, .aipr-ui-form select:focus, .aipr-ui-form textarea:focus { outline: 2px solid var(--aipr-ui-accent); outline-offset: 0; border-color: var(--aipr-ui-accent); }
.aipr-ui-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font-size: 13.5px; color: var(--aipr-ui-faint); }

/* Address / small print */
.aipr-ui-addr { font-style: normal; font-size: 15px; line-height: 1.6; color: var(--aipr-ui-body); }
.aipr-ui-fine {
    margin: 40px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid var(--aipr-ui-line);
    font-size: 13px;
    line-height: 1.55;
    color: var(--aipr-ui-faint);
}

/* ─── Documents ───────────────────────────────────────────────
   Two shapes from one template. Without a contents rail the body sits in the
   same column the company pages use; with one, the rail holds it and pins it
   while the reader scrolls. */

.aipr-ui-doc { max-width: var(--aipr-ui-read); }
.aipr-ui-doc--toc {
    display: grid;
    grid-template-columns: var(--aipr-ui-rail) minmax(0, var(--aipr-ui-read));
    gap: 48px;
    max-width: none;
}

/* The revision date is the single most consulted fact on a policy page —
   "is this the version I agreed to" — so it is a fixed element of the
   template rather than a line someone remembered to type. One date, not
   three: thirteen of the seventeen legal pages measured print exactly one,
   directly under the title. */
.aipr-ui-doc-updated {
    margin: 18px 0 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--aipr-ui-faint);
}

.aipr-ui-toc {
    position: sticky;
    top: calc(var(--aipr-ui-h) + var(--aipr-ui-top) + 24px);
    align-self: start;
    padding: 8px 0 0;
}
.aipr-ui-toc-h {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--aipr-ui-faint);
}
.aipr-ui-toc ul { margin: 0; padding: 0; list-style: none; }
.aipr-ui-toc li { margin: 0; padding: 0; }
.aipr-ui-toc li::before { content: none; }

/* NO COUNTER HERE. An earlier draft incremented one and printed it beside
   each entry, which on a document that numbers its own sections produced
   "1  1. Acceptance of Terms" — two numbering systems for one list. Where a
   document numbers itself the number is already in the text; where it does
   not, the entries are names and a number would add nothing. */
.aipr-ui-toc a {
    display: block;
    margin-left: -12px;
    padding: 5px 0 5px 10px;
    border-left: 2px solid transparent;
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--aipr-ui-mute);
}
.aipr-ui-toc a:hover { color: var(--aipr-ui-ink); }

.aipr-ui-doc-body { font-size: 17px; line-height: 1.75; }
.aipr-ui-doc-body p { margin: 0 0 20px; color: var(--aipr-ui-body); }
.aipr-ui-doc-body h2 {
    margin: 48px 0 14px;
    font-family: var(--aipr-ui-sans);
    font-size: 25px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: var(--aipr-ui-ink);
}
.aipr-ui-doc-body h3 {
    margin: 32px 0 10px;
    font-family: var(--aipr-ui-sans);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.01em;
    color: var(--aipr-ui-ink);
}

/* Anchored headings are landed on from outside links, so leave the sticky
   header room rather than putting the heading under it. */
.aipr-ui-doc-body h2[id],
.aipr-ui-doc-body h3[id] {
    scroll-margin-top: calc(var(--aipr-ui-h) + var(--aipr-ui-top) + 16px);
}

.aipr-ui-doc-body ul { margin: 0 0 20px; padding: 0; list-style: none; }
.aipr-ui-doc-body li {
    position: relative;
    margin: 0 0 8px;
    padding-left: 22px;
    list-style: none;
}
.aipr-ui-doc-body li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: .68em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--aipr-ui-accent);
}
.aipr-ui-doc-body a {
    color: var(--aipr-ui-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    /* Long addresses and URLs must not push the column wider than the page. */
    overflow-wrap: anywhere;
}
.aipr-ui-doc-body a:hover { color: var(--aipr-ui-ink); }
.aipr-ui-doc-body strong { font-weight: 600; color: var(--aipr-ui-ink); }
.aipr-ui-doc-body hr { margin: 40px 0; border: 0; border-top: 1px solid var(--aipr-ui-line); }

/* "In short": the layered notice. A minority practice — four of seventeen —
   kept because the two bodies that publish guidance on this both call for it:
   GDPR Article 12(1) ("concise, transparent, intelligible and easily
   accessible ... clear and plain language") and the ICO's layered-notice
   guidance. It is ruled, not boxed, and it always ends by saying the document
   governs, so it adds no promise of its own.

   These rules come AFTER .aipr-ui-doc-body's: both selectors are (0,1,1), so
   source order is what makes them win, and moving this block up the file
   would silently restore the 48px heading margin. */
.aipr-ui-doc-sum {
    margin: 0 0 36px;
    padding: 18px 0 20px;
    border-top: 2px solid var(--aipr-ui-ink);
    border-bottom: 1px solid var(--aipr-ui-line);
}
.aipr-ui-doc-sum h2 {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--aipr-ui-accent);
}
.aipr-ui-doc-sum ul { margin: 0; }
.aipr-ui-doc-sum li { font-size: 16px; line-height: 1.55; margin-bottom: 6px; }
.aipr-ui-doc-sum-note { margin: 12px 0 0; font-size: 13.5px; color: var(--aipr-ui-faint); }

/* ─── Brand ───────────────────────────────────────────────────
   Not a document — a list of things to take. The layout is a label column and
   a content column, repeated, so a reader scanning for "colour" or "name"
   finds it down the left edge without a table of contents. Everything is flat:
   one hairline between blocks, no cards, no radius, no shadow. The only
   filled shapes on the page are the logo previews and the colour swatches,
   which is the whole point of it. */

.aipr-ui-brand {
    max-width: 1000px;
    margin: 0 auto;
    padding: 48px var(--aipr-ui-pad) 96px;
}

.aipr-ui-brand-hero {
    padding: 0 0 40px;
}

.aipr-ui-brand-h1 {
    margin: 0;
    font-family: var(--aipr-ui-sans);
    font-size: 44px;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.03em;
    color: var(--aipr-ui-ink);
}

.aipr-ui-brand-dek {
    margin: 14px 0 0;
    max-width: 46ch;
    font-size: 19px;
    line-height: 1.5;
    color: var(--aipr-ui-mute);
    text-wrap: pretty;
}

.aipr-ui-brand-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin: 28px 0 0;
}

.aipr-ui-brand-actions-note {
    max-width: 48ch;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--aipr-ui-mute);
}

.aipr-ui-brand-actions-note a {
    color: var(--aipr-ui-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
}

/* Same button the header uses: ink, square, no shadow.
   The element selector is load-bearing: .aipr-ui-pg a sets color:inherit at
   (0,1,1) and a bare .aipr-ui-brand-btn at (0,1,0) loses to it, which paints
   ink text on an ink button. */
.aipr-ui-pg a.aipr-ui-brand-btn {
    display: inline-block;
    flex: 0 0 auto;
    padding: 11px 18px;
    background: var(--aipr-ui-ink);
    color: var(--aipr-ui-paper);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.005em;
    transition: opacity 120ms ease;
}

.aipr-ui-pg a.aipr-ui-brand-btn:hover {
    opacity: .85;
}

/* ─── Blocks ─────────────────────────────────────────────── */

.aipr-ui-brand-blk {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 48px;
    padding: 34px 0;
    border-top: 1px solid var(--aipr-ui-line);
}

.aipr-ui-brand-blk-head h2 {
    margin: 0 0 6px;
    font-family: var(--aipr-ui-sans);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--aipr-ui-ink);
}

.aipr-ui-brand-blk-head p {
    margin: 0;
    max-width: 26ch;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--aipr-ui-faint);
}

/* ─── Asset rows ─────────────────────────────────────────── */

.aipr-ui-brand-asset {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--aipr-ui-line);
}

.aipr-ui-brand-asset:first-child {
    padding-top: 0;
}

.aipr-ui-brand-asset:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

/* The preview plate is the only place on the site where the logo is shown as
   an object rather than used as one, so it gets a frame and nothing else. */
.aipr-ui-brand-pv {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 76px;
    padding: 14px 22px;
    border: 1px solid var(--aipr-ui-line);
    background: var(--aipr-ui-paper);
    color: var(--aipr-ui-ink);
}

.aipr-ui-brand-pv svg,
.aipr-ui-brand-pv img {
    display: block;
    max-width: 100%;
    height: auto;
}

.aipr-ui-brand-pv--logo-reversed,
.aipr-ui-brand-pv--wordmark-reversed {
    background: var(--aipr-ui-band);
    border-color: var(--aipr-ui-band);
    color: #fff;
    --aipr-ui-wedge: #a99bff;
}

/* The one-colour variant: the wedge stops being the brand colour. */
.aipr-ui-brand-pv--logo-black {
    --aipr-ui-wedge: var(--aipr-ui-ink);
}

.aipr-ui-brand-asset-meta b {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--aipr-ui-ink);
}

.aipr-ui-brand-asset-meta span {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--aipr-ui-faint);
}

.aipr-ui-brand-files {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.aipr-ui-pg .aipr-ui-brand-chip {
    display: inline-block;
    padding: 6px 10px;
    border: 1px solid var(--aipr-ui-ink);
    background: none;
    color: var(--aipr-ui-ink);
    font-family: var(--aipr-ui-sans);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

.aipr-ui-pg .aipr-ui-brand-chip:hover {
    background: var(--aipr-ui-ink);
    color: var(--aipr-ui-paper);
}

.aipr-ui-pg .aipr-ui-brand-chip--quiet {
    border-color: var(--aipr-ui-line);
    color: var(--aipr-ui-mute);
}

.aipr-ui-pg .aipr-ui-brand-copied,
.aipr-ui-pg .aipr-ui-brand-copied:hover {
    border-color: var(--aipr-ui-accent);
    background: none;
    color: var(--aipr-ui-accent);
}

.aipr-ui-brand-copied::after {
    content: ' ✓';
}

/* ─── Colour ─────────────────────────────────────────────── */

.aipr-ui-brand-colours {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.aipr-ui-brand-colour {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 8px 8px;
    border: 1px solid var(--aipr-ui-line);
    background: none;
    font-family: var(--aipr-ui-sans);
    text-align: left;
    cursor: pointer;
}

.aipr-ui-brand-colour i {
    display: block;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
}

.aipr-ui-brand-colour b {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--aipr-ui-ink);
}

.aipr-ui-brand-colour code {
    display: block;
    margin-top: 1px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--aipr-ui-mute);
}

.aipr-ui-brand-colour.aipr-ui-brand-copied {
    border-color: var(--aipr-ui-accent);
}

.aipr-ui-brand-line {
    margin: 16px 0 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--aipr-ui-mute);
}

/* ─── Rules and don'ts ───────────────────────────────────── */

.aipr-ui-brand-rules {
    margin: 0;
    padding: 0;
    list-style: none;
}

.aipr-ui-brand-rules li {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 24px;
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid var(--aipr-ui-line);
    font-size: 15px;
    line-height: 1.5;
    list-style: none;
}

.aipr-ui-brand-rules li:first-child {
    padding-top: 0;
}

.aipr-ui-brand-rules li:last-child {
    border-bottom: none;
}

.aipr-ui-brand-rules b {
    font-weight: 600;
    color: var(--aipr-ui-ink);
}

.aipr-ui-brand-rules span {
    color: var(--aipr-ui-body);
}

.aipr-ui-brand-donts {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 18px 0 0;
}

.aipr-ui-brand-dont {
    width: 156px;
    margin: 0;
    border: 1px solid var(--aipr-ui-line);
}

.aipr-ui-brand-dont-st {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 12px;
    overflow: hidden;
    color: var(--aipr-ui-ink);
}

.aipr-ui-brand-dont-st svg {
    display: block;
    max-width: 100%;
    height: auto;
}

.aipr-ui-brand-dont figcaption {
    padding: 6px 10px;
    border-top: 1px solid var(--aipr-ui-line);
    font-size: 12px;
    color: var(--aipr-ui-mute);
}

.aipr-ui-brand-dont figcaption::before {
    content: '✕ ';
    font-weight: 700;
    color: #b42318;
}

/* The three misuses, shown rather than described — each is the real wordmark
   put through the thing the rule forbids. */
.aipr-ui-brand-dont--stretched svg {
    transform: scaleX(1.45);
}

.aipr-ui-brand-dont--recoloured {
    color: #e8590c;
}

.aipr-ui-brand-dont--outlined {
    color: var(--aipr-ui-paper);
}

.aipr-ui-brand-dont--outlined svg {
    filter: drop-shadow(0 0 1px var(--aipr-ui-ink)) drop-shadow(0 0 1px var(--aipr-ui-ink))
        drop-shadow(0 0 1px var(--aipr-ui-ink));
}

/* ─── Name, descriptions, steps ──────────────────────────── */

.aipr-ui-brand-name {
    margin: 0;
    max-width: 60ch;
    font-size: 16px;
    line-height: 1.6;
    color: var(--aipr-ui-body);
}

.aipr-ui-brand-name b {
    font-weight: 600;
    color: var(--aipr-ui-ink);
}

.aipr-ui-brand-name s {
    color: var(--aipr-ui-faint);
}

.aipr-ui-brand-copy {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr) auto;
    gap: 22px;
    align-items: start;
    padding: 16px 0;
    border-bottom: 1px solid var(--aipr-ui-line);
}

.aipr-ui-brand-copy:first-child {
    padding-top: 0;
}

.aipr-ui-brand-copy:last-child {
    border-bottom: none;
}

.aipr-ui-brand-copy-lab {
    padding-top: 3px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--aipr-ui-accent);
}

.aipr-ui-brand-copy p {
    margin: 0;
    max-width: 66ch;
    font-size: 16px;
    line-height: 1.6;
    color: var(--aipr-ui-body);
}

.aipr-ui-brand-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: aipr-ui-brand-step;
}

.aipr-ui-brand-steps li {
    counter-increment: aipr-ui-brand-step;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid var(--aipr-ui-line);
    font-size: 15px;
    line-height: 1.5;
    list-style: none;
}

.aipr-ui-brand-steps li:first-child {
    padding-top: 0;
}

.aipr-ui-brand-steps li:last-child {
    border-bottom: none;
}

.aipr-ui-brand-steps li::before {
    content: counter(aipr-ui-brand-step, decimal-leading-zero);
    padding-top: 3px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--aipr-ui-faint);
}

.aipr-ui-brand-steps code {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 13.5px;
    background: var(--aipr-ui-tint);
    color: var(--aipr-ui-ink);
    padding: .1em .4em;
    overflow-wrap: anywhere;
}

.aipr-ui-brand-after {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin: 20px 0 0;
    font-size: 14px;
    color: var(--aipr-ui-faint);
}

.aipr-ui-brand-legal {
    margin: 0;
    padding: 28px 0 0;
    border-top: 1px solid var(--aipr-ui-line);
    max-width: 80ch;
    font-size: 13px;
    line-height: 1.55;
    color: var(--aipr-ui-faint);
}

.aipr-ui-brand :focus-visible {
    outline: 2px solid var(--aipr-ui-accent);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .aipr-ui-pg a.aipr-ui-brand-btn,
    .aipr-ui-pg .aipr-ui-brand-chip {
        transition: none;
    }
}

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

@media (max-width: 860px) {
    .aipr-ui-brand-blk {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .aipr-ui-brand-blk-head p {
        max-width: 52ch;
    }
    .aipr-ui-brand-rules li {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

@media (max-width: 600px) {
    .aipr-ui-brand {
        padding: 36px 20px 72px;
    }
    .aipr-ui-brand-h1 {
        font-size: 32px;
    }
    .aipr-ui-brand-dek {
        font-size: 17px;
    }
    /* The asset row stacks: plate, then what it is, then the files. Three
       columns at 375px would put two-character chips under a logo squeezed to
       80px, which is neither a preview nor a button. */
    .aipr-ui-brand-asset {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 20px 0;
    }
    .aipr-ui-brand-files {
        justify-content: flex-start;
    }
    .aipr-ui-brand-copy {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .aipr-ui-brand-dont {
        width: calc(50% - 7px);
    }
}

/* ─── Narrow ─────────────────────────────────────────────── */
@media (max-width: 900px) {
    .aipr-ui-blk { grid-template-columns: 1fr; gap: 18px; padding: 28px 0; }
    .aipr-ui-blk-rail p { max-width: 56ch; }
    .aipr-ui-doc--toc { grid-template-columns: 1fr; gap: 0; }
    .aipr-ui-toc { position: static; padding: 20px 0 0; }
    .aipr-ui-toc ul { display: flex; flex-wrap: wrap; gap: 4px 14px; }
    .aipr-ui-toc a { margin-left: 0; padding: 4px 0; border-left: 0; }
}
@media (max-width: 600px) {
    .aipr-ui-page { padding: 0 20px 72px; }
    .aipr-ui-pgh { padding: 36px 0 28px; }
    .aipr-ui-pgh-h1 { font-size: 32px; }
    .aipr-ui-pgh-dek { font-size: 17px; }
    .aipr-ui-pgh-dek--serif { font-size: 19px; }
    .aipr-ui-rows li, .aipr-ui-rows--3 li, .aipr-ui-offers li { grid-template-columns: 1fr; gap: 6px; }
    .aipr-ui-rows-act { white-space: normal; }
    .aipr-ui-role-cols, .aipr-ui-cols2 { grid-template-columns: 1fr; }
    .aipr-ui-tenets li { font-size: 17px; }
    .aipr-ui-doc-body { font-size: 16px; }
    .aipr-ui-doc-body h2 { font-size: 21px; margin-top: 40px; }
    .aipr-ui-doc-contact { grid-template-columns: 1fr; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .aipr-ui-pg a.aipr-ui-btn { transition: none; } }