/*
 * apps-light.css — the three remaining Business Apps pages on the light system.
 *
 *   /business-apps/seo-article-authoring/   body.apex-saa   (.saa-* markup)
 *   /business-apps/ai-visibility-audit/     body.apex-ava   (.ava-* markup)
 *   /business-apps/solar-estimate-tool/     body.apex-set   (.set-* markup)
 *
 * (email-design-authoring 301s to the hub and packaged-assistant 301s to the
 * Website Assistant page, so neither is styled here.)
 *
 * ONE sheet rather than three because the three night stylesheets are
 * structurally identical — same token names under a different prefix, same
 * component vocabulary, same hardcoded night literals in the same places.
 * Each page's own sheet still loads first; this one is enqueued after it as a
 * declared dependency, so equal-specificity rules win on order.
 *
 * Specificity note: `:is(.a, .b, .c)` counts as ONE class, so
 * `body:is(.apex-saa, ...) :is(.saa-chip, ...)` is (0,2,1) — exactly the same
 * as the `body.apex-saa .saa-chip` rules it has to beat. Order decides, and
 * order is guaranteed by the enqueue dependency.
 *
 * NOTE: never write a .aad- wildcard immediately followed by a slash in a
 * comment here. The star-slash pair closes the comment early and silently
 * eats the rule after it.
 */

/* ════════ SHELL ═════════════════════════════════════════════════════════
   These pages inherit the adnia shell out of main.css, which is 1180 wide and
   lands content at x=130. Every page built since sits at 1200/120. Ten pixels
   is nothing to look at and everything to line up, because the footer under
   these pages is at 120 and the eye reads the two edges together. */
body:is(.apex-saa, .apex-ava, .apex-set) .aad-shell {
    width: var(--a-shell);
    margin-inline: auto;
}


/* ════════ TOKENS — the whole light palette, per page ════════════════════
   These three sheets are token-driven, so re-pointing the tokens converts
   most of each page in one block. Palette lifted verbatim from pst3.css. */
body.apex-saa {
    --saa-ink: #0a1730;
    --saa-body: #33415e;
    --saa-soft: #4d5b74;
    --saa-brand: #22458a;
    --saa-accent: #22458a;
    --saa-line: var(--a-line);
    --saa-card: var(--a-card);
    --saa-card-border: var(--a-card-line);
    --saa-card-shadow: var(--a-card-shadow);
    --saa-head-font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
body.apex-ava {
    --ava-ink: #0a1730;
    --ava-body: #33415e;
    --ava-soft: #4d5b74;
    --ava-brand: #22458a;
    --ava-accent: #22458a;
    --ava-warn: #9a4a28;
    --ava-line: var(--a-line);
    --ava-card: var(--a-card);
    --ava-card-border: var(--a-card-line);
    --ava-card-shadow: var(--a-card-shadow);
    --ava-head-font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
body.apex-set {
    --set-ink: #0a1730;
    --set-body: #33415e;
    --set-soft: #4d5b74;
    --set-brand: #22458a;
    --set-accent: #22458a;
    --set-sun: #8a5a12;
    --set-line: var(--a-line);
    --set-card: var(--a-card);
    --set-card-border: var(--a-card-line);
    --set-card-shadow: var(--a-card-shadow);
    --set-head-font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* shared light values these three pages don't already carry a token for */
body:is(.apex-saa, .apex-ava, .apex-set) {
    --app-paper: #f2f6fb;
    --app-hair: var(--a-hair);
    --app-go: var(--a-go); /* was #0f6b4f; the site has one go-green */
    --app-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    background: #fff;
}

/* ════════ Kill the night field ══════════════════════════════════════════
   main.css paints #050a18 on the shell and main for every aa-adnia-copy-page
   body, and apex-fx.css paints the gradient plus starfield on article.aad-page
   — both !important. These pages genuinely need that body class (their markup
   really is .aad- and .ba- prefixed), so it cannot be dropped the way About
   dropped it, and beating it needs !important.

   Any shell pixel the article does not cover otherwise shows through
   near-black. Contrast scans never catch that, because a gap between two
   elements is not a styled element — only looking at the render finds it. */
/* main.css:13804 paints `body { background: #050a18 !important }` for every
   aa-adnia-copy-page, and the light conversion only covered .site-shell and
   .site-main. The BODY itself was still night on a page that renders white:
   it shows in the overscroll bounce and under a short page. */
body:is(.apex-saa, .apex-ava, .apex-set),
body:is(.apex-saa, .apex-ava, .apex-set) .site-shell,
body:is(.apex-saa, .apex-ava, .apex-set) .site-main { background: var(--a-page) !important }

body:is(.apex-saa, .apex-ava, .apex-set) article.aad-page {
    background: #fff !important;
    background-image: none !important;
    color: var(--app-body, #33415e);
    font-family: var(--app-sans);
}
body:is(.apex-saa, .apex-ava, .apex-set) article.aad-page::before,
body:is(.apex-saa, .apex-ava, .apex-set) article.aad-page::after { content: none !important }

/* ════════ One face ══════════════════════════════════════════════════════ */
body:is(.apex-saa, .apex-ava, .apex-set) .aad-page,
body:is(.apex-saa, .apex-ava, .apex-set) .aad-page :is(h1, h2, h3, h4, p, li, a, span, b, strong, em, small, summary, button, dt, dd, figcaption, label, input) {
    font-family: var(--app-sans);
}

/* Only links carrying no class of their own inherit colour — a bare
   `a { color: inherit }` is (0,1,1) and silently outranks single-class rules
   like .saa-chip, which is how a primary CTA once rendered navy-on-navy. */
body:is(.apex-saa, .apex-ava, .apex-set) .aad-page a:not([class]) { color: var(--saa-brand, #22458a) }

/* ════════ Surfaces — the night fills these pages hardcode ═══════════════
   Every literal below appears verbatim in all three night sheets: the panel
   fills rgba(8,18,40,*), the card fills rgba(11,22,48,.55) and the inset
   fills rgba(5,12,28,*). Left alone they composite to grey-blue bands on
   paper rather than disappearing. */
body:is(.apex-saa, .apex-ava, .apex-set) :is(
    .saa-hero__brief, .saa-doc, .saa-scene, .saa-topic,
    .saa-serp, .saa-article, .saa-real__scroll,
    .ava-ask, .ava-ask__answer, .ava-answer, .ava-tile, .ava-dial, .ava-verdict__stamp,
    .set-tool, .set-tool__panel, .set-tool__leadtoast,
    .set-article, .set-proof
) {
    background-color: #fff;
    background-image: none;
    border-color: var(--saa-line, var(--a-line));
    color: var(--saa-body, #33415e);
}

/* The raised and inset layers take paper so they still read as a layer.
   These names came off the rendered page rather than from guessing — the
   first pass assumed `__bar` where the markup actually says `__head`, and
   nine surfaces stayed night-dark because of it. */
body:is(.apex-saa, .apex-ava, .apex-set) :is(
    .saa-doc__head, .saa-doc__input, .saa-schip, .saa-cta__input, .saa-real__scroll,
    .ava-row, .ava-ask__bar, .ava-cta__bar, .ava-legend,
    .set-tool__head, .set-readout, .set-cta__row, .set-cta__input
) {
    background-color: var(--app-paper);
    background-image: none;
    border-color: var(--saa-line, var(--a-line));
    color: var(--saa-body, #33415e);
}

body:is(.apex-saa, .apex-ava, .apex-set) :is(.saa-card, .ava-card, .set-card, .saa-panel, .ava-panel, .set-panel) {
    background: var(--app-paper);
    border: 1px solid var(--saa-card-border, var(--a-line));
    box-shadow: var(--saa-card-shadow, var(--a-card-shadow));
}

/* article media placeholders were a night gradient */
body:is(.apex-saa, .apex-ava, .apex-set) :is(.saa-article__media, .ava-article__media, .set-article__media) {
    background: var(--app-paper);
    background-image: none;
}

/* ════════ Type ══════════════════════════════════════════════════════════
   These three pages set every heading at weight 800 and their h1 at 69px,
   against 600 and 62 on the other thirteen. Both were night-theme decisions:
   a heavy face carries on #050a18 and shouts on white. Same ranks as the rest
   of the site now. */
body:is(.apex-saa, .apex-ava, .apex-set) .aad-page :is(h1, h2, h3, h4) {
    color: var(--saa-ink, #0a1730);
    font-weight: 600;
}
body:is(.apex-saa, .apex-ava, .apex-set) :is(.saa-hero__title, .ava-hero__title, .set-hero__title) {
    font-size: var(--a-t-h1);
    letter-spacing: -.03em;
}
body:is(.apex-saa, .apex-ava, .apex-set) .aad-page h2 { font-size: var(--a-t-head) }
/* The live dots. The night sheets set these at neon #58d68d with a matching
   glow, which is a third green and reads as a sticker on a white page. The
   site has one go-green. */
body:is(.apex-saa, .apex-ava, .apex-set) .ava-tile__dot--live {
    background: var(--a-brand);
    box-shadow: 0 0 0 3px rgba(34, 69, 138, .14);
    animation: none;
}

/* the sub rank. Each page's night sheet sets its own h3 at 800 weight and its
   own size (34 on SEO Article Authoring, 22 on Solar, 18 on Visibility), all
   at (0,2,2), so these have to match that specificity to be seen. */
body:is(.apex-saa, .apex-ava, .apex-set) :is(.saa-row__text, .ava-tile, .set-lrow) h3 {
    font: 600 var(--a-t-sub)/1.2 var(--app-sans);
    letter-spacing: -.015em;
}
body:is(.apex-saa, .apex-ava, .apex-set) .aad-page p { color: var(--saa-body, #33415e) }

body:is(.apex-saa, .apex-ava, .apex-set) :is(.saa-textlink, .ava-textlink, .set-textlink) { color: var(--saa-brand, #22458a) }
body:is(.apex-saa, .apex-ava, .apex-set) :is(.saa-textlink, .ava-textlink, .set-textlink):hover { color: var(--saa-ink, #0a1730) }

/* ════════ Controls ══════════════════════════════════════════════════════
   The primary carries BOTH .x-chip and .x-chip--solid at equal specificity,
   so :not() plus the doubled class keeps base and modifier mutually
   exclusive. Writing them in the wrong order is what once silently stripped
   the Website Assistant primary back to transparent. */
/* the site's button. The night bases draw a 999px pill at 1rem/700. */
body:is(.apex-saa, .apex-ava, .apex-set) :is(.saa-chip, .ava-chip, .set-chip) {
    padding: var(--a-btn-pad);
    border-radius: var(--a-btn-r);
    font: var(--a-btn-font);
}
body:is(.apex-saa, .apex-ava, .apex-set) :is(.saa-chip, .ava-chip, .set-chip):not(.saa-chip--solid):not(.ava-chip--solid):not(.set-chip--solid) {
    background-color: #fff;
    background-image: none;
    border: 1px solid var(--a-card-line);
    color: var(--saa-ink, #0a1730);
}
body:is(.apex-saa, .apex-ava, .apex-set) :is(.saa-chip, .ava-chip, .set-chip):not(.saa-chip--solid):not(.ava-chip--solid):not(.set-chip--solid):hover {
    border-color: var(--a-brand);
    color: var(--a-brand);
}
body:is(.apex-saa, .apex-ava, .apex-set) :is(.saa-chip, .ava-chip, .set-chip):is(.saa-chip--solid, .ava-chip--solid, .set-chip--solid) {
    background-color: var(--a-brand);
    background-image: none;
    border: 1px solid var(--a-brand);
    color: #fff;
    box-shadow: var(--a-btn-glow);
}
body:is(.apex-saa, .apex-ava, .apex-set) :is(.saa-chip, .ava-chip, .set-chip):is(.saa-chip--solid, .ava-chip--solid, .set-chip--solid):hover {
    background-color: var(--a-brand-deep);
    border-color: var(--a-brand-deep);
    color: #fff;
}
body:is(.apex-saa, .apex-ava, .apex-set) :is(.saa-chip, .ava-chip, .set-chip):is(.saa-chip--solid, .ava-chip--solid, .set-chip--solid) :is(span, b, i, svg) { color: #fff }

/* the hero's outline link */
/* the hero's second action: the site's quiet button */
body:is(.apex-saa, .apex-ava, .apex-set) :is(.saa-hero__link, .ava-hero__link, .set-hero__link) {
    padding: var(--a-btn-pad);
    border: 1px solid var(--a-card-line);
    border-radius: var(--a-btn-r);
    font: var(--a-btn-font);
    color: var(--saa-ink, #0a1730);
    background-color: #fff;
}
body:is(.apex-saa, .apex-ava, .apex-set) :is(.saa-hero__link, .ava-hero__link, .set-hero__link):hover {
    border-color: var(--a-brand);
    color: var(--a-brand);
}

/* the scroll cue's night border */
body:is(.apex-saa, .apex-ava, .apex-set) :is(.saa-hero__cue, .ava-hero__cue, .set-hero__cue) {
    border-color: rgba(13, 35, 80, .28);
}
body:is(.apex-saa, .apex-ava, .apex-set) :is(.saa-hero__cue, .ava-hero__cue, .set-hero__cue) span {
    background: var(--saa-brand, #22458a);
}

/* ════════ Semantic colour ═══════════════════════════════════════════════
   No green, amber or red writing since 2026-10-28: Lachlan read it as AI.
   State is carried by the one blue and the ink.
   The night sheets used neon (#58d68d, #ff9d8d, #ffd479) which is unreadable
   on paper — each drops to its ink-weight equivalent. */
body:is(.apex-saa, .apex-ava, .apex-set) .set-tool__leadtoast {
    background-color: rgba(34, 69, 138, .07);
    border-color: rgba(34, 69, 138, .26);
    color: var(--saa-ink, #0a1730);
}
/* Dots take the colour as a FILL; text takes it as ink. */
body:is(.apex-saa, .apex-ava, .apex-set) :is(.saa-doc__dot, .set-tool__leaddot, .ava-tile__dot--live) {
    background-color: var(--saa-brand, #22458a);
    box-shadow: none;
}
body:is(.apex-saa, .apex-ava, .apex-set) .set-tool__leadtoast strong {
    color: var(--saa-brand, #22458a);
    background-color: transparent;
}
body:is(.apex-saa, .apex-ava, .apex-set) :is(.ava-ask__dot, .set-tool__dot) {
    background-color: var(--saa-brand, #22458a);
    box-shadow: none;
}
body:is(.apex-saa, .apex-ava, .apex-set) .ava-verdict__stamp {
    background-color: var(--app-paper, #f2f6fb);
    border-color: var(--a-card-line);
    color: var(--saa-ink, #0a1730);
}
body:is(.apex-saa, .apex-ava, .apex-set) .ava-verdict__stamp i {
    background-color: var(--saa-ink, #0a1730);
    box-shadow: none;
}

/* meters, tracks and dials */
body:is(.apex-saa, .apex-ava, .apex-set) :is(.saa-scene__track, .set-tool__track) {
    background-color: var(--a-card-line);
}
body:is(.apex-saa, .apex-ava, .apex-set) :is(.saa-scene__track i, .set-tool__fill) {
    background-image: none;
    background-color: var(--saa-brand, #22458a);
}
body:is(.apex-saa, .apex-ava, .apex-set) .set-tool__knob {
    background: #fff;
    border-color: var(--set-brand);
    box-shadow: 0 2px 6px rgba(13, 35, 80, .22);
}
body:is(.apex-saa, .apex-ava, .apex-set) .ava-dial__track { stroke: var(--a-card-line) }
body:is(.apex-saa, .apex-ava, .apex-set) .ava-dial__value { filter: none }
body:is(.apex-saa, .apex-ava, .apex-set) .set-proof__strip > i { background-color: rgba(13, 35, 80, .28) }

/* The numbered pins sat on --ava-accent, which used to be pale blue and so
   carried near-black text. Re-pointing the accent to navy left that text on
   its own fill at 2.08:1 — only visible under reduced motion, because
   otherwise the pins are mid-reveal when a scan runs. */
body:is(.apex-saa, .apex-ava, .apex-set) .ava-pin {
    background-color: var(--ava-brand);
    color: #fff;
}

/* pills, topics and the SERP mock */
body:is(.apex-saa, .apex-ava, .apex-set) .saa-topic {
    background-color: var(--app-paper);
    border-color: var(--saa-line);
    color: var(--saa-body);
}
body:is(.apex-saa, .apex-ava, .apex-set) .saa-topic--hot {
    background-color: rgba(34, 69, 138, .08);
    border-color: rgba(34, 69, 138, .35);
    color: var(--saa-brand);
}
body:is(.apex-saa, .apex-ava, .apex-set) .saa-serp__url i {
    background-image: none;
    background-color: var(--saa-brand);
}
body:is(.apex-saa, .apex-ava, .apex-set) .ava-legend {
    background-color: rgba(34, 69, 138, .07);
    border-color: rgba(34, 69, 138, .22);
    color: var(--ava-body);
}

/* dashed rules and scrollbars */
body:is(.apex-saa, .apex-ava, .apex-set) .ava-answer__more { border-top-color: rgba(13, 35, 80, .2) }
body:is(.apex-saa, .apex-ava, .apex-set) .saa-real__scroll { scrollbar-color: rgba(13, 35, 80, .28) transparent }
body:is(.apex-saa, .apex-ava, .apex-set) .saa-real__scroll::-webkit-scrollbar-thumb { background: rgba(13, 35, 80, .28) }

/* the FAQ hairline. The component reads --faq-line, which each page points at
   its own hairline token, so this shared override has nothing left to correct. */
body:is(.apex-saa, .apex-ava, .apex-set) .apex-faq {
    --faq-line: var(--saa-line, var(--a-line));
}

/* ════════ The CTA panel ═════════════════════════════════════════════════ */
body:is(.apex-saa, .apex-ava, .apex-set) :is(.saa-cta__panel, .ava-cta__panel, .set-cta__panel) {
    background: var(--app-paper);
    background-image: none;
    border: 1px solid var(--saa-line, var(--a-line));
    box-shadow: none;
}
body:is(.apex-saa, .apex-ava, .apex-set) :is(.saa-cta__panel, .ava-cta__panel, .set-cta__panel)::before { content: none }
body:is(.apex-saa, .apex-ava, .apex-set) :is(.saa-cta__input b, .ava-cta__input b, .set-cta__input b) {
    background-image: none;
    background-color: var(--saa-ink, #0a1730);
    color: #fff;
}

/* ════════ The shared Business Apps components ═══════════════════════════
   apex-fx.css colours .ba-founder and .ba-shot for the night ground; on paper
   their body copy measures about 1.7:1 without this. .ba-shot__ph has to be
   matched at `.ba-shot.is-empty .ba-shot__ph` to win on specificity. */
body:is(.apex-saa, .apex-ava, .apex-set) .ba-founder { background: transparent; color: var(--saa-body, #33415e) }
body:is(.apex-saa, .apex-ava, .apex-set) .ba-founder__copy h2 { color: var(--saa-ink, #0a1730) }
body:is(.apex-saa, .apex-ava, .apex-set) .ba-founder__copy p { color: var(--saa-body, #33415e) }
body:is(.apex-saa, .apex-ava, .apex-set) .ba-founder__sign { color: var(--saa-soft, #4d5b74) }
body:is(.apex-saa, .apex-ava, .apex-set) .ba-real__cap { color: var(--saa-soft, #4d5b74) }
body:is(.apex-saa, .apex-ava, .apex-set) .ba-shot {
    background: var(--app-paper);
    border: 1px solid var(--saa-card-border, var(--a-line));
}
body:is(.apex-saa, .apex-ava, .apex-set) .ba-shot__bar {
    background-color: rgba(13, 35, 80, .06);
    border-bottom: 1px solid var(--app-hair);
}
body:is(.apex-saa, .apex-ava, .apex-set) :is(.ba-shot__bar b, .ba-shot__bar small) { color: var(--saa-soft, #4d5b74) }
body:is(.apex-saa, .apex-ava, .apex-set) .ba-shot__bar i { background: rgba(13, 35, 80, .22) }
body:is(.apex-saa, .apex-ava, .apex-set) .ba-shot.is-empty .ba-shot__ph,
body:is(.apex-saa, .apex-ava, .apex-set) .ba-shot.is-empty .ba-shot__ph small { color: var(--saa-soft, #4d5b74) }

/* ════════ Focus ═════════════════════════════════════════════════════════ */
body:is(.apex-saa, .apex-ava, .apex-set) .aad-page :is(a, button, summary):focus-visible {
    outline: 2px solid var(--saa-brand, #22458a);
    outline-offset: var(--a-focus-off);
    border-radius: 6px;
}

/* ════════ Footer — matching About, the blog, the hub and the Assistant ══ */
body:is(.apex-saa, .apex-ava, .apex-set) .nx-footer {
    position: relative;
    background: linear-gradient(to bottom, var(--footer-fade, #fff) 0, var(--footer-fade, #fff) 4px, #02122f 4px); /* the top 4px match the page, so a fractional footer edge never shows a grey seam */
    padding-top: 0;
    overflow: hidden;
}
body:is(.apex-saa, .apex-ava, .apex-set) .nx-footer__ridge { display: none }
body:is(.apex-saa, .apex-ava, .apex-set) .nx-footer::before {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 2172 / 374;
    /* the top of the shelf dissolves into the page above (Lachlan, 29 Oct:
       the hard top edge read as cut off); the ledge and icicles stay crisp */
    background:
        linear-gradient(to bottom, var(--footer-fade, #fff) 0%, var(--footer-fade, #fff) 4%, rgba(255, 255, 255, 0) 55%) top center / 100% 100% no-repeat,
        url("../media/fx/fx-ice-shelf.webp") top center / 100% auto no-repeat;
}
/* the footer's own shell rule owns position, z-index, padding and font now */

/* ════════ Hero height ═══════════════════════════════════════════════════
   Same fix the Website Assistant and the hub needed: 100svh with an auto top
   margin pinned the block to the floor, so at 1440x900 the headline started
   roughly 570px down with nothing above it but empty white. */
/* 78svh, not 100 (and not the hub's 88): these heroes carry less content, so
   a taller box just centred a short block inside 250px of white top and
   bottom. The scroll cue still sits on the floor. */
/* Superseded 2026-08-31. Any svh box with the copy centred inside it makes
   the opening depend on how much copy the page carries: these three heroes
   put their h1 at 311, 267 and 272 while the service pages opened at 217 to
   228, and the bottom half of the first screen was empty on all three. The
   hero is content-height now, under the site's one opening. */
body:is(.apex-saa, .apex-ava, .apex-set) :is(.saa-hero, .ava-hero, .set-hero) {
    min-height: 0;
    padding-block: var(--a-hero-pt) var(--a-hero-pb);
}
body:is(.apex-saa, .apex-ava, .apex-set) :is(.saa-hero__inner, .ava-hero__inner, .set-hero__inner) { margin-block: 0 }

/* One lede rank. The night sheets set this in a per-app clamp that landed at
   three different sizes, and the wide override added a fourth at 18px. It is
   the second most prominent line on the page, so it is a site value now. */
body:is(.apex-saa, .apex-ava, .apex-set) :is(.saa-hero__statement, .ava-hero__statement, .set-hero__statement) {
    font-size: var(--a-t-lede);
    line-height: 1.6;
}

/* Wide: headline left, its supporting column right, both on one baseline.
   Stacked, the headline used the left half of a 1240px shell and left the
   other half empty — the same hole the hub had. */
@media (min-width: 900px) {
    body:is(.apex-saa, .apex-ava, .apex-set) :is(.saa-hero__inner, .ava-hero__inner, .set-hero__inner) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 25rem);
        column-gap: clamp(2rem, 4vw, 4.5rem);
    /* start, not end/centre: the h1 has to begin at the site's opening line.
       Aligned to the other column it was pushed down by whatever that column
       happened to contain, which is what put the same headline at 226 here,
       267 on SEO Article Authoring and 135 on About. */
        align-items: start;
    }
    body:is(.apex-saa, .apex-ava, .apex-set) :is(.saa-hero__title, .ava-hero__title, .set-hero__title) {
        margin-bottom: 0;
        max-width: none;
    }
    body:is(.apex-saa, .apex-ava, .apex-set) :is(.saa-hero__side, .ava-hero__side, .set-hero__side) {
        display: flex; flex-direction: column; align-items: flex-start; gap: 1.4rem;
    }
    body:is(.apex-saa, .apex-ava, .apex-set) :is(.saa-hero__statement, .ava-hero__statement, .set-hero__statement) {
        margin: 0; max-width: none;
    }
    /* the inline margin-top on the actions rows fights the flex gap */
    body:is(.apex-saa, .apex-ava, .apex-set) :is(.saa-hero__actions, .ava-hero__actions, .set-hero__actions) {
        margin-top: 0 !important;
    }
}

@media (max-width: 760px) {
    body:is(.apex-saa, .apex-ava, .apex-set) :is(.saa-hero, .ava-hero, .set-hero) {
        min-height: 0;
        padding-block: clamp(104px, 18vh, 140px) clamp(36px, 7vh, 60px);
    }
    body:is(.apex-saa, .apex-ava, .apex-set) :is(.saa-hero__inner, .ava-hero__inner, .set-hero__inner) { margin-block: 0 }
    body:is(.apex-saa, .apex-ava, .apex-set) :is(.saa-hero__cue, .ava-hero__cue, .set-hero__cue) { display: none }
}

/* ════════ THE CLOSE — one treatment ═════════════════════════════════════
   Every page on the site ends the same way: plain white, centred, the close
   rank, the lede rank, the two buttons, one quiet line under. These three
   ended on a tinted rounded panel at the head rank instead, which read as a
   sixth kind of section AND as the tinted band the light system does not
   use. The panel is gone rather than restyled, so the last thing before the
   ice shelf is the sentence itself.

   Their decorative aria-hidden props went with it in the body files: a fake
   pill input on SEO Article Authoring, a fake search bar on AI Visibility
   Audit, a status chip and two arrow rows on Solar Estimate Tool. None of
   them was a drawing of the reader's business, and a close is the one place
   on a page with nothing to demonstrate. */
body:is(.apex-saa, .apex-ava, .apex-set) :is(.saa-cta__panel, .ava-cta__panel, .set-cta__panel, .saa-cta__panel--center, .set-cta__card) {
    background: none;
    background-image: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    text-align: left;
    align-items: flex-start;
}
body:is(.apex-saa, .apex-ava, .apex-set) :is(.saa-cta__panel, .ava-cta__panel, .set-cta__panel, .set-cta__card)::before { content: none }
body.apex-set .set-cta__card { max-width: none; margin-inline: 0; overflow: visible }
/* Left-aligned under a hairline, like every other close on the site
   (review 27 Oct, R6). These closes were the last centred heads. */
body:is(.apex-saa, .apex-ava, .apex-set) :is(.saa-cta__panel--center, .ava-cta__panel, .set-cta__body) {
    max-width: 44rem;
    margin-inline: 0;
    padding: clamp(2.4rem, 5vh, 3.4rem) 0 0;
    border-top: 1px solid var(--a-hair);
    text-align: left;
    align-items: flex-start;
}
body:is(.apex-saa, .apex-ava, .apex-set) :is(.saa-cta, .ava-cta, .set-cta) h2 {
    font-size: var(--a-t-close);
    line-height: 1.06;
}
body:is(.apex-saa, .apex-ava, .apex-set) :is(.saa-cta, .ava-cta, .set-cta) > * > p,
body:is(.apex-saa, .apex-ava, .apex-set) .set-cta__body > p {
    max-width: 40rem;
    margin-inline: 0;
    font-size: var(--a-t-lede);
    line-height: 1.6;
}
body:is(.apex-saa, .apex-ava, .apex-set) :is(.saa-cta__replies, .ava-cta__actions, .set-cta__actions) {
    justify-content: flex-start;
}

/* ════════ SECTION HEADS OPEN ON THE LEFT EDGE ═══════════════════════════
   Nine of the thirteen pages left-align every section head and centre only
   the close. These three centred between one and three of theirs, so the
   reader's eye had to find a new starting point two or three times a page.
   The `--center` modifier and the two "statement" sections are the same
   head in a different place, so they take the same left edge. Since 27 Oct
   the close is left-aligned too. */
body:is(.apex-saa, .apex-ava, .apex-set) :is(.saa-head--center, .ava-head--center, .set-head--center) {
    margin-inline: 0;
    text-align: left;
}
body:is(.apex-saa, .apex-ava, .apex-set) :is(.saa-head--center, .ava-head--center, .set-head--center) :is(.saa-head__lead, .ava-head__sub, .set-head__lead) {
    margin-inline: 0;
}
body:is(.apex-saa, .apex-set) :is(.saa-statement, .set-statement) { text-align: left }
body:is(.apex-saa, .apex-set) :is(.saa-statement h2, .set-statement h2) {
    margin-inline: 0;
    font-size: var(--a-t-head);
}

/* The two figures under the statement were tinted 999px pills, which is the
   one shape this site does not use. They are facts, and the site already
   draws a fact as a square marker and a line of text, the way every close
   ends. Same words, same numbers, the site's own component. */
body.apex-saa .saa-statement__chips {
    justify-content: flex-start;
    gap: .7rem 2rem;
}
body.apex-saa .saa-schip {
    align-items: baseline;
    gap: .5rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: var(--a-t-btn);
}
body.apex-saa .saa-schip::before {
    content: "";
    align-self: center;
    width: var(--a-mark); height: var(--a-mark);
    margin-right: .35rem;
    flex: none;
    background: var(--saa-accent, var(--a-brand));
}