/**
 * site-ui-pages-v4.css — the company and legal pages, and /brand/.
 *
 * THE FILENAME CARRIES THE DESIGN VERSION: pages cached at the edge keep
 * asking for the file they were built with, so a redesign ships a new name
 * and the old files stay on disk. Rolling back is one constant in
 * class-ui-assets.php.
 *
 * v4 (1.19.0) is v3 with the legal set added at the end of this file: the
 * Terms and the Privacy Policy share one layout. Every other page renders
 * exactly as it did under v3.
 *
 * v3 (1.14.0) is v2 with the Contact page redrawn: the old contact form and
 * address rules are gone, and Contact has a section of its own at the end of
 * this file. Every other page renders exactly as it did under v2.
 *
 * ONE GRAMMAR, MANY 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. Contact is the first page to leave it
 * (1.14.0): it is one list, and a list reads down one edge without a rail.
 *
 * 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 the
 * shell stylesheet, 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); }

/* Small print */
.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; } }

/* ═══ Contact (1.14.0) ═══════════════════════════════════════
   One list — purpose on the left, address on the right, 5 : 7 across the
   full container — then the form on the same grid. Sizes: 64 title (above
   the grammar's 44 on purpose, see pages/contact.php), 32 section, 24 row,
   20 dek, 17 text, 15 field label. */

.aipr-ui-cx {
    --aipr-ui-cx-field: #d4d4dc;
    --aipr-ui-cx-error: #b42318;
    max-width: var(--aipr-ui-container);
    margin: 0 auto;
    padding: 0 var(--aipr-ui-pad);
    font-size: 17px;
    line-height: 1.5;
    color: var(--aipr-ui-body);
}

.aipr-ui-cx-hero { padding: 96px 0 56px; }
.aipr-ui-cx-h1 { font-size: 64px; font-weight: 600; line-height: 1.02; letter-spacing: -.04em; color: var(--aipr-ui-ink); }
.aipr-ui-cx-dek { margin-top: 18px; font-size: 20px; line-height: 1.5; color: var(--aipr-ui-mute); }

.aipr-ui-cx-list { border-top: 2px solid var(--aipr-ui-ink); }
.aipr-ui-cx-row,
.aipr-ui-cx-sec { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; }
.aipr-ui-cx-row { align-items: baseline; padding: 26px 0 28px; border-bottom: 1px solid var(--aipr-ui-line); }
.aipr-ui-cx-k { font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; color: var(--aipr-ui-ink); }
.aipr-ui-cx-d { margin-top: 6px; font-size: 17px; line-height: 1.45; color: var(--aipr-ui-mute); }
.aipr-ui-cx-v { font-size: 24px; font-weight: 400; font-style: normal; line-height: 1.3; letter-spacing: -.015em; color: var(--aipr-ui-ink); overflow-wrap: anywhere; }
/* The underline draws in on hover. Element in the selector: .aipr-ui-pg a
   is (0,1,1) and sets color: inherit. */
.aipr-ui-pg .aipr-ui-cx-v a {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
    transition: color .15s, background-size .2s;
}
.aipr-ui-pg .aipr-ui-cx-v a:hover { color: var(--aipr-ui-accent); background-size: 100% 1px; }
.aipr-ui-cx-arr { display: inline-block; transition: transform .18s ease; }
.aipr-ui-cx-v a:hover .aipr-ui-cx-arr { transform: translateX(4px); }

.aipr-ui-cx-sec { padding: 104px 0 128px; }
.aipr-ui-cx-sec-h { font-size: 32px; font-weight: 600; line-height: 1.1; letter-spacing: -.03em; color: var(--aipr-ui-ink); }
.aipr-ui-cx-sec .aipr-ui-cx-d { margin-top: 12px; max-width: 30ch; }
.aipr-ui-cx-fallback { font-size: 24px; line-height: 1.3; color: var(--aipr-ui-ink); }
.aipr-ui-pg .aipr-ui-cx-fallback a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ─── The WPForms form, restyled ─────────────────────────────
   Scoped by id on purpose. WPForms' own "Base and form theme styling" sheet
   reaches (0,5,2) on its submit button (div.wpforms-container-full
   .wpforms-form button[type=submit]:not(:hover):not(:active)), and an id is
   the one thing that outranks every class-level rule it ships without an
   !important of our own. So the form looks the same whether WPForms' setting
   is "No styling" (what the site uses) or someone switches it back. */

#aipr-ui-cx-form .wpforms-container { margin: 0; padding: 0; max-width: none; }
#aipr-ui-cx-form .wpforms-form { margin: 0; padding: 0; }
#aipr-ui-cx-form .wpforms-field-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 22px 16px;
    margin: 0;
    padding: 0;
}
#aipr-ui-cx-form .wpforms-field { grid-column: 1 / -1; float: none; width: auto; margin: 0; padding: 0; }
/* Name and email side by side, only while they are next to each other in
   the form: if the order changes, both go back to full width rather than
   the grid reordering what a screen reader hears. */
@supports selector(:has(+ *)) {
    #aipr-ui-cx-form .wpforms-field-name:has(+ .wpforms-field-email),
    #aipr-ui-cx-form .wpforms-field-name + .wpforms-field-email { grid-column: auto; }
}
/* The honeypot, if WPForms ever adds one, and anything it marks hidden. */
#aipr-ui-cx-form :is(.wpforms-field-hp, .wpforms-hidden) { display: none !important; }

#aipr-ui-cx-form .wpforms-field-label {
    display: block;
    float: none;
    margin: 0 0 8px;
    padding: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--aipr-ui-ink);
}
/* Every field is required and says so to assistive tech (the required
   attribute). The asterisk says it a second time, to sighted readers only. */
#aipr-ui-cx-form .wpforms-required-label { display: none; }
#aipr-ui-cx-form .wpforms-field-description { margin: 6px 0 0; font-size: 15px; color: var(--aipr-ui-mute); }

/* :where() keeps this at (1,1,0), under the select and textarea rules below
   (1,1,1). With :is() it took input[type=text]'s weight, (1,2,1), and its
   background shorthand wiped the select arrow and its min-height the
   textarea's height. The id alone still outranks every WPForms rule. */
#aipr-ui-cx-form .wpforms-field :where(input[type=text], input[type=email], select, textarea) {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--aipr-ui-cx-field);
    border-radius: 0;
    box-shadow: none;
    background: var(--aipr-ui-paper);
    font: 400 17px/1.4 var(--aipr-ui-sans);
    color: var(--aipr-ui-ink);
    -webkit-appearance: none;
    appearance: none;
}
#aipr-ui-cx-form .wpforms-field :where(input[type=text], input[type=email], select, textarea):hover { border-color: var(--aipr-ui-faint); }
#aipr-ui-cx-form .wpforms-field :where(input[type=text], input[type=email], select, textarea):focus {
    outline: 2px solid var(--aipr-ui-accent);
    outline-offset: 0;
    border-color: var(--aipr-ui-accent);
    box-shadow: none;
}
#aipr-ui-cx-form .wpforms-field select {
    padding-right: 44px;
    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 16px center;
    background-size: 12px 8px;
    cursor: pointer;
}
#aipr-ui-cx-form .wpforms-field textarea { min-height: 200px; resize: vertical; }

/* Errors: WPForms prints an <em> (modern markup) or a <label> (jQuery
   Validate) under the field and marks the field itself .wpforms-error. */
#aipr-ui-cx-form :is(em, label).wpforms-error {
    display: block;
    margin: 8px 0 0;
    padding: 0;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    color: var(--aipr-ui-cx-error);
}
#aipr-ui-cx-form em.wpforms-error::before { content: none; display: none; }
#aipr-ui-cx-form .wpforms-field :is(input, select, textarea).wpforms-error { border-color: var(--aipr-ui-cx-error); }
#aipr-ui-cx-form :is(.wpforms-error-container, .wpforms-error-noscript) {
    margin: 0 0 22px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 15px;
    line-height: 1.5;
    color: var(--aipr-ui-cx-error);
}

/* Turnstile. In interaction-only mode (AIPR_UI_Form::turnstile_on_demand)
   the widget's own <div> is 0px tall until Cloudflare wants a click, then
   72px. The margin sits on that <div>: while it is empty the margin collapses
   into the button row's 28px, so a hidden widget adds no space; once it
   shows, it is 22px under the message field like any other field. (The
   iframe is inside Cloudflare's shadow root, out of reach of this sheet.) */
#aipr-ui-cx-form .wpforms-recaptcha-container,
#aipr-ui-cx-form .wpforms-turnstile { margin: 0; padding: 0; border: 0; }
#aipr-ui-cx-form .wpforms-turnstile > div { margin-top: 22px; }

#aipr-ui-cx-form .wpforms-submit-container {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 28px 0 0;
    padding: 0;
}
#aipr-ui-cx-form button.wpforms-submit {
    display: inline-block;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 15px 28px;
    border: 1px solid var(--aipr-ui-ink);
    border-radius: 0;
    box-shadow: none;
    background: var(--aipr-ui-ink);
    color: var(--aipr-ui-paper);
    font: 600 17px/1.2 var(--aipr-ui-sans);
    letter-spacing: 0;
    text-shadow: none;
    text-transform: none;
    cursor: pointer;
    transition: opacity .12s;
}
#aipr-ui-cx-form button.wpforms-submit:is(:hover, :active, :focus) { background: var(--aipr-ui-ink); color: var(--aipr-ui-paper); border-color: var(--aipr-ui-ink); box-shadow: none; }
#aipr-ui-cx-form button.wpforms-submit:hover { opacity: .85; }
#aipr-ui-cx-form button.wpforms-submit:focus-visible { outline: 2px solid var(--aipr-ui-accent); outline-offset: 3px; }
#aipr-ui-cx-form button.wpforms-submit::after { content: none; display: none; }
#aipr-ui-cx-form button.wpforms-submit:disabled { opacity: .6; cursor: default; }
#aipr-ui-cx-form .wpforms-submit-spinner { margin: 0; }

/* After sending: the confirmation replaces the form, set like a row. */
#aipr-ui-cx-form :is(.wpforms-confirmation-container, .wpforms-confirmation-container-full) {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.02em;
    color: var(--aipr-ui-ink);
}
#aipr-ui-cx-form :is(.wpforms-confirmation-container, .wpforms-confirmation-container-full) p { margin: 0; }

@media (max-width: 700px) {
    .aipr-ui-cx-hero { padding: 48px 0 32px; }
    .aipr-ui-cx-h1 { font-size: 40px; }
    .aipr-ui-cx-dek { font-size: 17px; }
    .aipr-ui-cx-row,
    .aipr-ui-cx-sec { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .aipr-ui-cx-k,
    .aipr-ui-cx-v,
    .aipr-ui-cx-fallback { font-size: 20px; }
    .aipr-ui-cx-sec { padding: 64px 0 72px; gap: 24px; }
    /* One column: the name / email pair's "auto" span is the full width. */
    #aipr-ui-cx-form .wpforms-field-container { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .aipr-ui-pg .aipr-ui-cx-v a,
    .aipr-ui-cx-arr,
    #aipr-ui-cx-form button.wpforms-submit { transition: none; }
}

/* ═══ The legal set (1.19.0) ══════════════════════════════════
   The Terms of Service and the Privacy Policy, one layout. Everything here is
   scoped to .aipr-ui-page--legal and comes last in the file, so the editorial
   guidelines — the same template without 'set' => 'legal' — are untouched.

   Grammar as on the front page: sizes from the nine (12 · 14 · 15 · 17 · 18 ·
   20 · 44), one label, a 2px ink rule opening the document and 1px rules
   between its sections, purple only on links. The list markers were purple
   dots under v3; here they are a short grey dash.

   Numbers stand in a 48px column of their own, the way a contract sets its
   clauses: the heading's number hangs in the column, the title and the text
   start at one edge. The numbers are the headings' own (class-ui-doc.php,
   number_headings()); nothing here counts. */

.aipr-ui-page--legal { --aipr-ui-lg-num: 48px; }
.aipr-ui-page--legal .aipr-ui-pgh { padding: 52px 0 32px; }
.aipr-ui-page--legal .aipr-ui-doc-updated {
    margin-top: 22px;
    font-size: 12px;
    letter-spacing: .08em;
}

.aipr-ui-lg {
    padding-top: 36px;
    border-top: 2px solid var(--aipr-ui-ink);
}

/* The rail: the other legal documents, then this one's contents. It pins
   while the reader scrolls, and scrolls itself on a short window rather than
   running off the bottom of it. */
.aipr-ui-lg-rail {
    position: sticky;
    top: calc(var(--aipr-ui-h) + var(--aipr-ui-top) + 24px);
    align-self: start;
    max-height: calc(100vh - var(--aipr-ui-h) - var(--aipr-ui-top) - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}
.aipr-ui-lg-rail::-webkit-scrollbar { display: none; }
.aipr-ui-lg-rail .aipr-ui-toc { position: static; padding: 0; }
.aipr-ui-lg-rail .aipr-ui-toc-h { margin: 0 0 10px; letter-spacing: .08em; }
.aipr-ui-lg-rail ul { margin: 0; padding: 0; list-style: none; }

.aipr-ui-lg-set {
    margin: 0 0 24px;
    padding: 0 0 20px;
    border-bottom: 1px solid var(--aipr-ui-line);
}
.aipr-ui-pg .aipr-ui-lg-set a {
    display: block;
    margin-left: -14px;
    padding: 5px 0 5px 12px;
    border-left: 2px solid transparent;
    font-size: 15px;
    line-height: 1.35;
    color: var(--aipr-ui-mute);
}
.aipr-ui-pg .aipr-ui-lg-set a:hover { color: var(--aipr-ui-ink); }
.aipr-ui-pg .aipr-ui-lg-set a[aria-current="page"] {
    border-left-color: var(--aipr-ui-ink);
    font-weight: 600;
    color: var(--aipr-ui-ink);
}

.aipr-ui-lg .aipr-ui-toc a {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    margin-left: 0;
    padding: 4px 0;
    border-left: 0;
    font-size: 14px;
    line-height: 1.4;
}
.aipr-ui-lg-tn {
    color: var(--aipr-ui-faint);
    font-variant-numeric: tabular-nums;
}
.aipr-ui-lg .aipr-ui-toc a:hover .aipr-ui-lg-tn { color: inherit; }

/* The body. */
.aipr-ui-lg-body {
    padding-left: var(--aipr-ui-lg-num);
    font-size: 17px;
    line-height: 1.7;
}
.aipr-ui-lg-body > p:first-child {
    font-size: 18px;
    line-height: 1.65;
    color: var(--aipr-ui-ink);
}
.aipr-ui-lg-body h2,
.aipr-ui-lg-body h3 { position: relative; }
.aipr-ui-lg-body h2 {
    margin: 44px 0 14px calc(var(--aipr-ui-lg-num) * -1);
    padding: 28px 0 0 var(--aipr-ui-lg-num);
    border-top: 1px solid var(--aipr-ui-line);
    font-size: 20px;
    line-height: 1.35;
    letter-spacing: -.015em;
}
.aipr-ui-lg-body h3 {
    margin: 28px 0 8px calc(var(--aipr-ui-lg-num) * -1);
    padding-left: var(--aipr-ui-lg-num);
    font-size: 17px;
    line-height: 1.4;
    letter-spacing: -.01em;
}
.aipr-ui-lg-n {
    position: absolute;
    left: 0;
    font-weight: 600;
    color: var(--aipr-ui-faint);
    font-variant-numeric: tabular-nums;
}
.aipr-ui-lg-body h2 .aipr-ui-lg-n { top: 28px; }
.aipr-ui-lg-body h3 .aipr-ui-lg-n { top: 0; }

.aipr-ui-lg-body ul { margin: 0 0 20px; }
.aipr-ui-lg-body li { margin: 0 0 6px; padding-left: 22px; }
.aipr-ui-lg-body li::before {
    left: 2px;
    top: .85em;
    width: 8px;
    height: 1.5px;
    border-radius: 0;
    background: var(--aipr-ui-mute);
}

/* Narrow: the rail becomes a row of two tabs — which document you are in,
   and the way to the other — and the contents list goes. On a phone the
   document is a single scroll and eighteen links above it would push the
   first clause below the fold. */
@media (max-width: 900px) {
    .aipr-ui-lg { padding-top: 0; }
    .aipr-ui-lg-rail { position: static; max-height: none; overflow: visible; }
    .aipr-ui-lg .aipr-ui-toc,
    .aipr-ui-lg-set .aipr-ui-toc-h { display: none; }
    .aipr-ui-lg-set { margin: 0 0 28px; padding: 0; }
    .aipr-ui-lg-set ul { display: flex; gap: 28px; }
    .aipr-ui-pg .aipr-ui-lg-set a {
        margin: 0 0 -1px;
        padding: 14px 0 12px;
        border-left: 0;
        border-bottom: 2px solid transparent;
    }
    .aipr-ui-pg .aipr-ui-lg-set a[aria-current="page"] { border-bottom-color: var(--aipr-ui-ink); }
}
/* A phone cannot spare a number column: the number goes back inline, in
   front of the title, still in grey. */
@media (max-width: 600px) {
    .aipr-ui-page--legal { --aipr-ui-lg-num: 0px; }
    .aipr-ui-page--legal .aipr-ui-pgh { padding: 36px 0 24px; }
    .aipr-ui-lg-body { font-size: 16px; }
    .aipr-ui-lg-body > p:first-child { font-size: 17px; }
    .aipr-ui-lg-body h2 { margin-top: 36px; padding-top: 24px; font-size: 18px; }
    .aipr-ui-lg-body h3 { font-size: 16px; }
    .aipr-ui-lg-n { position: static; margin-right: .3em; }
}

/* Printed, a legal document is the document: no site header, footer or
   rail, and links in the text colour. */
@media print {
    body:has(.aipr-ui-page--legal) :is(.aipr-ui-hdr, .aipr-ui-ftr, .aipr-ui-skip) { display: none !important; }
    .aipr-ui-page--legal { max-width: none; padding: 0; }
    .aipr-ui-page--legal .aipr-ui-pgh { padding: 0 0 16px; }
    .aipr-ui-lg { display: block; padding-top: 16px; }
    .aipr-ui-lg-rail { display: none; }
    .aipr-ui-lg-body { font-size: 11pt; }
    .aipr-ui-lg-body a { color: inherit; }
    .aipr-ui-lg-body h2 { break-after: avoid; }
}