/*
 * home.css — everything below the daylight hero. Scope: body.apex-hm.
 * The hero has its own sheet (home-hero.css, body.apex-home). Nothing else on
 * the site loads either file.
 *
 * Pass 17, 2026-08-31. Pass 16 whole at _archive/home-pass16-2026-08-31/.
 * The owner's brief: introduce the studio with an interactive visual instead
 * of lists, condense the board and kill the wires, three app windows drawn
 * full (solar off this page), sell results, fewer words everywhere.
 *
 * THE GRAMMAR, unchanged: ruled lines, one white artefact per idea, nothing
 * boxed that does not need a box. FIVE TYPE RANKS and page text may use no
 * others: head 46 · sub 22 · spoken 19 · body 16 · mark 13. Sizes inside a
 * drawn artefact are exempt: a window is its own object.
 *
 * Ground rules, all user-set:
 *   · white top to bottom below the hero. NO tinted or grey bands.
 *   · real air: section rhythm 8rem to 14rem, floor binds, ceiling parts.
 *   · NO PILLS. NO TRACKED UPPERCASE. NO EM DASHES.
 *   · NOTHING BEHIND A CONTROL, and nothing merely printed either.
 *   · no invented client, no invented metric, no capture captioned as fake.
 *   · no scenery near the close. The footer is a close-up ice shelf.
 *   · resolved is the CSS default; html.hm-anim puts the start states back.
 *
 * ⚠ main.css puts Source Serif 4 on every h1/h2/h3 site-wide, so the heading
 * rule below names Instrument Sans itself.
 */

body.apex-hm {
    --hm-ink: var(--a-ink);
    --hm-body: var(--a-body);
    --hm-soft: var(--a-soft);
    --hm-brand: var(--a-brand);
    --hm-brand-deep: var(--a-brand-deep);
    --hm-line: var(--a-line);
    --hm-hair: var(--a-hair);
    /* NOT a card: this names the paper ground, and the two things that use it
       (the vow panel, the visitor's chat bubble) both want paper on purpose.
       Every other page had a --*-card that also meant paper, which is what
       split the site's cards into white ones and tinted ones with no rule
       behind which was which. Those four are white now; this one stays. */
    --hm-card: var(--a-paper);
    --hm-go: var(--a-go);                        /* verdict hue: shipped and live          */
    --hm-lift: var(--a-lift);
    --hm-lift-2: var(--a-lift-2);
    --hm-hold: var(--a-hold);
    --hm-sans: var(--a-sans);
    --hm-ease: var(--a-ease);
}

body.apex-hm .site-shell,
body.apex-hm .site-main { background: transparent }

/* The white page meets the night range on a hard horizon, the way the footer
   meets its ice shelf. An earlier build dragged a rounded sheet up over the
   pinned hero, which hid the one frame the parallax exists to deliver. */
body.apex-hm .hm-main {
    position: relative;
    z-index: 2;
    /* ★ flow-root, not block. The first section's top margin collapsed
       straight through a plain block and pushed the white sheet ~108px down
       the page, so a navy band opened between the range and the sheet and
       the hard horizon became two horizons. overflow-x: clip does NOT
       establish a block formatting context, so it cannot do this job. */
    display: flow-root;
    margin-top: -1px;
    background: #fff;
    color: var(--hm-body);
    font-family: var(--hm-sans);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

body.apex-hm .hm-vh {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}
body.apex-hm .hm-main a:not([class]) { color: var(--hm-brand) }
/* links inside prose: blue alone is too close to the blue-grey body text */
body.apex-hm .hm-main p a:not([class]) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em }
body.apex-hm .hm-shell { width: min(1200px, 92vw); margin-inline: auto }

/* ★ ONE DECLARED SCALE. A measurement of the rendered page found NINE editorial
   sizes below the hero (14.72, 16.32, 16.64, 18.4, 18.72, 19.84, 22.72, 24,
   24.96) which is drift, not a scale: every component had been sized against
   the block it sat in rather than against the page. Four roles, named, used
   everywhere below. */
body.apex-hm {
    /* ★ FIVE RANKS, and page text may use no others:
         head 46px · sub 22px · spoken 19px · body 16px · mark 13px.
       Anything between them was making the reader work out the hierarchy
       instead of reading. Sizes inside a drawn artefact are exempt: a
       window is its own object and is not compared to the page. */
    --hm-t-xs: var(--a-t-mark);                       /* mark: 13px, never a sentence */
    --hm-t-sm: var(--a-t-body);                          /* body: 16px, every sentence    */
    --hm-t-md: var(--a-t-body);                          /* body: 16px                    */
    --hm-t-lg: var(--a-t-spoken);                       /* spoken: 19px, used sparingly  */
    --hm-t-sub: var(--a-t-sub);                      /* sub: 22px, every h3           */

    /* ★ SPATIAL HIERARCHY. Every gap on the page measured 144px: six sections
       whose own heights run 281px to 1,353px all got identical air, so nothing
       was grouped, subordinated or separated and the page read as a stack of
       unrelated blocks. The owner's rule is a RANGE, 8rem to 14rem, and it had
       been used as a single value. Both ends are used now: the floor binds
       sections that belong together, the ceiling marks a change of subject. */
    --hm-gap-group: clamp(4rem, 9vh, 6rem);                    /* the floor: these belong together */
    --hm-gap-move: clamp(5.5rem, 12vh, 8.5rem);/* the ceiling: new subject          */
}
body.apex-hm .hm-main > * { margin-block: var(--hm-gap-move) }

/* why / what happens / who you are dealing with are one movement: why the
   studio exists, what it does when you call, and who picks up. They bind
   tight to each other and part company from the fork above and the board
   below. */
/* The build section and the owner passage are one movement: what gets made,
   and who makes it. They sit at the group floor rather than the move gap. */
/* the index, the four apps and the build are one long movement: what you
   can actually get. The board is the pivot after it, and the process binds
   to the questions it raises. */
/* the four apps and the build are one movement (what exists, either way),
   and the process binds to the questions it raises. The board now stands
   alone under the index, which is where it earns a full move gap. */
/* the parallax hero is outside .hm-main, so this rule IS the gap from the
   hero's exit to the first section. */
body.apex-hm .hm-main > *:first-child { margin-top: var(--a-gap-move) }
body.apex-hm .hm-main > [id] { scroll-margin-top: var(--a-anchor) }

/* ⚠ :where() so these score (0,1,1) and any component margin wins. Written
   plainly they score (0,2,2) and silently zero every one of them. The <figure>
   and <ol> resets are here because the UA sheet's margin: 1em 40px and 40px
   padding-inline-start are invisible until something is measured. */
body.apex-hm :where(.hm-main :is(h1, h2, h3)) { margin: 0 }
body.apex-hm :where(.hm-main p) { margin: 0 }
/* ⚠ main.css sets `p { color: var(--ink-soft) }`. A direct rule beats an
   inherited one, so every paragraph here painted that colour no matter what
   its container said. :where() keeps this at (0,1,1): it beats the bare `p`
   and loses to anything that names itself. */
body.apex-hm :where(.hm-main p) { color: inherit }
body.apex-hm :where(.hm-main :is(ul, ol)) { margin: 0; padding: 0; list-style: none }
body.apex-hm :where(.hm-main :is(figure, figcaption)) { margin: 0 }

body.apex-hm .hm-main h3 { font-size: var(--hm-t-sub) }
body.apex-hm .hm-main :is(h1, h2, h3) {
    font-family: var(--hm-sans);
    color: var(--hm-ink);
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 1.08;
    text-wrap: balance;
}

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

body.apex-hm .hm-head {
    position: relative;
    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);
}
/* Head is a heading ALONE by default. A lead has to earn its place. */
body.apex-hm .hm-head--solo { display: block }
body.apex-hm .hm-head h2 { font-size: clamp(1.85rem, 3.3vw, 2.85rem) }
/* ★ The step-down is GONE. It solved a problem the headings no longer have:
   they used to run to fourteen words, so the long ones had to be set
   smaller to survive. At three to six words each, every section head takes
   the same size and the page reads as eight equal landmarks. */
body.apex-hm .hm-lead {
    font-size: var(--hm-t-lg);
    line-height: 1.66; color: var(--hm-body); text-wrap: pretty;
}

body.apex-hm .hm-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(--hm-sans);
    text-decoration: none;
    transition: background .3s var(--hm-ease), color .3s var(--hm-ease),
                border-color .3s var(--hm-ease), box-shadow .3s var(--hm-ease),
                transform .3s var(--hm-ease);
}
body.apex-hm .hm-btn--solid {
    background: var(--hm-brand); border-color: var(--hm-brand); color: #fff;
    box-shadow: 0 2px 6px rgba(34, 69, 138, .26), 0 18px 34px -18px rgba(34, 69, 138, .7);
}
body.apex-hm .hm-btn--solid:hover {
    background: var(--hm-brand-deep); border-color: var(--hm-brand-deep);
    transform: translateY(-2px); box-shadow: var(--hm-lift-2);
}
body.apex-hm .hm-btn--quiet { background: #fff; border-color: var(--hm-line); color: var(--hm-ink) }
body.apex-hm .hm-btn--quiet:hover { border-color: var(--hm-brand); color: var(--hm-brand) }
body.apex-hm .hm-btn:hover { transform: translateY(-1px) }
body.apex-hm .hm-btn:hover .hm-arw { transform: translateX(3px) }
body.apex-hm .hm-arw {
    width: 15px; height: 9px; flex: none;
    transition: transform .3s var(--hm-ease);
    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(--hm-ease);
}
body.apex-hm a:hover .hm-arw { transform: translateX(3px) }


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

html.hm-anim body.apex-hm [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.hm-anim body.apex-hm [data-reveal].is-revealed { opacity: 1; transform: none; filter: none }


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

/* ══ 2 · THE BUILD ══════════════════════════════════════════════════════
   One drawn window, one sentence, and the three named service lines. This
   whole section is what is left of the left-hand door, which was two hundred
   words inside a box.

   ★ THE PAPER STAGE IS GONE. The window used to sit inside a paper panel:
   a card containing a card, which is the nesting the craft floor calls
   always wrong, and one more box on a page already accused of having too
   many. It sits on the white sheet now and its own shadow does the lifting,
   which is what a shadow is for. */
/* ★ THE BUILD GRID (pass 17). The window and the promise side by side:
   the caption used to float in a 460px void to the right of the screen,
   and the promise sat a full band below it. Together they fill the frame
   and the risk reversal stands beside the thing it de-risks. */
body.apex-hm .hm-build {
    display: grid;
    grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr);
    gap: clamp(1.8rem, 3.6vw, 3.4rem);
    align-items: stretch;
}
/* Advice and an excerpt from the documented Website Assistant test account. */
body.apex-hm .hm-advice { align-self: center }
body.apex-hm .hm-advice > p + p { margin-top: 1.2rem }
body.apex-hm .hm-advice > p:not(.hm-lead),
body.apex-hm .hm-proof > p {
    font-size: var(--hm-t-sm);
    line-height: 1.65;
    color: var(--hm-body);
    text-wrap: pretty;
}
body.apex-hm .hm-advice > .hm-go { margin-top: 1.8rem }
body.apex-hm .hm-proof {
    margin: 0;
    padding: clamp(1.5rem, 3vw, 2.4rem);
    border-radius: var(--a-r);
    background: var(--hm-card);
    display: grid;
    align-content: start;
    gap: 1.4rem;
}
body.apex-hm .hm-proof figcaption {
    font-size: var(--hm-t-xs);
    color: var(--hm-soft);
}
body.apex-hm .hm-proof blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    font: 400 var(--hm-t-lg)/1.55 var(--hm-sans);
    color: var(--hm-ink);
}
body.apex-hm .hm-proof .hm-go { justify-self: start; margin-top: 0 }
@media (max-width: 900px) {
    body.apex-hm .hm-build { grid-template-columns: minmax(0, 1fr); gap: 2rem }
}

body.apex-hm :is(.hm-btn, .hm-note a, .hm-go):focus-visible {
    outline: var(--a-focus);
    outline-offset: var(--a-focus-off);
    border-radius: 5px;
}

/* The owner passage is prose too, so it loses the list opener for the same
   reason. It keeps its single column and its spoken size: it is the page's
   one quiet beat and it should not turn into a second why. */
/* The apps section is one head and one link: no rule under a head with nothing below it. */
body.apex-hm .hm-apps__say .hm-go { margin-top: 1.4rem }
/* ════ Footer landing ════ */

body.apex-hm .nx-footer {
    position: relative; z-index: 2;
    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-hm .nx-footer__ridge { display: none }
body.apex-hm .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: 1080px) {
    body.apex-hm .hm-head { grid-template-columns: minmax(0, 1fr); gap: 1.2rem }
}

/* ════════════════════════════════════════════════════════════════════════
   PASS 13 · THE INDEX, THE FOUR, THE PROCESS, THE QUESTIONS
   Four sections added because the page said too little, not because it
   looked wrong. Same ledger grammar throughout: ruled rows, one white
   artefact per idea, nothing boxed that does not need a box.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 2 · THE THREE, DRAWN ─────────────────────────────────────────────
   Three windows across, never a screenshot. Each body writes itself in on
   the same --r stagger the Job screen uses. Resolved is the CSS default:
   with no script the windows print finished.
   ★ min-height is GONE (pass 17): the old equal-height 19.1rem boxes left
   the bottom 40% of every window empty, which is what "feels like a bunch
   of placeholders" was seeing. The windows are drawn FULL instead, and
   1fr rows keep the three caption baselines level. ── */
body.apex-hm .hm-apps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(2.6rem, 5vh, 3.6rem) clamp(1.4rem, 2.2vw, 2.1rem);
}
body.apex-hm .hm-ap { display: grid; grid-template-rows: 1fr auto; align-content: start; gap: 1.25rem }
body.apex-hm .hm-ap__win {
    display: grid; grid-template-rows: auto 1fr;
    background: #fff;
    border: 1px solid var(--hm-line);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(13, 35, 80, .04), 0 20px 42px -30px rgba(13, 35, 80, .5);
}
body.apex-hm .hm-ap__bar {
    display: flex; gap: 5px; align-items: center;
    padding: .62rem .85rem;
    background: #f7fafd;
    border-bottom: 1px solid var(--hm-hair);
}
body.apex-hm .hm-ap__bar i { width: 7px; height: 7px; border-radius: 50%; background: #d3deeb }
body.apex-hm .hm-ap__body {
    display: grid; align-content: start; gap: .68rem;
    padding: 1.15rem 1.25rem 1.35rem;
}
body.apex-hm .hm-ap__say { display: grid; gap: .45rem }

body.apex-hm .hm-ap__say h3 a {
    display: inline-flex; align-items: center; gap: .5rem;
    color: inherit; text-decoration: none;
    transition: color .3s var(--hm-ease);
}
body.apex-hm .hm-ap__say h3 a:is(:hover, :focus-visible) { color: var(--hm-brand) }
body.apex-hm .hm-ap__say h3 .hm-arw {
    opacity: 0; transform: translateX(-5px);
    transition: opacity .3s var(--hm-ease), transform .3s var(--hm-ease);
}
body.apex-hm .hm-ap__say h3 a:is(:hover, :focus-visible) .hm-arw { opacity: 1; transform: none }
body.apex-hm .hm-ap__say p {
    font-size: var(--hm-t-sm); line-height: 1.58; color: var(--hm-body); text-wrap: pretty;
}

/* the confirmation tick, always the go colour */
body.apex-hm .hm-art__ok {
    display: flex; align-items: flex-start; gap: .42rem;
    font-size: .82rem; line-height: 1.4; color: var(--hm-go);
}
body.apex-hm .hm-art__ok::before {
    content: ""; flex: none;
    width: 12px; height: 12px; margin-top: .12rem;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.6 6.4 4.4 9.2 10.4 3' fill='none' stroke='%23000' stroke-width='1.7' 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 12 12'%3E%3Cpath d='M1.6 6.4 4.4 9.2 10.4 3' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Website Assistant: the exchange, then the lead card it hands over.
   A first-name persona in a drawn demo follows the site's precedent
   (the solar page's "Jake M."); the number is masked dots, never real. */
body.apex-hm :is(.hm-chat__q, .hm-chat__a) {
    max-width: 90%;
    padding: .58rem .78rem;
    font-size: .92rem; line-height: 1.48;
    border-radius: 12px;
}
body.apex-hm .hm-chat__q {
    justify-self: end;
    background: var(--hm-card); color: var(--hm-ink);
    border-bottom-right-radius: 4px;
}
body.apex-hm .hm-chat__a {
    justify-self: start;
    background: var(--hm-brand); color: #fff;
    border-bottom-left-radius: 4px;
}
body.apex-hm .hm-chat__lead {
    display: grid; gap: .24rem;
    margin-top: .4rem;
    padding: .72rem .85rem .78rem;
    background: rgba(22, 106, 71, .06);
    border: 1px solid rgba(22, 106, 71, .3);
    border-radius: 10px;
}
body.apex-hm .hm-chat__leadtag {
    display: flex; align-items: center; gap: .42rem;
    font-size: .78rem; font-weight: 600; color: var(--hm-go);
}
body.apex-hm .hm-chat__leadtag::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: currentColor;
}
body.apex-hm .hm-chat__lead b {
    display: flex; align-items: baseline; gap: .6rem;
    font-size: .98rem; font-weight: 600; color: var(--hm-ink);
}
body.apex-hm .hm-chat__lead b i {
    font-style: normal; font-weight: 500;
    font-size: .84rem; letter-spacing: .02em;
    color: var(--hm-soft);
}
body.apex-hm .hm-chat__leadline { font-size: .85rem; line-height: 1.45; color: var(--hm-soft) }

/* Article authoring: what somebody typed, then the page that answers it,
   live. The result, not the outline (sell results, not process). */
body.apex-hm .hm-art__q {
    display: flex; align-items: center; gap: .55rem;
    padding: .52rem .72rem;
    font-size: .89rem; color: var(--hm-body);
    background: #fbfdff;
    border: 1px solid var(--hm-line); border-radius: 9px;
}
body.apex-hm .hm-art__q::before {
    content: ""; flex: none; width: 12px; height: 12px;
    background: var(--hm-soft);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='5' cy='5' r='3.6' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M7.8 7.8 11 11' stroke='%23000' stroke-width='1.5' stroke-linecap='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 12 12'%3E%3Ccircle cx='5' cy='5' r='3.6' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M7.8 7.8 11 11' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.apex-hm .hm-art__page {
    display: grid; gap: .38rem;
    padding: .85rem .95rem .95rem;
    border: 1px solid var(--hm-hair); border-radius: 10px;
    box-shadow: 0 2px 4px rgba(10, 23, 48, .04), 0 12px 24px -16px rgba(13, 35, 80, .4);
}
body.apex-hm .hm-art__page b {
    font-size: 1rem; font-weight: 600; line-height: 1.35;
    color: var(--hm-ink); letter-spacing: -.014em; text-wrap: pretty;
}
body.apex-hm .hm-art__page span { font-size: .85rem; line-height: 1.5; color: var(--hm-soft) }

/* Visibility audit: the question, and who got named when it was asked */
body.apex-hm .hm-vis__q {
    padding: .52rem .72rem;
    font-size: .89rem; color: var(--hm-body);
    background: #fbfdff;
    border: 1px solid var(--hm-line); border-radius: 9px;
}
body.apex-hm .hm-vis__rows li {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    padding: .44rem 0;
    font-size: .88rem;
    border-top: 1px solid var(--hm-hair);
}
body.apex-hm .hm-vis__rows li > span { color: var(--hm-soft) }
body.apex-hm .hm-vis__rows b { font-weight: 600 }
body.apex-hm .hm-vis__rows .is-no { color: var(--hm-hold) }
body.apex-hm .hm-vis__rows .is-yes { color: var(--hm-go) }
body.apex-hm .hm-vis__out { margin-top: .2rem; font-size: .82rem; line-height: 1.45; color: var(--hm-soft) }

/* ── the assembly. Leaf elements only: the wrapping lists are structure and
   must not fade as a block over the top of their own staggering rows. ── */
html.hm-anim body.apex-hm .hm-ap__body > :is(p, b, span, div),
html.hm-anim body.apex-hm .hm-ap__body li { opacity: 0; transform: translateY(8px) }
html.hm-anim body.apex-hm [data-reveal].is-revealed .hm-ap__body > :is(p, b, span, div),
html.hm-anim body.apex-hm [data-reveal].is-revealed .hm-ap__body li {
    opacity: 1; transform: none;
    transition: opacity .34s linear calc(.24s + var(--r, 0) * .1s),
                transform .44s var(--hm-ease) calc(.24s + var(--r, 0) * .1s);
}

/* ── 5 · THE PROCESS ──────────────────────────────────────────────────
   Numerals as structure, not as decoration: sized like a heading, coloured
   back to a tint so the eye reads the four steps and not the four digits.
   ── */
/* ── 6 · THE QUESTIONS ────────────────────────────────────────────────
   The site's documented <details> pattern, on rules rather than pills. The
   marker is a plus that unfolds into a minus; the answer animates only
   under hm-anim, so with no script an open question is simply open. ── */
/* ── 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. Six rows were hand-written in the template, each with its own marker span ── */
body.apex-hm .apex-faq {
    --faq-line:   var(--hm-hair);
    --faq-ink:    var(--hm-ink);
    --faq-body:   var(--hm-body);
    --faq-accent: var(--hm-brand);
}
/* The section head above draws its own hairline (.hm-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-hm .apex-faq__item:first-child { border-top: 0 }

/* ── responsive ── */
@media (max-width: 900px) {
    /* stacked, every row but the last is closed by the next row's top rule */
    body.apex-hm .hm-apps { grid-template-columns: minmax(0, 1fr) }
    /* stacked, nothing needs equalising, so the windows fit their contents */
    body.apex-hm .hm-ap { grid-template-rows: auto auto; justify-items: start }
    body.apex-hm .hm-ap__win { width: min(100%, 520px) }
}


/* ════════════════════════════════════════════════════════════════════════
   PASS 14 · THE ASKS
   The page was nine and a half screens with four buttons on it, two at the
   very top and two at the very bottom, and nothing in between. Every
   section that builds desire now ends in the ask that fits it, in a
   different register each time: a written link, a carried button, a
   promise, a door. Nothing here is a conversion band bolted to the bottom.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── the quiet ask. A written line, for sections whose ask is one step on
   from what the reader has just finished reading. ── */
body.apex-hm .hm-go {
    display: inline-flex; align-items: center; gap: .55rem;
    margin-top: clamp(2.2rem, 4vh, 3rem);
    font-size: var(--hm-t-sm); font-weight: 600;
    color: var(--hm-brand); text-decoration: none;
    transition: gap .3s var(--hm-ease), color .3s var(--hm-ease);
}
body.apex-hm .hm-go:is(:hover, :focus-visible) { gap: .9rem; color: var(--hm-brand-deep) }

/* ── the board's ask, on the same line as the sentence it answers.
   The out rule zeroes the count's own top margin and padding: inside this
   flex row they pushed the sentence 80px below the button's centre. ── */
/* ── the four apps' ask: the low friction door, said out loud ── */
/* same grammar as the board's ending: the sentence and the ask share one
   line, so the closing row fills the frame instead of stacking down the
   left with half the shell empty beside it */
body.apex-hm .hm-ask {
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: space-between;
    gap: 1.6rem 3rem;
    margin-top: clamp(3rem, 5.5vh, 4.2rem);
    padding-top: clamp(2.2rem, 4vh, 3rem);
    border-top: 1px solid var(--hm-hair);
}
body.apex-hm .hm-ask p {
    flex: 1 1 27rem; max-width: 52ch;
    font-size: var(--hm-t-lg); line-height: 1.5;
    color: var(--hm-ink); text-wrap: pretty;
}
body.apex-hm .hm-ask__acts { flex: none; display: flex; flex-wrap: wrap; gap: .9rem }

@media (max-width: 620px) {
    body.apex-hm .hm-ask__acts { width: 100% }
    body.apex-hm .hm-ask__acts .hm-btn { flex: 1 1 100%; justify-content: center }
}

/* ════════════════════════════════════════════════════════════════════════
   THE FUNNEL, 2026-11-03
   Owner: boring, messy, not selling, nothing to look at. Plan in
   docs/home-funnel-plan-2026-11-03.md. Before:
   _archive/home-pre-funnel-2026-11-03/.
   Order: the desk, the result, who built it, what you can buy, the apps,
   questions, the form.
   ═══════════════════════════════════════════════════════════════════════ */

body.apex-hm #hm-note,
body.apex-hm #hm-result { margin-top: var(--hm-gap-group) }
body.apex-hm #hm-result { margin-bottom: var(--hm-gap-group) }

/* ── THE DESK ─────────────────────────────────────────────────────────
   Owner, 3 Nov: out of the grey box, better widgets, blue strikes. The
   objects sit on the white page with their own shadows, and nothing pins:
   the lines keep arriving while the pile clears. They are sized in em off
   the desk's own width, so the pile is one picture at every size.
   --hm-vivid is the blue the apps themselves use. The brand blue goes navy
   at the weight of a strike line, which is what "use blue" was seeing.
   ★ Clear is the CSS default. html.hm-anim puts the pile back, and the
   script takes it off the desk a line at a time. ── */
body.apex-hm { --hm-vivid: #1f5fd6; --hm-obj-shadow: 0 0 0 1px rgba(13, 35, 80, .07), 0 2px 3px rgba(10, 23, 48, .08), 0 22px 38px -18px rgba(16, 40, 92, .42) }
body.apex-hm .hm-what__ask {
    margin-top: 1.3rem;
    font-size: var(--hm-t-lg); line-height: 1.5; color: var(--hm-body);
}
html:not(.hm-js) body.apex-hm .hm-what__tick { display: none }

body.apex-hm .hm-deskgrid { display: grid; gap: clamp(2rem, 4vw, 4.5rem) }
@media (min-width: 901px) {
    body.apex-hm .hm-deskgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
    body.apex-hm .hm-desk { grid-column: 2; grid-row: 1 }
    body.apex-hm .hm-linesbox { grid-column: 1; grid-row: 1 }
}
body.apex-hm .hm-desk {
    position: sticky; top: 6.5rem; z-index: 3;
    align-self: start;
    container-type: inline-size;
}
body.apex-hm .hm-desk__stage {
    position: relative;
    display: grid; place-items: center;
    font-size: clamp(7px, 2.5cqw, 15px);
}
/* a short screen caps the desk's height, so everything on it scales with the
   height too and keeps its place: the desk is 49.6em tall at 1 / 1.24 */
html.hm-anim body.apex-hm .hm-desk__stage { font-size: min(clamp(7px, 2.5cqw, 15px), calc((100svh - 8.5rem) / 49.6)) }
html.hm-anim body.apex-hm .hm-desk__stage {
    aspect-ratio: 1 / 1.24;
    max-height: calc(100svh - 8.5rem);
    width: 100%;
}
body.apex-hm .hm-desk__left {
    max-width: 14em;
    font-size: clamp(1.45rem, 2.5vw, 2.2rem); font-weight: 600; line-height: 1.14; letter-spacing: -.022em;
    color: var(--hm-ink); text-wrap: balance;
}
html.hm-anim body.apex-hm .hm-desk__left { opacity: 0; transition: opacity .7s var(--hm-ease) }
html.hm-anim body.apex-hm .hm-desk.is-clear .hm-desk__left { opacity: 1; transition-delay: .45s }

body.apex-hm .hm-obj { display: none }
html.hm-anim body.apex-hm .hm-obj {
    display: block;
    position: absolute;
    left: var(--x); top: var(--y); width: var(--w);
    color: #16233f;
    line-height: 1.3;
    box-shadow: var(--hm-obj-shadow);
    transform: rotate(var(--rot));
    transition: transform .95s var(--hm-ease), opacity .6s linear, box-shadow .4s var(--hm-ease);
    animation: hm-float var(--t, 7s) ease-in-out infinite alternate;
}
@keyframes hm-float { to { translate: 0 -.42em } }
html.hm-anim body.apex-hm .hm-obj.is-gone {
    opacity: 0;
    transform: translate(var(--ox), var(--oy)) rotate(var(--orot));
    animation-play-state: paused;
    pointer-events: none;
}
html.hm-anim body.apex-hm .hm-obj:is(.is-now, .is-hot):not(.is-gone) {
    transform: scale(1.035) rotate(calc(var(--rot) * .5));
    box-shadow: 0 3px 5px rgba(10, 23, 48, .1), 0 34px 52px -20px rgba(16, 40, 92, .55);
}
body.apex-hm .hm-obj b { font-weight: 600 }
body.apex-hm .hm-obj i { font-style: normal }
/* :where, or this outscores every object's own grid and flex rows */
body.apex-hm :where(.hm-obj > span, .hm-obj > b) { display: block }

/* 6 Nov, owner: "the phone should be unobstructed". It is the top layer and
   nothing sits on it. Later the same day: "The spreadsheet is not in view on
   all screen sizes". It is the puzzle, so it now sits in front at the bottom
   right, whole; the quote peeks out above the phone from behind, and the apps
   and the invoice pile up between. The desk is taller to make the room. */
body.apex-hm .hm-obj--quote { --x: 1%; --y: -2%; --w: 17em; --rot: -2deg; --ox: -10%; --oy: -60%; --orot: -8deg; --t: 6.4s; z-index: 2 }
body.apex-hm .hm-obj--wins { --x: 50%; --y: -2%; --w: 17em; --rot: -2deg; --ox: 50%; --oy: -40%; --orot: -10deg; --t: 7.6s; z-index: 4; box-shadow: none !important }
body.apex-hm .hm-obj--invoice { --x: 60%; --y: 27%; --w: 15em; --rot: 4deg; --ox: 55%; --oy: 25%; --orot: 18deg; --t: 6.9s; z-index: 3 }
/* --y keeps the whole phone inside a short stage, which max-height can squash. */
body.apex-hm .hm-obj--phone { --x: 2%; --y: max(1%, calc(100% - 36.4em)); --w: 17em; --rot: -4deg; --ox: -6%; --oy: 45%; --orot: -12deg; --t: 8.2s; z-index: 7 }
/* a window that was last clicked comes to the front of the pile, as windows do,
   and still sits under the phone (owner, 6 Nov) */
body.apex-hm .hm-obj.is-raised { z-index: 6 }
body.apex-hm .hm-obj--sheet { --x: 47%; --y: 58%; --w: 21em; --rot: 2deg; --ox: 45%; --oy: 60%; --orot: 12deg; --t: 8.8s; z-index: 5 }

/* 6 Nov, owner: the window buttons work. Red closes a window for good, yellow
   folds it to its title bar, green brings it up beside the phone (never over
   it). home.js sets --zt from the room the phone leaves. Not on the phone. */
body.apex-hm .hm-lights { display: inline-flex; flex: none; gap: .42em; margin-right: .25em }
body.apex-hm .hm-obj .hm-light {
    appearance: none;
    position: relative;
    display: grid; place-items: center;
    width: .8em; height: .8em;
    margin: 0; padding: 0;
    border: 0; border-radius: 50%;
    box-shadow: inset 0 0 0 .06em rgba(0, 0, 0, .16);
    font: inherit; line-height: 1;
    color: rgba(70, 20, 10, .75);
    cursor: pointer;
}
body.apex-hm .hm-obj .hm-light::after { content: ""; position: absolute; inset: -.3em }
/* a finger needs more than the dot; the gap between them stays shared */
@media (pointer: coarse) { body.apex-hm .hm-obj .hm-light::after { inset: -1em -.21em } }
body.apex-hm .hm-obj .hm-light::before { font-size: .72em; font-weight: 700; opacity: 0; transition: opacity .12s linear }
body.apex-hm .hm-obj .hm-lights:hover .hm-light::before { opacity: 1 }
body.apex-hm .hm-obj .hm-light--close { background: #ff5f57 }
body.apex-hm .hm-obj .hm-light--min { background: #febc2e; color: rgba(110, 60, 0, .8) }
body.apex-hm .hm-obj .hm-light--zoom { background: #28c840; color: rgba(0, 70, 10, .8) }
body.apex-hm .hm-obj .hm-light--close::before { content: "\00d7" }
body.apex-hm .hm-obj .hm-light--min::before { content: "\2212" }
body.apex-hm .hm-obj .hm-light--zoom::before { content: "+" }

/* yellow: down to the title bar */
body.apex-hm [data-win].is-min > :not([data-winbar]) { display: none }
body.apex-hm .hm-obj.hm-obj--invoice.is-min { padding-bottom: 1.2em }
body.apex-hm .hm-obj--invoice.is-min .hm-inv__top { margin-bottom: 0 }
body.apex-hm .hm-app.is-min { padding-bottom: 0 }
body.apex-hm .hm-app.is-min .hm-app__bar { border-bottom: 0 }

/* red: gone, and it stays gone */
html.hm-anim body.apex-hm .hm-obj.is-closing,
body.apex-hm .hm-app.is-closing {
    opacity: 0; scale: .86;
    pointer-events: none;
    transition: opacity .26s linear, scale .26s var(--hm-ease);
}
html.hm-anim body.apex-hm .hm-obj.is-shut,
body.apex-hm .hm-app.is-shut { display: none }

/* one app window up: its pile stands upright and still, above the rest, and
   the window itself carries the move (home.js sums it in stage pixels) */
html.hm-anim body.apex-hm .hm-obj.has-zoom.has-zoom:not(.is-gone, .is-closing) { z-index: 9; transform: none; animation: none }
body.apex-hm .hm-app.is-zoom {
    position: relative; z-index: 2;
    transform: var(--zt, none);
    transition: transform .55s var(--hm-ease), box-shadow .4s var(--hm-ease);
    box-shadow: 0 4px 8px rgba(10, 23, 48, .1), 0 44px 70px -26px rgba(16, 40, 92, .5);
}
body.apex-hm .hm-app { transition: transform .55s var(--hm-ease), opacity .26s linear, scale .26s var(--hm-ease) }

/* green: larger, upright and still, in the space beside the phone */
html.hm-anim body.apex-hm .hm-obj.is-zoom.is-zoom:not(.is-gone, .is-closing) {
    z-index: 9;
    transform: var(--zt, none);
    animation: none;
    transition: transform .55s var(--hm-ease), opacity .6s linear, box-shadow .4s var(--hm-ease);
    box-shadow: 0 4px 8px rgba(10, 23, 48, .1), 0 44px 70px -26px rgba(16, 40, 92, .5);
}

body.apex-hm .hm-caret::after,
body.apex-hm .hm-win:last-child .hm-win__field::after {
    content: ""; display: inline-block;
    width: 1.5px; height: 1em; margin-left: 1px;
    vertical-align: -.12em;
    background: var(--hm-vivid);
    animation: hm-caret 1.1s steps(2) infinite;
}
@keyframes hm-caret { 50% { opacity: 0 } }

/* the quote: a letterhead and a half-typed number */
body.apex-hm .hm-obj--quote {
    background: #fff;
    border-radius: .35em;
    overflow: hidden;
}
body.apex-hm .hm-quote__head {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: .85em 1.15em;
    background: var(--hm-vivid);
    color: #fff;
}
body.apex-hm .hm-quote__head b { font-size: 1.45em; letter-spacing: -.015em }
body.apex-hm .hm-quote__head i { font-size: .85em; opacity: .9 }
body.apex-hm .hm-quote__body { padding: .55em 1.15em 1.1em }
body.apex-hm .hm-paper__row {
    display: flex; justify-content: space-between; gap: 1em;
    padding: .55em 0;
    border-bottom: 1px solid #e3eaf4;
}
body.apex-hm .hm-paper__row i:first-child { color: #55637c }
body.apex-hm .hm-paper__row i:last-child { font-weight: 600 }
body.apex-hm .hm-paper__row--end { border-bottom: 0; font-weight: 600 }
body.apex-hm .hm-paper__row--end i:first-child { color: inherit }

/* the invoice: the number, how long it's been, a real stamp */
body.apex-hm .hm-obj--invoice {
    padding: 1.15em 1.2em 1.35em;
    background: #fff;
    border-top: .34em solid var(--hm-vivid);
    border-radius: .3em;
}
body.apex-hm .hm-invoice__no { font-size: .9em; color: #55637c }
body.apex-hm .hm-invoice__due { margin: .1em 0 .55em; font-size: 2em; font-weight: 600; letter-spacing: -.025em }
body.apex-hm .hm-invoice__stamp {
    width: max-content;
    margin: 1em 0 0 auto;
    padding: .28em .6em;
    border: .16em solid var(--hm-vivid); border-radius: .3em;
    font-size: 1.1em; font-weight: 600;
    letter-spacing: .07em; text-transform: uppercase;
    color: var(--hm-vivid);
    transform: rotate(-7deg);
}

/* the same customer, three times */
body.apex-hm .hm-win {
    display: block;
    background: #fff;
    border-radius: .62em;
    overflow: hidden;
    box-shadow: var(--hm-obj-shadow);
}
body.apex-hm .hm-win + .hm-win { position: relative; margin: -.9em 0 0 1.5em }
body.apex-hm .hm-win + .hm-win + .hm-win { margin-left: 3em }
body.apex-hm .hm-win__bar {
    display: flex; align-items: center; gap: .32em;
    padding: .5em .8em;
    background: #e8f0fd;
    font-size: .88em; font-weight: 600; color: #2a4a86;
}
body.apex-hm .hm-win__bar i {
    width: .55em; height: .55em;
    background: #b9cdf3; border-radius: 50%;
}
body.apex-hm .hm-win__bar i:last-of-type { margin-right: .4em }
body.apex-hm .hm-win__label { display: block; margin: .65em .9em 0; font-size: .82em; color: #55637c }
body.apex-hm .hm-win__field {
    display: block;
    margin: .28em .9em .95em;
    padding: .42em .6em;
    border: 1px solid #c5d3e8; border-radius: .34em;
}
body.apex-hm .hm-win:last-child .hm-win__field { border-color: var(--hm-vivid); box-shadow: 0 0 0 .18em rgba(31, 95, 214, .16) }

/* the phone: last night's call ringing out, then this morning's message.
   Real proportions, so the screen has room for both. */
html.hm-anim body.apex-hm .hm-obj--phone {
    aspect-ratio: 9 / 18.6;
    background: #0a1226;
    border: 1px solid #39496d;
    border-radius: 2.75em;
}
html.hm-anim body.apex-hm .hm-obj--phone[data-phone="ring"] {
    animation: hm-float var(--t, 7s) ease-in-out infinite alternate, hm-buzz 1.7s linear infinite;
}
@keyframes hm-buzz {
    0%, 28%, 100% { rotate: 0deg }
    3%, 9%, 15%, 21% { rotate: 1.1deg }
    6%, 12%, 18%, 24% { rotate: -1.1deg }
}
/* the side buttons */
body.apex-hm .hm-obj--phone::before,
body.apex-hm .hm-obj--phone::after {
    content: ""; position: absolute;
    width: .18em;
    background: #2b3a5c;
}
body.apex-hm .hm-obj--phone::before { right: -.18em; top: 25%; height: 11%; border-radius: 0 .2em .2em 0 }
body.apex-hm .hm-obj--phone::after { left: -.18em; top: 20%; height: 6%; border-radius: .2em 0 0 .2em; box-shadow: 0 2.8em 0 #2b3a5c }

/* The phone screens, shared by every phone on the site, are in apex-phone.css. */

/* ── what the phone has to say, written on the desk beside it ── */
body.apex-hm .hm-desk__note,
body.apex-hm .hm-desk__found { display: none }
html.hm-anim body.apex-hm .hm-desk__note {
    position: absolute; z-index: 8; left: 50%; top: 30%;
    display: block;
    width: 15em;
    padding: 1.6em 1.3em 1.2em;
    background: #fff;
    border-radius: .2em;
    box-shadow: 0 2px 4px rgba(10, 23, 48, .1), 0 1.4em 2.4em -1em rgba(16, 40, 92, .45);
    opacity: 0; visibility: hidden;
    transform: translateY(-1.4em) rotate(3deg) scale(.96);
    transition: opacity .3s linear, visibility 0s linear .3s, transform .5s var(--hm-ease);
}
/* a strip of tape holds it down */
html.hm-anim body.apex-hm .hm-desk__note::before {
    content: ""; position: absolute; top: -.75em; left: 50%;
    width: 5.5em; height: 1.5em; margin-left: -2.75em;
    background: rgba(214, 226, 246, .78);
    transform: rotate(-4deg);
}
html.hm-anim body.apex-hm .hm-desk:is([data-note="live"], [data-note="declined"], [data-note="camera"], [data-note="sent"]) .hm-desk__note {
    opacity: 1; visibility: visible; transform: rotate(3deg);
    transition-delay: .9s, 0s, .9s;
}
body.apex-hm .hm-desk__note p {
    display: none;
    margin: 0;
    font: 400 1.75em/1.15 "Apex Hand", cursive;
    color: #16233f;
}
body.apex-hm .hm-desk[data-note="live"] [data-note-for="live"],
body.apex-hm .hm-desk[data-note="declined"] [data-note-for="declined"],
body.apex-hm .hm-desk[data-note="camera"] [data-note-for="camera"],
body.apex-hm .hm-desk[data-note="sent"] [data-note-for="sent"] { display: block }
body.apex-hm :is(.hm-desk__note, .hm-desk__found) .hm-go { margin-top: .8em; font-size: 1.1em; white-space: nowrap }

/* the torch: the room goes dark and the light finds a message by the phone */
html.hm-anim body.apex-hm .hm-desk__dark {
    /* only the light: a warm pool thrown from the phone's corner, nothing dimmed (owner, 6 Nov) */
    position: absolute; z-index: 6; inset: -20% -6%;
    background: radial-gradient(circle at var(--lx, 30%) var(--ly, 10%), #ffeeb9 0, #fff3cf 10.5em, rgba(255, 245, 214, .85) 13.5em, rgba(255, 247, 222, .38) 17em, rgba(255, 248, 228, 0) 20.5em);
    /* it fades out at the desk's top edge rather than washing the line above */
    -webkit-mask-image: linear-gradient(to bottom, transparent 7%, #000 15%);
    mask-image: linear-gradient(to bottom, transparent 7%, #000 15%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .45s linear;
}
html.hm-anim body.apex-hm .hm-desk.is-dark .hm-desk__dark { opacity: 1 }
/* the message sits in the pool of light, masked by the same circle, so its
   far edge fades as the light does */
html.hm-anim body.apex-hm .hm-desk__found {
    position: absolute; z-index: 6; inset: -20% -6%;
    display: block;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(circle at var(--lx, 30%) var(--ly, 10%), #000 0, #000 10.5em, rgba(0, 0, 0, .5) 14.5em, transparent 18em);
    mask-image: radial-gradient(circle at var(--lx, 30%) var(--ly, 10%), #000 0, #000 10.5em, rgba(0, 0, 0, .5) 14.5em, transparent 18em);
    opacity: 0; visibility: hidden;
    transition: opacity .5s linear .15s, visibility 0s linear .65s;
}
html.hm-anim body.apex-hm .hm-desk.is-dark .hm-desk__found { opacity: 1; visibility: visible; transition-delay: .25s, 0s }
html.hm-anim body.apex-hm .hm-desk__words { position: absolute; left: calc(var(--lx, 30%) + 2.4em); top: calc(var(--ly, 10%) + 2.2em); width: 13em; pointer-events: auto }
body.apex-hm .hm-desk__found p { margin: 0; font: 400 1.75em/1.12 "Apex Hand", cursive; color: #16233f; text-wrap: balance }
body.apex-hm .hm-desk[data-note="sent"] .hm-desk__note .hm-go { display: none }
@media (max-width: 900px) {
    html.hm-anim body.apex-hm .hm-desk__note { left: 46%; top: 22% }
}

/* the Friday spreadsheet, on its seventh final version */
body.apex-hm .hm-obj--sheet {
    background: #fff;
    border-radius: .5em;
    overflow: hidden;
}
body.apex-hm .hm-sheet__name {
    padding: .55em .9em;
    background: #e8f0fd;
    font-size: .9em; font-weight: 600; color: #2a4a86;
}
body.apex-hm .hm-sheet__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
body.apex-hm .hm-sheet__grid i {
    position: relative;
    min-height: 2.15em;
    padding: .42em .75em;
    border-right: 1px solid #e3eaf4; border-bottom: 1px solid #e3eaf4;
    text-align: right;
}
body.apex-hm .hm-sheet__grid i:nth-child(-n+4) { background: var(--hm-vivid); border-color: rgba(255, 255, 255, .22); color: #fff; font-weight: 600 }
body.apex-hm .hm-sheet__grid i.is-on { background: #e8f0fd; outline: .14em solid var(--hm-vivid); outline-offset: -.14em }
body.apex-hm .hm-sheet__grid i.is-on::after {
    content: ""; position: absolute; right: -.2em; bottom: -.2em;
    width: .5em; height: .5em;
    background: var(--hm-vivid); border: 1px solid #fff;
}
body.apex-hm .hm-sheet__tabs { display: flex; gap: .3em; padding: .45em .6em; font-size: .85em }
body.apex-hm .hm-sheet__tabs i { padding: .12em .6em; background: #eef3fb; border-radius: .25em; color: #55637c; white-space: nowrap }
body.apex-hm .hm-sheet__tabs i:last-child { background: #e8f0fd; color: #2a4a86; font-weight: 600 }

/* ══ THE DESK, 6 Nov ══
   Owner: the phone is great, the rest needed to be as easy to read at a glance
   and as good to look at. Each object is now a thing you know on sight, with
   its one fact set big (9:42 pm, the same name three times, OVERDUE, Ctrl V),
   and anything that only needs to look like a document is grey bars. */

/* the quote, typed after dinner: a dark window at night */
body.apex-hm .hm-obj.hm-obj--quote {
    background: #0e1a36;
    border: 1px solid #2c3d63;
    border-radius: .8em;
    overflow: hidden;
    color: #fff;
}
body.apex-hm .hm-qw__bar {
    display: flex; align-items: center; gap: .36em;
    padding: .62em .85em;
    background: #16264a;
    font-size: .86em; color: #b9cdf3;
}
body.apex-hm .hm-qw__bar b { margin-left: .5em; font-weight: 500 }
body.apex-hm .hm-qw__night {
    display: flex; align-items: center; gap: .5em;
    padding: .7em 1em .55em;
}
body.apex-hm .hm-qw__night svg { display: block; width: 1.9em; height: 1.9em; flex: none }
body.apex-hm .hm-qw__night span { font-size: 1.15em; color: #b9cdf3 }
body.apex-hm .hm-qw__night b { font-size: 2.1em; font-weight: 600; letter-spacing: -.03em; color: #fff }
body.apex-hm .hm-qw__page {
    display: block;
    margin: 0 .8em .8em;
    padding: .9em 1em 1em;
    background: #fff;
    border-radius: .3em;
    color: #16233f;
}
body.apex-hm .hm-qw__title { display: block; margin-bottom: .3em; font-size: 1.35em; letter-spacing: -.015em }
body.apex-hm .hm-qw__row {
    display: flex; justify-content: space-between; gap: 1em;
    padding: .42em 0;
    border-bottom: 1px solid #e3eaf4;
}
body.apex-hm .hm-qw__row i:first-child { color: #55637c }
body.apex-hm .hm-qw__row i:last-child { font-weight: 600 }
body.apex-hm .hm-qw__row--end { border-bottom: 0; font-weight: 600 }
body.apex-hm .hm-qw__row--end i:first-child { color: inherit }
body.apex-hm .hm-qw__row:not(:has(.hm-caret)) i:last-child:empty { width: 3.4em; height: .7em; align-self: center; background: #edf2f9; border-radius: .2em }

/* grey bars wherever a document only needs to look like one */
body.apex-hm .hm-inv__skel { display: grid; gap: .38em; margin: .55em 0 .7em }
body.apex-hm .hm-inv__skel i { display: block; height: .5em; background: #e7edf6; border-radius: .25em }
body.apex-hm .hm-inv__skel i:nth-child(1) { width: 62% }
body.apex-hm .hm-inv__skel i:nth-child(2) { width: 44% }
body.apex-hm .hm-inv__skel i:nth-child(3) { width: 52% }

/* the invoice: the amount, the trail, and the stamp across it */
body.apex-hm .hm-obj.hm-obj--invoice {
    padding: 1.2em 1.25em 4.1em;
    background: #fff;
    border-top: 0;
    border-radius: .35em;
    overflow: hidden;
}
body.apex-hm .hm-inv__top { display: flex; align-items: center; gap: .6em; margin-bottom: .7em }
body.apex-hm .hm-inv__top > i { margin-left: auto }
body.apex-hm .hm-inv__top b { font-size: 1.35em; letter-spacing: -.015em }
body.apex-hm .hm-inv__top i { font-size: .9em; color: #55637c }
body.apex-hm .hm-inv__label { font-size: .85em; color: #55637c }
body.apex-hm .hm-inv__due { font-size: 2.15em; font-weight: 600; line-height: 1.1; letter-spacing: -.03em }
body.apex-hm .hm-inv__trail { display: grid; margin-top: .7em; border-top: 1px solid #e3eaf4 }
body.apex-hm .hm-inv__trail > span {
    display: flex; justify-content: space-between;
    padding: .4em 0;
    border-bottom: 1px solid #e3eaf4;
    font-size: .92em;
}
body.apex-hm .hm-inv__trail i { color: #55637c }
body.apex-hm .hm-inv__stamp {
    position: absolute; bottom: 1em; right: 1em;
    display: grid; justify-items: center;
    padding: .3em .7em .35em;
    border: .2em solid rgba(31, 95, 214, .82);
    outline: .1em solid rgba(31, 95, 214, .82); outline-offset: .16em;
    border-radius: .3em;
    font-size: 1.12em; font-weight: 700; line-height: 1;
    letter-spacing: .08em; text-transform: uppercase;
    color: rgba(31, 95, 214, .86);
    transform: rotate(-12deg);
    mix-blend-mode: multiply;
}
body.apex-hm .hm-inv__stamp small { margin-top: .25em; font-size: .52em; letter-spacing: .14em }

/* the same customer, typed three times: three apps you'd recognise as apps */
body.apex-hm .hm-obj.hm-obj--wins { background: none }
body.apex-hm .hm-app {
    display: block;
    background: #fff;
    border-radius: .7em;
    overflow: hidden;
    box-shadow: var(--hm-obj-shadow);
    padding-bottom: .5em;
}
body.apex-hm .hm-app + .hm-app { position: relative; margin: -1.1em 0 0 1.6em }
body.apex-hm .hm-app + .hm-app + .hm-app { margin-left: 3.2em }
body.apex-hm .hm-app__bar {
    display: flex; align-items: center; gap: .55em;
    padding: .6em .8em;
    border-bottom: 1px solid #e3eaf4;
}
body.apex-hm .hm-app__icon {
    display: grid; place-items: center; flex: none;
    width: 1.9em; height: 1.9em;
    border-radius: .5em;
    background: #1f5fd6;
}
body.apex-hm .hm-app--1 .hm-app__icon { background: #0f3a8c }
body.apex-hm .hm-app--2 .hm-app__icon { background: #4f86ea }
body.apex-hm .hm-app__icon svg { display: block; width: 1.25em; height: 1.25em }
body.apex-hm .hm-app__bar b { font-size: .98em }
/* "New customer" gave way to the window buttons (6 Nov) */
body.apex-hm .hm-app__bar em { display: none }
body.apex-hm :is(.hm-app__bar b, .hm-app__bar em, .hm-inv__top i) { white-space: nowrap }
body.apex-hm .hm-app__row {
    display: grid; grid-template-columns: 4em minmax(0, 1fr); align-items: center;
    padding: .32em .8em 0;
}
body.apex-hm .hm-app__row > i:first-child { font-size: .82em; color: #55637c }
body.apex-hm .hm-app__val {
    display: block;
    min-height: 2.05em;
    padding: .38em .55em;
    border: 1px solid #c5d3e8; border-radius: .34em;
    font-size: 1.04em; font-weight: 600;
}
body.apex-hm .hm-app--2 .hm-app__val.hm-caret { border-color: var(--hm-vivid); box-shadow: 0 0 0 .18em rgba(31, 95, 214, .16) }

/* the Friday spreadsheet: a real grid, a column cut, and the keys doing it */
body.apex-hm .hm-obj.hm-obj--sheet { border-radius: .55em; overflow: visible; background: #fff }
body.apex-hm .hm-xl__bar {
    display: flex; align-items: center; gap: .55em;
    padding: .55em .85em;
    background: var(--hm-vivid);
    border-radius: .55em .55em 0 0;
    color: #fff; font-size: .92em;
}
body.apex-hm .hm-xl__icon svg { display: block; width: 1.35em; height: 1.35em }
body.apex-hm .hm-xl__fx {
    display: flex; align-items: center; gap: .7em;
    padding: .38em .85em;
    border-bottom: 1px solid #e3eaf4;
    font: 500 .86em/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
    color: #2a4a86;
}
body.apex-hm .hm-xl__fx > i { font: italic 600 1em/1 Georgia, serif; color: #55637c }
body.apex-hm .hm-xl__grid { display: grid; grid-template-columns: 2.1em repeat(4, minmax(0, 1fr)) }
body.apex-hm .hm-xl__grid > i {
    position: relative;
    min-height: 2.05em;
    padding: .4em .7em;
    border-right: 1px solid #e3eaf4; border-bottom: 1px solid #e3eaf4;
    text-align: right;
}
body.apex-hm .hm-xl__grid > i.is-ix { padding: .4em 0; background: #f3f6fb; color: #7a879e; font-size: .82em; text-align: center; min-height: 2.5em }
body.apex-hm .hm-xl__grid > i.is-head { font-weight: 600; background: #e8f0fd; color: #2a4a86 }
/* marching ants round the column being copied */
body.apex-hm .hm-xl__grid > i.is-ants {
    background:
        linear-gradient(90deg, var(--hm-vivid) 50%, transparent 0) 0 0 / .5em .14em repeat-x,
        linear-gradient(90deg, var(--hm-vivid) 50%, transparent 0) 0 100% / .5em .14em repeat-x,
        linear-gradient(0deg, var(--hm-vivid) 50%, transparent 0) 0 0 / .14em .5em repeat-y,
        linear-gradient(0deg, var(--hm-vivid) 50%, transparent 0) 100% 0 / .14em .5em repeat-y,
        #eef4fe;
    background-size: .5em .14em, .5em .14em, .14em .5em, .14em .5em, auto;
}
body.apex-hm .hm-xl__grid > i.is-ants:not(.is-ants-top) { background-size: .5em 0, .5em .14em, .14em .5em, .14em .5em, auto }
body.apex-hm .hm-xl__grid > i.is-ants:not(.is-ants-end) { background-size: .5em .14em, .5em 0, .14em .5em, .14em .5em, auto }
body.apex-hm .hm-xl__grid > i.is-ants:not(.is-ants-top):not(.is-ants-end) { background-size: .5em 0, .5em 0, .14em .5em, .14em .5em, auto }
html.hm-anim body.apex-hm .hm-xl__grid > i.is-ants { animation: hm-ants .9s linear infinite }
@keyframes hm-ants {
    to { background-position: .5em 0, -.5em 100%, 0 -.5em, 100% .5em, 0 0 }
}
body.apex-hm .hm-xl__grid > i.is-on { background: #fff; outline: .16em solid var(--hm-vivid); outline-offset: -.16em }
body.apex-hm .hm-xl__grid > i.is-on::after {
    content: ""; position: absolute; right: -.22em; bottom: -.22em;
    width: .5em; height: .5em;
    background: var(--hm-vivid); border: 1px solid #fff;
}
body.apex-hm .hm-xl__tabs { display: flex; gap: .3em; padding: .45em .6em; font-size: .85em }
body.apex-hm .hm-obj .hm-xl__tabs button {
    appearance: none; margin: 0;
    padding: .12em .6em;
    border: 0; border-radius: .25em;
    background: #eef3fb;
    font: inherit; color: #55637c; white-space: nowrap;
    cursor: pointer;
}
body.apex-hm .hm-obj .hm-xl__tabs button:hover { background: #e3ebf8 }
body.apex-hm .hm-obj .hm-xl__tabs button.is-on { background: #e8f0fd; color: #2a4a86; font-weight: 600; box-shadow: inset 0 -.14em 0 var(--hm-vivid) }

/* 6 Nov, the puzzle: every cell can be picked and shows its formula above;
   the empty one on the front tab takes a number */
body.apex-hm [data-xl] .hm-xl__grid > i[data-cell] { cursor: cell }
body.apex-hm [data-xl] .hm-xl__grid > i.is-err { color: #9a2a1b; font-weight: 600 }
body.apex-hm [data-xl]:not(.is-front) .hm-xl__grid > i.is-ants { animation: none; background: none }
body.apex-hm [data-xl]:not(.is-front) .hm-keys { display: none }
body.apex-hm .hm-xl__grid > i.is-on.is-wrong { background: #fdecea; outline-color: #c4321f; color: #8f1d10 }
body.apex-hm .hm-xl__grid > i.is-on.is-wrong::after { background: #c4321f }
body.apex-hm .hm-obj .hm-xl__edit {
    position: absolute; right: 0; top: 0; z-index: 2;
    box-sizing: border-box;
    margin: 0; padding: 0 .7rem;
    border: 0; outline: 0; border-radius: 0;
    background: #fff;
    font: 600 16px/1 var(--hm-sans);
    color: #16233f; text-align: left;
    box-shadow: inset 0 0 0 2px var(--hm-vivid);
    transform-origin: 100% 0;
}
/* while another tab is open to point at, the formula is typed in the bar */
body.apex-hm [data-xl-fx] { position: relative; flex: 1; min-width: 0; min-height: 1.2em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
body.apex-hm .hm-obj .hm-xl__edit.is-fx { left: 0; right: auto; transform-origin: 0 0; box-shadow: none; padding: 0; background: #eef4fe; font: 500 16px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #2a4a86 }

/* solved: the sheet clears and says so */
body.apex-hm .hm-xl__won { display: none }
body.apex-hm .hm-obj--sheet.is-won > :not([data-winbar], .hm-xl__won) { display: none }
body.apex-hm .hm-obj--sheet.is-won .hm-xl__won { display: grid; gap: .7em; padding: 1.2em 1.3em 1.4em; font-size: .9em; line-height: 1.45; color: #16233f }
body.apex-hm .hm-xl__won b { font-size: 1.3em; line-height: 1.2; letter-spacing: -.015em }
body.apex-hm .hm-xl__won span { display: block; text-wrap: pretty }
body.apex-hm .hm-xl__won small { font-size: .86em; color: #55637c }

/* the torch says something else once the puzzle has started */
body.apex-hm .hm-desk__pz { display: none }
body.apex-hm .hm-desk.is-puzzle .hm-desk__words > :not(.hm-desk__pz) { display: none }
body.apex-hm .hm-desk.is-puzzle .hm-desk__pz { display: block }

/* confetti for the win, over everything, gone once it lands */
.hm-confetti { position: fixed; inset: 0; z-index: 2147483000; overflow: hidden; pointer-events: none }
.hm-confetti i {
    position: absolute; top: -4vh;
    width: .55rem; height: .9rem;
    border-radius: 1px;
    animation: hm-confetti var(--d, 3s) cubic-bezier(.3, .2, .6, 1) var(--w, 0s) both;
}
.hm-confetti i:nth-child(3n) { width: .4rem; height: .4rem; border-radius: 50% }
@keyframes hm-confetti {
    0% { transform: translate(0, 0) rotate(0); opacity: 1 }
    85% { opacity: 1 }
    100% { transform: translate(var(--x, 0), 110vh) rotate(var(--r, 540deg)); opacity: 0 }
}
/* real keycaps, Ctrl held, C then V */
body.apex-hm .hm-keys {
    position: absolute; right: .4em; bottom: -2.5em;
    display: flex; gap: .4em;
    transform: rotate(-3deg);
}
body.apex-hm .hm-keys kbd {
    display: grid; place-items: center;
    min-width: 2.9em; height: 2.9em;
    padding: 0 .6em;
    background: linear-gradient(180deg, #ffffff, #eef2f8);
    border: 1px solid #c9d4e6; border-radius: .5em;
    box-shadow: 0 .26em 0 #c3cee0, 0 .5em 1em -.3em rgba(16, 40, 92, .4);
    font: 600 1.05em/1 inherit; font-family: inherit;
    color: #16233f;
}
body.apex-hm .hm-keys kbd:first-child { min-width: 4.2em }
html.hm-anim body.apex-hm .hm-keys kbd:first-child { animation: hm-key-hold 4s ease-in-out infinite }
html.hm-anim body.apex-hm .hm-keys__c { animation: hm-key-c 4s ease-in-out infinite }
html.hm-anim body.apex-hm .hm-keys__v { animation: hm-key-v 4s ease-in-out infinite }
@keyframes hm-key-hold {
    0%, 8%, 88%, 100% { transform: none; box-shadow: 0 .26em 0 #c3cee0, 0 .5em 1em -.3em rgba(16, 40, 92, .4) }
    14%, 80% { transform: translateY(.2em); box-shadow: 0 .06em 0 #c3cee0, 0 .2em .5em -.3em rgba(16, 40, 92, .4) }
}
@keyframes hm-key-c {
    0%, 20%, 34%, 100% { transform: none; box-shadow: 0 .26em 0 #c3cee0, 0 .5em 1em -.3em rgba(16, 40, 92, .4) }
    25%, 29% { transform: translateY(.2em); box-shadow: 0 .06em 0 #c3cee0; background: #e8f0fd }
}
@keyframes hm-key-v {
    0%, 52%, 66%, 100% { transform: none; box-shadow: 0 .26em 0 #c3cee0, 0 .5em 1em -.3em rgba(16, 40, 92, .4) }
    57%, 61% { transform: translateY(.2em); box-shadow: 0 .06em 0 #c3cee0; background: #e8f0fd }
}

/* ── the lines. Each is a real control: big words, a ring that fills. ── */
body.apex-hm .hm-chores {
    display: grid;
    gap: clamp(1.6rem, 5vh, 3rem);
}
body.apex-hm .hm-chore__btn {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(.8rem, 1.4vw, 1.25rem);
    width: 100%;
    padding: 0;
    background: none; border: 0;
    font: 400 clamp(1.35rem, 2.3vw, 2rem)/1.2 var(--hm-sans);
    letter-spacing: -.018em;
    color: var(--hm-ink);
    text-align: left; text-wrap: pretty;
    cursor: pointer;
}
html:not(.hm-js) body.apex-hm .hm-chore__btn { cursor: default; grid-template-columns: minmax(0, 1fr) }
html:not(.hm-js) body.apex-hm .hm-chore__ring { display: none }
body.apex-hm .hm-chore__ring {
    width: .62em; height: .62em;
    margin-top: .27em;
    border: 2px solid rgba(31, 95, 214, .42);
    border-radius: 50%;
    transition: border-color .3s var(--hm-ease), background .3s var(--hm-ease), box-shadow .3s var(--hm-ease);
}
body.apex-hm .hm-chore__btn:hover .hm-chore__ring { border-color: var(--hm-vivid); background: rgba(31, 95, 214, .1) }
body.apex-hm .hm-chore__btn[aria-pressed="true"] .hm-chore__ring {
    background: var(--hm-vivid); border-color: var(--hm-vivid);
    box-shadow: inset 0 0 0 .1em #fff;
}
body.apex-hm .hm-chore__t {
    color: var(--hm-soft);
    background: linear-gradient(var(--hm-vivid), var(--hm-vivid)) 0 58% / 100% .085em no-repeat;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
html.hm-anim body.apex-hm .hm-chore:not(.is-struck) .hm-chore__t {
    color: var(--hm-ink);
    background-size: 0 .085em;
}
html.hm-anim body.apex-hm .hm-chore__t {
    transition: background-size .9s var(--hm-ease), color .9s var(--hm-ease) .25s;
}
body.apex-hm .hm-chore__btn[aria-pressed="true"] .hm-chore__t { color: var(--hm-ink) }
body.apex-hm .hm-chore__btn:focus-visible { outline: var(--a-focus); outline-offset: var(--a-focus-off); border-radius: 5px }

body.apex-hm .hm-picked {
    min-height: 1.6em;
    margin-top: 1.4rem;
    font-size: var(--hm-t-lg); line-height: 1.5; color: var(--hm-ink);
}
body.apex-hm .hm-picked:empty { visibility: hidden }

/* ── THE RESULT ───────────────────────────────────────────────────────
   Two truths in one cell, so the status strip never changes height. ── */
body.apex-hm .hm-result {
    display: grid;
    grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}
/* the number set as type, struck in the same blue as the desk's lines */
body.apex-hm .hm-main .hm-result__was {
    font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 600; line-height: 1.1; letter-spacing: -.022em;
    color: var(--hm-soft);
}
body.apex-hm .hm-result__was s {
    text-decoration: line-through;
    text-decoration-color: var(--hm-vivid);
    text-decoration-thickness: .1em;
}
body.apex-hm .hm-main .hm-result__now {
    margin-top: .25rem;
    font-size: clamp(2.5rem, 5vw, 4.4rem); font-weight: 600; line-height: 1; letter-spacing: -.035em;
    color: var(--hm-vivid); text-wrap: balance;
}
body.apex-hm .hm-main .hm-result__case {
    margin-top: 1.5rem; max-width: 26rem;
    font-size: var(--hm-t-lg); line-height: 1.55; color: var(--hm-body); text-wrap: pretty;
}

/* The week, drawn like the calendar everyone already has. CSS default is After;
   home.js adds is-before and the switch moves between them. */
body.apex-hm .hm-week {
    margin: 0;
    background: #fff;
    border: 1px solid var(--a-card-line);
    border-radius: var(--a-r);
    overflow: hidden;
    box-shadow: var(--hm-lift);
}
body.apex-hm .hm-week__bar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .8rem 1.1rem;
    border-bottom: 1px solid var(--hm-hair);
    font-size: .98rem; font-weight: 600; color: var(--hm-ink);
}
body.apex-hm .hm-week__label { display: grid }
body.apex-hm .hm-week__label > span { grid-area: 1 / 1; transition: opacity .4s var(--hm-ease) }
body.apex-hm .hm-week__before { opacity: 0 }
body.apex-hm .hm-week.is-before .hm-week__before { opacity: 1 }
body.apex-hm .hm-week.is-before .hm-week__after { opacity: 0 }
body.apex-hm .hm-week__switch {
    display: flex; flex: none;
    padding: 3px;
    background: #eef3fb;
    border-radius: 10px;
}
body.apex-hm .hm-week__switch button {
    min-height: 2.75rem; padding: 0 1rem;
    background: none; border: 0; border-radius: 8px;
    font: 600 .92rem/1 var(--hm-sans); color: var(--hm-body);
    cursor: pointer;
    transition: background .25s var(--hm-ease), color .25s var(--hm-ease);
}
body.apex-hm .hm-week__switch button[aria-pressed="true"] { background: var(--hm-vivid); color: #fff }
body.apex-hm .hm-week__switch button:focus-visible { outline: var(--a-focus); outline-offset: 2px }

body.apex-hm .hm-week__days {
    display: grid;
    grid-template-columns: 1.7rem repeat(5, minmax(0, 1fr));
    padding: .9rem 1.1rem 1.2rem .6rem;
    position: relative;
}
body.apex-hm .hm-week__days b { font-weight: 600 }
body.apex-hm .hm-week__days i { font-style: normal }
body.apex-hm .hm-week__day > b,
body.apex-hm .hm-week__hours > b {
    display: block;
    padding-bottom: .5rem;
    font-size: .85rem; color: var(--hm-soft);
    text-align: center;
}
body.apex-hm .hm-week__hours > span { display: grid; grid-template-rows: repeat(8, 1fr); height: clamp(16rem, 36vh, 21rem) }
body.apex-hm .hm-week__hours i { font-size: .74rem; line-height: 1; color: var(--hm-soft); text-align: right; padding-right: .4rem }
/* eight rules per column, eight hours per day: the grid is to scale */
body.apex-hm .hm-week__col {
    position: relative; display: block;
    height: clamp(16rem, 36vh, 21rem);
    border-left: 1px solid var(--hm-hair);
    background: repeating-linear-gradient(to bottom, var(--hm-hair) 0 1px, transparent 1px 12.5%);
}
body.apex-hm .hm-week__day:last-child .hm-week__col { border-right: 1px solid var(--hm-hair) }
body.apex-hm .hm-week__block {
    position: absolute; left: .25rem; right: .25rem;
    display: block;
    height: 25%;
    padding: .45rem .5rem;
    background: var(--hm-vivid);
    border-radius: 7px;
    font-size: .76rem; line-height: 1.25; color: #fff;
    overflow: hidden;
    opacity: 0; transform: scale(.94);
    transition: opacity .55s var(--hm-ease), transform .55s var(--hm-ease);
    transition-delay: calc(var(--i) * 90ms);
}
body.apex-hm .hm-week__block b { display: block; font-size: 1.14em }
body.apex-hm .hm-week.is-before .hm-week__block { opacity: 1; transform: none }
/* Lachlan, 4 Nov: the pen notes on each block only confused people. The blocks
   go, the week is empty, and it says so once. */
body.apex-hm .hm-week__free {
    position: absolute; left: 12%; right: 4%; top: 36%;
    margin: 0; text-align: center;
    font: 400 clamp(2.2rem, 4.2vw, 3.6rem)/1 "Apex Hand", cursive; color: var(--hm-vivid);
    transform: rotate(-3deg);
    pointer-events: none;
    transition: opacity .5s linear .8s;
}
body.apex-hm .hm-week.is-before .hm-week__free { opacity: 0; transition-delay: 0s }
body.apex-hm .hm-week__minute {
    /* Monday, first thing (owner, 6 Nov) */
    position: absolute; left: .25rem; right: .25rem; top: 3%; z-index: 1;
    display: block;
    padding-top: .3rem;
    border-top: 2px solid var(--hm-vivid);
    font-size: .76rem; font-weight: 600; line-height: 1.2; color: var(--hm-vivid);
    transition: opacity .4s linear .6s;
}
body.apex-hm .hm-week.is-before .hm-week__minute { opacity: 0; transition-delay: 0s }
@media (max-width: 560px) {
    body.apex-hm .hm-week__bar { flex-wrap: wrap }
    body.apex-hm .hm-week__block { padding: .3rem .2rem }
    body.apex-hm .hm-week__block b { font-size: .68rem }
    body.apex-hm .hm-week__minute { font-size: .66rem }
    body.apex-hm .hm-week__days { padding-inline: .3rem .6rem }
}

/* ── WHO BUILT IT. The portrait at a size that can carry a page; there's
   no caption, the heading says who it is. ── */
body.apex-hm .hm-founder {
    display: grid;
    grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}
body.apex-hm .hm-face { margin: 0 }
body.apex-hm .hm-face img {
    display: block; width: 100%; height: auto;
    border-radius: var(--a-r);
    box-shadow: var(--hm-lift-2);
}
body.apex-hm .hm-note h2 { font-size: var(--a-t-head) }
body.apex-hm .hm-note > div { margin-top: clamp(1.4rem, 3vh, 2rem); max-width: 38rem }
body.apex-hm .hm-note p { font-size: var(--hm-t-lg); line-height: 1.58; text-wrap: pretty }
body.apex-hm .hm-note p + p { margin-top: 1.1em }
body.apex-hm .hm-note .hm-go { margin-top: 1.7rem }

/* ── WHAT YOU CAN BUY. Each service is one whole link. ── */
/* Three doors, each with a job off the desk once it's fixed. */
/* Lachlan, 4 Nov: too long to scroll. Three across, each with its heading, one
   line, then the thing, on subgrid so the things start level. */
body.apex-hm .hm-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(1.4rem, 2.6vw, 2.6rem); margin: 0; padding: 0; list-style: none }
body.apex-hm .hm-door { display: grid; grid-row: span 2; grid-template-rows: subgrid; gap: 1.5rem }
body.apex-hm .hm-main .hm-door h3 { font-size: clamp(1.5rem, 2.3vw, 1.95rem); line-height: 1.1; letter-spacing: -.022em }
body.apex-hm .hm-door h3 a { color: inherit; text-decoration: none; transition: color .3s var(--hm-ease) }
body.apex-hm .hm-door h3 a:hover { color: var(--hm-brand) }
body.apex-hm .hm-door__say p { margin-top: .6rem; max-width: 26rem; font-size: 1.06rem; line-height: 1.45; color: var(--hm-body); text-wrap: pretty }
body.apex-hm .hm-door__say .hm-go { margin-top: .7rem }
body.apex-hm .hm-door__thing { width: 100%; font-size: 14px; line-height: 1.4; color: #16233f }
body.apex-hm .hm-door__thing > * { height: 100%; box-sizing: border-box }
body.apex-hm .hm-door__thing i { font-style: normal }
body.apex-hm .hm-door__thing b { font-weight: 600 }
body.apex-hm :where(.hm-door__thing span) { display: block }

body.apex-hm .hm-mail {
    padding: 1.4em 1.5em 1.6em;
    background: #fff;
    border: 1px solid var(--a-card-line);
    border-radius: 16px;
    box-shadow: var(--hm-obj-shadow);
}
body.apex-hm .hm-mail__ask { margin-top: .8em; padding: .7em .9em; background: #eef4fe; border-radius: 10px; font-weight: 500 }
body.apex-hm .hm-mail__subject { font-size: 1.2em; font-weight: 600; line-height: 1.25; letter-spacing: -.012em }
body.apex-hm .hm-mail__from { display: flex; align-items: center; gap: .65em; margin-top: 1em; color: #55637c }
body.apex-hm .hm-mail__from img { width: 2.5em; height: 2.5em; object-fit: cover; object-position: 50% 22%; border-radius: 50%; flex: none }
body.apex-hm .hm-mail__from b { color: #16233f }
body.apex-hm .hm-mail__from i { margin-left: auto; font-size: .9em }
body.apex-hm .hm-mail__body { margin-top: 1.1em; font-size: 1.04em; line-height: 1.5 }
body.apex-hm .hm-mail__body span + span { margin-top: .75em }
body.apex-hm .hm-mail__body span:last-child { font-weight: 600 }

body.apex-hm .hm-sync .hm-win { border: 1px solid var(--a-card-line) }
body.apex-hm .hm-sync .hm-win + .hm-win { margin: -.5em 0 0 2.2em }
body.apex-hm .hm-sync .hm-win + .hm-win + .hm-win { margin-left: 4.4em }
body.apex-hm .hm-sync .hm-win__bar em { margin-left: auto; font-style: normal; font-weight: 500; color: var(--hm-vivid) }
body.apex-hm .hm-sync .hm-win__field > span { overflow: hidden; white-space: nowrap; width: 100% }
body.apex-hm .hm-sync .hm-win:last-child .hm-win__field { border-color: #c5d3e8; box-shadow: none }
body.apex-hm .hm-sync .hm-win:last-child .hm-win__field::after { content: none }
body.apex-hm .hm-sync .hm-win:first-child .hm-win__field > span { width: 11.5em; animation: hm-sync-type 7s steps(21) infinite }
body.apex-hm .hm-sync .hm-win + .hm-win .hm-win__field > span { animation: hm-sync-fill 7s linear infinite }
body.apex-hm .hm-sync .hm-win + .hm-win .hm-win__bar em { animation: hm-sync-fill 7s linear infinite }
@keyframes hm-sync-type { 0%, 4% { width: 0 } 34%, 100% { width: 11.5em } }
@keyframes hm-sync-fill { 0%, 38% { opacity: 0 } 41%, 100% { opacity: 1 } }

body.apex-hm .hm-done {
    position: relative;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--hm-obj-shadow);
    transform: rotate(-1.4deg);
}
body.apex-hm .hm-done .hm-quote__body { padding-bottom: 1.4em }
body.apex-hm .hm-done .hm-paper__row--end { font-size: 1.15em }
body.apex-hm .hm-done .hm-invoice__stamp {
    position: absolute; left: 5.5em; bottom: .85em;
    margin: 0;
    background: #fff;
    font-size: .95em;
}
@media (max-width: 900px) {
    /* On a phone three stacked cards were 1,600px, so they swipe, with the next
       one showing at the edge so it's plain there's more. */
    body.apex-hm .hm-doors {
        display: flex; gap: 1rem;
        margin-inline: calc(-1 * var(--hm-bleed, 15px)); padding: 0 var(--hm-bleed, 15px) 1.6rem;
        overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--hm-bleed, 15px);
        scrollbar-width: none;
    }
    body.apex-hm .hm-doors::-webkit-scrollbar { display: none }
    body.apex-hm .hm-door { flex: 0 0 min(84%, 24rem); grid-row: auto; grid-template-rows: none; align-content: start; gap: 1.1rem; scroll-snap-align: start }
    body.apex-hm .hm-door__thing > * { height: auto }
    body.apex-hm .hm-rows__after { margin-top: .6rem }
}
@media (max-width: 520px) {
    body.apex-hm .hm-door__thing { font-size: 13.5px }
    body.apex-hm .hm-sync .hm-win + .hm-win { margin-left: 1em }
    body.apex-hm .hm-sync .hm-win + .hm-win + .hm-win { margin-left: 2em }
}
@media (prefers-reduced-motion: reduce) {
    body.apex-hm .hm-sync * { animation: none !important }
}
body.apex-hm .hm-rows__after {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.2rem;
    margin-top: clamp(1.8rem, 4vh, 2.6rem);
    font-size: var(--hm-t-lg); line-height: 1.5;
}

/* ── READY-TO-GO SOFTWARE. Owner, 3 Nov: don't call them apps, sell the
   sales. Website Assistant leads because it's the easy first step, in words
   until its chat is worth showing. The other two carry approved real screens. ── */
body.apex-hm .hm-ready__lead {
    display: grid;
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: 2.4rem clamp(2rem, 5vw, 5rem);
    align-items: center;
}
/* A real sized phone outside the desk: 20em at 15px is about 300 wide. Screen
   parts are shared with the desk's phone. */
body.apex-hm .hm-handset {
    position: relative;
    justify-self: center;
    width: 20em;
    aspect-ratio: 9 / 18.6;
    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-hm .hm-handset b { font-weight: 600 }
/* its own spans only: the shared screens inside it set their own */
body.apex-hm :where(.hm-handset .hm-phone__screen > span, .hm-human__top span, .hm-phone__note > span) { display: block }
body.apex-hm .hm-handset[data-phone="missed"] .hm-phone__note--msg { opacity: 0; transform: translateY(-1.8em) scale(.96) }
body.apex-hm .hm-handset .hm-phone__note--msg { margin-top: 1.6em }
body.apex-hm .hm-ready__list { display: grid; gap: clamp(1.6rem, 3.4vh, 2.4rem) }
body.apex-hm .hm-main .hm-ready__list h3 { font-size: clamp(1.4rem, 2.1vw, 1.8rem); line-height: 1.14; letter-spacing: -.02em }
body.apex-hm .hm-ready__list h3 a { color: inherit; text-decoration: none; transition: color .3s var(--hm-ease) }
body.apex-hm .hm-ready__list h3 a:hover { color: var(--hm-brand) }
body.apex-hm .hm-ready__list p { margin-top: .5rem; max-width: 34rem; font-size: 1.06rem; line-height: 1.5; color: var(--hm-body); text-wrap: pretty }
body.apex-hm .hm-ready__say .hm-btn { margin-top: 1.1rem }
body.apex-hm .hm-ready__app { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1.4rem; align-items: start; padding-top: clamp(1.6rem, 3.4vh, 2.4rem); border-top: 1px solid var(--hm-hair) }
body.apex-hm .hm-ready__app .hm-go { margin-top: .5rem }
/* the top of a real screen, cropped to a tile: enough to see it's real */
body.apex-hm .hm-ready__shot { display: block; height: 8.5rem; overflow: hidden; background: #fff; border-radius: 10px; box-shadow: var(--hm-obj-shadow) }
body.apex-hm .hm-ready__shot img { display: block; width: 100%; height: auto }

/* ── THE FORM ── */
body.apex-hm .hm-start__in {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
}
body.apex-hm .hm-start h2 { font-size: var(--a-t-close) }
body.apex-hm .hm-start__say > div { margin-top: 1.5rem }
body.apex-hm .hm-start__say p { font-size: var(--hm-t-sm); line-height: 1.6; text-wrap: pretty }
body.apex-hm .hm-start__say p + p { margin-top: 1rem }
body.apex-hm .hm-start__say p.hm-start__lede { font-size: var(--hm-t-lg); line-height: 1.5; color: var(--hm-ink) }
body.apex-hm .hm-start__say .hm-btn { margin-top: 1.6rem }
body.apex-hm .hm-form {
    padding: clamp(1.4rem, 3vw, 2.4rem);
    background: #fff;
    border: 1px solid var(--a-card-line);
    border-radius: var(--a-r);
    box-shadow: var(--hm-lift-2);
    scroll-margin-top: var(--a-anchor);
}
body.apex-hm .hm-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.05rem 1rem;
    margin-bottom: 1.5rem;
}
body.apex-hm .hm-form__wide { grid-column: 1 / -1 }
body.apex-hm .hm-form label > span {
    display: block;
    margin-bottom: .4rem;
    font-size: var(--hm-t-xs); font-weight: 600; color: var(--hm-ink);
}
body.apex-hm .hm-form :is(input:not([type="hidden"]), textarea) {
    display: block; width: 100%;
    padding: .78rem .9rem;
    background: #fff;
    border: 1px solid rgba(13, 35, 80, .32);
    border-radius: var(--a-btn-r);
    font: 400 1rem/1.4 var(--hm-sans);
    color: var(--hm-ink);
    transition: border-color .2s var(--hm-ease), box-shadow .2s var(--hm-ease);
}
body.apex-hm .hm-form textarea { resize: vertical; min-height: 7rem }
body.apex-hm .hm-form textarea::placeholder { color: var(--hm-soft); opacity: 1 }
body.apex-hm .hm-form :is(input, textarea):focus {
    outline: none;
    border-color: var(--hm-brand);
    box-shadow: 0 0 0 3px rgba(34, 69, 138, .16);
}
body.apex-hm .hm-form button.hm-btn { cursor: pointer }
body.apex-hm .hm-form button.hm-btn:focus-visible { outline: var(--a-focus); outline-offset: var(--a-focus-off) }
body.apex-hm .hm-form__small { margin-top: 1rem; font-size: var(--hm-t-xs); line-height: 1.5; color: var(--hm-soft) }
body.apex-hm .hm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
body.apex-hm .hm-notice {
    margin-bottom: 1.3rem;
    padding: .85rem 1rem;
    background: var(--a-paper);
    border-radius: var(--a-btn-r);
    font-size: var(--hm-t-sm); line-height: 1.5; color: var(--hm-ink);
}

/* a wide short screen (a phone on its side) has no room for the desk to ride along and
   the lines still show under it, so it scrolls away with the page */
@media (min-width: 561px) and (max-width: 900px) and (max-height: 900px) {
    body.apex-hm .hm-desk { position: static }
}

@media (max-width: 900px) {
    /* the desk rides along at the top while the lines go under it. White, not a
       panel, with a soft edge so the lines disappear under it cleanly. */
    body.apex-hm .hm-desk { top: 4.8rem; background: #fff; padding-block: .5rem .4rem }
    body.apex-hm .hm-desk::after {
        content: ""; position: absolute; left: 0; right: 0; top: 100%;
        height: 1.6rem;
        background: linear-gradient(#fff, rgba(255, 255, 255, 0));
        pointer-events: none;
    }
    html.hm-anim body.apex-hm .hm-desk__stage { aspect-ratio: 16 / 12.4 }
    html.hm-anim body.apex-hm .hm-desk__stage,
    body.apex-hm .hm-desk__stage { font-size: clamp(6.5px, 1.95cqw, 13px) }
    body.apex-hm .hm-desk__left { font-size: 1.3rem; text-align: center }
    /* the phone alone on the left, nothing on it (owner, 6 Nov) */
    /* two rows to the right of the phone: the quote and the apps, then the
       spreadsheet in front with the invoice tucked behind its right edge */
    body.apex-hm .hm-obj--quote { --x: 38%; --y: 0%; --w: 15em; --rot: 3deg; --ox: 45%; --oy: -55%; --orot: 14deg; z-index: 3 }
    body.apex-hm .hm-obj--wins { --x: 69%; --y: 2%; --w: 15.5em }
    body.apex-hm .hm-obj--invoice { --x: 75%; --y: 44%; --w: 12.5em }
    body.apex-hm .hm-obj--sheet { --x: 36%; --y: 41%; --w: 21em }
    /* its number does not fit beside the window buttons at this width */
    body.apex-hm .hm-inv__top > i { display: none }
    body.apex-hm .hm-chores { gap: clamp(2rem, 6vh, 3rem); padding-bottom: 4rem }
    body.apex-hm .hm-result,
    body.apex-hm .hm-start__in { grid-template-columns: minmax(0, 1fr) }
    body.apex-hm .hm-ready__lead { grid-template-columns: minmax(0, 1fr) }
    body.apex-hm .hm-ready__lead .hm-handset { order: 2 }
}
@media (max-width: 720px) {
    body.apex-hm .hm-founder { grid-template-columns: minmax(0, 1fr) }
    body.apex-hm .hm-face { max-width: 15rem }
    body.apex-hm .hm-ready__app { grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem }
    body.apex-hm .hm-ready__shot { height: 6.5rem }
}
@media (max-width: 520px) {
    body.apex-hm .hm-form__grid { grid-template-columns: minmax(0, 1fr) }
}

/* ── THE BOT CALL. His idea: funny and relatable. The phone plays it, the button
   lets the reader join in. Printed whole without script. ── */
body.apex-hm .hm-human {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 2.4rem clamp(2rem, 5vw, 5rem);
    align-items: center;
}
body.apex-hm .hm-human__say h2 { font-size: clamp(2.2rem, 4.6vw, 4rem); line-height: 1.04; letter-spacing: -.032em }
body.apex-hm .hm-human__say > div { margin-top: clamp(1.4rem, 3vh, 2rem); max-width: 34rem }
body.apex-hm .hm-human__say p { font-size: var(--hm-t-lg); line-height: 1.55; color: var(--hm-body); text-wrap: pretty }
body.apex-hm .hm-human__say p + p { margin-top: 1em }
body.apex-hm .hm-human__shout { margin-top: 1.6rem; border: 0; cursor: pointer; font-family: var(--hm-sans) }
body.apex-hm .hm-handset--call .hm-phone__screen { display: flex; flex-direction: column; background: linear-gradient(180deg, #16305f 0%, #0a1430 100%) }
/* the red End a call screen has; it hangs up on the bot */
body.apex-hm .hm-human__end { flex: none; display: flex; justify-content: center; padding: .2em 0 2.1em; color: #dbe6fb }
body.apex-hm .hm-human__top { flex: none; padding: 3em 1em .8em; text-align: center; color: #fff; border-bottom: 1px solid rgba(185, 205, 243, .2) }
body.apex-hm .hm-human__top b { display: block; font-size: 1.15em; font-weight: 600 }
body.apex-hm .hm-human__top span { margin-top: .1em; font-size: .92em; color: #b9cdf3; font-variant-numeric: tabular-nums }
body.apex-hm .hm-human__thread {
    flex: 1 1 0; min-height: 0;
    display: flex; flex-direction: column; gap: .55em;
    padding: .9em .8em 2em;
    overflow-y: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
}
body.apex-hm .hm-human__thread::-webkit-scrollbar { display: none }
body.apex-hm .hm-say {
    flex: none;
    max-width: 84%;
    padding: .55em .8em;
    border-radius: 1.05em;
    font-size: .96em; line-height: 1.3;
    animation: hm-say-in .28s var(--hm-ease);
}
@keyframes hm-say-in { from { opacity: 0; translate: 0 .6em } }
body.apex-hm .hm-say--bot { align-self: flex-start; background: rgba(255, 255, 255, .95); color: #16233f; border-bottom-left-radius: .3em }
body.apex-hm .hm-say--you { align-self: flex-end; background: var(--hm-vivid); color: #fff; border-bottom-right-radius: .3em }
body.apex-hm .hm-say--shout { font-weight: 600; font-size: 1.1em }
@media (max-width: 900px) {
    body.apex-hm .hm-human { grid-template-columns: minmax(0, 1fr) }
}

/* ── the slop slider: the same poster twice, the range moves the line ── */
body.apex-hm .hm-slop { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: start; margin-top: clamp(4rem, 9vw, 7rem) }
body.apex-hm .hm-slop__say h3 { margin: 0 0 1rem; font-size: clamp(1.8rem, 3.4vw, 2.9rem); font-weight: 600; line-height: 1.08; letter-spacing: -.028em; color: var(--hm-ink) }
body.apex-hm .hm-slop__say > p { margin: 0 0 1em; max-width: 34rem; font-size: var(--hm-t-lg); line-height: 1.55; color: var(--hm-body); text-wrap: pretty }
body.apex-hm .hm-slop__photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; max-width: 34rem; margin: 1.6rem 0 }
body.apex-hm .hm-slop__photos img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 14px 34px -22px rgba(13, 34, 84, .55) }
body.apex-hm .hm-slop__photos figcaption { grid-column: 1 / -1; font: 400 1.5rem/1.15 "Apex Hand", cursive; color: var(--hm-vivid) }
body.apex-hm .hm-main .hm-slop__say .hm-slop__offer { color: var(--hm-ink) }
body.apex-hm .hm-main .hm-slop__say > .hm-go { margin-top: .2rem }

body.apex-hm .hm-vs { margin: 0; width: 100%; max-width: 27rem; justify-self: center }
/* the two sides named up the frame's edges (owner, 6 Nov) */
body.apex-hm .hm-vs__stage { position: relative }
body.apex-hm .hm-vs__tag {
    position: absolute; top: 50%;
    font: 400 clamp(2.4rem, 3.6vw, 3.4rem)/1 "Apex Hand", cursive;
    white-space: nowrap;
    writing-mode: vertical-rl;
    pointer-events: none;
}
body.apex-hm .hm-vs__tag--slop { right: calc(100% + .7rem); transform: translateY(-50%) rotate(180deg); color: #6b7890 }
body.apex-hm .hm-vs__tag--pro { left: calc(100% + .7rem); transform: translateY(-50%); color: var(--hm-vivid) }
@media (max-width: 640px) {
    body.apex-hm .hm-vs__stage { padding-top: 2.6rem }
    body.apex-hm .hm-vs__tag { top: 0; writing-mode: horizontal-tb; transform: none; font-size: 1.7rem }
    body.apex-hm .hm-vs__tag--slop { left: 0; right: auto }
    body.apex-hm .hm-vs__tag--pro { right: 0; left: auto }
}
body.apex-hm .hm-vs__frame { position: relative; display: grid; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 6px; box-shadow: 0 1.6rem 3.4rem -1.2rem rgba(13, 27, 42, .38), 0 .3rem .9rem rgba(13, 27, 42, .1) }
body.apex-hm .hm-vs__frame:focus-within { outline: var(--a-focus); outline-offset: 3px }
body.apex-hm .hm-vs__img { grid-area: 1 / 1; display: block; width: 100%; height: 100%; object-fit: cover }
body.apex-hm .hm-vs__img { transition: opacity .3s var(--hm-ease, ease) }
body.apex-hm .hm-vs__img.is-off { opacity: 0 }
body.apex-hm .hm-vs__img--top { clip-path: inset(0 calc(100% - var(--x)) 0 0) }

body.apex-hm .hm-vs__line { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(13, 27, 42, .25); pointer-events: none }
body.apex-hm .hm-vs__line i { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--hm-vivid); color: #fff; box-shadow: 0 .4rem 1rem rgba(13, 27, 42, .35) }
body.apex-hm .hm-vs__line svg { width: 24px; height: 24px }
body.apex-hm .hm-vs__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y }
/* one thin row: the tops of the three better posters */
body.apex-hm .hm-vs__picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin-top: 1rem }
body.apex-hm .hm-vs__picks[hidden] { display: none }
body.apex-hm .hm-vs__pick { display: grid; gap: .4rem; min-width: 0; padding: 0; border: 0; background: none; color: var(--hm-soft); font-family: inherit; font-size: .88rem; font-weight: 500; line-height: 1.2; text-align: center; cursor: pointer; transition: color .2s, transform .2s }
body.apex-hm .hm-vs__pick img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 0; border-radius: 5px; opacity: .72; outline: 2px solid transparent; outline-offset: 2px; transition: opacity .2s, outline-color .2s }
body.apex-hm .hm-vs__pick:hover { color: var(--hm-ink); transform: translateY(-2px) }
body.apex-hm .hm-vs__pick:hover img { opacity: 1 }
body.apex-hm .hm-vs__pick[aria-pressed="true"] { color: var(--hm-ink) }
body.apex-hm .hm-vs__pick[aria-pressed="true"] img { opacity: 1; outline-color: var(--hm-vivid) }
body.apex-hm .hm-vs__pick:focus-visible { outline: var(--a-focus); outline-offset: 4px; border-radius: 6px }
body.apex-hm .hm-vs__pen { margin-top: .8rem; text-align: center; font: 400 1.7rem/1.1 "Apex Hand", cursive; color: var(--hm-vivid) }
@media (min-width: 901px) {
    body.apex-hm .hm-slop { grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) }
}

@media (prefers-reduced-motion: reduce) {
    body.apex-hm .hm-main *,
    body.apex-hm .hm-main *::before,
    body.apex-hm .hm-main *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}


/* the automation door: one line from a regular, and what it took to act on it */
body.apex-hm .hm-pull { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: var(--hm-obj-shadow) }
body.apex-hm .hm-pull__mail { padding: 1.05em 1.25em; font-size: 1.14em; font-weight: 500; line-height: 1.32; background: #eef4fe }
body.apex-hm .hm-pull__mail i { display: block; margin-bottom: .3em; font-size: .78em; font-weight: 400; color: #55637c }
body.apex-hm .hm-pull__rows { padding: .35em 1.25em }
body.apex-hm .hm-pull__rows > span { display: grid; grid-template-columns: 6.2em minmax(0, 1fr); gap: .8em; padding: .62em 0; border-top: 1px solid #eaf0f8 }
body.apex-hm .hm-pull__rows > span:first-child { border-top: 0 }
body.apex-hm .hm-pull__rows i { color: #55637c }
body.apex-hm .hm-pull__yes { padding: .85em 1.25em; font-weight: 600; color: #1f5fd6; border-top: 1px solid #dbe5f3 }

/* Lachlan, 4 Nov: too long to reach the bottom. On a phone the two tall handsets
   rise out of the page instead of standing at full height, and the portrait sits small. */
@media (max-width: 900px) {
    body.apex-hm .hm-ready__lead .hm-handset {
        order: 0;
        aspect-ratio: auto; height: 21em;
        overflow: hidden;
        border-bottom: 0; border-radius: 2.75em 2.75em 0 0;
        box-shadow: none;
        -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent);
    }
    body.apex-hm .hm-ready__lead .hm-handset .hm-phone__screen { height: 41.3em; bottom: auto }
    /* once it is pressed it comes up whole, so its other screens fit */
    body.apex-hm .hm-ready__lead .hm-handset.is-whole {
        aspect-ratio: 9 / 18.6; height: auto;
        border-bottom: 1px solid #39496d; border-radius: 2.75em;
        -webkit-mask-image: none; mask-image: none;
    }
    body.apex-hm .hm-ready__lead .hm-handset.is-whole .hm-phone__screen { height: auto; bottom: .46em }
    body.apex-hm .hm-ready__lead { gap: 1.4rem }
    /* 6 Nov, Lachlan: the Human, human phone "gets short depending on screen
       size". It keeps a phone's proportions at every width and scales instead. */
    body.apex-hm .hm-handset--call { width: min(20em, 76vw) }
    body.apex-hm .hm-face { max-width: 10rem }
}

/* ════ 8 Nov · reply, say yes, and tell me about your ten hours ════
   Each ends in the form. */
body.apex-hm .hm-mail__reply { display: flex; margin-top: 1.2em; padding-top: 1em; border-top: 1px solid #e3eaf5 }
body.apex-hm .hm-mail__reply button,
body.apex-hm .hm-pull__go {
    padding: .5em 1.1em;
    font: 600 1em/1 var(--a-font, inherit); color: #1f5fd6;
    background: #fff; border: 1px solid #b9cbe9; border-radius: 999px; cursor: pointer;
    transition: background-color .2s, border-color .2s;
}
body.apex-hm .hm-mail__reply button:hover, body.apex-hm .hm-pull__go:hover { background: #eef4fe; border-color: #1f5fd6 }
body.apex-hm .hm-mail__reply button:focus-visible, body.apex-hm .hm-pull__go:focus-visible { outline: 2px solid #1f5fd6; outline-offset: 2px }
body.apex-hm .hm-pull__go { margin-left: .4em; color: #fff; background: #1f5fd6; border-color: #1f5fd6 }
body.apex-hm .hm-pull__go:hover { background: #164bb0; border-color: #164bb0 }
body.apex-hm .hm-door__thing .hm-pull__yes span { display: inline }
body.apex-hm .hm-penlink { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em }
body.apex-hm .hm-penlink:hover { color: #16233f }
body.apex-hm .hm-main .hm-week__ask { margin-top: 1.2rem; font: 400 clamp(1.9rem, 2.4vw, 2.3rem)/1.1 "Apex Hand", cursive; color: var(--hm-vivid) }