/* apps/awacloud — the design sheet (sites-design W1, D3/D5). Page-level rules
 * only: every colour reads an alias declared in `tokens.css`, never a literal.
 * Emitted LAST (`src/pages/awacloud.js` headExtra) because W0 Pr2 measured that
 * LAST is the only position from which an equal-specificity declaration beats
 * the byte-verbatim legacy port — so this sheet needs no priority override at
 * all (F4: the awacloud total stays at the port's own four).
 * Sovereignty made visible: this layer pulls in no other stylesheet, declares
 * no font face and references no external file — the system font stack of the
 * port stays and the page fetches nothing from a third party. Of the 15
 * `sec-<variant>` semantic variants, § 8 below styles 7 (apps/BATCH_17/04);
 * `transition_sticky` stays `pages.css` § 5 (M5) and `coming`/`badge` stay
 * `pages.css` § 4c — neither is restated here. The rest are W3's. */

/* 1. Document — equal specificity to `index.css:1`, wins by emit order. */
body {
    color: var(--aw-text);
    background: var(--aw-surface);
}

/* 2. Type scale — institutional, not startup. Same specificity as
 *    `index.css:179-187`, so the three legacy breakpoints are mirrored below
 *    (992/768/576) or the port's own media rules would win back. */
h1 {
    font-size: var(--aw-step-5);
    font-weight: 600;
    letter-spacing: -0.01em;
}

h2 {
    font-size: var(--aw-step-4);
    font-weight: 600;
}

h3 {
    font-size: var(--aw-step-3);
}

.subtitle2 {
    font-size: var(--aw-step-1);
}

@media (max-width: 992px) {
    h1 {
        font-size: var(--aw-step-4);
    }

    h2 {
        font-size: var(--aw-step-3);
    }

    h3 {
        font-size: var(--aw-step-2);
    }
}

@media (max-width: 768px) {
    h1 {
        font-size: var(--aw-step-3);
    }

    h2 {
        font-size: var(--aw-step-2);
    }

    h3 {
        font-size: var(--aw-step-1);
    }
}

/* The 576 arm RESTATES the 768 values rather than stepping a fourth time: it
 * exists to hold the cascade against `index.css`'s own 576 rules, not to shrink
 * the scale again. Measured by the design pass: once the v2 vocabulary read
 * this ladder, the old arm put `h2` at 18px against a 17px body. */
@media (max-width: 576px) {
    h1 {
        font-size: var(--aw-step-3);
    }

    h2 {
        font-size: var(--aw-step-2);
    }

    h3 {
        font-size: var(--aw-step-1);
    }
}

/* 3. Chrome header — the BASE rules, written for the ui-templates
 *    `site.header` item (inline-styled, so hover could only be decoration).
 *    Since the 2026-09-19 corporate pass the header is the site-owned chrome
 *    (`src/pages/chrome.js`, no inline style): § 11 below is its real sheet and
 *    overrides these where they differ; the accent rule under the bar stays. */
header[role="banner"] {
    border-bottom: 0.1875rem solid var(--aw-accent);
    box-shadow: none;
}

header[role="banner"] a {
    padding: var(--fw-space-2) 0;
    text-decoration: none;
}

header[role="banner"] nav a:hover,
header[role="banner"] nav a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

header[role="banner"] > a:first-child {
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* 4. Hero — a typographic surface (D3), never an image: type, one rule and the
 *    sky voice. The muted voice is a COLOUR, never an opacity (the retired
 *    `pages.css` § 6.1 dimmed the subtitle to 0.92; AA now composites). */
.page-head {
    min-height: 0;
    background: var(--aw-hero-bg);
    background-image: linear-gradient(135deg, var(--aw-navy) 0%, var(--aw-navy) 55%, var(--aw-navy-2) 100%);
    color: var(--aw-hero-fg);
    text-shadow: none;
    text-align: left;
    padding: var(--fw-space-16) 0 var(--fw-space-12);
    border-bottom: 0.25rem solid var(--aw-accent);
}

.page-head h1 {
    max-width: 22ch;
    margin-inline: auto;
}

.page-head .subtitle {
    color: var(--aw-hero-sub);
    font-size: var(--aw-step-2);
    margin-top: var(--fw-space-4);
    opacity: 1;
}

/* 5. Home surfaces — generous rhythm, restrained accent. The accent appears as
 *    rules, underlines and buttons only: measured on navy it is 3.23:1 and
 *    fails AA, so it is never a text colour there. `.light` also re-states its
 *    text colour: the port paints it white for a navy band this sheet retires. */
.border-left {
    border-left-color: var(--aw-accent);
}

.light {
    color: var(--aw-text);
    background: var(--aw-surface);
    border-block: 1px solid var(--aw-rule);
}

.page {
    background: var(--aw-surface);
}

.s-top {
    box-shadow: none;
    padding-top: var(--fw-space-16);
}

.s-in-bottom {
    box-shadow: none;
    padding-bottom: var(--fw-space-12);
}

/* 6. Buttons and focus — an outlined affordance on the page surface. */
.btn-link {
    background: var(--aw-surface);
    border: 1px solid var(--aw-accent);
    border-radius: var(--fw-radius-md);
    color: var(--aw-accent);
    box-shadow: none;
}

.btn-link:hover {
    color: var(--aw-navy);
    box-shadow: none;
}

:focus-visible {
    outline: 3px solid var(--aw-accent);
    outline-offset: 2px;
}

/* 7. Chrome footer — `pages.css` § 6.2 carried over WITHOUT its four scoped
 *    token declarations (they live at `:root` now) and WITHOUT the 0.85
 *    opacity: the sky colour is the muted voice. */
footer[role="contentinfo"] {
    margin-top: var(--fw-space-12);
    border-top: 0.1875rem solid var(--aw-accent);
    font-size: 0.9375rem;
    line-height: 1.6;
}

footer[role="contentinfo"] a {
    padding: 0;
    text-decoration: underline;
}

footer[role="contentinfo"] a:hover {
    color: var(--aw-chrome-fg);
}

footer[role="contentinfo"] p {
    margin-block-end: 0;
}

/* 8. Semantic section variants (apps/BATCH_17/04, CONSTRAINTS.md § 11.4) —
 *    presentation over the generic sec-<variant> wrapper, CSS only;
 *    transition_sticky/coming/badge stay in pages.css, not restated here.
 *    sovereign has no corpus occurrence — proven on a scratch doc only.
 *    `main > .sec-x` ties the generic wrapper's own specificity and wins by
 *    emit order (F4); the accent is a border here, never text on navy
 *    (3.23:1, below AA).
 *    A band that changes its background also invalidates the SHEET-WIDE link
 *    states that were measured on white — `index.css:113` (accent) and
 *    `pages.css:146` (heading) — so every band that repaints re-states its own
 *    `:hover` too: sky on navy (10.9:1) and heading on the composited accent
 *    tint (11.3:1, where the accent itself would be 4.34:1, below AA). */
main > .sec-hero {
    padding: var(--fw-space-12) 0;
}

.sec-hero h1.container {
    border-bottom: 0.25rem solid var(--aw-accent);
}

main > .sec-cta {
    background: var(--aw-chrome-bg);
    color: var(--aw-chrome-fg);
}

main > .sec-cta :is(p, li) a {
    color: var(--aw-chrome-fg);
    border-bottom: 1px solid var(--aw-accent);
}

/* (0,2,3) — ties `pages.css:146`'s own hover arm and wins by emit order. */
main > .sec-cta :is(p, li) a:hover {
    color: var(--aw-chrome-muted);
}

.sec-cta em {
    color: var(--aw-chrome-muted);
}

main > .sec-demo,
main > .sec-sovereign {
    border-radius: var(--fw-radius-md);
    padding: var(--fw-space-6);
}

main > .sec-demo {
    border: 1px solid var(--aw-rule-soft);
}

main > .sec-sovereign {
    border: 1px solid var(--aw-accent);
}

/* The content box must stay SYMMETRIC or its centred `.container` inherits half
 * the inset: measured before the design pass, the container inside an offer sat
 * at 79.5 / 25.5 / 33.5 / 27.5 against a plain band's 70 / 16 / 24 / 18 — 9.5px
 * right at every width. `padding-left` and the full-bleed bar are untouched. */
main > .sec-offer {
    border-left: 3px solid var(--aw-accent);
    padding-left: var(--fw-space-4);
    padding-right: calc(var(--fw-space-4) + 3px);
}

.sec-offer + .sec-offer {
    margin-top: var(--fw-space-6);
}

main > .sec-footnote {
    border-top: 1px solid var(--aw-rule-soft);
}

.sec-footnote p.container {
    color: var(--aw-heading);
    font-size: var(--aw-step-0);
}

main > .sec-sponsors {
    background: var(--aw-tint-accent);
}

/* (0,2,2) — beats `index.css:113`'s bare `a:hover`, which is the accent. */
main > .sec-sponsors a:hover {
    color: var(--aw-heading);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 9+. The corporate pass (2026-09-19). Everything below is the FINAL layer:
 * the site-owned chrome (`src/pages/chrome.js`), the page geometry, the
 * editorial section layout, buttons, cards, tables, the footer, print and
 * reduced-motion. Same doctrine as above: tokens only, no priority override,
 * no external asset, muted by colour and never by a dimmer.
 * ═════════════════════════════════════════════════════════════════════════ */

/* 9. Page geometry — one container, one spine.
 *    `--aw-gutter` is the OUTER left edge of the centred container (its own
 *    1rem padding sits inside), restated here because the container is no
 *    longer `index.css`'s five-step ladder but one 75rem column. */
body {
    --aw-gutter: max(0px, calc(50% - var(--aw-container) / 2 - var(--fw-space-4)));

    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: var(--aw-font);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-wrap: break-word;
}

/* `min-width: 0`: a flex item is otherwise as wide as its widest descendant
 * (a table's min-width), which widened the whole PAGE on a phone. */
main {
    flex: 1 0 auto;
    width: 100%;
    min-width: 0;
}

.container {
    max-width: calc(var(--aw-container) + 2 * var(--fw-space-4));
}

::selection {
    background: var(--aw-sky);
    color: var(--aw-navy);
}

/* 10. The skip link — first focusable element of every document. */
.aw-skip {
    position: absolute;
    left: var(--fw-space-4);
    top: calc(-1 * var(--fw-space-24));
    z-index: 10;
    padding: var(--fw-space-3) var(--fw-space-4);
    border-radius: var(--fw-radius-md);
    background: var(--aw-white);
    color: var(--aw-navy);
    font-weight: 600;
    text-decoration: underline;
}

.aw-skip:focus {
    top: var(--fw-space-3);
}

/* 11. The header. The three declarations the token-resolution gate reads off
 *     `[data-fw-id="hdr:root"]` are stated with the contract names themselves
 *     (`--fw-color-bg`, `--fw-color-fg`, `--fw-space-4`), so a token change
 *     still reaches the chrome directly. The box is exactly `--aw-header-h`
 *     tall: the /suite sticky banner parks under it. */
.aw-header {
    display: flex;
    align-items: center;
    gap: var(--fw-space-8);
    height: var(--aw-header-h);
    padding: var(--fw-space-4) calc(var(--aw-gutter) + var(--fw-space-4));
    padding-right: calc(var(--aw-gutter) + var(--fw-space-4) + 7rem);
    background: var(--fw-color-bg);
    color: var(--fw-color-fg);
}

.aw-header__brand {
    display: inline-flex;
    align-items: center;
    flex: none;
    color: var(--aw-chrome-fg);
    --aw-logo-accent: var(--aw-teal-light);
}

.aw-header__logo {
    display: block;
    width: 8.4rem;
    height: 1.75rem;
}

.aw-header__nav {
    margin-inline-start: auto;
}

.aw-header__nav ul {
    display: flex;
    gap: var(--fw-space-1);
    list-style: none;
}

header[role="banner"] .aw-header__nav a {
    display: block;
    padding: var(--fw-space-2) var(--fw-space-3);
    border-radius: var(--fw-radius-md);
    color: var(--aw-chrome-fg);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    box-shadow: inset 0 -2px 0 transparent;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

header[role="banner"] .aw-header__nav a:hover {
    background: var(--aw-navy-2);
    color: var(--aw-chrome-fg);
    text-decoration: none;
}

header[role="banner"] .aw-header__nav a[aria-current] {
    box-shadow: inset 0 -2px 0 var(--aw-sky);
    color: var(--aw-chrome-fg);
}

header[role="banner"] .aw-header__cta {
    flex: none;
    padding: var(--fw-space-2) var(--fw-space-4);
    border: 1px solid var(--aw-sky);
    border-radius: var(--fw-radius-md);
    color: var(--aw-chrome-fg);
    font-size: 0.9375rem;
    font-weight: 600;
    transition: background-color 0.15s ease, color 0.15s ease;
}

header[role="banner"] .aw-header__cta:hover {
    background: var(--aw-sky);
    color: var(--aw-navy);
}

header[role="banner"] :focus-visible,
footer[role="contentinfo"] :focus-visible,
.mobile-nav :focus-visible,
.lang-switch :focus-visible,
.page-head :focus-visible,
main > .sec-hero :focus-visible,
main > .sec-cta :focus-visible {
    outline-color: var(--aw-focus-on-navy);
}

/* 12. The language switcher island. It is composed at the END of `<main>`
 *     (the shell's island slot, pinned by the renderer gates); the header is
 *     sticky at the top of every page, so the switcher is parked inside the
 *     bar, in the space the header's right padding reserves for it. */
.lang-switch {
    position: fixed;
    top: 0;
    right: calc(var(--aw-gutter) + var(--fw-space-4));
    z-index: 5;
    display: flex;
    align-items: center;
    height: calc(var(--aw-header-h) - 0.1875rem);
}

.lang-switch a {
    padding: var(--fw-space-2) var(--fw-space-3);
    border-radius: var(--fw-radius-md);
    color: var(--aw-chrome-muted);
    font-size: var(--aw-step-small);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.lang-switch a:hover {
    background: var(--aw-navy-2);
    color: var(--aw-chrome-fg);
}

/* 13. The mobile menu island (`site-kit` `mobileMenuIsland`). Below 60rem the
 *     header nav and contact action give way to the toggle, parked in the bar
 *     like the switcher; the panel drops under the header. The footer repeats
 *     every destination, so navigation never depends on the script. */
.mobile-nav {
    position: sticky;
    top: var(--aw-header-h);
    z-index: 5;
    height: 0;
}

.mobile-nav [data-fw-id="mnav:mtoggle"] {
    position: absolute;
    right: var(--fw-space-4);
    bottom: calc((var(--aw-header-h) - 0.1875rem - 2.5rem) / 2 + 0.1875rem);
    height: 2.5rem;
    padding: 0 var(--fw-space-3);
    border: 1px solid var(--aw-sky);
    border-radius: var(--fw-radius-md);
    background: var(--aw-navy);
    color: var(--aw-chrome-fg);
    font-size: 0.9375rem;
    font-weight: 600;
}

.mobile-nav [data-fw-id="mnav:mtoggle"]:hover,
.mobile-nav [data-fw-id="mnav:mtoggle"][aria-expanded="true"] {
    background: var(--aw-sky);
    color: var(--aw-navy);
}

.mobile-nav [data-fw-id="mnav:mmenu"] {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: 0;
    padding: var(--fw-space-2) 0 var(--fw-space-4);
    list-style: none;
    background: var(--aw-navy);
    color: var(--aw-chrome-fg);
    border-bottom: 0.1875rem solid var(--aw-accent);
    box-shadow: var(--aw-shadow-md);
}

.mobile-nav [data-fw-id="mnav:mmenu"][hidden] {
    display: none;
}

.mobile-nav [data-fw-id="mnav:mmenu"] a {
    display: block;
    padding: var(--fw-space-3) var(--fw-space-6);
    color: var(--aw-chrome-fg);
    font-size: var(--aw-step-1);
    font-weight: 500;
}

.mobile-nav [data-fw-id="mnav:mmenu"] a:hover {
    background: var(--aw-navy-2);
    color: var(--aw-chrome-fg);
}

@media (max-width: 60rem) {
    .aw-header {
        padding-right: var(--fw-space-4);
    }

    .aw-header__nav,
    header[role="banner"] .aw-header__cta {
        display: none;
    }

    .mobile-nav {
        display: block;
    }

    .lang-switch {
        right: calc(var(--fw-space-4) + 5.5rem);
    }
}

@media (min-width: 60.0625rem) {
    .mobile-nav {
        display: none;
    }
}

/* 14. Buttons — the bare call-to-action voice lives in `pages.css` § 2 (this
 *     sheet may not name the M5 banner the generic rule has to exclude); what
 *     follows here are the band-specific button states. */
.aw-card > a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: var(--fw-space-2) var(--fw-space-6);
    border: 1px solid var(--aw-accent);
    border-radius: var(--fw-radius-md);
    background: var(--aw-surface);
    color: var(--aw-accent-strong);
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.aw-card > a:hover {
    border-color: var(--aw-accent-strong);
    background: var(--aw-surface-alt);
    color: var(--aw-accent-strong);
}

/* 15. The hero — the navy title surface of a page. The accent rule under the
 *     title is a SHORT bar: drawn full width it read as a stray border. */
main > .sec-hero {
    padding-bottom: var(--fw-space-20);
    background: var(--aw-hero-bg);
    background-image: linear-gradient(135deg, var(--aw-navy) 0%, var(--aw-navy) 55%, var(--aw-navy-2) 100%);
    color: var(--aw-hero-fg);
    border-bottom: 0.25rem solid var(--aw-accent);
}

.sec-hero h1.container {
    margin-top: var(--fw-space-10);
    margin-bottom: var(--fw-space-6);
    padding: 0 var(--fw-space-4) var(--fw-space-6);
    border-image: linear-gradient(to right, transparent var(--fw-space-4), var(--aw-accent) var(--fw-space-4), var(--aw-accent) var(--fw-space-20), transparent var(--fw-space-20)) 1;
    color: var(--aw-hero-fg);
    font-size: clamp(var(--aw-step-4), 1rem + 5vw, var(--aw-step-6));
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

main > .sec-hero p.container {
    max-width: 48rem;
    margin-bottom: var(--fw-space-8);
    color: var(--aw-hero-sub);
    font-size: var(--aw-step-lead);
    line-height: 1.6;
}

main > .sec-hero p.container strong {
    color: var(--aw-hero-fg);
}

main > [class^="sec-"].sec-hero > a {
    border-color: var(--aw-sky);
    background: var(--aw-navy);
    color: var(--aw-hero-fg);
}

main > [class^="sec-"].sec-hero > a:hover {
    border-color: var(--aw-white);
    background: var(--aw-navy-2);
    color: var(--aw-hero-fg);
}

main > [class^="sec-"].sec-hero > a:first-of-type {
    border-color: var(--aw-accent);
    background: var(--aw-accent);
    color: var(--aw-white);
}

main > [class^="sec-"].sec-hero > a:first-of-type:hover {
    border-color: var(--aw-accent-strong);
    background: var(--aw-accent-strong);
    color: var(--aw-white);
}

/* A page with no hero block opens on a bare `main > h1.container`. It gets
 * the same navy title surface: the band is painted past the centred column by
 * a spread shadow, clipped to the heading's own height — no wrapper needed. */
main > h1.container {
    margin: 0 auto;
    padding: var(--fw-space-16) var(--fw-space-4) var(--fw-space-12);
    background: var(--aw-hero-bg);
    color: var(--aw-hero-fg);
    box-shadow: 0 0 0 100vmax var(--aw-navy);
    clip-path: inset(0 -100vmax);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

main > h1.container + p.container,
main > h1.container + [class^="sec-"] {
    margin-top: var(--fw-space-12);
}

main > h1.container + p.container {
    font-size: var(--aw-step-lead);
}

main > p.container {
    max-width: 50rem;
}

main > h2.container {
    margin: var(--fw-space-12) auto var(--fw-space-4);
    padding: 0 var(--fw-space-4);
    color: var(--aw-heading);
}

main > picture {
    display: block;
    max-width: calc(var(--aw-container) + 2 * var(--fw-space-4));
    margin: var(--fw-space-8) auto;
    padding: 0 var(--fw-space-4);
}

main > picture img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--aw-border);
    border-radius: var(--fw-radius-lg);
    box-shadow: var(--aw-shadow-md);
}

/* 16. Section rhythm and the editorial layout. From 64rem up a plain section
 *     is a two-column spread — its heading in the left third, its body in the
 *     right two thirds — so the page uses its width while prose keeps its
 *     measure. Below that, one column on the page spine. */
main > .sec-plain {
    padding: var(--fw-space-12) 0;
    border-top: 1px solid var(--aw-border);
}

main > .sec-hero + .sec-plain,
main > h1.container + .sec-plain,
main > .sec-plain:first-child {
    border-top: 0;
}

[class^="sec-"] h2.container {
    margin-bottom: var(--fw-space-6);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.15;
    text-wrap: balance;
}

main > .sec-plain > h2.container:first-child {
    margin-top: 0;
}

[class^="sec-"] div.container {
    max-width: calc(var(--aw-measure) + 2 * var(--fw-space-4));
    margin: 0 auto var(--fw-space-6) var(--aw-gutter);
    padding: 0 var(--fw-space-4);
    font-size: 1.0625rem;
    line-height: 1.65;
}

[class^="sec-"] div.container > p {
    margin: 0 0 var(--fw-space-4);
}

[class^="sec-"] code {
    padding: 0.1em 0.35em;
    border-radius: var(--fw-radius-sm);
    background: var(--aw-surface-alt);
    font-family: var(--aw-font-mono);
    font-size: 0.9em;
}

@media (min-width: 64rem) {
    main > .sec-plain {
        display: grid;
        grid-template-columns: var(--aw-gutter) minmax(0, 4fr) minmax(0, 8fr) var(--aw-gutter);
        padding: var(--fw-space-16) 0;
    }

    main > .sec-plain > * {
        grid-column: 3;
    }

    main > .sec-plain > h2.container {
        grid-column: 2;
        grid-row: 1 / span 40;
        align-self: start;
        margin: 0;
        padding-right: var(--fw-space-12);
        font-size: var(--aw-step-3);
    }

    main > .sec-plain > :is(p, ul, ol, div).container,
    main > .sec-plain > :is(ul, ol):not([class]),
    main > .sec-plain > .aw-table-scroll {
        margin-right: 0;
        margin-left: 0;
    }

    main > [class^="sec-"].sec-plain > a {
        justify-self: start;
        margin-left: var(--fw-space-4);
    }

    /* `aw-wide` / `aw-cards` / `aw-tiles` sections keep the heading on top and
     * give the body the whole container. */
    main > .sec-plain:is(.aw-wide, .aw-cards, .aw-tiles) > * {
        grid-column: 2 / 4;
    }

    main > .sec-plain:is(.aw-wide, .aw-cards, .aw-tiles) > h2.container {
        grid-column: 2 / 4;
        grid-row: auto;
        margin-bottom: var(--fw-space-8);
        padding-right: var(--fw-space-4);
        font-size: var(--aw-step-4);
    }
}

/* A tinted band — the alternate surface. The accent drops below AA on it, so
 * prose links take the heading voice here, in both states. */
main > .sec-plain.aw-band {
    border-top: 0;
    background: var(--aw-surface-alt);
    color: var(--aw-text);
}

main > .sec-plain.aw-band + .sec-plain {
    border-top: 0;
}

main > .sec-plain.aw-band :is(p, li) a,
main > .sec-plain.aw-band :is(p, li) a:hover {
    color: var(--aw-heading);
}

/* 17. Cards — a `CARDS_TAG` section (`render-blocks.js`). */
[class^="sec-"] div.aw-cards__grid {
    display: grid;
    max-width: calc(var(--aw-container) + 2 * var(--fw-space-4));
    margin: 0 auto;
    grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
    gap: var(--fw-space-6);
    padding: 0 var(--fw-space-4);
}

.aw-card {
    display: flex;
    flex-direction: column;
    padding: var(--fw-space-8);
    border: 1px solid var(--aw-border);
    border-top: 0.1875rem solid var(--aw-accent);
    border-radius: var(--fw-radius-lg);
    background: var(--aw-surface);
    color: var(--aw-text);
    box-shadow: var(--aw-shadow-sm);
}

[class^="sec-"] .aw-card p.container {
    max-width: none;
    margin: 0 0 var(--fw-space-6);
    padding: 0;
    font-size: var(--aw-step-0);
    line-height: 1.6;
}

.aw-card p.container strong:first-child {
    display: block;
    margin-bottom: var(--fw-space-3);
    color: var(--aw-heading);
    font-size: var(--aw-step-2);
    line-height: 1.25;
}

.aw-card > a {
    align-self: flex-start;
    margin: auto 0 0;
}

/* 18. Tiles — a list laid out as a grid of ruled tiles. */
[class^="sec-"].aw-tiles :is(ul, ol).container {
    max-width: calc(var(--aw-container) + 2 * var(--fw-space-4));
    margin-left: auto;
    padding: 0 var(--fw-space-4);
    list-style: none;
}

[class^="sec-"].aw-tiles :is(ul, ol).container > li {
    margin: 0 0 var(--fw-space-4);
    padding: var(--fw-space-2) 0 var(--fw-space-2) var(--fw-space-6);
    border-left: 0.1875rem solid var(--aw-accent);
}

[class^="sec-"].aw-tiles li > strong:first-child {
    color: var(--aw-heading);
}

@media (min-width: 48rem) {
    [class^="sec-"].aw-tiles :is(ul, ol).container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
        gap: var(--fw-space-6) var(--fw-space-8);
    }

    [class^="sec-"].aw-tiles :is(ul, ol).container > li {
        margin: 0;
    }
}

/* 19. Lists — the accent marker, and a real space after a term. A list
 *     authored INSIDE a text block is hoisted out of its `<p>` by the HTML
 *     parser and lands as a bare, classless child: it takes the list voice. */
main > :is(ul, ol):not([class]),
[class^="sec-"] > :is(ul, ol):not([class]) {
    max-width: calc(var(--aw-measure) + 2 * var(--fw-space-4));
    margin: 0 auto var(--fw-space-6) var(--aw-gutter);
    padding: 0 var(--fw-space-4) 0 2.75rem;
    font-size: 1.0625rem;
    line-height: 1.65;
}

main > :is(ul, ol):not([class]) > li,
[class^="sec-"] > :is(ul, ol):not([class]) > li {
    margin-bottom: var(--fw-space-3);
    padding-left: var(--fw-space-1);
}

:is(main, [class^="sec-"]) > :is(ul, ol):not([class]) > li::marker {
    color: var(--aw-accent);
}

main > p:empty,
[class^="sec-"] > p:empty {
    display: none;
}

[class^="sec-"] ul.container > li::marker {
    color: var(--aw-accent);
}

.cell-lead::after {
    content: " ";
}

/* 20. Tables. The renderer wraps each table in `.aw-table-scroll`, so a wide
 *     table scrolls inside its own box and never widens the page. */
.aw-table-scroll {
    max-width: calc(var(--aw-container) + 2 * var(--fw-space-4));
    margin: 0 auto var(--fw-space-8);
    padding: 0 var(--fw-space-4);
    overflow-x: auto;
}

[class^="sec-"] .aw-table-scroll table.container {
    width: 100%;
    max-width: none;
    min-width: 34rem;
    margin: 0;
    border: 1px solid var(--aw-border);
    border-radius: var(--fw-radius-lg);
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
}

[class^="sec-"] table.container th,
[class^="sec-"] table.container td {
    padding: var(--fw-space-4);
    border-bottom: 1px solid var(--aw-border);
}

[class^="sec-"] table.container thead th {
    border-bottom: 2px solid var(--aw-border-strong);
    font-size: var(--aw-step-small);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

[class^="sec-"] table.container thead th:first-child {
    border-top-left-radius: var(--fw-radius-lg);
}

[class^="sec-"] table.container thead th:last-child {
    border-top-right-radius: var(--fw-radius-lg);
}

[class^="sec-"] table.container tbody tr:last-child td {
    border-bottom: 0;
}

[class^="sec-"] table.container td:first-child {
    min-width: 8.5rem;
    color: var(--aw-heading);
    font-weight: 600;
}

/* 21. The offer and pricing-tier cards (BL-1479). Each band is a contained
 *     card on the page column; from 64rem up its heading and body share the
 *     same two-column spread as a plain section, so a page of tiers reads as
 *     one aligned table of offers. `sec-offer` keeps its accent left rule. */
main > :is(.sec-demo, .sec-sovereign) {
    width: calc(100% - 2 * var(--fw-space-4));
    max-width: var(--aw-container);
    margin: var(--fw-space-6) auto 0;
    --aw-gutter: 0px;
}

main > :is(.sec-offer, .sec-free, .sec-perdev, .sec-perpetual, .sec-enterprise, .sec-oem, .sec-oem_facturx, .sec-sponsors) {
    width: calc(100% - 2 * var(--fw-space-4));
    max-width: var(--aw-container);
    margin: var(--fw-space-6) auto 0;
    padding: var(--fw-space-8) var(--fw-space-4) var(--fw-space-6);
    border: 1px solid var(--aw-border);
    border-left: 0.1875rem solid var(--aw-accent);
    border-radius: var(--fw-radius-lg);
    box-shadow: var(--aw-shadow-sm);
    --aw-gutter: 0px;
}

main > :is(.sec-free, .sec-perdev, .sec-perpetual, .sec-enterprise, .sec-oem, .sec-oem_facturx) {
    border-left-color: var(--aw-navy-2);
}

main > :is(.sec-hero, h1.container, p.container) + :is(.sec-offer, .sec-free, .sec-demo) {
    margin-top: var(--fw-space-12);
}

main > :is(.sec-offer, .sec-free, .sec-perdev, .sec-perpetual, .sec-enterprise, .sec-oem, .sec-oem_facturx, .sec-sovereign, .sec-sponsors) h2.container {
    margin-top: 0;
    font-size: var(--aw-step-3);
}

@media (min-width: 64rem) {
    main > :is(.sec-offer, .sec-free, .sec-perdev, .sec-perpetual, .sec-enterprise, .sec-oem, .sec-oem_facturx, .sec-sovereign, .sec-sponsors) {
        display: grid;
        grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    }

    main > :is(.sec-offer, .sec-free, .sec-perdev, .sec-perpetual, .sec-enterprise, .sec-oem, .sec-oem_facturx, .sec-sovereign, .sec-sponsors) > * {
        grid-column: 2;
    }

    main > :is(.sec-offer, .sec-free, .sec-perdev, .sec-perpetual, .sec-enterprise, .sec-oem, .sec-oem_facturx, .sec-sovereign, .sec-sponsors) > h2.container {
        grid-column: 1;
        grid-row: 1 / span 40;
        align-self: start;
        margin-right: 0;
        margin-left: 0;
        padding-right: var(--fw-space-8);
    }

    main > :is(.sec-offer, .sec-free, .sec-perdev, .sec-perpetual, .sec-enterprise, .sec-oem, .sec-oem_facturx, .sec-sovereign, .sec-sponsors) > :is(p, ul, ol, div).container {
        margin-left: 0;
    }

    main > [class^="sec-"]:is(.sec-offer, .sec-free, .sec-perdev, .sec-perpetual, .sec-enterprise, .sec-oem, .sec-oem_facturx, .sec-sovereign, .sec-sponsors) > a {
        justify-self: start;
        margin-left: var(--fw-space-4);
    }
}

main > .sec-demo {
    margin-bottom: var(--fw-space-12);
}

main > .sec-footnote {
    margin-top: var(--fw-space-12);
}

/* 22. The closing call to action — a centred navy band. */
main > .sec-cta {
    margin-top: var(--fw-space-16);
    padding: var(--fw-space-16) 0;
    text-align: center;
}

main > .sec-cta:last-child,
main > .sec-cta:has(+ .lang-switch) {
    padding-bottom: var(--fw-space-16);
}

main > [class^="sec-"].sec-cta p.container {
    max-width: 52rem;
    margin-right: auto;
    margin-left: auto;
    font-size: var(--aw-step-2);
    line-height: 1.5;
}

main > .sec-cta p.container + p.container {
    font-size: var(--aw-step-0);
}

main > .sec-cta :is(p, li) a {
    font-weight: 600;
    text-decoration: none;
    border-bottom-width: 2px;
}

/* The last band of a page meets the footer without a white strip. */
main > [class^="sec-"]:has(+ .lang-switch):not(.sec-cta) {
    padding-bottom: var(--fw-space-20);
}

footer[role="contentinfo"] {
    margin-top: 0;
}

/* 23. The footer. As for the header, the three declarations the
 *     token-resolution gate reads off `[data-fw-id="ftr:root"]` name the
 *     contract tokens themselves. */
.aw-footer {
    padding: var(--fw-space-8) 0 0;
    background: var(--fw-color-bg);
    color: var(--fw-color-muted);
}

.aw-footer__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--fw-space-12);
    max-width: calc(var(--aw-container) + 2 * var(--fw-space-4));
    margin: 0 auto;
    padding: var(--fw-space-8) var(--fw-space-4) var(--fw-space-12);
}

.aw-footer__brand {
    display: inline-flex;
    color: var(--aw-chrome-fg);
    --aw-logo-accent: var(--aw-teal-light);
}

.aw-footer__logo {
    display: block;
    width: 9.6rem;
    height: 2rem;
}

footer[role="contentinfo"] .aw-footer__tagline {
    margin: var(--fw-space-4) 0 var(--fw-space-3);
    color: var(--aw-chrome-fg);
    font-size: var(--aw-step-1);
    font-weight: 600;
}

footer[role="contentinfo"] .aw-footer__contact {
    margin: 0;
}

.aw-footer__nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: var(--fw-space-8) var(--fw-space-6);
}

footer[role="contentinfo"] .aw-footer__title {
    margin: 0 0 var(--fw-space-3);
    color: var(--aw-chrome-fg);
    font-size: var(--aw-step-small);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

footer[role="contentinfo"] .aw-footer__title--next {
    margin-top: var(--fw-space-8);
}

.aw-footer__nav ul {
    list-style: none;
}

.aw-footer__nav li {
    margin-bottom: var(--fw-space-2);
}

footer[role="contentinfo"] a {
    color: var(--aw-chrome-muted);
    text-decoration: none;
}

footer[role="contentinfo"] a:hover,
footer[role="contentinfo"] a[aria-current] {
    color: var(--aw-chrome-fg);
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.aw-footer__legal {
    border-top: 1px solid var(--aw-navy-2);
}

.aw-footer__legal p {
    max-width: calc(var(--aw-container) + 2 * var(--fw-space-4));
    margin: 0 auto;
    padding: var(--fw-space-6) var(--fw-space-4);
    font-size: var(--aw-step-small);
}

@media (min-width: 64rem) {
    .aw-footer__inner {
        grid-template-columns: minmax(0, 5fr) minmax(0, 19fr);
        gap: var(--fw-space-12);
    }

    .aw-footer__nav {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* 24. The legacy product pages (`/suite/<x>`) share the chrome and the
 *     container; their own vocabulary keeps its port, tidied to the scale. */
.sub-menu {
    border-bottom: 1px solid var(--aw-border);
    box-shadow: none;
}

.menu-item a {
    padding: var(--fw-space-3) var(--fw-space-2);
    font-size: 0.9375rem;
    font-weight: 500;
}

.menu-item a.active {
    border-left: 0;
    box-shadow: inset 0 -0.1875rem 0 var(--aw-accent);
    color: var(--aw-heading);
}

.page-head h1 {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.text h2,
.light h2,
.text h3,
.light h3 {
    color: var(--aw-heading);
}

.text p,
.light p {
    line-height: 1.6;
}

.text picture img,
.light picture img {
    border-radius: var(--fw-radius-lg);
}

/* 25. Reduced motion and print. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto;
        transition-duration: 0.01ms;
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
    }
}

@media print {
    header[role="banner"] {
        position: static;
    }

    .aw-skip,
    .aw-header__nav,
    .aw-header__cta,
    .mobile-nav,
    .lang-switch,
    .sub-menu,
    .aw-footer__nav {
        display: none;
    }

    header[role="banner"],
    footer[role="contentinfo"],
    main > .page-head,
    main > .sec-hero,
    main > h1.container,
    main > .sec-cta {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    main > [class^="sec-"] {
        break-inside: avoid;
    }

    main a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 26+. Wave 2 (2026-09-19) — one page grammar on every route. The renderer's
 * `page-layout.js` now opens EVERY page on a `sec-hero` head (authored or
 * assembled: `aw-pagehead`), wraps orphan blocks in a plain section, and turns
 * a heading-less plain section into the page intro (`aw-intro`) or a
 * continuation group of the section before it (`aw-group`), so the two-column
 * spread never shows an empty heading column.
 * ═════════════════════════════════════════════════════════════════════════ */

/* 26. The page head. A `coming` badge that opens a page now sits INSIDE the
 *     head, above the title. */
main > .sec-hero p.container.badge {
    margin-top: var(--fw-space-10);
    margin-bottom: 0;
    color: var(--aw-hero-sub);
}

.sec-hero p.container.badge + h1.container {
    margin-top: var(--fw-space-4);
}

/* A head with no lede closes tighter than one that carries a paragraph. */
main > .sec-hero.aw-pagehead {
    padding-bottom: var(--fw-space-12);
}

/* The legacy product head (`/suite/<product>`) takes the same left-aligned
 * title surface as every other page: same spine, same scale, same rule (its
 * `text-align` is restated in § 4's own `.page-head` block). */
.page-head h1.container {
    max-width: calc(var(--aw-container) + 2 * var(--fw-space-4));
    margin: 0 auto var(--fw-space-6);
    padding: 0 var(--fw-space-4) var(--fw-space-6);
    border-bottom: 0.25rem solid transparent;
    border-image: linear-gradient(to right, transparent var(--fw-space-4), var(--aw-accent) var(--fw-space-4), var(--aw-accent) var(--fw-space-20), transparent var(--fw-space-20)) 1;
    font-size: clamp(var(--aw-step-4), 1rem + 5vw, var(--aw-step-6));
    line-height: 1.08;
    text-wrap: balance;
}

.page-head p.container.subtitle {
    max-width: calc(var(--aw-container) + 2 * var(--fw-space-4));
    margin: 0 auto;
    padding: 0 var(--fw-space-4);
    font-size: var(--aw-step-lead);
    line-height: 1.6;
}

/* 27. Intro and continuation sections. */
main > .sec-plain.aw-intro > :is(p, ul, ol).container {
    max-width: 48rem;
}

main > .sec-plain.aw-intro > p.container:first-child {
    font-size: var(--aw-step-1);
}

.sec-plain > .aw-group > :is(p, div).container {
    padding-right: 0;
    padding-left: 0;
}

.sec-plain > .aw-group {
    margin-right: var(--fw-space-4);
    margin-left: var(--fw-space-4);
    margin-top: var(--fw-space-8);
    padding-top: var(--fw-space-8);
    border-top: 1px solid var(--aw-border);
}

.sec-plain > h2.container + .aw-group {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.aw-group > p.container:last-child {
    margin-bottom: 0;
}

.aw-intro > picture {
    display: block;
    max-width: calc(var(--aw-container) + 2 * var(--fw-space-4));
    margin: var(--fw-space-8) auto;
    padding: 0 var(--fw-space-4);
}

.aw-intro > picture img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--aw-border);
    border-radius: var(--fw-radius-lg);
    box-shadow: var(--aw-shadow-md);
}

@media (min-width: 64rem) {
    main > .sec-plain.aw-intro > * {
        grid-column: 2 / 4;
    }

    .sec-plain > .aw-group > :is(p, ul, ol, div).container,
    .sec-plain > .aw-group > :is(ul, ol):not([class]),
    .sec-plain > .aw-group > .aw-table-scroll {
        margin-right: 0;
        margin-left: 0;
    }

}

/* A call to action folded into a group keeps the button voice of a bare
 * section-level link (`pages.css` § 2 reaches direct children of a band only). */
.sec-plain > .aw-group > a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    margin: var(--fw-space-4) 0 0;
    padding: var(--fw-space-2) var(--fw-space-6);
    border: 1px solid var(--aw-accent);
    border-radius: var(--fw-radius-md);
    background: var(--aw-surface);
    color: var(--aw-accent-strong);
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.sec-plain > .aw-group > a:hover {
    border-color: var(--aw-accent-strong);
    background: var(--aw-surface-alt);
    color: var(--aw-accent-strong);
}

/* 27b. The no-script menu (`chrome.js` `noScriptMenu`). The anchor only
 *      exists when scripting is off; it then replaces the inert burger and
 *      jumps to the footer navigation. */
.aw-header__menu {
    display: none;
}

.aw-footer__nav {
    scroll-margin-top: calc(var(--aw-header-h) + var(--fw-space-4));
}

/* 27c. Anchored targets (BL-2048): a fragment navigation (`/#demos`,
 *      `/fr#qui-nous-sommes`) otherwise lands under the sticky header. */
main [id] {
    scroll-margin-top: calc(var(--aw-header-h) + var(--fw-space-4));
}

@media (max-width: 60rem) {
    header[role="banner"] .aw-header__menu {
        display: inline-flex;
        align-items: center;
        height: 2.5rem;
        margin-inline-start: auto;
        padding: 0 var(--fw-space-3);
        border: 1px solid var(--aw-sky);
        border-radius: var(--fw-radius-md);
        color: var(--aw-chrome-fg);
        font-size: 0.9375rem;
        font-weight: 600;
    }

    body:has(.aw-header__menu) .mobile-nav {
        display: none;
    }
}

/* 28. Link runs as pill navigation (`render-blocks.js` `CHIPS_CLASS`). */
[class^="sec-"] p.container.aw-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fw-space-2);
    max-width: none;
    margin-top: var(--fw-space-6);
    margin-bottom: var(--fw-space-6);
}

[class^="sec-"] p.container.aw-chips a {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: var(--fw-space-1) var(--fw-space-4);
    border: 1px solid var(--aw-border-strong);
    border-radius: 999px;
    background: var(--aw-surface);
    color: var(--aw-accent-strong);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

[class^="sec-"] p.container.aw-chips a:hover {
    border-color: var(--aw-accent-strong);
    background: var(--aw-surface-alt);
    color: var(--aw-accent-strong);
}

/* A chip whose page is not published yet (`dark-links.js` `CHIP_OFF_CLASS`):
 * same pill, greyed, not a link (no href), so the run keeps its layout. */
[class^="sec-"] p.container.aw-chips a.aw-chip--off,
[class^="sec-"] p.container.aw-chips a.aw-chip--off:hover {
    border-style: dashed;
    border-color: var(--aw-border);
    background: var(--aw-surface-alt);
    color: var(--aw-text-muted);
    cursor: not-allowed;
}

/* 29. The compliance evidence pack (`pack-present.js`). Status is carried by
 *     the pack's own word and by FILL — solid (proven), tinted (partial),
 *     hollow dashed (gap) — never by a new hue, and never by colour alone. */
[class^="sec-"] div.container:has(> .aw-ev-grid),
[class^="sec-"] div.container:has(> .aw-ev-row),
[class^="sec-"] div.container:has(> .aw-stats) {
    max-width: none;
}

[class^="sec-"] div.container > p.aw-pack__posture {
    margin-bottom: var(--fw-space-6);
    padding: var(--fw-space-6);
    border: 1px solid var(--aw-border);
    border-left: 0.1875rem solid var(--aw-navy-2);
    border-radius: var(--fw-radius-lg);
    background: var(--aw-surface-alt);
    font-size: var(--aw-step-0);
    line-height: 1.65;
}

[class^="sec-"] div.container > p.aw-pack__stamp {
    color: var(--aw-text-muted);
    font-size: 0.9375rem;
}

.aw-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem var(--fw-space-3);
    border: 1px solid var(--aw-navy-2);
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.5;
    text-transform: uppercase;
    white-space: nowrap;
}

.aw-badge--proven {
    background: var(--aw-navy-2);
    color: var(--aw-white);
}

.aw-badge--partial {
    border-color: var(--aw-accent-strong);
    background: var(--aw-tint-accent);
    color: var(--aw-accent-strong);
}

.aw-badge--gap {
    border-style: dashed;
    border-color: var(--aw-text-muted);
    background: var(--aw-surface);
    color: var(--aw-text);
}

.aw-ev-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
    gap: var(--fw-space-4);
    margin: var(--fw-space-8) 0;
}

.aw-ev-card {
    display: flex;
    flex-direction: column;
    gap: var(--fw-space-2);
    padding: var(--fw-space-6);
    border: 1px solid var(--aw-border);
    border-top: 0.1875rem solid var(--aw-navy-2);
    border-radius: var(--fw-radius-lg);
    background: var(--aw-surface);
    box-shadow: var(--aw-shadow-sm);
}

[class^="sec-"] div.container > .aw-ev-grid > .aw-ev-card > p {
    margin: 0;
}

[class^="sec-"] div.container > .aw-ev-grid > .aw-ev-card > p.aw-ev-card__name {
    color: var(--aw-heading);
    font-size: var(--aw-step-1);
    line-height: 1.25;
}

[class^="sec-"] div.container > .aw-ev-grid > .aw-ev-card > p.aw-ev-card__instrument {
    flex: 1 0 auto;
    color: var(--aw-text-muted);
    font-size: 0.9375rem;
    line-height: 1.5;
}

[class^="sec-"] div.container > .aw-ev-grid > .aw-ev-card > p.aw-ev-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fw-space-2);
    margin-top: var(--fw-space-3);
}

.aw-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--fw-space-4);
    margin: var(--fw-space-6) 0 var(--fw-space-8);
}

.aw-stat {
    display: flex;
    flex-direction: column;
    padding: var(--fw-space-4) var(--fw-space-6);
    border: 1px solid var(--aw-border);
    border-left: 0.25rem solid var(--aw-navy-2);
    border-radius: var(--fw-radius-lg);
    background: var(--aw-surface);
}

.aw-stat--partial {
    border-left-color: var(--aw-accent);
    background: var(--aw-tint-accent);
}

.aw-stat--gap {
    border-left-style: dashed;
    border-left-color: var(--aw-text-muted);
}

.aw-stat__value {
    color: var(--aw-heading);
    font-size: var(--aw-step-4);
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.aw-stat__label {
    color: var(--aw-text);
    font-size: var(--aw-step-small);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.aw-ev-row {
    margin: 0 0 var(--fw-space-4);
    padding: var(--fw-space-6);
    border: 1px solid var(--aw-border);
    border-left: 0.25rem solid var(--aw-navy-2);
    border-radius: var(--fw-radius-lg);
    background: var(--aw-surface);
}

.aw-ev-row--partial {
    border-left-color: var(--aw-accent);
}

.aw-ev-row--gap {
    border-left-style: dashed;
    border-left-color: var(--aw-text-muted);
}

[class^="sec-"] div.container > .aw-ev-row > p {
    margin: 0 0 var(--fw-space-3);
    font-size: var(--aw-step-0);
    line-height: 1.6;
}

[class^="sec-"] div.container > .aw-ev-row > p:not(.aw-ev-row__head) {
    max-width: 56rem;
}

[class^="sec-"] div.container > .aw-ev-row > p:last-child {
    margin-bottom: 0;
}

[class^="sec-"] div.container > .aw-ev-row > p.aw-ev-row__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fw-space-2) var(--fw-space-3);
}

.aw-ev-row__head > code {
    font-weight: 700;
}

.aw-ev-row__ref {
    flex: 1 1 14rem;
    color: var(--aw-text-muted);
    font-size: 0.9375rem;
}

[class^="sec-"] div.container > .aw-ev-row > p.aw-ev-row__claim {
    color: var(--aw-heading);
    font-weight: 600;
}

[class^="sec-"] div.container > .aw-ev-row > p.aw-ev-row__note,
[class^="sec-"] div.container > .aw-ev-row > p.aw-ev-row__meta {
    color: var(--aw-text-muted);
    font-size: 0.9375rem;
}

.aw-ev-row code {
    overflow-wrap: anywhere;
}

@media (max-width: 30rem) {
    .aw-stats {
        grid-template-columns: minmax(0, 1fr);
    }

    .aw-stat {
        flex-direction: row;
        align-items: baseline;
        gap: var(--fw-space-3);
    }
}

/* 30. The legacy product pages (`/suite/<product>`) brought onto the page
 *     grammar by CSS alone — their ported markup (`.text` / `.light` bands,
 *     `.col` rows, `.card`) is content and stays. One left-aligned spine (the
 *     port centred its headings over left-aligned lists), one indent (the
 *     port stacked `.container` + `.p-h` paddings three deep), body copy on the
 *     site scale, `.light` as the alternate surface, cards as cards. */
main > :is(.text, .light) {
    padding: var(--fw-space-12) 0;
}

main > .light {
    border-block: 0;
    background: var(--aw-surface-alt);
}

main > :is(.text, .light) .center {
    text-align: left;
}

main > :is(.text, .light) .p-h,
main > :is(.text, .light) .p {
    padding-right: 0;
    padding-left: 0;
}

main > :is(.text, .light) .container {
    padding-right: var(--fw-space-4);
    padding-left: var(--fw-space-4);
}

main > :is(.text, .light) .container .container {
    max-width: none;
    padding-right: 0;
    padding-left: 0;
}

main > :is(.text, .light) h2.container {
    margin-bottom: var(--fw-space-6);
    font-size: var(--aw-step-4);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.15;
    text-wrap: balance;
}

main > :is(.text, .light) h3.container {
    margin: var(--fw-space-8) auto var(--fw-space-4);
    font-size: var(--aw-step-2);
    font-weight: 700;
    line-height: 1.25;
}

main > :is(.text, .light) div.container > p {
    max-width: var(--aw-measure);
    margin: 0 0 var(--fw-space-3);
    font-size: 1.0625rem;
    line-height: 1.65;
}

main > :is(.text, .light) div.container > p small {
    color: var(--aw-text-muted);
    font-size: 0.875em;
}

main > :is(.text, .light) div.container.border-left {
    max-width: calc(var(--aw-container) - 2 * var(--fw-space-4));
    margin-top: var(--fw-space-6);
    padding: var(--fw-space-2) var(--fw-space-6);
    border-left-width: 0.1875rem;
}

main > :is(.text, .light) .sep-light {
    background: none;
}

main > :is(.text, .light) .sep-light hr {
    max-width: var(--aw-container);
    margin: var(--fw-space-8) auto;
}

main > :is(.text, .light) .col {
    gap: var(--fw-space-8);
    align-items: flex-start;
}

main > :is(.text, .light) .col > :is(.col-50, .col-3, .col-25, .col-75) {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
}

main > :is(.text, .light) .col:has(.card) {
    align-items: stretch;
}

main > :is(.text, .light) .col + .col,
main > .text > .text + .text {
    margin-top: var(--fw-space-8);
}

main > .text > .text {
    padding: 0;
}

main > :is(.text, .light) .card {
    height: 100%;
    padding: var(--fw-space-6);
    border: 1px solid var(--aw-border);
    border-top: 0.1875rem solid var(--aw-accent);
    border-radius: var(--fw-radius-lg);
    background: var(--aw-surface);
    box-shadow: var(--aw-shadow-sm);
}

main > :is(.text, .light) .card-icon {
    margin: var(--fw-space-1) var(--fw-space-4) 0 0;
    color: var(--aw-accent-strong);
}

main > :is(.text, .light) .card h3.container {
    margin-top: 0;
    font-size: var(--aw-step-1);
}

main > :is(.text, .light) .card div.container > p {
    font-size: var(--aw-step-0);
    line-height: 1.6;
}

main > :is(.text, .light) picture img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 48rem) {
    main > :is(.text, .light) .col {
        flex-direction: column;
    }

    main > :is(.text, .light) .col > :is(.col-50, .col-3, .col-25, .col-75) {
        width: 100%;
    }

    main > :is(.text, .light) h2.container {
        font-size: var(--aw-step-3);
    }
}

/* The legacy callout: the port's justified white-on-accent box becomes the
 * site's callout — tinted surface, accent rule, ink text, ragged right. */
main > :is(.text, .light) div.container.light-info {
    max-width: calc(var(--aw-measure) + 2 * var(--fw-space-6));
    margin: var(--fw-space-6) 0 0;
    padding: var(--fw-space-4) var(--fw-space-6);
    border-left: 0.1875rem solid var(--aw-accent);
    border-radius: var(--fw-radius-lg);
    background: var(--aw-tint-accent);
    color: var(--aw-text);
    box-shadow: none;
    text-align: left;
}

main :is(.text, .light) > div.container.light-info {
    margin-right: auto;
    margin-left: max(var(--fw-space-4), calc(50% - var(--aw-container) / 2));
}

/* The product sub-menu never wraps: on a phone it scrolls sideways. */
@media (max-width: 48rem) {
    .sub-menu .menu-item {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .sub-menu .menu-item a {
        flex: 0 0 auto;
        padding-right: var(--fw-space-4);
        padding-left: var(--fw-space-4);
    }
}

/* 31. A table authored INSIDE a text block: the HTML parser hoists it out of
 *     its `<p>`, so it lands as a bare, classless child of the band. It takes
 *     the table voice of § 20; its cells wrap, so it needs no scroll box. */
[class^="sec-"] > table:not([class]) {
    width: calc(100% - 2 * var(--fw-space-4) - var(--aw-gutter));
    max-width: var(--aw-container);
    margin: 0 var(--fw-space-4) var(--fw-space-8) calc(var(--aw-gutter) + var(--fw-space-4));
    border: 1px solid var(--aw-border);
    border-radius: var(--fw-radius-lg);
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
}

[class^="sec-"] > table:not([class]) :is(th, td) {
    padding: var(--fw-space-3) var(--fw-space-4);
    border-bottom: 1px solid var(--aw-border);
    text-align: left;
    vertical-align: top;
}

[class^="sec-"] > table:not([class]) thead th {
    border-bottom: 2px solid var(--aw-border-strong);
    background: var(--aw-surface-alt);
    color: var(--aw-heading);
    font-size: var(--aw-step-small);
}

[class^="sec-"] > table:not([class]) thead th:first-child {
    border-top-left-radius: var(--fw-radius-lg);
}

[class^="sec-"] > table:not([class]) thead th:last-child {
    border-top-right-radius: var(--fw-radius-lg);
}

[class^="sec-"] > table:not([class]) tbody tr:last-child td {
    border-bottom: 0;
}

[class^="sec-"] > table:not([class]) td:first-child {
    color: var(--aw-heading);
    font-weight: 600;
}

[class^="sec-"] > table:not([class]) :is(th, td):not(:first-child) {
    text-align: center;
}

@media (max-width: 40rem) {
    [class^="sec-"] > table:not([class]) {
        table-layout: fixed;
        font-size: var(--aw-step-small);
    }

    [class^="sec-"] > table:not([class]) :is(th, td) {
        padding: var(--fw-space-2);
        overflow-wrap: anywhere;
    }

    [class^="sec-"] > table:not([class]) :is(th, td):first-child {
        width: 46%;
    }
}

@media (min-width: 64rem) {
    main > .sec-plain > table:not([class]) {
        width: calc(100% - 2 * var(--fw-space-4));
        margin-left: var(--fw-space-4);
    }
}

/* 32. A hero action wraps instead of running off a phone. */
main > [class^="sec-"].sec-hero > a {
    max-width: calc(100% - 2 * (var(--aw-gutter) + var(--fw-space-4)));
    white-space: normal;
}

@media print {
    .aw-ev-row,
    .aw-ev-card,
    .aw-stat {
        break-inside: avoid;
        box-shadow: none;
    }
}