/*
 * wfa.css — /services/workflow-automation-ai-integrations/, light system.
 * Scope: body.apex-wfa. Nothing else on the site loads this sheet.
 *
 * Pass 5, 2026-08-25. Pass 4 at _archive/wfa-pass4-2026-08-25/.
 *
 * ONE THESIS: automation does not make the work faster, it deletes the
 * waiting. Custom Software's vocabulary is grids and strike-throughs; this
 * page's is TIME RAILS. Every object here is a length of time with things
 * landing on it, and every one of them plays itself on arrival.
 *
 * Ground rules, all user-set and carried across the service pages:
 *   · white top to bottom — NO tinted or grey bands. Contrast is cards and
 *     elevation, never a stripe.
 *   · real air: section rhythm 8rem to 14rem.
 *   · NO PILLS.
 *   · NO TRACKED UPPERCASE EYEBROWS, anywhere. `text-transform: uppercase`
 *     does not appear in this file and must not come back.
 *   · NOTHING BEHIND A CONTROL. No button, input or select in .wfa-main.
 *   · AND NOTHING STATIC EITHER. Pass 4 deleted the controls and printed
 *     tables in their place, which is the other half of the same mistake:
 *     "pages of text and text and text… no true animation of widgets when
 *     scrolling." A widget DRAWS information and changes state on arrival.
 *   · nothing may be lost to the animation. States resolve into MORE
 *     readable, never less.
 *   · no scenery near the close — the footer is a close-up ice shelf.
 *   · no stock photography. The founder portrait that used to close this
 *     page is a stock image of somebody else, and it is gone.
 *
 * ⚠ main.css puts Source Serif 4 on every h1/h2/h3 site-wide. Inheriting a
 * family from the page wrapper is NOT enough against a direct heading rule.
 * The heading rule below names Instrument Sans itself.
 */

body.apex-wfa {
    --wfa-ink: var(--a-ink);
    --wfa-body: var(--a-body);
    --wfa-soft: var(--a-soft);
    --wfa-brand: var(--a-brand);
    --wfa-brand-deep: var(--a-brand-deep);
    --wfa-line: var(--a-line);
    --wfa-hair: var(--a-hair);
    --wfa-card: var(--a-card);
    --wfa-card-line: var(--a-card-line);
    --wfa-lift: var(--a-lift);
    --wfa-lift-2: var(--a-lift-2);
    --wfa-plate-lift: var(--a-plate-lift);
    --wfa-r: var(--a-r);
    --wfa-go: var(--a-go);
    --wfa-hold: var(--a-hold);
    --wfa-no: var(--a-no);
    --wfa-sans: var(--a-sans);
    --wfa-mono: var(--a-mono);
    --wfa-ease: var(--a-ease);
    background: #fff;
}

body.apex-wfa .site-shell,
body.apex-wfa .site-main { background: #fff }

body.apex-wfa .wfa-main {
    display: block;
    background: #fff;
    color: var(--wfa-body);
    font-family: var(--wfa-sans);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

body.apex-wfa .wfa-main a:not([class]) { color: var(--wfa-brand) }

body.apex-wfa .wfa-shell { width: min(1200px, 92vw); margin-inline: auto }
body.apex-wfa .wfa-shell--wide { width: min(1400px, 95vw) }

/* The page was called crammed. Rhythm opened from 5.5-10rem to 8-14rem. */
body.apex-wfa .wfa-main > * { margin-block: var(--a-gap-move) }
body.apex-wfa .wfa-main > .wfa-hero { margin-top: 0 }

/* A hash landing, or the no-Lenis fallback, must not drop a heading under the
   floating header pill. Lenis already offsets; this covers every other path. */
body.apex-wfa .wfa-main > [id] { scroll-margin-top: var(--a-anchor) }

/* The margin reset is split out with :where() so it scores (0,1,1) and any
   component that wants a heading margin wins. Left inside the rule below it
   scored (0,2,2) — two classes AND an element — and silently zeroed them. */
body.apex-wfa :where(.wfa-main :is(h1, h2, h3)) { margin: 0 }
body.apex-wfa .wfa-main :is(h1, h2, h3) {
    font-family: var(--wfa-sans);
    color: var(--wfa-ink);
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 1.08;
    text-wrap: balance;
}
/* ⚠ This reset used to read `.wfa-main p`, which scores (0,2,2) — two classes
   AND two elements — and so quietly beat every single-class component rule
   that set a paragraph margin: the hero note, the section eyebrows and the
   `.wfa-head__intro > * + *` gap all measured 0 and the page read crammed.
   :where() drops the whole thing to the body class, so any component wins. */
body.apex-wfa :where(.wfa-main p) { margin: 0 }

/* ════ Shared vocabulary ════ */

body.apex-wfa .wfa-head {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: center;
    margin-bottom: clamp(3rem, 6vh, 4.6rem);
}
body.apex-wfa .wfa-head--solo { display: block }
body.apex-wfa .wfa-head h2 { font-size: clamp(1.85rem, 3.3vw, 2.85rem) }

body.apex-wfa .wfa-lead {
    font-size: var(--a-t-spoken);
    line-height: 1.66;
    color: var(--wfa-body);
    text-wrap: pretty;
}

body.apex-wfa .wfa-btn {
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .92rem 1.5rem;
    border: 1px solid transparent; border-radius: 12px;
    font: 600 .96rem/1 var(--wfa-sans);
    text-decoration: none;
    cursor: pointer;
    transition: background .3s var(--wfa-ease), color .3s var(--wfa-ease),
                border-color .3s var(--wfa-ease), box-shadow .3s var(--wfa-ease),
                transform .3s var(--wfa-ease);
}
body.apex-wfa .wfa-btn--solid {
    background: var(--wfa-brand); border-color: var(--wfa-brand); color: #fff;
    box-shadow: 0 2px 6px rgba(34, 69, 138, .26), 0 18px 34px -18px rgba(34, 69, 138, .7);
}
body.apex-wfa .wfa-btn--solid:hover {
    background: var(--wfa-brand-deep); border-color: var(--wfa-brand-deep);
    transform: translateY(-2px);
    box-shadow: var(--wfa-lift-2);
}
body.apex-wfa .wfa-btn--quiet { background: #fff; border-color: var(--wfa-line); color: var(--wfa-ink) }
body.apex-wfa .wfa-btn--quiet:hover { border-color: var(--wfa-brand); color: var(--wfa-brand) }
body.apex-wfa .wfa-btn__arw {
    width: 15px; height: 9px; flex: none;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 9'%3E%3Cpath d='M0 4.5h12.4M9 1l3.6 3.5L9 8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 9'%3E%3Cpath d='M0 4.5h12.4M9 1l3.6 3.5L9 8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform .3s var(--wfa-ease);
}
body.apex-wfa .wfa-btn:hover .wfa-btn__arw { transform: translateX(3px) }

/* The screenshot plate. Pass 3 put a tracked uppercase title bar inside it;
   the label now sits above the plate in the gallery cell, in sentence case. */
body.apex-wfa .wfa-plate {
    position: relative; margin: 0;
    border: 1px solid var(--wfa-card-line);
    border-radius: var(--wfa-r);
    background: var(--wfa-card);
    box-shadow: var(--wfa-plate-lift);
    overflow: hidden;
}
body.apex-wfa .wfa-plate__img { position: relative; display: block }
body.apex-wfa .wfa-plate img { display: block; width: 100%; height: auto }

/* ════ Motion primitives (gated on html.wfa-anim) ════ */

/* Reveals travel further and come out of a small blur: 24px and a fade was
   not readable as motion at all while scrolling. */
html.wfa-anim body.apex-wfa [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));
}
html.wfa-anim body.apex-wfa [data-reveal].is-revealed { opacity: 1; transform: none; filter: none }

/* Section headings rule themselves off as they land. */
body.apex-wfa .wfa-head { position: relative }
body.apex-wfa .wfa-head::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: calc(-1 * clamp(1.8rem, 3.5vh, 2.8rem));
    height: 1px; background: var(--wfa-hair);
    transform-origin: 0 50%;
}
html.wfa-anim body.apex-wfa .wfa-head::after { transform: scaleX(0) }
html.wfa-anim body.apex-wfa .wfa-head.is-ruled::after {
    transform: none;
    transition: transform 1.4s var(--wfa-ease) .1s;
}

/* Drift: initDrift() writes --dy from scroll position. Depth, not a ride. */
html.wfa-anim body.apex-wfa [data-drift] { will-change: transform }
html.wfa-anim body.apex-wfa [data-drift].is-drifting { transform: translate3d(0, var(--dy, 0px), 0) }

body.apex-wfa .wfa-word {
    display: inline-block; overflow: hidden; vertical-align: top;
    padding-bottom: .09em; margin-bottom: -.09em;
}
body.apex-wfa .wfa-word > span { display: inline-block }
html.wfa-anim body.apex-wfa [data-split].is-split .wfa-word > span {
    transform: translateY(115%);
    transition: transform .82s var(--wfa-ease);
    transition-delay: calc(var(--w, 0) * 42ms);
}
html.wfa-anim body.apex-wfa [data-split].is-split.is-revealed .wfa-word > span { transform: none }

/* ════ 1 · HERO, AND THE NIGHT SHIFT ════
   Pass 7. The strip this replaced was a chart of a claim, and the verdict on
   it and its two neighbours was that they "dont contribute to the marketing
   or funnel". A chart of a statistic is not marketing: it asks the reader to
   learn a key and an axis before they can feel anything.
   The hero object is now the artefact itself. A handover note: what the night
   shift did, ticked, with times, and the one thing it left for a person. The
   sell is in the left column, the evidence is the log beside it, and neither
   half needs a legend.
   ⚠ Resolved is the CSS default. `html.wfa-anim` un-ticks it so it can play. */

body.apex-wfa .wfa-hero { padding-top: var(--a-hero-pt) }
body.apex-wfa .wfa-hero__head {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    gap: clamp(1.4rem, 3.2vw, 3.4rem);
    /* start, not end: bottom-aligned, the h1 was pushed down by whatever the
       other column held, so this page opened 65px lower than its neighbours. */
    align-items: start;
}
body.apex-wfa .wfa-hero__title {
    font-size: var(--a-t-h1);
    line-height: 1.02; letter-spacing: -.034em;
}
body.apex-wfa .wfa-hero__lede {
    max-width: 36rem;
    font-size: var(--a-t-lede); line-height: 1.6;
    text-wrap: pretty;
}
body.apex-wfa .wfa-hero__acts {
    margin-top: clamp(1.4rem, 2.6vh, 2rem);
    display: flex; flex-wrap: wrap; gap: .85rem 1rem;
}
body.apex-wfa .wfa-hero__note { margin-top: 1.1rem; font-size: var(--a-t-mark); color: var(--wfa-soft) }

/* ════ 2 · THE WAITING, AS TWO THREADS ════
   Pass 7 moved the thesis off a pair of bars and onto the thing the customer
   actually sees. Same question, same Tuesday, two replies. The number that
   sells is how long the person who asked had to wait, not how long the work
   took, and the distance between the two messages is where that number lives.
   ★ The long gap is this page's one scroll-POSITION device. `--p` is written
   on the section by wfa.js as it crosses the viewport; the fill height and
   the elapsed label follow it, so the reader spends the wait on the way past.
   Nothing is pinned, and only a height inside a fixed-height gap moves, so
   the page never reflows underneath the reader.
   ⚠ Resolved is the default: `--p` starts at 1 and the label prints its final
   value, so a document with no script shows both threads finished. */

body.apex-wfa .wfa-th {
    --p: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.4rem, 3vw, 2.6rem);
    /* matched heights on purpose. The second card finishing early and leaving
       its lower half empty IS the comparison; letting it shrink instead just
       punches a hole in the row. */
    align-items: stretch;
}
body.apex-wfa .wfa-th__col {
    padding: clamp(1.4rem, 3vh, 2rem) clamp(1.3rem, 2.4vw, 1.9rem) clamp(1.5rem, 3.2vh, 2.1rem);
    border: 1px solid var(--a-card-line);
    border-radius: var(--a-r);
    background: var(--wfa-card);
    box-shadow: var(--a-card-shadow);
}
body.apex-wfa .wfa-th__lab {
    margin: 0 0 clamp(1.1rem, 2.4vh, 1.6rem);
    font-family: var(--wfa-sans);
    font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em;
    color: var(--wfa-soft);
}
body.apex-wfa .wfa-th__col--after .wfa-th__lab { color: var(--wfa-brand) }

body.apex-wfa .wfa-th__msg {
    padding: .85rem 1.05rem;
    border-radius: 14px;
    background: rgba(13, 35, 80, .045);
}
body.apex-wfa .wfa-th__msg--out {
    background: var(--wfa-brand);
    box-shadow: 0 6px 18px rgba(13, 35, 80, .16);
}
body.apex-wfa .wfa-th__t {
    display: block; margin-bottom: .3rem;
    font: 400 .78rem/1.2 var(--wfa-mono); color: var(--wfa-soft);
}
body.apex-wfa .wfa-th__msg--out .wfa-th__t { color: rgba(255, 255, 255, .72) }
body.apex-wfa .wfa-th__msg p { font-size: 1rem; line-height: 1.48; color: var(--wfa-ink) }
body.apex-wfa .wfa-th__msg--out p { color: #fff }

/* the gap IS the wait: a fixed height with a line filling down it */
body.apex-wfa .wfa-th__gap {
    position: relative;
    height: 74px;
    display: flex; align-items: center; justify-content: center;
}
body.apex-wfa .wfa-th__gap--long { height: clamp(170px, 22vh, 222px) }
body.apex-wfa .wfa-th__line {
    position: absolute; left: 1.6rem; top: 0; bottom: 0; width: 2px;
    background: var(--wfa-hair);
    border-radius: 1px;
}
body.apex-wfa .wfa-th__line b {
    position: absolute; left: 0; top: 0; width: 100%;
    height: calc(var(--p) * 100%);
    background: var(--wfa-line);
    border-radius: 1px;
}
body.apex-wfa .wfa-th__col--after .wfa-th__line b { background: var(--wfa-brand) }
body.apex-wfa .wfa-th__el {
    position: relative;
    padding: .3rem .75rem;
    border-radius: 999px;
    background: var(--wfa-card);
    box-shadow: 0 0 0 1px var(--wfa-line);
    font-style: normal; font-size: .88rem; font-weight: 600;
    color: var(--wfa-no); font-variant-numeric: tabular-nums; white-space: nowrap;
}
body.apex-wfa .wfa-th__col--after .wfa-th__el { color: var(--wfa-brand) }

body.apex-wfa .wfa-th__end {
    margin-top: clamp(1.1rem, 2.4vh, 1.5rem);
    padding-top: clamp(.9rem, 2vh, 1.2rem);
    border-top: 1px solid var(--wfa-hair);
    font-size: .96rem; line-height: 1.5; color: var(--wfa-soft); text-wrap: pretty;
}
body.apex-wfa .wfa-th__col--after .wfa-th__end { color: var(--wfa-ink); font-weight: 500 }

/* A single line of body copy under a full-width card strands half the shell.
   This is the page's hardest sentence, so it is set as a display statement
   that earns the width instead of a paragraph that wastes it. */
body.apex-wfa .wfa-wait__say {
    max-width: 52rem;
    margin-top: clamp(2.4rem, 4.5vh, 3.4rem);
    font-size: var(--a-t-sub);
    line-height: 1.3; letter-spacing: -.02em;
    font-weight: 600; color: var(--wfa-ink); text-wrap: pretty;
}


/* ════ 3 · THE LEDGER ════
   Five refusals in one column, each title struck through as it lands. Pass 3
   used a two-by-two grid of paragraphs, which is four things to look at and
   no object. The strike is text-decoration-color, never a positioned bar: a
   bar has to be measured against the text and is wrong at every other width.
   With JS off the titles print already struck. */

/* no border-top: the section head already rules itself off, and a second
   hairline 22px under the first read as a mistake. */
body.apex-wfa .wfa-no__list { list-style: none; margin: 0; padding: 0 }
body.apex-wfa .wfa-no__item {
    display: grid;
    grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
    gap: .5rem clamp(1.2rem, 3vw, 2.6rem);
    align-items: start;
    padding: clamp(1.7rem, 3.4vh, 2.5rem) 0;
    border-bottom: 1px solid var(--wfa-hair);
}
body.apex-wfa .wfa-no__title { font-size: var(--a-t-sub); line-height: 1.24 }
body.apex-wfa .wfa-no__title span {
    text-decoration: line-through 2.5px;
    text-decoration-color: var(--wfa-no);
    text-underline-offset: 0;
}
html.wfa-anim body.apex-wfa .wfa-no__title span { text-decoration-color: transparent }
html.wfa-anim body.apex-wfa .wfa-no__item.is-revealed .wfa-no__title span {
    text-decoration-color: var(--wfa-no);
    transition: text-decoration-color .7s var(--wfa-ease) .45s;
}
body.apex-wfa .wfa-no__say p {
    font-size: var(--a-t-spoken); line-height: 1.55; color: var(--wfa-body); text-wrap: pretty;
}
body.apex-wfa .wfa-no__link {
    display: inline-flex; align-items: center; gap: .5rem;
    margin-top: .9rem; padding-bottom: .22rem;
    border-bottom: 1px solid rgba(34, 69, 138, .32);
    font: 600 var(--a-t-btn)/1.3 var(--wfa-sans); color: var(--wfa-brand); text-decoration: none;
    transition: color .3s var(--wfa-ease), border-color .3s var(--wfa-ease);
}
body.apex-wfa .wfa-no__link:hover { color: var(--wfa-brand-deep); border-color: var(--wfa-brand-deep) }
body.apex-wfa .wfa-no__link span {
    width: 15px; height: 9px; flex: none;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 9'%3E%3Cpath d='M0 4.5h12.4M9 1l3.6 3.5L9 8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 9'%3E%3Cpath d='M0 4.5h12.4M9 1l3.6 3.5L9 8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform .3s var(--wfa-ease);
}
body.apex-wfa .wfa-no__link:hover span { transform: translateX(3px) }

/* ════ THE OBJECTS ════ 3 Nov critique pass. Sizes inside an object are its own.
   Text stays ink or the one blue: no ticks, no coloured verdicts. */

/* the shared inbox. The sky in the bar runs from dusk to morning off --night. */
body.apex-wfa .wfa-mail { --night: 1; font-size: 15.5px; line-height: 1.35; color: #16233f; background: #fff; border: 1px solid var(--wfa-card-line); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 54px -26px rgba(16, 40, 92, .5) }
body.apex-wfa .wfa-mail__bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: .3em .8em;
    padding: .85em 1.15em;
    background: color-mix(in srgb, #dfeafc calc(var(--night) * 100%), #14224a);
    color: color-mix(in srgb, #16233f calc(var(--night) * 100%), #fff);
}
body.apex-wfa .wfa-mail__dots { display: flex; gap: .35em }
body.apex-wfa .wfa-mail__dots i { width: .68em; height: .68em; border-radius: 50%; background: currentColor; opacity: .3 }
body.apex-wfa .wfa-mail__bar b { font-weight: 600 }
body.apex-wfa .wfa-mail__count { margin-left: auto; font-weight: 500 }
body.apex-wfa .wfa-mail__rows { list-style: none; margin: 0; padding: 0 }
body.apex-wfa .wfa-mail__row {
    display: grid; grid-template-columns: 8.5em minmax(0, .85fr) minmax(0, 1.15fr); gap: .15em 1.1em; align-items: baseline;
    padding: .82em 1.15em;
    border-top: 1px solid #eaf0f8;
    transition: background-color .35s var(--wfa-ease);
}
body.apex-wfa .wfa-mail__from { font-weight: 600; position: relative }
body.apex-wfa .wfa-mail__row:not(.is-done) .wfa-mail__from::before { content: ""; position: absolute; left: -.8em; top: .45em; width: .42em; height: .42em; border-radius: 50%; background: #1f5fd6 }
body.apex-wfa .wfa-mail__row:not(.is-done) .wfa-mail__subj { font-weight: 600 }
body.apex-wfa .wfa-mail__row.is-done .wfa-mail__from,
body.apex-wfa .wfa-mail__row.is-done .wfa-mail__subj { font-weight: 400; color: #55637c }
body.apex-wfa .wfa-mail__done { opacity: 0; transform: translateX(-.5em); color: #16233f; transition: opacity .35s var(--wfa-ease), transform .35s var(--wfa-ease) }
body.apex-wfa .wfa-mail__row.is-done .wfa-mail__done { opacity: 1; transform: none }
body.apex-wfa .wfa-mail__row.is-done.is-yes { background: #eef4fe }
body.apex-wfa .wfa-mail__row.is-yes .wfa-mail__done { color: #1f5fd6; font-weight: 500 }
body.apex-wfa .wfa-mail__clock { display: grid; grid-template-columns: auto minmax(0, 1fr) 5em; gap: 1em; align-items: center; padding: 1.05em 1.15em; border-top: 1px solid #dbe5f3; background: #f7f9fd }
body.apex-wfa .wfa-mail__clock[hidden] { display: none }
body.apex-wfa .wfa-mail__clock label { font-weight: 500 }
body.apex-wfa .wfa-mail__clock input { width: 100%; accent-color: #1f5fd6; cursor: grab }
body.apex-wfa .wfa-mail__clock output { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums }

/* the invoice, on paper, and the draft bill it became */
body.apex-wfa .wfa-inv { --pen: #1f5fd6; display: grid; grid-template-columns: minmax(0, 1fr) 5.6rem minmax(0, 1fr); align-items: center; gap: .6rem; font-size: 15.5px; line-height: 1.35; color: #16233f }
body.apex-wfa .wfa-inv__paper { padding: 1.7em 1.8em 2em; background: #fff; border-radius: 3px; box-shadow: 0 2px 4px rgba(10, 23, 48, .08), 0 26px 44px -22px rgba(16, 40, 92, .45); transform: rotate(-1.3deg) }
body.apex-wfa .wfa-inv__co { font-size: 1.32em; font-weight: 700; letter-spacing: -.01em }
body.apex-wfa .wfa-inv__kind { margin: .15em 0 1.5em; color: #55637c }
body.apex-wfa .wfa-inv__line { display: flex; justify-content: space-between; padding-block: .55em; border-top: 1px solid #e2e8f1 }
body.apex-wfa .wfa-inv__line--total { font-weight: 700; border-top: 2px solid #16233f }
body.apex-wfa .wfa-inv__line mark { padding: 0 .25em; background: rgba(31, 95, 214, .2); color: inherit }
body.apex-wfa .wfa-inv__due { margin-top: 1.1em; color: #55637c }
body.apex-wfa .wfa-inv__go { width: 100%; stroke: var(--pen); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round }
html.wfa-anim body.apex-wfa .wfa-inv__go path { stroke-dasharray: 1; transition: stroke-dashoffset .7s var(--wfa-ease) .5s }
html.wfa-anim body.apex-wfa .wfa-inv:not(.is-revealed) .wfa-inv__go path { stroke-dashoffset: 1 }
body.apex-wfa .wfa-inv__bill { padding: 1.3em 1.4em 1.4em; background: #fff; border: 1px solid var(--wfa-card-line); border-radius: 14px; box-shadow: 0 26px 44px -24px rgba(16, 40, 92, .42) }
body.apex-wfa .wfa-inv__head { margin-bottom: .7em; font-size: 1.2em; font-weight: 600; letter-spacing: -.01em }
body.apex-wfa .wfa-inv__field { padding: .5em .7em; margin-top: .4em; border: 1px solid #e0e7f1; border-radius: 8px }
body.apex-wfa .wfa-inv__field i { display: block; font-style: normal; font-size: .82em; color: #55637c }
body.apex-wfa .wfa-inv__field--held { border: 2px solid var(--pen); background: #eef4fe; font-weight: 600 }
body.apex-wfa .wfa-inv__field--held i { font-weight: 400 }
body.apex-wfa .wfa-inv__pen { margin-top: .55em; font: 400 1.95em/1.02 "Apex Hand", "Bradley Hand", cursive; color: var(--pen); transform: rotate(-1deg); transform-origin: 0 50% }

body.apex-wfa .wfa-more__lead { margin-top: clamp(3.4rem, 8vh, 5rem) !important; font-size: clamp(1.35rem, 2vw, 1.7rem); font-weight: 600; letter-spacing: -.015em; color: var(--wfa-ink) }
body.apex-wfa .wfa-more { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 1.4rem 3rem; font-size: var(--a-t-spoken); line-height: 1.55; color: var(--wfa-body) }
body.apex-wfa .wfa-more b { font-weight: 600; color: var(--wfa-ink) }

/* the first two weeks, as the alerts you would get */
body.apex-wfa .wfa-after__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.4rem clamp(2.4rem, 6vw, 5.5rem); align-items: center }
body.apex-wfa .wfa-after__say h2 { font-size: var(--a-t-head) }
body.apex-wfa .wfa-after__say p { margin-top: 1.2rem; max-width: 34rem; font-size: var(--a-t-spoken); line-height: 1.58; color: var(--wfa-body) }
body.apex-wfa .wfa-alerts { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem }
body.apex-wfa .wfa-alert {
    display: grid; padding: .95rem 1.15rem 1rem 3.35rem; position: relative;
    background: #fff; border: 1px solid var(--wfa-card-line); border-radius: 18px;
    box-shadow: 0 18px 30px -20px rgba(16, 40, 92, .42);
    font-size: 15.5px; line-height: 1.38; color: #3c4a64;
}
body.apex-wfa .wfa-alert::before { content: ""; position: absolute; left: 1.05rem; top: 1.05rem; width: 1.55rem; height: 1.55rem; border-radius: 7px; background: var(--wfa-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9a6 6 0 0 1 12 0c0 6 2.5 7.5 2.5 7.5h-17S6 15 6 9'/%3E%3Cpath d='M10 20a2.2 2.2 0 0 0 4 0'/%3E%3C/svg%3E") center / 1rem no-repeat }
body.apex-wfa .wfa-alert b { color: #16233f; font-weight: 600 }
body.apex-wfa .wfa-alert:nth-child(even) { margin-left: clamp(0rem, 2vw, 1.5rem); margin-right: clamp(-1.5rem, -2vw, 0rem) }

/* ════ 6 · QUESTIONS ════ */

/* The head is capped to the FAQ component's own measure and both are centred
   in the shell. Uncapped it drew a 1200px rule over an 864px list, so 335px of
   rule had nothing under it and the whole block sat against the left edge.
   apex-faq.css caps the component at 54rem on purpose. */
body.apex-wfa .wfa-faq .wfa-head {
    margin-bottom: clamp(2.2rem, 4vh, 3.2rem);
    max-width: 54rem;
}
body.apex-wfa .wfa-faq .wfa-head,
body.apex-wfa .wfa-faq .apex-faq { margin-inline: auto }
/* ── One FAQ, site-wide (critique item 1a). The rows, the summary type, the
   marker and the open/close motion all live in apex-faq.css now; what stayed
   here is this page's palette and the layout around the list. Its open animation named a wfa-swap keyframe that was never defined ── */
body.apex-wfa .apex-faq {
    --faq-line:   var(--wfa-hair);
    --faq-ink:    var(--wfa-ink);
    --faq-body:   var(--wfa-body);
    --faq-accent: var(--wfa-brand);
}
/* The section head above draws its own hairline (.wfa-head::after, 1200px wide).
   The component's first row draws one too, so the two stacked 30px apart at
   two different widths and read as a mistake. The head's rule is the one that
   belongs to the section, so the list's top row gives its up. */
body.apex-wfa .apex-faq__item:first-child { border-top: 0 }

@media (min-width: 981px) {
    body.apex-wfa .wfa-faq .wfa-shell { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1fr); gap: clamp(2.4rem, 5vw, 5rem); align-items: start }
    body.apex-wfa .wfa-faq .wfa-head { display: block; margin: 0; max-width: none; position: sticky; top: 6.5rem }
    body.apex-wfa .wfa-faq .apex-faq { margin: 0; max-width: none; width: 100% }
}

/* ════ 7 · THE CLOSE ════ */

/* Site review R6 (27 Oct): the centred band read as one template on every
   page. The close sits on the page's left edge under a hairline: one heading,
   one line, one button, and the email as a plain link. */
body.apex-wfa .wfa-close__in {
    max-width: 44rem;
    border-top: 1px solid var(--wfa-hair);
    padding-top: clamp(2.4rem, 5vh, 3.4rem);
}
body.apex-wfa .wfa-close__mail {
    align-self: center;
    font-weight: 600; color: var(--a-brand, #22458a);
    text-underline-offset: .18em;
}
body.apex-wfa .wfa-close h2 { font-size: var(--a-t-close) }
body.apex-wfa .wfa-close__lede {
    margin-top: 1.5rem;
    font-size: var(--a-t-lede); line-height: 1.6; text-wrap: pretty;
}
body.apex-wfa .wfa-close__acts {
    margin-top: clamp(1.8rem, 3.4vh, 2.5rem);
    display: flex; flex-wrap: wrap; gap: .85rem 1rem;
}
/* The three marks under the close are gone (critique item 9): a trio of
   short label-style facts under a heading is the pattern the owner has
   rejected everywhere. A fact that matters gets a sentence. */
body.apex-wfa .wfa-relnav {
    margin-top: clamp(3.5rem, 7vh, 5.5rem);
    padding-top: 1.6rem;
    border-top: 1px solid var(--wfa-hair);
    display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem 2rem;
}
body.apex-wfa .wfa-relnav a {
    font: 600 var(--a-t-btn)/1 var(--wfa-sans); color: var(--wfa-brand); text-decoration: none;
    transition: color .25s var(--wfa-ease);
}
body.apex-wfa .wfa-relnav a:hover { color: var(--wfa-ink) }

/* ════ Footer landing ════ */

body.apex-wfa .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-wfa .nx-footer__ridge { display: none }
body.apex-wfa .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;
}

/* ════ Responsive ════ */

@media (max-width: 860px) {
    body.apex-wfa .wfa-inv { grid-template-columns: minmax(0, 1fr) }
    body.apex-wfa .wfa-inv__go { width: 3.6rem; margin-inline: auto; rotate: 90deg }
    body.apex-wfa .wfa-after__row { grid-template-columns: minmax(0, 1fr) }
    body.apex-wfa .wfa-alert:nth-child(even) { margin-inline: 0 }
    body.apex-wfa .wfa-mail__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) }
    body.apex-wfa .wfa-mail__done { grid-column: 1 / -1 }
}
@media (max-width: 480px) {
    body.apex-wfa .wfa-mail__row { grid-template-columns: minmax(0, 1fr) }
    /* the rows run past the fold here, so the clock sits above what it changes */
    body.apex-wfa .wfa-mail { display: flex; flex-direction: column }
    body.apex-wfa .wfa-mail__bar { order: -2 }
    body.apex-wfa .wfa-mail__clock { order: -1; border-top: 0; border-bottom: 1px solid #dbe5f3; grid-template-columns: minmax(0, 1fr) auto }
    body.apex-wfa .wfa-mail__clock label { display: none }
    body.apex-wfa .wfa-mail__count { margin-left: 0; width: 100% }
}

@media (max-width: 1080px) {
    body.apex-wfa .wfa-head { grid-template-columns: minmax(0, 1fr); gap: 1.4rem }
    body.apex-wfa .wfa-no__item { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr) }
}

@media (max-width: 980px) {
    body.apex-wfa .wfa-hero__head { grid-template-columns: minmax(0, 1fr); gap: clamp(1.6rem, 3.4vh, 2.4rem) }
    body.apex-wfa .wfa-hero__lede { max-width: 46rem }
}

@media (max-width: 940px) {
    /* one capture per row, and subgrid comes off with it: a single-column
       band is one cell, so there is nothing left to line up */
    body.apex-wfa .wfa-shelf { grid-template-columns: minmax(0, 1fr) }
    body.apex-wfa .wfa-shelf__cell { display: block; grid-row: auto }
    body.apex-wfa .wfa-shelf__note { max-width: 52rem }

    body.apex-wfa .wfa-no__item {
        grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
        gap: .55rem 1.4rem;
    }
    /* the copy used to sit in row 2 beside a marker that is gone, which left
       a staircase of indents between 620 and 940px */
    body.apex-wfa .wfa-no__say { grid-column: 2; grid-row: auto }
}

@media (max-width: 900px) {
    /* fourteen day labels in 700px is fourteen too many; the notes below
       carry the day numbers, so the strip keeps only its four flares */
    body.apex-wfa .wfa-fn__day em { display: none }
    body.apex-wfa .wfa-fn__day.is-odd em { display: block; font-size: .68rem }
}

@media (max-width: 860px) {
    /* A 1600px screen rendered at 350px shows nothing, and these captures are
       most of the argument. The plate pans instead of shrinking. */
    body.apex-wfa .wfa-plate__img {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        border-radius: var(--wfa-r);
    }
    body.apex-wfa .wfa-plate__img img { min-width: 680px }
    /* Site review R3 (27 Oct): a "Drag to look" hint sat here for screenshots
       that no longer render, so phones showed four controls with nothing to
       drag. Removed with the hint's reason. */
}

@media (max-width: 860px) {
    /* two threads side by side need ~330px each before the messages start
       breaking into four-word lines; under that they go one above the other,
       and the long gap comes down because a stacked pair is already tall */
    body.apex-wfa .wfa-th { grid-template-columns: minmax(0, 1fr); gap: 1.2rem }
    body.apex-wfa .wfa-th__gap--long { height: clamp(150px, 20vh, 200px) }
}

@media (max-width: 760px) {
    body.apex-wfa .wfa-after__say { grid-template-columns: minmax(0, 1fr); gap: 1.05rem }
}

@media (max-width: 620px) {
    /* one track, and NO grid-column on the children: with the ordinal gone
       there is no second track to place them in, and a grid-column: 2 inside a
       one-track grid opens an implicit one that eats the width. */
    body.apex-wfa .wfa-no__item {
        grid-template-columns: minmax(0, 1fr);
        gap: .8rem;
    }
    /* the wider breakpoint parks the copy in column 2; on a one-column grid
       that opened an implicit column and squeezed the struck title to one
       word per line */
    body.apex-wfa .wfa-no__say { grid-column: 1; grid-row: auto }

    body.apex-wfa .wfa-fn__notes { grid-template-columns: minmax(0, 1fr) }

    body.apex-wfa .wfa-th__line { left: 1.1rem }
}

@media (prefers-reduced-motion: reduce) {
    body.apex-wfa :is(.wfa-mail__row, .wfa-mail__done, .wfa-inv__go path) { transition: none }
    body.apex-wfa *,
    body.apex-wfa *::before,
    body.apex-wfa *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ── 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-wfa .wfa-hero { position: relative; isolation: isolate }


/* ════ THE NIGHT ════ 4 Nov. The inbox, rebuilt: three messages and the work on
   each. Without a script every pane prints, finished, one under another. */
body.apex-wfa .wfa-mail__body { display: grid; grid-template-columns: minmax(0, 1fr); }
body.apex-wfa .wfa-mail.is-live .wfa-mail__body { grid-template-columns: minmax(13rem, .62fr) minmax(0, 1.6fr) }
body.apex-wfa .wfa-mail__list { background: #f7f9fd; border-right: 1px solid #e3ebf6 }
body.apex-wfa .wfa-mail__msg {
    display: block; width: 100%; padding: 1em 1.15em; border: 0; border-bottom: 1px solid #e3ebf6; background: none;
    font: inherit; color: inherit; text-align: left; cursor: pointer;
    transition: background-color .25s var(--wfa-ease), opacity .3s var(--wfa-ease);
}
body.apex-wfa .wfa-mail__msg[hidden] { display: none }
body.apex-wfa .wfa-mail__msg:not(.is-here) { opacity: .35 }
body.apex-wfa .wfa-mail__msg:hover { background: #eef4fe }
body.apex-wfa .wfa-mail__msg[aria-pressed="true"] { background: #fff; box-shadow: inset 0 0 0 1.5px #b9cdf0 }
body.apex-wfa .wfa-mail__msg:focus-visible { outline: 2px solid #1f5fd6; outline-offset: -2px }
body.apex-wfa .wfa-mail__meta { display: flex; justify-content: space-between; gap: .6em; margin-bottom: .25em }
body.apex-wfa .wfa-mail__meta b { font-weight: 600 }
body.apex-wfa .wfa-mail__meta i { font-style: normal; color: #55637c; white-space: nowrap; font-variant-numeric: tabular-nums }
body.apex-wfa .wfa-mail__msg .wfa-mail__subj { display: block; color: #55637c }
body.apex-wfa .wfa-mail__panes { display: grid; min-width: 0 }
body.apex-wfa .wfa-mail.is-live .wfa-pane { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity .25s var(--wfa-ease) }
body.apex-wfa .wfa-mail.is-live .wfa-pane.is-on { visibility: visible; opacity: 1 }
body.apex-wfa .wfa-pane { padding: 1.35em 1.5em 1.5em; min-width: 0 }
body.apex-wfa .wfa-mail:not(.is-live) .wfa-pane + .wfa-pane { border-top: 1px solid #dbe5f3 }
body.apex-wfa .wfa-pane p { margin: 0 }
body.apex-wfa .wfa-pane__from { color: #55637c }
body.apex-wfa .wfa-pane__from b { font-weight: 600; color: #16233f }
body.apex-wfa .wfa-pane__said { margin-top: .3em !important; font-size: 1.28em; font-weight: 500; line-height: 1.3; letter-spacing: -.015em; text-wrap: pretty }
body.apex-wfa .wfa-pane__steps { list-style: none; margin: 1.1em 0 0; padding: 0 }
body.apex-wfa .wfa-step {
    display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: .1em 1.1em; padding: .62em 0;
    border-top: 1px solid #eaf0f8; opacity: 0; transform: translateY(.35em);
    transition: opacity .35s var(--wfa-ease), transform .35s var(--wfa-ease);
}
body.apex-wfa .wfa-step.is-done { opacity: 1; transform: none }
body.apex-wfa .wfa-step b { font-weight: 500; color: #55637c }
body.apex-wfa .wfa-step span { font-weight: 500 }
body.apex-wfa .wfa-step--yes { grid-template-columns: minmax(0, 1fr); margin-top: .35em; padding: .85em 1em; border: 0; border-radius: 10px; background: #eef4fe }
body.apex-wfa .wfa-step--yes b { font-weight: 600; color: #1f5fd6 }
body.apex-wfa .wfa-step--yes span { font-weight: 400 }
@media (max-width: 760px) {
    body.apex-wfa .wfa-mail.is-live .wfa-mail__body { grid-template-columns: minmax(0, 1fr) }
    body.apex-wfa .wfa-mail__list { border-right: 0 }
    body.apex-wfa .wfa-pane { padding: 1.15em 1.15em 1.3em }
    body.apex-wfa .wfa-step { grid-template-columns: minmax(0, 1fr) }
}
@media (prefers-reduced-motion: reduce) {
    body.apex-wfa :is(.wfa-step, .wfa-pane, .wfa-mail__msg) { transition: none }
}


/* ════ 7 Nov: the games ════ Every widget below ends in the form. The pen is the
   same blue pen as the invoice note, and is the only handwriting on the page. */
body.apex-wfa .wfa-main .wfa-pen { margin: 0; font: 400 clamp(2rem, 2.5vw, 2.4rem)/1.08 "Apex Hand", "Bradley Hand", cursive; color: #1f5fd6; text-wrap: balance }
body.apex-wfa .wfa-main .wfa-pen[hidden] { display: none }
body.apex-wfa .wfa-main .wfa-pen a { color: inherit; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .18em }
body.apex-wfa .wfa-main [hidden] { display: none }

/* THE RACE: the email on the left, the blank job card on the right */
body.apex-wfa .wfa-race__desk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.4rem, 4vw, 3.6rem); align-items: start; font-size: 16px; line-height: 1.45; color: #16233f }
body.apex-wfa .wfa-race__mail { padding: 1.6em 1.7em 1.8em; background: #fff; border: 1px solid var(--wfa-card-line); border-radius: 14px; box-shadow: 0 26px 44px -24px rgba(16, 40, 92, .42); transform: rotate(-.8deg) }
body.apex-wfa .wfa-race__from { display: flex; justify-content: space-between; gap: 1em }
body.apex-wfa .wfa-race__from b { font-weight: 600 }
body.apex-wfa .wfa-race__from i { font-style: normal; color: #55637c; font-variant-numeric: tabular-nums }
body.apex-wfa .wfa-race__subj { margin: .2em 0 1em !important; color: #55637c }
body.apex-wfa .wfa-race__body { font-size: 1.12em; line-height: 1.5; text-wrap: pretty }
body.apex-wfa .wfa-race__body + .wfa-race__body { margin-top: .9em }
body.apex-wfa .wfa-race__card { padding: 1.3em 1.4em 1.5em; background: #fff; border: 1px solid var(--wfa-card-line); border-radius: 14px; box-shadow: 0 30px 54px -26px rgba(16, 40, 92, .5) }
body.apex-wfa .wfa-race__top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .6em }
body.apex-wfa .wfa-race__top b { font-size: 1.2em; font-weight: 600 }
body.apex-wfa .wfa-race__top output { font: 600 1.7em/1 var(--wfa-mono); color: #1f5fd6; font-variant-numeric: tabular-nums }
body.apex-wfa .wfa-race__f { position: relative; display: grid; grid-template-columns: 8.2em minmax(0, 1fr); align-items: center; gap: .8em; padding: .32em 0 }
body.apex-wfa .wfa-race__f span { color: #55637c }
body.apex-wfa .wfa-race__f input { width: 100%; min-width: 0; padding: .62em 2.2em .62em .75em; border: 1px solid #d5deeb; border-radius: 8px; background: #fbfcfe; font: inherit; color: inherit }
body.apex-wfa .wfa-race__f input:focus { outline: 2px solid #1f5fd6; outline-offset: 1px; background: #fff }
body.apex-wfa .wfa-race__f::after { content: "\2713"; position: absolute; right: .55em; top: 50%; translate: 0 -50%; font: 400 1.6em/1 "Apex Hand", cursive; color: #1f5fd6; opacity: 0; scale: .4; transition: opacity .25s var(--wfa-ease), scale .3s var(--wfa-ease) }
body.apex-wfa .wfa-race__f.is-ok::after { opacity: 1; scale: 1 }
body.apex-wfa .wfa-race__acts { margin: .5em 0 0 !important; text-align: right }
body.apex-wfa .wfa-race__quit { padding: .3em 0; border: 0; background: none; font: inherit; font-size: .92em; color: #55637c; text-decoration: underline; text-underline-offset: .2em; cursor: pointer }
body.apex-wfa .wfa-race__quit:hover { color: #1f5fd6 }
body.apex-wfa .wfa-race__pen { min-height: 2.2em; margin-top: .55em !important }
body.apex-wfa .wfa-race__end { margin-top: clamp(1.8rem, 4vh, 2.8rem); max-width: 50rem }
body.apex-wfa .wfa-race__sum { font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.45; font-weight: 500; color: #16233f; letter-spacing: -.01em; text-wrap: pretty }
body.apex-wfa .wfa-race__sum b { font-weight: 700; color: #1f5fd6 }
body.apex-wfa .wfa-race__sum input { width: 3.6em; padding: .05em .25em; border: 0; border-bottom: 2px solid #1f5fd6; background: #eef4fe; font: inherit; font-weight: 700; color: #1f5fd6; text-align: center }
body.apex-wfa .wfa-race__go { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem !important }

/* the inbox: a quip under the clock, and a yes on each reply */
body.apex-wfa .wfa-mail__quip { min-height: 0; margin: 0; padding: 0 1.15em; font: 400 2em/1.1 "Apex Hand", cursive; color: #1f5fd6; background: #f7f9fd }
body.apex-wfa .wfa-mail__quip:not(:empty) { padding: 0 1.15em .7em }
body.apex-wfa .wfa-mail__pen { margin-top: 1.2rem !important; max-width: 46rem }
body.apex-wfa .wfa-yes { display: none; flex-wrap: wrap; gap: .5em; margin-top: .75em }
body.apex-wfa .wfa-step--yes.is-done:not(.is-sent) .wfa-yes { display: flex }
body.apex-wfa .wfa-yes button { padding: .55em .95em; border: 1px solid #1f5fd6; border-radius: 8px; background: #fff; font: 600 .92em/1 var(--wfa-sans); color: #1f5fd6; cursor: pointer }
body.apex-wfa .wfa-yes .wfa-yes__go { background: #1f5fd6; color: #fff }
body.apex-wfa .wfa-yes button:hover { box-shadow: 0 6px 14px -8px rgba(31, 95, 214, .8) }
body.apex-wfa .wfa-step--yes.is-sent { background: #fff; box-shadow: inset 0 0 0 1px #c9d8f2 }

/* THE BILLS: one at a time once the script runs, all three printed without it */
body.apex-wfa .wfa-chk { --pen: #1f5fd6; font-size: 15.5px; line-height: 1.35; color: #16233f }
body.apex-wfa .wfa-chk__set { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(1.4rem, 4vw, 3.4rem); align-items: center }
body.apex-wfa .wfa-chk__set + .wfa-chk__set { margin-top: 2.4rem }
body.apex-wfa .wfa-chk.is-live .wfa-chk__set { display: none; margin-top: 0 }
body.apex-wfa .wfa-chk.is-live .wfa-chk__set.is-on { display: grid; animation: wfa-bill .45s var(--wfa-ease) }
@keyframes wfa-bill { from { opacity: 0; transform: translateY(14px) } }
body.apex-wfa .wfa-chk__paper button.wfa-inv__line { margin: 0 -.45em; padding-inline: .45em; width: calc(100% + .9em); border: 0; border-top: 1px solid #e2e8f1; border-radius: 6px; background: none; font: inherit; color: inherit; text-align: left; gap: 1em; cursor: pointer; transition: background-color .2s var(--wfa-ease), box-shadow .2s var(--wfa-ease) }
body.apex-wfa .wfa-chk.is-live .wfa-chk__paper button.wfa-inv__line:hover { background: #eef4fe }
body.apex-wfa .wfa-chk__paper button.wfa-inv__line:focus-visible { outline: 2px solid #1f5fd6; outline-offset: 1px }
body.apex-wfa .wfa-chk__paper .wfa-inv__line--pay { margin-top: 1.1em; border-top: 0; font-size: .9em; color: #55637c }
body.apex-wfa .wfa-chk__paper .wfa-inv__line.is-caught { box-shadow: 0 0 0 3px #d23b3b; border-radius: 40% 46% 42% 48% / 60% 55% 62% 58%; background: #fff5f5 }
body.apex-wfa .wfa-chk__paper .wfa-inv__line.is-miss { animation: wfa-nope .4s }
@keyframes wfa-nope { 25% { transform: translateX(-5px) } 75% { transform: translateX(5px) } }
body.apex-wfa .wfa-chk__file { padding: 1.3em 1.4em 1.4em; background: #fff; border: 1px solid var(--wfa-card-line); border-radius: 14px; box-shadow: 0 26px 44px -24px rgba(16, 40, 92, .42) }
body.apex-wfa .wfa-chk__foot { margin-top: clamp(1.6rem, 3.5vh, 2.4rem) }
body.apex-wfa .wfa-chk__acts { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem }
body.apex-wfa .wfa-chk__or { color: #55637c; font-size: 1.05em }
body.apex-wfa .wfa-chk__pen { min-height: 2.3em; margin-top: 1rem !important; max-width: 44rem }
body.apex-wfa .wfa-chk__count { margin-bottom: .9rem !important; font-weight: 600; font-size: 1.08em; color: #16233f }
body.apex-wfa .wfa-chk__end { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; margin-top: 1.2rem !important }
body.apex-wfa .wfa-chk__end[hidden] { display: none }
body.apex-wfa .wfa-chk__again { padding: 0; border: 0; background: none; font: inherit; color: #55637c; text-decoration: underline; text-underline-offset: .2em; cursor: pointer }
body.apex-wfa .wfa-more__me { margin-left: .3em; color: var(--wfa-brand); font-weight: 600; white-space: nowrap; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px }

/* the refusals: a struck title that tries to come back */
body.apex-wfa .wfa-no__title { position: relative }
body.apex-wfa .wfa-no__title [data-no-title] { cursor: pointer }
html body.apex-wfa .wfa-main .wfa-no__item .wfa-no__title [data-no-title].is-back { text-decoration-color: transparent; transition: text-decoration-color .2s }
body.apex-wfa .wfa-main .wfa-no__nope { display: block; font-style: normal; text-decoration: none; margin-top: .2em; font-size: 1.7rem; transform: rotate(-2deg); transform-origin: left }
body.apex-wfa .wfa-no__ask { margin-top: clamp(2rem, 4vh, 3rem) !important; font-size: var(--a-t-spoken); line-height: 1.55; color: var(--wfa-body) }
body.apex-wfa .wfa-no__ask a { font-weight: 600 }

/* the first two weeks: each alert asks you */
body.apex-wfa .wfa-alert__acts { display: flex; flex-wrap: wrap; align-items: center; gap: .4em 1em; margin-top: .65em }
body.apex-wfa .wfa-alert__acts button { padding: .45em .8em; border: 1px solid #1f5fd6; border-radius: 8px; background: #fff; font: 600 .9em/1 var(--wfa-sans); color: #1f5fd6; cursor: pointer }
body.apex-wfa .wfa-alert__acts button:hover { background: #1f5fd6; color: #fff }
body.apex-wfa .wfa-alert__acts a { font-size: .92em; font-weight: 600; color: #55637c; text-decoration: underline; text-underline-offset: .2em }
body.apex-wfa .wfa-alert__kept { display: block; margin-top: .45em; font: 400 1.9em/1.1 "Apex Hand", cursive; color: #1f5fd6 }
body.apex-wfa .wfa-after__pen { margin-top: 1.4rem !important }

@media (max-width: 860px) {
    body.apex-wfa .wfa-race__desk,
    body.apex-wfa .wfa-chk__set { grid-template-columns: minmax(0, 1fr) }
    body.apex-wfa .wfa-race__mail { transform: none; position: sticky; top: calc(var(--a-anchor, 5.5rem) - .5rem); z-index: 2; padding: .9em 1em 1em; font-size: .9em; box-shadow: 0 18px 30px -16px rgba(16, 40, 92, .5) }
    body.apex-wfa .wfa-race__subj { margin-bottom: .5em !important }
    body.apex-wfa .wfa-race__body { font-size: 1em }
    body.apex-wfa .wfa-race__body + .wfa-race__body { display: none }
    body.apex-wfa .wfa-race__f input { scroll-margin-top: 22rem }
}
@media (max-width: 480px) {
    body.apex-wfa .wfa-race__f { grid-template-columns: minmax(0, 1fr); gap: .25em }
    body.apex-wfa .wfa-race__mail,
    body.apex-wfa .wfa-race__card { padding: 1.1em 1.1em 1.2em }
    body.apex-wfa .wfa-main .wfa-pen { font-size: 1.9rem }
}
@media (prefers-reduced-motion: reduce) {
    body.apex-wfa .wfa-chk.is-live .wfa-chk__set.is-on,
    body.apex-wfa .wfa-chk__paper .wfa-inv__line.is-miss { animation: none }
}
body.apex-wfa .wfa-no__title [data-no-title]:focus-visible { outline: 2px solid #1f5fd6; outline-offset: 3px; border-radius: 2px }

/* ════ THE MORNING ════ 8 Nov. Your phone at 7 am. Without a script the trade
   morning prints in full; with it, one card is open at a time. */
body.apex-wfa .wfa-wk { display: grid; gap: 1.1rem; font-size: 15.5px; line-height: 1.42; color: #16233f }
body.apex-wfa .wfa-wk p { margin: 0 }
body.apex-wfa .wfa-wk__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem }
body.apex-wfa .wfa-wk__biz { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem }
body.apex-wfa .wfa-wk__biz[hidden] { display: none }
body.apex-wfa .wfa-wk__ask { font-size: 1.05em; font-weight: 600 }
body.apex-wfa .wfa-wk__chips, body.apex-wfa .wfa-pile__chips { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0 }
body.apex-wfa .wfa-wk__chip { padding: .62em 1em; border: 1px solid #c9d8f2; border-radius: 10px; background: #fff; font: 600 1em/1.2 var(--wfa-sans); color: #16233f; cursor: pointer }
body.apex-wfa .wfa-wk__chip:hover { border-color: #1f5fd6 }
body.apex-wfa .wfa-wk__chip[aria-pressed="true"] { background: #1f5fd6; border-color: #1f5fd6; color: #fff }
body.apex-wfa .wfa-wk__chip:focus-visible { outline: 2px solid #1f5fd6; outline-offset: 2px }
body.apex-wfa .wfa-wk__clock { display: grid; justify-items: end; gap: .35rem; min-width: 13rem }
body.apex-wfa .wfa-wk__status { display: flex; align-items: baseline; gap: .7em }
body.apex-wfa .wfa-wk__status b { font-size: 1.6em; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums }
body.apex-wfa .wfa-wk__status span { color: #55637c; font-weight: 500 }
body.apex-wfa .wfa-wk__kettle { display: grid; grid-template-columns: auto 8rem; align-items: center; gap: .7em; color: #55637c; font-size: .92em }
body.apex-wfa .wfa-wk__kettle[hidden] { display: none }
body.apex-wfa .wfa-wk__kettle > i { display: block; height: 6px; border-radius: 3px; background: #d6e0ef; overflow: hidden }
body.apex-wfa .wfa-wk__kettle > i > i { display: block; height: 100%; background: #1f5fd6; border-radius: inherit; transform: scaleX(0); transform-origin: left; transition: transform .12s linear }
body.apex-wfa .wfa-wk__kettle.is-boiled { color: #16233f; font-weight: 600 }

/* the mailbox: the night's messages on the left, the open one on the right */
body.apex-wfa .wfa-wk__mail { background: #fff; border: 1px solid #d6e0ef; border-radius: 20px; box-shadow: 0 30px 56px -34px rgba(16, 40, 92, .45); overflow: hidden }
body.apex-wfa .wfa-wk__group[hidden] { display: none }
body.apex-wfa .wfa-wk.is-live .wfa-wk__group { display: grid; grid-template-columns: minmax(0, 19rem) minmax(0, 1fr) }
body.apex-wfa .wfa-wk.is-live .wfa-wk__group[hidden] { display: none }
body.apex-wfa .wfa-wk__list { display: grid; align-content: start; gap: .3rem; margin: 0; padding: .6rem; list-style: none; background: #f4f7fc; border-right: 1px solid #e3e9f3 }
body.apex-wfa .wfa-wk__list[hidden] { display: none }
body.apex-wfa .wfa-wk__row { display: grid; gap: .22em; width: 100%; padding: .8em .9em; border: 0; border-radius: 12px; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer }
body.apex-wfa .wfa-wk__row:hover { background: #eaf0f9 }
body.apex-wfa .wfa-wk__row[aria-pressed="true"] { background: #fff; box-shadow: 0 0 0 1.5px #b9cdf0, 0 8px 18px -14px rgba(16, 40, 92, .5) }
body.apex-wfa .wfa-wk__row:focus-visible { outline: 2px solid #1f5fd6; outline-offset: 2px }
body.apex-wfa .wfa-wk__rwho { display: flex; justify-content: space-between; gap: .8em }
body.apex-wfa .wfa-wk__rwho b { font-weight: 600 }
body.apex-wfa .wfa-wk__rwho i { font-style: normal; color: #55637c; white-space: nowrap; font-variant-numeric: tabular-nums }
body.apex-wfa .wfa-wk__rsaid { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: #55637c; font-size: .94em }
body.apex-wfa .wfa-wk__rstate { display: flex; align-items: flex-start; gap: .45em; margin-top: .15em; font-size: .86em; font-weight: 600; color: #1f5fd6 }
body.apex-wfa .wfa-wk__rstate::before { content: ""; flex: none; width: .5rem; height: .5rem; margin-top: .4em; border-radius: 50%; background: currentColor }
body.apex-wfa .wfa-wk__row.is-urgent .wfa-wk__rstate { color: #c4342f }
body.apex-wfa .wfa-wk__row.is-sent .wfa-wk__rstate { color: #6b7890 }
body.apex-wfa .wfa-wk__row.is-sent .wfa-wk__rwho b { color: #6b7890 }

/* one message, read top to bottom: what they said, what it did and why, the thread, your reply */
body.apex-wfa .wfa-wk__view { min-width: 0 }
body.apex-wfa .wfa-wk__card { display: grid; gap: 1.15rem; padding: clamp(1.2rem, 2.4vw, 1.9rem) }
body.apex-wfa .wfa-wk__card + .wfa-wk__card { border-top: 1px solid #e3e9f3 }
body.apex-wfa .wfa-wk.is-live .wfa-wk__card { border-top: 0 }
body.apex-wfa .wfa-wk.is-live .wfa-wk__card:not(.is-open) { display: none }
body.apex-wfa .wfa-wk.is-live .wfa-wk__card.is-open { animation: wfa-wk-in .35s var(--wfa-ease) }
@keyframes wfa-wk-in { from { opacity: 0; transform: translateY(8px) } }
body.apex-wfa .wfa-wk__who { display: flex; justify-content: space-between; gap: .8em; margin-bottom: -.6rem !important }
body.apex-wfa .wfa-wk__who b { font-weight: 600 }
body.apex-wfa .wfa-wk__who i { font-style: normal; color: #55637c; white-space: nowrap; font-variant-numeric: tabular-nums }
body.apex-wfa .wfa-wk__said, body.apex-wfa .wfa-wk__in { justify-self: start; max-width: 36rem; padding: .8em 1em; background: #f1f4f9; border-radius: 4px 16px 16px 16px; text-wrap: pretty }
body.apex-wfa .wfa-wk__said { font-size: 1.18em; font-weight: 500; line-height: 1.34; letter-spacing: -.01em }
body.apex-wfa .wfa-wk__card.is-urgent .wfa-wk__said { background: #fcefee }
body.apex-wfa .wfa-wk__label { margin-bottom: .4em !important; font-size: .84em; font-weight: 600; color: #55637c }
body.apex-wfa .wfa-wk__work { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 1.6rem; align-items: start }
body.apex-wfa .wfa-wk__done { list-style: none; margin: 0; padding: 0 }
body.apex-wfa .wfa-wk__done li { padding: .36em 0; border-top: 1px solid #eaf0f8 }
body.apex-wfa .wfa-wk__done li:first-child { border-top: 0; padding-top: 0 }
body.apex-wfa .wfa-wk__done li.is-flag { color: #1f5fd6; font-weight: 600 }
body.apex-wfa .wfa-wk__done li.is-flag::before { content: "Worth knowing: "; font-weight: 400 }
body.apex-wfa .wfa-wk__card.is-urgent .wfa-wk__done li:first-child { color: #c4342f; font-weight: 600 }
body.apex-wfa .wfa-wk__how { padding: .9em 1.05em 1em; background: #f4f7fc; border-radius: 14px }
body.apex-wfa .wfa-wk__how p:last-child { color: #33415c; text-wrap: pretty }
body.apex-wfa .wfa-wk__thread, body.apex-wfa .wfa-wk__draft { display: grid; justify-items: end; padding-top: 1.1rem; border-top: 1px solid #eaf0f8 }
body.apex-wfa .wfa-wk__thread .wfa-wk__label--in { justify-self: start; margin-top: .9em !important }
body.apex-wfa .wfa-wk__out, body.apex-wfa .wfa-wk__reply { max-width: 36rem; padding: .8em 1em; border-radius: 16px 16px 4px 16px; text-wrap: pretty }
body.apex-wfa .wfa-wk__out { background: #1f5fd6; color: #fff }
body.apex-wfa .wfa-wk__reply { background: #eef4fe; box-shadow: inset 0 0 0 1.5px #b9cdf0 }
body.apex-wfa .wfa-wk__reply[hidden] { display: none }
body.apex-wfa .wfa-wk__card.is-sent .wfa-wk__reply { background: #1f5fd6; box-shadow: none; color: #fff }
body.apex-wfa .wfa-wk__card.is-sent [data-wk-dl] { color: #1f5fd6 }
body.apex-wfa .wfa-wk__area { display: block; width: min(100%, 36rem); padding: .7em .85em; border: 1.5px solid #1f5fd6; border-radius: 14px; background: #fff; font: inherit; color: inherit; resize: vertical }
body.apex-wfa .wfa-wk__area:focus { outline: 2px solid #1f5fd6; outline-offset: 1px }
body.apex-wfa .wfa-wk__acts { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .5em .7em; margin-top: .8em !important }
body.apex-wfa .wfa-wk__card.is-sent .wfa-wk__acts { display: none }
body.apex-wfa .wfa-wk__acts button { padding: .6em 1em; border: 1px solid #1f5fd6; border-radius: 10px; background: #fff; font: 600 .95em/1.15 var(--wfa-sans); color: #1f5fd6; cursor: pointer }
body.apex-wfa .wfa-wk__acts .wfa-wk__go { background: #1f5fd6; color: #fff }
body.apex-wfa .wfa-wk__acts .wfa-wk__edit { padding-inline: 0; border: 0; background: none; color: #55637c; text-decoration: underline; text-underline-offset: .2em }
body.apex-wfa .wfa-wk__acts button:focus-visible { outline: 2px solid #1f5fd6; outline-offset: 2px }
body.apex-wfa .wfa-wk__pen { min-height: 1.1em }

/* ════ THE FRIDAY PILE ════ 8 Nov. One bill at a time once the script runs;
   without it every bill prints with its answer. */
body.apex-wfa .wfa-pile { font-size: 15.5px; line-height: 1.38; color: #16233f }
body.apex-wfa .wfa-pile__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .4em 1.2em; margin-bottom: 1.1rem }
body.apex-wfa .wfa-pile__bar[hidden] { display: none }
body.apex-wfa .wfa-pile__bar b { font-size: 1.12em; font-weight: 600 }
body.apex-wfa .wfa-pile__bar span { color: #55637c; font-weight: 500 }
body.apex-wfa .wfa-pile__bar output { margin-left: .35em; font: 600 1.5em/1 var(--wfa-mono); color: #1f5fd6; font-variant-numeric: tabular-nums }
body.apex-wfa .wfa-pile__bar.is-late output { color: #d23b3b }
body.apex-wfa .wfa-pile__bill { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(1.2rem, 4vw, 3.2rem); align-items: center }
body.apex-wfa .wfa-pile__bill + .wfa-pile__bill { margin-top: 2.2rem }
body.apex-wfa .wfa-pile.is-live .wfa-pile__bill { display: none; margin-top: 0 }
body.apex-wfa .wfa-pile.is-live .wfa-pile__bill.is-on { display: grid; animation: wfa-bill .4s var(--wfa-ease) }
body.apex-wfa .wfa-pile__paper { padding: 1.6em 1.7em 1.8em; background: #fff; border-radius: 3px; box-shadow: 0 2px 4px rgba(10, 23, 48, .08), 0 26px 44px -24px rgba(16, 40, 92, .42) }
body.apex-wfa .wfa-pile__paper p, body.apex-wfa .wfa-pile__file p { margin: 0 }
body.apex-wfa .wfa-pile__co { font-size: 1.3em; font-weight: 700; letter-spacing: -.01em }
body.apex-wfa .wfa-pile__no { margin: .15em 0 1.3em !important; color: #55637c }
body.apex-wfa .wfa-pile__line { display: flex; justify-content: space-between; gap: 1em; padding-block: .52em; border-top: 1px solid #e2e8f1 }
body.apex-wfa .wfa-pile__line span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums }
body.apex-wfa .wfa-pile__line--note { order: 9; color: #55637c; font-size: .92em }
body.apex-wfa .wfa-pile__line--total { font-weight: 700; border-top: 2px solid #16233f }
body.apex-wfa .wfa-pile__file { padding: 1.25em 1.35em 1.35em; background: #fff; border: 1px solid var(--wfa-card-line); border-radius: 14px; box-shadow: 0 18px 34px -24px rgba(16, 40, 92, .4) }
body.apex-wfa .wfa-pile__fhead { margin-bottom: .55em !important; font-size: 1.1em; font-weight: 600 }
body.apex-wfa .wfa-pile__fline { padding: .5em .7em; margin-top: .4em !important; border: 1px solid #e0e7f1; border-radius: 8px }
body.apex-wfa .wfa-pile__verdict { margin-top: .9em !important; color: #1f5fd6 }
body.apex-wfa .wfa-pile.is-live .wfa-pile__verdict { display: none }
body.apex-wfa .wfa-pile__acts { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1.5rem !important }
body.apex-wfa .wfa-pile__acts[hidden], body.apex-wfa .wfa-pile__end[hidden], body.apex-wfa .wfa-pile__pain[hidden] { display: none }
body.apex-wfa .wfa-pile__keys { color: #55637c; font-size: .95em }
body.apex-wfa .wfa-pile__say { min-height: 2.2em; margin-top: 1rem !important; max-width: 46rem }
body.apex-wfa .wfa-pile__sum { margin: 0 0 1.2rem !important; max-width: 50rem; font-size: clamp(1.2rem, 1.9vw, 1.5rem); font-weight: 600; line-height: 1.4; letter-spacing: -.01em; text-wrap: pretty }
body.apex-wfa .wfa-pile__led { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--wfa-card-line); border-radius: 12px; overflow: hidden; font-size: .97em }
body.apex-wfa .wfa-pile__led th, body.apex-wfa .wfa-pile__led td { padding: .62em .8em; border-top: 1px solid #e8eef6; text-align: left; vertical-align: top }
body.apex-wfa .wfa-pile__led thead th { border-top: 0; background: #f4f7fc; font-size: .9em; font-weight: 600; color: #55637c }
body.apex-wfa .wfa-pile__led tbody th { font-weight: 600 }
body.apex-wfa .wfa-pile__led td:nth-child(2) { white-space: nowrap; font-variant-numeric: tabular-nums }
body.apex-wfa .wfa-pile__led tr.is-wrong td[data-pile-you] { color: #d23b3b; font-weight: 600 }
body.apex-wfa .wfa-pile__led td[data-pile-it] { color: #1f5fd6; font-weight: 600 }
body.apex-wfa .wfa-pile__led tr.is-checked td[data-pile-it],
body.apex-wfa .wfa-pile__led tr.is-checked td[data-pile-why] { animation: wfa-ink .35s var(--wfa-ease) }
@keyframes wfa-ink { from { opacity: 0; transform: translateX(-6px) } }
body.apex-wfa .wfa-pile__go { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; margin-top: 1.3rem !important }
body.apex-wfa .wfa-pile__again { padding: 0; border: 0; background: none; font: inherit; color: #55637c; text-decoration: underline; text-underline-offset: .2em; cursor: pointer }
body.apex-wfa .wfa-pile__said { margin-top: 1rem !important; max-width: 48rem }
body.apex-wfa .wfa-pile__pain { margin-top: clamp(2rem, 5vh, 3rem) }
body.apex-wfa .wfa-pile__painq { margin: 0 0 .8rem !important; font-size: clamp(1.3rem, 2vw, 1.65rem); font-weight: 600; letter-spacing: -.015em }
body.apex-wfa .wfa-pile__to { margin-top: 1.2rem !important }
@media (max-width: 860px) {
    body.apex-wfa .wfa-wk.is-live .wfa-wk__group { grid-template-columns: minmax(0, 1fr) }
    body.apex-wfa .wfa-wk__list { grid-template-columns: repeat(3, minmax(0, 1fr)); border-right: 0; border-bottom: 1px solid #e3e9f3 }
    body.apex-wfa .wfa-wk__work { grid-template-columns: minmax(0, 1fr) }
    body.apex-wfa .wfa-pile.is-live .wfa-pile__bill.is-on,
    body.apex-wfa .wfa-pile__bill { grid-template-columns: minmax(0, 1fr) }
}
@media (max-width: 560px) {
    body.apex-wfa .wfa-wk__clock { justify-items: start; min-width: 0 }
    body.apex-wfa .wfa-wk__mail { margin-inline: -.4rem; border-radius: 16px }
    body.apex-wfa .wfa-wk__list { grid-template-columns: minmax(0, 1fr) }
    body.apex-wfa .wfa-wk__rsaid { -webkit-line-clamp: 1 }
    body.apex-wfa .wfa-wk__said, body.apex-wfa .wfa-wk__in, body.apex-wfa .wfa-wk__out, body.apex-wfa .wfa-wk__reply { max-width: 92% }
    body.apex-wfa .wfa-pile__paper { padding: 1.2em 1.15em 1.3em }
    body.apex-wfa .wfa-pile__led th:nth-child(2), body.apex-wfa .wfa-pile__led td:nth-child(2) { display: none }
    body.apex-wfa .wfa-pile__led th, body.apex-wfa .wfa-pile__led td { padding: .55em .5em }
}
@media (prefers-reduced-motion: reduce) {
    body.apex-wfa .wfa-pile.is-live .wfa-pile__bill.is-on,
    body.apex-wfa .wfa-pile__led tr.is-checked td { animation: none }
    body.apex-wfa .wfa-wk__kettle > i > i { transition: none }
    body.apex-wfa .wfa-wk.is-live .wfa-wk__card.is-open { animation: none }
}
@media (hover: none) { body.apex-wfa .wfa-pile__keys { display: none } }
body.apex-wfa .wfa-main [data-no-title] { cursor: pointer }

/* ════ 8 Nov · Workflow Automation audit ════
   The race says which box is stuck and shows what the bot made; the reader's
   own job meets the four rules; the alerts carry their day and keep the
   reader's changes in place. */
body.apex-wfa .wfa-race__f.is-stuck input { border-color: #1f5fd6; border-style: dashed; background: #f3f7ff }
body.apex-wfa .wfa-race__f.is-stuck span { color: #1f5fd6; font-weight: 600 }
body.apex-wfa .wfa-race__pay { margin-top: .9rem !important; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.5; color: #3c4a64 }
body.apex-wfa .wfa-race__pay input { width: 3.4em; margin-left: .1em; padding: .05em .25em; border: 0; border-bottom: 2px solid #1f5fd6; background: #eef4fe; font: inherit; font-weight: 700; color: #1f5fd6; text-align: center }
body.apex-wfa .wfa-race__pay input:focus-visible { outline: 2px solid #1f5fd6; outline-offset: 2px }
body.apex-wfa .wfa-race__pay span { font-weight: 700; color: #16233f }
body.apex-wfa .wfa-race__made { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1rem; margin-top: 1.4rem }
body.apex-wfa .wfa-race__made > div { display: grid; align-content: start; gap: .35em; padding: 1em 1.15em 1.1em; background: #fff; border: 1px solid var(--wfa-card-line); border-radius: 14px; box-shadow: 0 18px 30px -20px rgba(16, 40, 92, .42); line-height: 1.45; color: #3c4a64 }
body.apex-wfa .wfa-race__diary { background: repeating-linear-gradient(#fff 0 1.45em, #eef2f8 1.45em calc(1.45em + 1px)) }
body.apex-wfa .wfa-race__mk { font-size: .86em; font-weight: 600; color: #55637c }
body.apex-wfa .wfa-race__diary b { font-weight: 600; color: #16233f }
body.apex-wfa .wfa-race__made:not(.is-sent) .wfa-race__diary p:not(.wfa-race__mk) { color: #6f7c93; font-style: italic }
body.apex-wfa .wfa-race__txt { color: #16233f; text-wrap: pretty }
body.apex-wfa .wfa-race__send { margin-top: .4em !important }
html.wfa-anim body.apex-wfa .wfa-race__made > div { animation: wfa-made-in .5s var(--wfa-ease) both }
html.wfa-anim body.apex-wfa .wfa-race__made > div + div { animation-delay: .15s }
@keyframes wfa-made-in { from { opacity: 0; translate: 0 .6em } }
body.apex-wfa .wfa-noask { margin-top: clamp(2rem, 4vh, 3rem); max-width: 52rem }
body.apex-wfa .wfa-noask__q { font-size: var(--a-t-spoken); font-weight: 600; color: #16233f }
body.apex-wfa .wfa-noask__row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto; gap: .7rem; align-items: end; margin-top: .8rem }
body.apex-wfa .wfa-noask__row label { display: grid; gap: .3em; font-size: .92em; color: #55637c }
body.apex-wfa .wfa-noask__row :is(input, select) { width: 100%; min-width: 0; padding: .7em .8em; border: 1px solid #c9d6ea; border-radius: 9px; background: #fff; font: inherit; font-size: 1.05rem; color: #16233f }
body.apex-wfa .wfa-noask__row :is(input, select):focus-visible { outline: 2px solid #1f5fd6; outline-offset: 1px }
body.apex-wfa .wfa-main .wfa-noask__pen { margin-top: 1rem }
body.apex-wfa .wfa-alert__day { display: block; margin-bottom: .1em; font-style: normal; font-size: .84em; font-weight: 600; color: #6f7c93; font-variant-numeric: tabular-nums }
body.apex-wfa .wfa-alert__quiet { padding: .3rem 1.15rem .3rem 3.35rem; font: 400 1.6rem/1.1 "Apex Hand", "Bradley Hand", cursive; color: #1f5fd6 }
body.apex-wfa .wfa-alert__acts button.wfa-alert__diff { padding: 0; border: 0; background: none; font: 600 .92em/1.3 var(--wfa-sans); color: #55637c; text-decoration: underline; text-underline-offset: .2em }
body.apex-wfa .wfa-alert__acts button.wfa-alert__diff:hover { background: none; color: #1f5fd6 }
body.apex-wfa .wfa-alert__mine { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; margin-top: .65em }
body.apex-wfa .wfa-alert__mine label { flex: 1 1 14em; display: flex; align-items: center; gap: .5em; font-size: .92em; color: #55637c }
body.apex-wfa .wfa-alert__mine input { flex: 1; min-width: 0; padding: .45em .6em; border: 1px solid #c9d6ea; border-radius: 8px; font: inherit; font-size: 1.05em; color: #16233f }
body.apex-wfa .wfa-alert__mine input:focus-visible { outline: 2px solid #1f5fd6; outline-offset: 1px }
body.apex-wfa .wfa-alert__mine button { padding: .45em .8em; border: 1px solid #1f5fd6; border-radius: 8px; background: #1f5fd6; font: 600 .9em/1 var(--wfa-sans); color: #fff; cursor: pointer }
@media (max-width: 720px) {
    body.apex-wfa .wfa-race__made { grid-template-columns: minmax(0, 1fr) }
    body.apex-wfa .wfa-noask__row { grid-template-columns: minmax(0, 1fr) }
    body.apex-wfa .wfa-noask__row button { justify-self: start }
    body.apex-wfa .wfa-alert__quiet { padding-left: 1.15rem; font-size: 1.45rem }
}