/*
 * hub.css — Business Apps hub (/business-apps/), light system.
 *
 * Sole owner of this page, following the About precedent: hub-adnia.css and
 * hub-light.css are both retired (archived 2026-08-12), so there is no dark
 * sheet underneath to fight and no !important arms race. The handful of
 * !important below beat night rules in main.css and apex-fx.css that are
 * themselves !important — this page genuinely needs the aa-adnia-copy-page
 * body class because its site chrome is .aad-* markup.
 *
 * Palette lifted verbatim from pst3.css so About, Contact, the blog, the
 * Website Assistant and this page are one system.
 *
 * 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 — that bug once left this whole page dark.
 */

body.apex-hub {
    --hub-ink: #0a1730;
    --hub-body: #33415e;
    --hub-soft: #4d5b74;
    --hub-brand: #22458a;
    --hub-line: var(--a-line);
    --hub-hair: var(--a-hair);
    --hub-paper: #f2f6fb;
    --hub-go: var(--a-go); /* was #0f6b4f; the site has one go-green */
    --hub-miss: #9a4a28;
    --hub-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --hub-ease: cubic-bezier(.22, 1, .36, 1);
    --hub-shadow: var(--a-card-shadow);
    --hub-shadow-lift: 0 26px 60px rgba(13, 35, 80, .12);
    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. Any shell pixel the article does not cover shows through
   near-black otherwise, which is what produced the dark band above the footer
   on the Website Assistant page. */
/* 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. So the BODY itself was still night on a page that renders white:
   it shows in the overscroll bounce, under a short page, and anywhere a child
   fails to cover its parent. Five pages were carrying it. */
body.apex-hub,
body.apex-hub .site-shell,
body.apex-hub .site-main { background: var(--a-page) !important }

/* An `overflow` other than `visible` on ANY ancestor makes that ancestor the
   sticky containing block, which kills `position: sticky` in its descendants.
   Three of them carry `overflow: clip` here — the shell, the main and the
   article — and clearing only the nearest is not enough. The clip existed to
   contain the night-field decorations, which this page has already switched
   off, so nothing is left for it to hold in. */
body.apex-hub .site-shell,
body.apex-hub .site-main,
body.apex-hub article.aad-page { overflow: visible !important }

body.apex-hub article.aad-page {
    background: #fff !important;
    background-image: none !important;
    color: var(--hub-body);
    font-family: var(--hub-sans);
}

body.apex-hub article.aad-page::before,
body.apex-hub article.aad-page::after { content: none !important }

/* Only links with no class of their own inherit colour. A bare
   `.hub-page a { color: inherit }` is (0,1,1) and silently outranks every
   single-class rule like .hub-chip — on About that rendered the primary CTA
   navy-on-navy at 1.75:1. */
body.apex-hub .hub-page a:not([class]) { color: var(--hub-brand) }

/* one shell, the site's. This was 1240 with its own two-step gutter, which
   put the hub's content 20px outside the column every other page keeps. */
body.apex-hub .hub-page .aad-shell {
    width: var(--a-shell);
    margin-inline: auto;
}

/* ════════ Reveals ════════════════════════════════════════════════════════
   The page's ambient entrance. The authored moment is the highlighter on
   "your business" in the audit answer; these just keep sections from
   arriving all at once. */
.hub-anim body.apex-hub [data-reveal] {
    opacity: 0;
    transform: translateY(var(--a-rev-y));
    filter: blur(var(--a-rev-blur));
    transition: opacity var(--a-rev-fade) var(--a-ease), transform var(--a-rev-move) var(--a-ease),
                filter var(--a-rev-fade) var(--a-ease);
    transition-delay: calc(var(--i, 0) * var(--a-rev-step));
}
.hub-anim body.apex-hub [data-reveal].is-revealed { opacity: 1; transform: none; filter: none }

/* ════════ Shared bits ════════════════════════════════════════════════════ */
body.apex-hub .hub-arrow { width: 1em; height: 1em; flex: none }

body.apex-hub .hub-textlink {
    display: inline-flex; align-items: center; gap: .5rem;
    color: var(--hub-brand); font-weight: 600; font-size: var(--a-t-btn); text-decoration: none;
    text-underline-offset: 4px;
}
body.apex-hub .hub-textlink:hover { text-decoration: underline }
body.apex-hub .hub-textlink .hub-arrow { transition: transform .3s var(--hub-ease) }
body.apex-hub .hub-textlink:hover .hub-arrow { transform: translateX(3px) }

body.apex-hub .hub-main > section { margin-block: var(--a-gap-move) }

/* ════════ Buttons ════════════════════════════════════════════════════════
   The primary carries both .hub-chip and .hub-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 silently
   stripped the Website Assistant primary back to transparent. */
/* the site's button. This was a 999px pill at 17px with an ink-navy solid. */
body.apex-hub .hub-chip {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: var(--a-btn-pad); border-radius: var(--a-btn-r);
    font: var(--a-btn-font); text-decoration: none;
    transition: transform .22s var(--hub-ease), background-color .22s, border-color .22s, color .22s, box-shadow .22s;
}
body.apex-hub .hub-chip:not(.hub-chip--solid) {
    background-color: #fff;
    border: 1px solid var(--a-card-line);
    color: var(--hub-ink);
}
body.apex-hub .hub-chip:not(.hub-chip--solid):hover {
    border-color: var(--hub-brand);
    color: var(--hub-brand);
}
body.apex-hub .hub-chip.hub-chip--solid {
    background-color: var(--a-brand);
    border: 1px solid var(--a-brand);
    color: #fff;
    box-shadow: var(--a-btn-glow);
}
body.apex-hub .hub-chip.hub-chip--solid:hover {
    background-color: var(--a-brand-deep);
    border-color: var(--a-brand-deep);
    box-shadow: var(--a-lift-2);
}
body.apex-hub .hub-chip:hover { transform: translateY(-2px) }
body.apex-hub .hub-chip:active { transform: translateY(1px) scale(.99) }
body.apex-hub .hub-chip--sm { padding: .6rem 1.05rem }

/* ════════ HERO ═══════════════════════════════════════════════════════════
   The strip of three app names that sat on the hero's floor went 2026-10-29:
   with the side menu it named every app twice before any content. */
body.apex-hub .hub-hero {
    position: relative;
    display: flex; flex-direction: column;
    padding-top: var(--a-hero-pt);
}
body.apex-hub .hub-hero__inner { margin-block: 0; padding-bottom: var(--a-hero-pb) }
body.apex-hub .hub-hero__title {
    margin: 0 0 1.4rem;
    font: 600 var(--a-t-h1)/1.06 var(--hub-sans);
    letter-spacing: -.032em;
    color: var(--hub-ink);
}
/* The break is authored in the markup — the sentence break is the line break.
   Below 620px the line no longer fits and the browser wraps it anyway, so the
   <br> is removed there rather than fighting it. */
@media (max-width: 620px) {
    body.apex-hub .hub-hero__title br { display: none }
}
body.apex-hub .hub-hero__statement {
    margin: 0 0 2rem;
    max-width: 52ch;
    font-size: var(--a-t-lede); line-height: 1.6;
    color: var(--hub-soft);
    text-wrap: pretty;
}
body.apex-hub .hub-hero__actions { display: flex; flex-wrap: wrap; gap: .8rem }

/* Wide: headline left, the statement and its actions in a column to its
   right, both sitting on the same baseline. Stacked, the headline left half
   of a 1240px shell left the other half empty. */
@media (min-width: 900px) {
    body.apex-hub .hub-hero__inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 25rem);
        column-gap: clamp(2rem, 4vw, 4.5rem);
        /* start, not end: see wfa.css. This hero opened 60px low. */
        align-items: start;
    }
    body.apex-hub .hub-hero__title {
        grid-column: 1; grid-row: 1 / span 2;
        margin-bottom: 0;
    }
    body.apex-hub .hub-hero__statement {
        grid-column: 2; grid-row: 1;
        margin-bottom: 1.5rem;
        max-width: none;
    }
    body.apex-hub .hub-hero__actions { grid-column: 2; grid-row: 2 }
}

/* ════════ THE APPS ═══════════════════════════════════════════════════════
   One section each, and each its own shape: the lead beside its copy, the
   post before its copy, the answer under its copy. Three identical rows of
   copy-left, card-right was the template the audit of 29 Oct called out. */
body.apex-hub .hub-app {
    display: grid;
    gap: clamp(2rem, 4vw, 4.5rem);
    scroll-margin-top: var(--a-anchor);
}
body.apex-hub .hub-app__copy h2 {
    margin: 0 0 1rem;
    font: 600 var(--a-t-head)/1.1 var(--hub-sans);
    letter-spacing: -.026em;
    color: var(--hub-ink);
    text-wrap: balance;
}
body.apex-hub .hub-app__copy p {
    margin: 0 0 1.4rem;
    max-width: 36rem;
    font-size: var(--a-t-spoken); line-height: 1.62;
    color: var(--hub-body);
    text-wrap: pretty;
}
/* — Website Assistant: the chat, and the lead it ends in. The notice lands
   over the window's corner the way it lands on a phone, so the section is the
   whole story in one picture: a question at 9:14, a number at 9:16. — */
body.apex-hub .hub-wa__stage { position: relative; padding-bottom: 3.4rem }
body.apex-hub .hub-chat {
    margin: 0;
    border: 1px solid var(--a-card-line); border-radius: var(--a-r);
    background: #fff;
    box-shadow: var(--hub-shadow);
    overflow: hidden;
}
body.apex-hub .hub-chat__head {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .9rem 1.3rem;
    border-bottom: 1px solid var(--hub-hair);
    font: 600 var(--a-t-mark)/1.2 var(--hub-sans); color: var(--hub-ink);
}
body.apex-hub .hub-chat__head span { font-weight: 400; color: var(--hub-soft); font-variant-numeric: tabular-nums }
/* the foot of the thread is left clear for the notice to land on */
body.apex-hub .hub-chat__thread { display: flex; flex-direction: column; gap: .6rem; padding: 1.3rem 1.3rem 8rem }
body.apex-hub .hub-bubble {
    max-width: 86%;
    margin: 0;
    padding: .75rem 1rem;
    border-radius: 18px;
    font-size: .95rem; line-height: 1.45;
    text-wrap: pretty;
}
/* the visitor speaks on paper, the assistant answers in the brand blue, as on its own page */
body.apex-hub .hub-bubble--visitor {
    align-self: flex-end;
    border: 1px solid var(--a-card-line); border-bottom-right-radius: 6px;
    background: #eaf0f8; color: var(--hub-ink);
}
body.apex-hub .hub-bubble--bot {
    align-self: flex-start;
    border-bottom-left-radius: 6px;
    background: var(--a-brand); color: #fff;
}
body.apex-hub .hub-nowrap { white-space: nowrap }
body.apex-hub .hub-notice {
    position: absolute; bottom: 0; left: calc(-1 * min(2.4rem, 3vw));
    width: min(22rem, 78%);
    padding: 1rem 1.2rem 1.1rem;
    border: 1px solid var(--a-card-line); border-radius: 14px;
    background: #fff;
    box-shadow: var(--a-card-shadow-2);   /* lifted: it sits over the window */
}
body.apex-hub .hub-notice :where(p) { margin: 0 }
body.apex-hub .hub-notice__from {
    display: flex; justify-content: space-between; gap: 1rem;
    margin-bottom: .45rem;
    font: 600 var(--a-t-mark)/1.3 var(--hub-sans); color: var(--hub-soft);
}
body.apex-hub .hub-notice__from span { font-weight: 400; font-variant-numeric: tabular-nums }
body.apex-hub .hub-notice__title { font: 600 1.02rem/1.35 var(--hub-sans); color: var(--hub-ink) }
body.apex-hub .hub-notice__text { margin-top: .2rem; font-size: .94rem; line-height: 1.5; color: var(--hub-soft) }
/* — SEO Article Authoring: the post, as it goes out. The fade at its foot
   says the article carries on; it is a page, not a card that ends. — */
body.apex-hub .hub-post {
    margin: 0;
    padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.4rem, 3vw, 2.4rem) clamp(2.4rem, 5vw, 3.4rem);
    border: 1px solid var(--a-card-line); border-radius: var(--a-r);
    background: #fff;
    box-shadow: var(--hub-shadow);
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent);
    mask-image: linear-gradient(180deg, #000 72%, transparent);
}
body.apex-hub .hub-post__bar {
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: .3rem 1rem;
    margin-bottom: 1.3rem; padding-bottom: .85rem;
    border-bottom: 1px solid var(--hub-hair);
    font: 600 .82rem/1.3 var(--hub-sans); color: var(--hub-soft);
}
body.apex-hub .hub-post__bar span { font-weight: 500 }
body.apex-hub .hub-post__title {
    margin: 0 0 .9rem;
    font: 600 clamp(1.4rem, 2.2vw, 1.85rem)/1.2 var(--hub-sans);
    letter-spacing: -.022em; color: var(--hub-ink);
    text-wrap: balance;
}
body.apex-hub .hub-post__title a { color: inherit; text-decoration: none }
body.apex-hub .hub-post__title a:hover { text-decoration: underline; text-underline-offset: .15em }
body.apex-hub .hub-post__text { margin: 0; font-size: var(--a-t-body); line-height: 1.7; color: var(--hub-body); max-width: 62ch }
body.apex-hub .hub-post__h { margin: 1.3rem 0 0; font: 600 1.12rem/1.3 var(--hub-sans); color: var(--hub-ink) }
/* the sample post (seo-proof.css) sits in the same column; the graph goes
   under the copy so the two columns come out level */
body.apex-hub .hub-saa__graph { margin-top: clamp(1.8rem, 3.5vw, 2.6rem) }

/* — AI Visibility Audit: one answer, set as type — */
body.apex-hub .hub-answer {
    margin: 0;
    padding: clamp(1.8rem, 4vw, 2.8rem) 0;
    border-block: 1px solid var(--hub-line);
}
body.apex-hub .hub-answer__ask { margin: 0 0 1.1rem; font: 600 .95rem/1.5 var(--hub-sans); color: var(--hub-soft) }
body.apex-hub .hub-answer__text { margin: 0 }
body.apex-hub .hub-answer__text p {
    margin: 0;
    max-width: 30em;
    font: 500 clamp(1.5rem, 2.9vw, 2.45rem)/1.34 var(--hub-sans);
    letter-spacing: -.022em;
    color: var(--hub-ink);
    text-wrap: pretty;
}
/* a blacked-out business name */
body.apex-hub .hub-x {
    display: inline-block;
    width: var(--w, 5em);
    height: .74em;
    margin-inline: .06em;
    border-radius: 3px;
    background: var(--hub-ink);
    vertical-align: -.02em;
}
/* The highlighter. --k runs 0 to 1 with scroll position (hub.js); the CSS
   default is the finished mark, so no script means a marked name. */
body.apex-hub .hub-you {
    --k: 1;
    padding: 0 .2em;
    border-radius: 4px;
    background: linear-gradient(color-mix(in srgb, var(--a-brand) 16%, #fff), color-mix(in srgb, var(--a-brand) 16%, #fff)) left center / calc(var(--k) * 100%) 100% no-repeat;
    color: var(--a-brand);
    font-weight: 600;
    white-space: nowrap; /* split across two lines, the mark read as two marks */
}

/* — the solar line: an aside under the apps, at the reading measure — */
/* the audit gives up its bottom gap so the line reads as part of the apps */
body.apex-hub .hub-main > .hub-ava { margin-bottom: 0 }
body.apex-hub .hub-main > .hub-odd { margin-top: clamp(3rem, 6vw, 4.5rem) }
body.apex-hub .hub-odd p { margin: 0; max-width: 40rem; font-size: var(--a-t-spoken); line-height: 1.62; color: var(--hub-body); text-wrap: pretty }
body.apex-hub .hub-odd a { color: var(--hub-brand); text-underline-offset: .18em }

/* ════════ WHAT IT COSTS: the balance, then the done-for-you prices ═══════ */
body.apex-hub .hub-cost h2,
body.apex-hub .hub-faq h2 {
    margin: 0 0 1.4rem;
    font: 600 var(--a-t-head)/1.1 var(--hub-sans);
    letter-spacing: -.026em; color: var(--hub-ink);
}
body.apex-hub .hub-cost__grid { display: grid; gap: 1.6rem clamp(2rem, 5vw, 5rem) }
body.apex-hub .hub-cost__col h3 {
    margin: 0 0 .8rem;
    font: 600 var(--a-t-sub)/1.25 var(--hub-sans);
    letter-spacing: -.02em; color: var(--hub-ink);
}
body.apex-hub .hub-cost__col p {
    margin: 0 0 1.1em;
    max-width: 36rem;
    font-size: var(--a-t-spoken); line-height: 1.65; color: var(--hub-body);
    text-wrap: pretty;
}
body.apex-hub .hub-cost__col p:last-child { margin-bottom: 0 }

/* ════════ FAQ: heading beside the list, sticky while it is open ══════════ */
body.apex-hub .hub-faq {
    display: grid;
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
}
body.apex-hub .hub-faq h2 { position: sticky; top: clamp(5rem, 12vh, 7.5rem); margin: 0 }

/* ── One FAQ, site-wide (critique item 1a). Rows, summary type, chevron and
   open/close motion are apex-faq.css now. It was a stack of rounded white cards with a gap; the grid and sticky
   head above this survive because they are the section, not the rows ── */
body.apex-hub .apex-faq {
    --faq-line:   var(--hub-line);
    --faq-ink:    var(--hub-ink);
    --faq-body:   var(--hub-body);
    --faq-accent: var(--hub-brand);
}

/* ════════ FOUNDER ════════════════════════════════════════════════════════
   apex-fx.css colours .ba-founder for the night ground; on paper its body
   copy measures about 1.7:1 without these. */
body.apex-hub .ba-founder { background: transparent; color: var(--hub-body) }
/* apex-fx.css centres the photo in its column, which set it in from the edge every section above keeps */
body.apex-hub .ba-founder__media { justify-self: start }
@media (min-width: 900px) {
    /* the close is the page's one photograph: at 20rem it left a gap wider than the gutter */
    body.apex-hub .hub-close .ba-founder__media--portrait { width: min(100%, 24rem) }
}
body.apex-hub .ba-founder__copy h2 {
    color: var(--hub-ink);
    font: 600 var(--a-t-head)/1.15 var(--hub-sans);
    letter-spacing: -.026em;
}
body.apex-hub .ba-founder__copy p { color: var(--hub-body); font-size: var(--a-t-spoken); line-height: 1.62 }
body.apex-hub .ba-founder__sign { color: var(--hub-soft) }

/* ════════ CLOSE: one ending, with the founder in it ══════════════════════
   It used to be a founder section and then a separate close under a
   hairline, two endings with ~180px of white between them on a phone. */
body.apex-hub .hub-main > .hub-close { padding-block: 0; margin-bottom: var(--a-gap-move) }
body.apex-hub .hub-close .ba-founder__copy h2 { font-size: var(--a-t-close); line-height: 1.06; text-wrap: balance }
body.apex-hub .hub-close__act { display: flex; flex-wrap: wrap; gap: .8rem 1rem; margin-top: 1.6rem }
body.apex-hub .hub-close .ba-founder__copy .hub-close__mail { margin-top: 1.1rem; font-size: .95rem; color: var(--hub-soft) }
body.apex-hub .hub-close__mail a { color: var(--hub-brand); text-decoration: underline; text-underline-offset: .18em }

/* ════════ FOCUS ══════════════════════════════════════════════════════════ */
body.apex-hub .hub-page a:focus-visible,
body.apex-hub .hub-page button:focus-visible,
body.apex-hub .hub-page summary:focus-visible {
    outline: var(--a-focus);
    outline-offset: var(--a-focus-off);
    border-radius: 6px;
}

/* ════════ FOOTER — matching About, the blog and Website Assistant ════════ */
body.apex-hub .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.apex-hub .nx-footer__ridge { display: none }
body.apex-hub .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 */

/* ════════ WIDE ═══════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
    body.apex-hub .hub-wa { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center }
    /* the post comes first, on the left, so the three sections do not share a shape */
    body.apex-hub .hub-saa { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center }
    body.apex-hub .hub-saa :is(.hub-post, .sp-post) { grid-column: 1; grid-row: 1 }
    body.apex-hub .hub-saa .hub-app__copy { grid-column: 2; grid-row: 1 }
    /* the audit's copy runs across the top: heading left, the words right */
    body.apex-hub .hub-ava .hub-app__copy {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        column-gap: clamp(2rem, 4vw, 4.5rem);
        align-items: start;
    }
    body.apex-hub .hub-ava .hub-app__copy h2 { grid-row: 1 / span 2 }
    body.apex-hub .hub-cost__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
}

/* ════════ NARROW ═════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
    body.apex-hub .hub-app { gap: 1.8rem }
    /* in one column there is no gap to hang the notice in, so it overlaps the
       window's foot from inside the shell */
    body.apex-hub .hub-wa__stage { padding-bottom: 0 }
    body.apex-hub .hub-chat__thread { padding-bottom: 4.6rem }
    body.apex-hub .hub-notice { position: relative; left: auto; bottom: auto; width: min(22rem, 88%); margin: -3.4rem .9rem 0 auto }
    body.apex-hub .hub-faq { grid-template-columns: 1fr; gap: 1.2rem }
    body.apex-hub .hub-faq h2 { position: static }
}
@media (max-width: 620px) {
    body.apex-hub .hub-hero { min-height: 0; padding-top: clamp(6rem, 15vh, 8rem) }
    body.apex-hub .hub-hero__inner { padding-bottom: 2.5rem }
}

/* ════════ REDUCED MOTION ═════════════════════════════════════════════════
   Final states, not merely disabled motion. */
@media (prefers-reduced-motion: reduce) {
    .hub-anim body.apex-hub [data-reveal] {
        opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important;
    }
    body.apex-hub .hub-you { --k: 1 !important }
    body.apex-hub .hub-chip:hover,
    body.apex-hub .hub-textlink:hover .hub-arrow { transform: none }
}

/* ── The shared hero ridge (apex-ridge.css + inc/parts/hero-ridge.php).
   The scene sits on a negative layer, so the hero has to be its own stacking
   context or that layer falls behind the page instead of behind the copy. This
   line is the whole integration, and nothing in the hero needs a z-index of its
   own: every child, positioned or static, keeps the order it already had. ── */
body.apex-hub .hub-hero { position: relative; isolation: isolate }

/* ════════ 4 NOV: REAL CAPTURES, RECEIPTS ═════════════════════════════════ */
body.apex-hub .hub-app__copy b { font-weight: 600; color: var(--hub-ink) }
body.apex-hub .hub-pen { font: 400 1.85rem/1.12 "Apex Hand", cursive; color: #1f5fd6 }
body.apex-hub .hub-shot { margin: 0 }
body.apex-hub .hub-shot img {
    display: block; width: 100%; height: auto; max-width: none;
    border: 1px solid var(--a-card-line); border-radius: 10px;
    box-shadow: var(--hub-shadow);
}
body.apex-hub .hub-shot figcaption { margin-top: .9rem; font-size: 1rem; line-height: 1.5; color: var(--hub-body); text-wrap: pretty }
body.apex-hub .hub-shot--post .hub-pen { display: block; margin-bottom: .2rem }
body.apex-hub .hub-ava__row { display: grid; gap: clamp(2rem, 4vw, 4.5rem) }
/* the receipts: paper with a torn foot, a little crooked */
body.apex-hub .hub-rcpt__paper {
    position: relative;
    padding: clamp(1.4rem, 2.6vw, 2rem) clamp(1.3rem, 2.6vw, 2.1rem) 1.6rem;
    background: #fff;
    filter: drop-shadow(0 18px 22px rgba(16, 40, 92, .18));
}
body.apex-hub .hub-rcpt:nth-child(1) .hub-rcpt__paper { transform: rotate(-.7deg) }
body.apex-hub .hub-rcpt:nth-child(2) .hub-rcpt__paper { transform: rotate(.7deg) }
body.apex-hub .hub-rcpt__paper::after {
    content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: 10px;
    background:
        linear-gradient(135deg, #fff 50%, transparent 50%) 0 0 / 14px 10px repeat-x,
        linear-gradient(-135deg, #fff 50%, transparent 50%) 0 0 / 14px 10px repeat-x;
}
body.apex-hub .hub-rcpt h3 { margin: 0; font: 600 var(--a-t-sub)/1.25 var(--hub-sans); letter-spacing: -.02em; color: var(--hub-ink) }
body.apex-hub .hub-rcpt__sub { margin: .35rem 0 1.1rem; font-size: 1rem; line-height: 1.5; color: var(--hub-soft); text-wrap: pretty; min-height: 3em }
body.apex-hub .hub-rcpt dl { margin: 0; border-top: 2px dashed #c6d0e0; border-bottom: 2px dashed #c6d0e0; padding: .5rem 0 }
body.apex-hub .hub-rcpt dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1.2rem; padding: .6rem 0 }
body.apex-hub .hub-rcpt dt { font-size: 1.06rem; line-height: 1.35; color: var(--hub-ink); font-weight: 400 }
body.apex-hub .hub-rcpt dd { margin: 0; font-size: 1.14rem; font-weight: 600; color: var(--hub-ink); white-space: nowrap; font-variant-numeric: tabular-nums }
body.apex-hub .hub-rcpt .hub-pen { margin: 1.05rem 0 0 }
@media (min-width: 900px) {
    body.apex-hub .hub-saa:has(.hub-shot) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start }
    body.apex-hub .hub-saa .hub-shot { grid-column: 1; grid-row: 1 }
    body.apex-hub .hub-ava__row { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center }
    body.apex-hub .hub-ava__row .hub-answer { margin: 0 }
    body.apex-hub .hub-cost__grid { column-gap: clamp(2rem, 4vw, 3.5rem); align-items: start }
    body.apex-hub .hub-faq { grid-template-columns: minmax(0, .62fr) minmax(0, 1fr) }
}
@media (max-width: 899px) {
    body.apex-hub .hub-shot { max-width: 34rem }
}
@media (max-width: 560px) {
    body.apex-hub .hub-rcpt__sub { min-height: 0 }
}
/* tablet: the caption takes the space beside the capture */
@media (min-width: 700px) and (max-width: 899px) {
    body.apex-hub .hub-shot { max-width: none; display: grid; grid-template-columns: minmax(0, 62%) minmax(0, 1fr); column-gap: 2rem; align-items: end }
    body.apex-hub .hub-shot figcaption { margin-top: 0 }
}

/* ════════ 6 NOV: THE MORNING PHONE ═══════════════════════════════════════
   The hero was a headline over white. Now the headline sits beside a phone the
   morning after, one thing from each app on its lock screen. The screens and
   secrets are the shared ones (apex-phone.css); this is only its frame. */
body.apex-hub .hub-ph {
    position: relative;
    justify-self: center;
    width: 20em;
    aspect-ratio: 9 / 19.5;
    margin-top: 2.4rem;
    font-size: 15px; line-height: 1.3; color: #16233f;
    background: #0a1226;
    border: 1px solid #39496d;
    border-radius: 2.75em;
    box-shadow: 0 3px 6px rgba(10, 23, 48, .12), 0 40px 60px -24px rgba(16, 40, 92, .55);
}
body.apex-hub .hub-ph b { font-weight: 600 }
body.apex-hub :where(.hub-ph .hm-phone__screen > span, .hub-ph .hm-phone__note > span) { display: block }
body.apex-hub .hub-ph .hub-ph__note { margin-top: .5em }
body.apex-hub .hub-ph .hm-phone__time + .hub-ph__note { margin-top: 1.3em }
body.apex-hub .hub-ph .hub-ph__note b { display: flex; justify-content: space-between; align-items: baseline; gap: .6em }
body.apex-hub .hub-ph .hub-ph__note b i { flex: none; font-size: .8em; font-style: normal; font-weight: 400; color: #6e7a90 }
/* they arrive one at a time, the way a phone collects them overnight */
.hub-anim body.apex-hub .hub-ph:not(.is-in) .hub-ph__note { opacity: 0; transform: translateY(-.8em) scale(.97) }
.hub-anim body.apex-hub .hub-ph .hub-ph__note { transition: opacity .45s var(--a-ease), transform .45s var(--a-ease) }
.hub-anim body.apex-hub .hub-ph .hub-ph__note:nth-of-type(2) { transition-delay: .5s }
.hub-anim body.apex-hub .hub-ph .hub-ph__note:nth-of-type(3) { transition-delay: 1s }

@media (min-width: 900px) {
    body.apex-hub .hub-hero__inner {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto auto 1fr;
        align-items: start;
    }
    body.apex-hub .hub-hero__title { grid-column: 1; grid-row: 1; margin: clamp(2rem, 6vh, 4rem) 0 1.6rem }
    body.apex-hub .hub-hero__statement { grid-column: 1; grid-row: 2; max-width: 46ch; margin-bottom: 1.8rem }
    body.apex-hub .hub-hero__actions { grid-column: 1; grid-row: 3 }
    body.apex-hub .hub-ph { grid-column: 2; grid-row: 1 / span 4; margin-top: 0 }
}
@media (max-width: 420px) {
    /* a little wider, so three notes clear the torch */
    body.apex-hub .hub-ph { font-size: 14px; width: min(21.5em, 100%) }
}
body.apex-hub .hub-wa__stage { padding-bottom: 0 }
body.apex-hub .hub-wa__pen { margin: 1.1rem 0 0 1rem; text-wrap: balance; rotate: -1deg }
/* the 8rem at the foot of the thread was room for the lead card, which is gone */
body.apex-hub .hub-chat__thread { padding-bottom: 1.3rem }
/* the chat plays in one message at a time (hub.js initChat), then the pen */
.hub-anim body.apex-hub [data-hub-chat]:not(.is-in) :is(.hub-bubble, .hub-wa__pen) { opacity: 0; transform: translateY(.7em) }
.hub-anim body.apex-hub [data-hub-chat] :is(.hub-bubble, .hub-wa__pen) { transition: opacity .4s var(--a-ease), transform .4s var(--a-ease) }
.hub-anim body.apex-hub [data-hub-chat] .hub-bubble:nth-child(2) { transition-delay: .7s }
.hub-anim body.apex-hub [data-hub-chat] .hub-bubble:nth-child(3) { transition-delay: 1.5s }
.hub-anim body.apex-hub [data-hub-chat] .hub-bubble:nth-child(4) { transition-delay: 2.2s }
.hub-anim body.apex-hub [data-hub-chat] .hub-bubble:nth-child(5) { transition-delay: 3s }
.hub-anim body.apex-hub [data-hub-chat] .hub-bubble:nth-child(6) { transition-delay: 3.7s }
.hub-anim body.apex-hub [data-hub-chat] .hub-wa__pen { transition-delay: 4.5s }

/* ════ 8 Nov · a go of your own on each app ════
   The chat takes your question, the SEO column is a pick-three headline game,
   and the audit answer takes your own trade. Each ends in a pen link to the form. */
body.apex-hub .hub-chat__thread:has(.is-mine) { max-height: 30rem; overflow-y: auto; overscroll-behavior: contain }
body.apex-hub .hub-bubble.is-typing { opacity: .6; letter-spacing: .2em }
body.apex-hub .hub-ask { display: flex; gap: .5rem; padding: .8rem 1rem; border-top: 1px solid var(--hub-hair); background: var(--hub-paper) }
body.apex-hub .hub-ask input { flex: 1; min-width: 0; padding: .6rem .9rem; font: 400 .95rem/1.3 var(--hub-sans); color: var(--hub-ink); background: #fff; border: 1px solid var(--a-card-line); border-radius: 999px }
body.apex-hub .hub-ask input:focus-visible { outline: 2px solid var(--a-brand); outline-offset: 1px }
body.apex-hub .hub-ask button { padding: .6rem 1.1rem; font: 600 .95rem/1 var(--hub-sans); color: #fff; background: var(--a-brand); border: 0; border-radius: 999px; cursor: pointer }
body.apex-hub .hub-ask__note { margin: 0; padding: 0 1.1rem .9rem; background: var(--hub-paper); font: 400 1.65rem/1.12 "Apex Hand", cursive; color: #1f5fd6; text-wrap: balance }
body.apex-hub .hub-penlink { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em }
body.apex-hub .hub-penlink:hover { color: var(--hub-ink) }
/* the reader's chat starts a new visitor, and their lead lands under the window */
body.apex-hub .hub-chat__sep { align-self: center; margin: .6rem 0 .2rem; font: 400 var(--a-t-mark)/1.3 var(--hub-sans); color: var(--hub-soft) }
body.apex-hub .hub-notice--mine {
    position: relative; left: auto; bottom: auto; z-index: 1;
    width: min(24rem, calc(100% - 2rem));
    margin: -.6rem 0 0 1rem;   /* inside the note's .9rem foot, so it covers no words */
    transition: opacity .45s var(--a-ease), transform .45s var(--a-ease);
}
body.apex-hub .hub-notice--mine.is-new { opacity: 0; transform: translateY(-.8em) }
body.apex-hub .hub-notice--mine .hub-notice__text { overflow-wrap: anywhere }

body.apex-hub .hub-heads { margin-top: clamp(2rem, 4vw, 2.8rem) }
body.apex-hub .hub-app__copy .hub-heads__ask { max-width: none; margin: 0 0 .8rem; font: 600 var(--a-t-body)/1.4 var(--hub-sans); color: var(--hub-ink) }
body.apex-hub .hub-heads__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem }
body.apex-hub .hub-head {
    padding: .75rem .9rem; text-align: left;
    font: 500 .95rem/1.35 var(--hub-sans); color: var(--hub-ink);
    background: #fff; border: 1px solid var(--a-card-line); border-radius: 10px; cursor: pointer;
    transition: border-color .2s, background-color .2s;
}
body.apex-hub .hub-head:hover { border-color: #9db8e8 }
body.apex-hub .hub-head[aria-pressed="true"] { border-color: #1f5fd6; background: #e8effc }
body.apex-hub .hub-head:focus-visible { outline: 2px solid #1f5fd6; outline-offset: 2px }
/* 8 Nov: no verdict colours. The pen marks the three people search, the rest go quiet */
body.apex-hub .hub-head__t { display: block }
body.apex-hub .hub-heads.is-done .hub-head.is-no { color: var(--hub-soft) }
body.apex-hub .hub-head__mark { display: block; margin-top: .25rem; font: 400 1.35rem/1.05 "Apex Hand", cursive; color: #1f5fd6 }
body.apex-hub .hub-heads__again { padding: 0; font: inherit; color: inherit; background: none; border: 0; cursor: pointer }
body.apex-hub .hub-app__copy .hub-heads__pen { max-width: none; margin: .9rem 0 0; font: 400 1.75rem/1.12 "Apex Hand", cursive; color: #1f5fd6; text-wrap: balance }
body.apex-hub .hub-heads__pen:empty { display: none }

body.apex-hub .hub-answer .hub-x[role="button"] { cursor: pointer }
body.apex-hub .hub-answer .hub-x:focus-visible { outline: 2px solid #1f5fd6; outline-offset: 2px }
body.apex-hub .hub-x.is-poked { animation: hub-poke .35s var(--hub-ease) }
@keyframes hub-poke { 30% { transform: translateX(-3px) } 60% { transform: translateX(3px) } }
body.apex-hub .hub-mine { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; margin-top: 1.4rem; font: 600 .95rem/1.4 var(--hub-sans); color: var(--hub-soft) }
body.apex-hub .hub-mine input { flex: 1 1 12rem; min-width: 0; padding: .55rem .2rem; font: 400 1.9rem/1.1 "Apex Hand", cursive; color: #1f5fd6; background: none; border: 0; border-bottom: 2px solid #9db8e8; border-radius: 0 }
body.apex-hub .hub-mine input:focus { outline: none; border-bottom-color: #1f5fd6 }
body.apex-hub .hub-mine button { padding: .55rem 1rem; font: 600 .95rem/1 var(--hub-sans); color: #fff; background: var(--a-brand); border: 0; border-radius: 999px; cursor: pointer }
/* the reader's own questions, written onto the audit in pen (8 Nov) */
body.apex-hub .hub-answer__added { list-style: none; margin: 1.4rem 0 0; padding: 0 }
body.apex-hub .hub-answer__added:empty { display: none }
body.apex-hub .hub-answer__added li { margin: .15rem 0 0; rotate: -.6deg; text-wrap: balance; transition: opacity .45s var(--a-ease), transform .45s var(--a-ease) }
body.apex-hub .hub-answer__added li.is-new { opacity: 0; transform: translateY(-.4em) }
body.apex-hub .hub-answer__added + .hub-mine { margin-top: .9rem }
body.apex-hub .hub-answer__say { margin: .8rem 0 0; text-wrap: balance }
body.apex-hub .hub-answer__say:empty { display: none }

@media (max-width: 560px) {
    body.apex-hub .hub-heads__list { grid-template-columns: minmax(0, 1fr) }
}
@media (prefers-reduced-motion: reduce) {
    body.apex-hub .hub-x.is-poked { animation: none }
    body.apex-hub :is(.hub-notice--mine, .hub-answer__added li) { transition: none }
}

/* ════ 8 Nov (2) · query fan-out in the SEO section ════
   Lachlan: the headline game was silly and the cockroach snippet weak. The
   fan shows how the articles are built: one question, five searches, a
   heading for each. hub.js initFan draws the wires; the numbers pair a search
   with its heading at any width. The .hub-heads rules above are dead now and
   stay only until the next CSS tidy. */
@media (min-width: 900px) {
    body.apex-hub .hub-saa:has(.hub-fan) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start }
    body.apex-hub .hub-saa .hub-fan { grid-column: 1; grid-row: 1 }
}
body.apex-hub .hub-fan { margin: 0; container-type: inline-size }
body.apex-hub .hub-fan__lead { margin: 0 0 1.6rem; max-width: 40rem; font-size: var(--a-t-spoken); line-height: 1.6; color: var(--hub-body); text-wrap: pretty }
body.apex-hub .hub-fan__body {
    position: relative;
    display: grid; gap: 1.4rem;
    padding: clamp(1.1rem, 2.4vw, 1.6rem);
    background: var(--hub-paper);
    border: 1px solid var(--a-card-line); border-radius: var(--a-r);
}
body.apex-hub .hub-fan__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none }
body.apex-hub .hub-fan__wires path { fill: none; stroke: #9db8e8; stroke-width: 1.5; stroke-linecap: round; transition: stroke .25s }
body.apex-hub .hub-fan__wires path.is-on { stroke: #1f5fd6; stroke-width: 2.4 }
body.apex-hub .hub-fan__ask { position: relative; z-index: 1; justify-self: start; max-width: 100%; padding: .75rem 1rem; background: #fff; border: 1px solid var(--a-card-line); border-radius: 14px 14px 14px 4px; box-shadow: var(--hub-shadow) }
body.apex-hub .hub-fan__who { display: block; margin-bottom: .2rem; font: 500 var(--a-t-mark)/1.3 var(--hub-sans); color: var(--hub-soft) }
body.apex-hub .hub-fan__q { margin: 0; font: 600 1.06rem/1.35 var(--hub-sans); color: var(--hub-ink); text-wrap: balance }
body.apex-hub .hub-fan__s { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0 0 0 2.1rem; display: grid; gap: .5rem; align-content: start }
body.apex-hub .hub-fan__sb {
    display: flex; align-items: center; gap: .5rem; width: 100%;
    padding: .55rem .75rem; text-align: left;
    font: 400 .92rem/1.3 var(--hub-sans); color: var(--hub-ink);
    background: #fff; border: 1px solid var(--a-card-line); border-radius: 8px; cursor: pointer;
    transition: border-color .2s, background-color .2s;
}
body.apex-hub .hub-fan__sb svg { flex: none; width: 15px; height: 15px; color: var(--hub-soft) }
body.apex-hub .hub-fan__sb b,
body.apex-hub .hub-fan__hs b { flex: none; display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; font: 600 .72rem/1 var(--hub-sans); color: #fff; background: #9db8e8; border-radius: 50% }
body.apex-hub .hub-fan__sb:hover { border-color: #9db8e8 }
body.apex-hub .hub-fan__sb[aria-pressed="true"] { border-color: #1f5fd6; background: #e8effc }
body.apex-hub .hub-fan__sb[aria-pressed="true"] b,
body.apex-hub .hub-fan__hs li.is-on b { background: #1f5fd6 }
body.apex-hub .hub-fan__sb:focus-visible { outline: 2px solid #1f5fd6; outline-offset: 2px }
/* the article, drawn: a page on the owner's own site */
body.apex-hub .hub-fan__post { position: relative; z-index: 1; padding: 1.1rem 1.2rem 1rem; background: #fff; border: 1px solid var(--a-card-line); border-radius: 10px; box-shadow: var(--hub-shadow) }
body.apex-hub .hub-fan__url { margin: 0 0 .7rem; font: 400 .78rem/1.3 var(--hub-sans); color: var(--hub-soft) }
body.apex-hub .hub-fan__h1 { margin: 0 0 .5rem; font: 600 1.22rem/1.25 var(--hub-sans); letter-spacing: -.015em; color: var(--hub-ink); text-wrap: balance }
body.apex-hub .hub-fan__by { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .5rem; margin: 0 0 .8rem; font: 500 .82rem/1.3 var(--hub-sans); color: var(--hub-body) }
body.apex-hub .hub-fan__by i { width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #c9d6ec }
body.apex-hub .hub-fan__short { margin: 0 0 .9rem; padding: .7rem .8rem; font: 400 .9rem/1.5 var(--hub-sans); color: var(--hub-body); background: #eef3fb; border-radius: 6px; text-wrap: pretty }
body.apex-hub .hub-fan__short b { color: var(--hub-ink) }
body.apex-hub .hub-fan__hs { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .55rem }
body.apex-hub .hub-fan__hs li { display: flex; align-items: flex-start; gap: .55rem; padding: .35rem .4rem; border-radius: 6px; font: 600 .95rem/1.35 var(--hub-sans); color: var(--hub-ink); transition: background-color .25s }
body.apex-hub .hub-fan__hs li b { margin-top: .05rem }
/* two grey lines of body under each heading, drawn, not written */
body.apex-hub .hub-fan__hs li span { flex: 1; min-width: 0 }
body.apex-hub .hub-fan__hs li span::after { content: ""; display: block; height: .9rem; margin-top: .35rem; background: linear-gradient(#e3e9f3 0 0) 0 0 / 100% 5px no-repeat, linear-gradient(#e3e9f3 0 0) 0 100% / 72% 5px no-repeat }
body.apex-hub .hub-fan__hs li.is-on { background: #e8effc }
body.apex-hub .hub-fan__foot { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin: 0; padding: .45rem 0 0; border-top: 1px solid var(--hub-hair); font: 600 .8rem/1.3 var(--hub-sans); color: var(--hub-ink) }
body.apex-hub .hub-fan__foot + .hub-fan__foot { border-top: 0; padding-top: .2rem }
body.apex-hub .hub-fan__foot span:first-child { display: flex; align-items: center; gap: .4rem; flex: 1; min-width: 0 }
body.apex-hub .hub-fan__foot i { flex: 1; max-width: 4.5rem; height: 5px; border-radius: 3px; background: #c9d6ec }
body.apex-hub .hub-fan__note { font: 400 1.3rem/1 "Apex Hand", cursive; color: #1f5fd6; white-space: nowrap }
body.apex-hub .hub-fan__short .hub-fan__note { display: block; margin-top: .2rem; text-align: right }
body.apex-hub .hub-fan__blank { display: block; height: 2.2rem; margin-top: .3rem; background: repeating-linear-gradient(-45deg, #e3e9f3 0 6px, transparent 6px 12px); border-radius: 4px }
body.apex-hub .hub-fan.is-own .hub-fan__sb span,
body.apex-hub .hub-fan.is-own .hub-fan__hs li > span { color: var(--hub-soft); letter-spacing: .2em }
body.apex-hub .hub-fan__cap { margin-top: 1rem }
body.apex-hub .hub-fan__pen { margin: 0 0 1rem; font-size: 1.7rem; text-wrap: balance }
body.apex-hub .hub-fan__ctl { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem 1.6rem }
body.apex-hub .hub-fan__next { padding: .6rem 1.1rem; font: 600 .95rem/1 var(--hub-sans); color: var(--hub-brand); background: #fff; border: 1px solid var(--hub-brand); border-radius: 999px; cursor: pointer }
body.apex-hub .hub-fan__next:hover { background: #e8effc }
body.apex-hub .hub-fan__mine { flex: 1 1 18rem; min-width: 0 }
body.apex-hub .hub-fan__mine label { display: block; margin-bottom: .2rem; font: 600 .9rem/1.3 var(--hub-sans); color: var(--hub-soft) }
body.apex-hub .hub-fan__mine > span { display: flex; gap: .6rem; align-items: center }
body.apex-hub .hub-fan__mine input { flex: 1; min-width: 0; padding: .45rem .2rem; font: 400 1.6rem/1.1 "Apex Hand", cursive; color: #1f5fd6; background: none; border: 0; border-bottom: 2px solid #9db8e8; border-radius: 0 }
body.apex-hub .hub-fan__mine input:focus { outline: none; border-bottom-color: #1f5fd6 }
body.apex-hub .hub-fan__mine button { flex: none; padding: .6rem 1rem; font: 600 .95rem/1 var(--hub-sans); color: #fff; background: var(--a-brand); border: 0; border-radius: 999px; cursor: pointer }
:is(.hub-fan__next, .hub-fan__mine button):focus-visible { outline: 2px solid #1f5fd6; outline-offset: 2px }
/* wide figure: the searches on the left under the question, the article on the right */
@container (min-width: 600px) {
    body.apex-hub .hub-fan__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); column-gap: 3.2rem; align-items: start }
    body.apex-hub .hub-fan__ask { grid-column: 1; grid-row: 1 }
    body.apex-hub .hub-fan__s { grid-column: 1; grid-row: 2 }
    body.apex-hub .hub-fan__post { grid-column: 2; grid-row: 1 / span 2 }
}
/* arrival: the wires draw from the question, then the headings settle in */
.hub-anim body.apex-hub .hub-fan:not(.is-in) .hub-fan__wires path { stroke-dasharray: 1; stroke-dashoffset: 1 }
.hub-anim body.apex-hub .hub-fan .hub-fan__wires path { stroke-dasharray: 1; transition: stroke-dashoffset .9s var(--hub-ease), stroke .25s }
.hub-anim body.apex-hub .hub-fan:not(.is-in) :is(.hub-fan__s li, .hub-fan__hs li) { opacity: 0; transform: translateY(.4em) }
.hub-anim body.apex-hub .hub-fan :is(.hub-fan__s li, .hub-fan__hs li) { transition: opacity .4s var(--a-ease), transform .4s var(--a-ease) }
.hub-anim body.apex-hub .hub-fan :is(.hub-fan__s li, .hub-fan__hs li):nth-child(2) { transition-delay: .1s }
.hub-anim body.apex-hub .hub-fan :is(.hub-fan__s li, .hub-fan__hs li):nth-child(3) { transition-delay: .2s }
.hub-anim body.apex-hub .hub-fan :is(.hub-fan__s li, .hub-fan__hs li):nth-child(4) { transition-delay: .3s }
.hub-anim body.apex-hub .hub-fan :is(.hub-fan__s li, .hub-fan__hs li):nth-child(5) { transition-delay: .4s }
@media (prefers-reduced-motion: reduce) {
    body.apex-hub .hub-fan__wires path,
    body.apex-hub .hub-fan :is(.hub-fan__s li, .hub-fan__hs li) { transition: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important }
}
/* the usual price, struck, beside "Free" (Lachlan, 8 Nov: "Free for a limited time, usually $100") */
body.apex-hub .hub-rcpt dd s { margin-right: .35rem; font-weight: 400; color: var(--hub-soft); text-decoration-thickness: 1.5px }
@container (min-width: 600px) {
    body.apex-hub .hub-fan__body { grid-template-rows: auto 1fr }
}

/* 10 Nov: the audit plan is a tall page, so it sits at the top of its row and
   stays narrow enough to read whole beside the ChatGPT answer */
body.apex-hub .hub-shot--plan img { border-radius: 12px; box-shadow: 0 2px 4px rgba(10, 23, 48, .08), 0 28px 50px -26px rgba(16, 40, 92, .45) }
@media (min-width: 900px) {
    body.apex-hub .hub-ava__row:has(.hub-shot--plan) { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); align-items: start }
    body.apex-hub .hub-shot--plan { max-width: 30rem; justify-self: end }
    /* the answer stays beside the report as it scrolls past, so the tall page never leaves a void */
    body.apex-hub .hub-ava__row:has(.hub-shot--plan) .hub-answer { position: sticky; top: 7rem }
}