/*
 * aic.css — AI Implementation Consulting, on the light system (DESIGN.md).
 *
 * Pass 6, 2026-08-24. Earlier passes are archived beside their template in
 * _archive/aic-pass3-2026-08-24/ and _archive/aic-run-2026-08-24/.
 *
 * One sheet, scoped to body.apex-aic (never apex-wa — Custom Software shares
 * that class). Palette, type and motion grammar match the rest of the light
 * system; the devices are this page's own and none of them is a list: a wall
 * of eight questions with one live answer panel, a pin board of nine
 * capabilities hung along one axis, and a live effort-against-hours field.
 *
 * GROUND: white the whole way down, with a pale ridge low behind the hero and
 * the footer's ice shelf at the end. THERE IS NO TINTED BAND — the tinted
 * section was removed on the user's instruction ("I dont like the grey
 * sections"); contrast now comes from cards (--aic-card / --aic-lift), which
 * is presence without a stripe. Do not reintroduce a grey ground.
 *
 * ROOM: the page was called squashed, so --aic-main rhythm runs 5.5–10rem
 * between sections and every widget carries real internal padding. When in
 * doubt here, add air.
 *
 * Initial hidden states are gated behind html.aic-anim, set synchronously in
 * the template — with JS off or reduced motion the page paints finished.
 */

body.apex-aic {
    --aic-ink: #0a1730;
    --aic-body: #33415e;
    --aic-soft: #4d5b74;
    --aic-brand: #22458a;
    --aic-line: var(--a-line);
    /* Cards, not tinted bands, are how this page gets contrast now. The ground
       stays white the whole way down; presence comes from elevation, a hairline
       and generous padding. */
    --aic-card: #fff;
    --aic-card-line: var(--a-card-line);
    --aic-lift: 0 1px 2px rgba(10, 23, 48, .04), 0 12px 28px -14px rgba(10, 23, 48, .18);
    --aic-lift-2: 0 2px 4px rgba(10, 23, 48, .05), 0 26px 54px -22px rgba(10, 23, 48, .26);
    --aic-r: 20px;
    --aic-go: #166a47;
    --aic-hold: #7a5600;
    --aic-no: #a03123;
    --aic-ease: cubic-bezier(.22, 1, .36, 1);
    --aic-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    background: #fff;
}

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

body.apex-aic .aic-page {
    font-family: var(--aic-sans);
    color: var(--aic-body);
    overflow: clip;
}

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

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

body.apex-aic .aic-main > * { margin-block: var(--a-gap-move) }
/* the hero is outside .aic-main, so this rule IS the hero-to-first-section
   gap. It ran at 80px against the site's 220. */
/* the hero ends in a dissolving horizon, which is already air; a full section
   move on top of it left a flat void, so the first section arrives sooner.
   ★ Cut again 2026-09-04: 9vw was still 130px of white under 169px of empty
   hero, so 298px separated the hero's last line from the page's first (owner:
   "theres a massive gap before the next section"). The dissolve is the
   transition; the section only has to clear its tail. */
body.apex-aic .aic-main > *:first-child { margin-top: clamp(1.8rem, 3.4vw, 3.2rem) }
body.apex-aic .aic-main > *:last-child { margin-bottom: 0 }

body.apex-aic .aic-page h1,
body.apex-aic .aic-page h2,
body.apex-aic .aic-page h3 {
    font-family: var(--aic-sans);
    font-weight: 600;
    color: var(--aic-ink);
    letter-spacing: -.022em;
    text-wrap: balance;
    margin: 0;
}

body.apex-aic .aic-page h2 { font-size: var(--a-t-head); line-height: 1.1 }

body.apex-aic .aic-lead {
    margin: 1.35rem 0 0;
    font-size: 1.1rem;
    line-height: 1.68;
    color: var(--aic-body);
    max-width: 42rem;
    text-wrap: pretty;
}

body.apex-aic .aic-head { max-width: 48rem; margin: 0 0 clamp(3rem, 6vw, 4.6rem) }

/* Heading left, its support copy right, so a section opener fills its row
   instead of leaving half of it white. */
body.apex-aic .aic-head--split {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: clamp(1rem, 4vw, 3.5rem);
    /* ★ START, not end. Bottom-aligning the heading against a taller lead
       column left the whole top-left of every split section empty, and under
       the hero that void sat directly beneath the dissolving ridge, which is
       most of what "a massive gap before the next section" was pointing at
       (owner, 2026-09-04). Top-aligned, the heading arrives with the lead and
       the slack falls between the head and the widget, where it reads as the
       section's own rhythm instead of a hole. */
    align-items: start;
    max-width: none;
}
body.apex-aic .aic-head--split .aic-lead { margin-top: 0; max-width: 32rem }

body.apex-aic .aic-arrow { width: 1em; height: 1em; flex: none }

/* ── the card surface, shared by every widget on the page ── */
body.apex-aic .aic-card {
    background: var(--aic-card);
    border: 1px solid var(--aic-card-line);
    border-radius: var(--aic-r);
    box-shadow: var(--aic-lift);
    transition: box-shadow .4s var(--aic-ease), transform .4s var(--aic-ease), border-color .4s var(--aic-ease);
}

/* line-art glyphs draw themselves in when their card is revealed */
body.apex-aic .aic-draw { stroke-dasharray: var(--len, 120); stroke-dashoffset: 0 }
/* Drift: initScrollFX() writes --dy from scroll position. Depth, not a ride.
   Gated on html.aic-anim so a reduced-motion visitor never gets the transform,
   and on .is-drifting so nothing moves before the script has run. */
html.aic-anim body.apex-aic [data-drift] { will-change: transform }
html.aic-anim body.apex-aic [data-drift].is-drifting {
    transform: translate3d(0, var(--dy, 0px), 0);
}

html.aic-anim body.apex-aic [data-reveal] .aic-draw,
html.aic-anim body.apex-aic [data-reveal].aic-draw { stroke-dashoffset: var(--len, 120) }
html.aic-anim body.apex-aic [data-reveal].is-revealed .aic-draw {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset .9s var(--aic-ease);
    transition-delay: calc(var(--i, 0) * 90ms + var(--d, 0) * 110ms + 140ms);
}
html.aic-anim body.apex-aic [data-reveal] .aic-dot { opacity: 0 }
html.aic-anim body.apex-aic [data-reveal].is-revealed .aic-dot {
    opacity: 1;
    transition: opacity .4s var(--aic-ease);
    transition-delay: calc(var(--i, 0) * 90ms + 700ms);
}

/* the site's button: 12px, brand blue, .96rem/600. This page shipped a 999px
   pill in ink navy at 1rem, which is the same control drawn as a different
   thing on the page next door. */
body.apex-aic .aic-btn {
    display: inline-flex; align-items: center; gap: .6rem;
    padding: var(--a-btn-pad); border: 1px solid transparent;
    border-radius: var(--a-btn-r); text-decoration: none;
    font: var(--a-btn-font);
    transition: transform .25s var(--aic-ease), background-color .25s, border-color .25s,
                color .25s, box-shadow .25s var(--aic-ease);
}
body.apex-aic .aic-btn:active { transform: translateY(1px) scale(.99) }
body.apex-aic .aic-btn--solid {
    background: var(--aic-brand); border-color: var(--aic-brand); color: #fff;
    box-shadow: var(--a-btn-glow);
}
body.apex-aic .aic-btn--solid:hover,
body.apex-aic .aic-btn--solid:focus-visible {
    background: var(--a-brand-deep); border-color: var(--a-brand-deep);
    color: #fff; transform: translateY(-2px);
}
body.apex-aic .aic-btn--ghost { background: #fff; border-color: var(--aic-line); color: var(--aic-ink) }
body.apex-aic .aic-btn--ghost:hover,
body.apex-aic .aic-btn--ghost:focus-visible { border-color: var(--aic-brand); color: var(--aic-brand) }

body.apex-aic .aic-textlink {
    display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
    color: var(--aic-brand); font-weight: 600; text-decoration: none;
}
body.apex-aic .aic-textlink:hover { color: var(--aic-ink) }

body.apex-aic .aic-page a:focus-visible,
body.apex-aic .aic-page button:focus-visible,
body.apex-aic .aic-page summary:focus-visible,
body.apex-aic .aic-page input:focus-visible {
    outline: var(--a-focus);
    outline-offset: var(--a-focus-off);
    border-radius: 6px;
}

body.apex-aic .aic-sr {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}

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

html.aic-anim body.apex-aic [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));
    transition-delay: calc(var(--i, 0) * 90ms);
}
html.aic-anim body.apex-aic [data-reveal].is-revealed { opacity: 1; transform: none; filter: none }

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

/* ════ 1 · HERO ════ */

body.apex-aic .aic-hero {
    /* its own stacking context: the ridge sits on a negative layer inside it */
    position: relative; isolation: isolate;
    display: flex; flex-direction: column;
    padding-top: var(--a-hero-pt);
    padding-bottom: calc(var(--a-hero-pb) + clamp(2rem, 5vw, 5rem));
}

/* The ridge is the shared component now (apex-ridge.css + inc/parts/hero-ridge.php).
   This page is where its geometry was worked out, so it runs on the defaults and
   sets nothing. The corrections that live there are documented in that file. */

body.apex-aic .aic-hero__in { position: relative; z-index: 1 }

body.apex-aic .aic-hero__grid {
    display: grid;
    /* one column since the card slip came out: the h1 now sets its own break
       instead of being folded into a 610px gutter beside four cards */
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    /* start, not end/centre: the h1 has to begin at the site's opening line.
       Aligned to the other column it was pushed down by whatever that column
       happened to contain, which is what put the same headline at 226 here,
       267 on SEO Article Authoring and 135 on About. */
    align-items: start;
}

body.apex-aic .aic-hero__title {
    font-size: var(--a-t-h1);
    line-height: 1.03;
    letter-spacing: -.03em;
}

body.apex-aic .aic-hero__statement {
    margin: clamp(1.3rem, 2.6vh, 1.9rem) 0 0;
    max-width: 46rem;
    font-size: var(--a-t-lede);
    line-height: 1.6;
    color: var(--aic-body);
    text-wrap: pretty;
}

body.apex-aic .aic-hero__acts {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 1rem clamp(1.4rem, 3vw, 2.2rem);
    margin-top: clamp(1.7rem, 3.4vh, 2.4rem);
}

/* The four icon cards that sat on the right of this hero are gone (owner,
   2026-09-04: tacky and AI slop). Their rules went with them. */

/* both of these sit on the page rather than inside a drawn thing, so the
   tracked uppercase made them real eyebrows. The words earn their place; the
   treatment did not. */


/* the same three-fact row the service pages open with, with the same marker.
   Here the three facts ran bare, so an identical row read as two components. */

body.apex-aic .aic-hero__cue {
    position: absolute; left: 50%; bottom: 1.5rem; translate: -50% 0; z-index: 1;
    width: 26px; height: 42px;
    border: 2px solid rgba(13, 35, 80, .3); border-radius: 14px;
    display: grid; place-items: start center; padding-top: 7px;
}
body.apex-aic .aic-hero__cue span { width: 4px; height: 8px; border-radius: 2px; background: var(--aic-brand); animation: aic-cue 1.6s var(--aic-ease) infinite }
@keyframes aic-cue { 0% { opacity: 0; transform: translateY(-3px) } 40% { opacity: 1 } 80%, 100% { opacity: 0; transform: translateY(10px) } }

/* ════ 2 · THE WALL — pick a question, read the shape of the answer ════
   Index left, one panel right. With JS off the index never appears (.is-live
   is set by initAsk) and all eight panels stack as a plain Q and A, so the
   page is a readable document before it is an interaction. */

body.apex-aic .aic-ask__head { margin-bottom: clamp(2rem, 4.5vh, 3.2rem) }
body.apex-aic .aic-ask__intro { display: grid; align-content: end; gap: .8rem }
body.apex-aic .aic-ask__note { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--aic-soft) }

body.apex-aic .aic-ask__grid {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: clamp(2rem, 5vw, 4.5rem);
}

/* With JS off the index is gone, so the second column would be a void beside
   the answers. One column instead, held to a reading measure. */
body.apex-aic .aic-ask:not(.is-live) .aic-ask__grid { grid-template-columns: minmax(0, 1fr) }
body.apex-aic .aic-ask:not(.is-live) .aic-ask__panels { max-width: 46rem }

/* ── the index ── */

body.apex-aic .aic-ask__index { display: none }
body.apex-aic .aic-ask.is-live .aic-ask__index { display: block }

body.apex-aic .aic-ask__index-label {
    display: block;
    padding-bottom: .8rem;
    font-size: var(--a-t-mark); font-weight: 600;
    color: var(--aic-soft);
}

body.apex-aic .aic-ask__q {
    display: grid;
    grid-template-columns: 11px minmax(0, 1fr);
    align-items: start;
    column-gap: .95rem;
    width: 100%;
    padding: .92rem 0;
    border: 0; border-top: 1px solid var(--aic-line);
    background: none;
    font: 600 clamp(1rem, 1.25vw, 1.1rem)/1.38 var(--aic-sans);
    color: var(--aic-body);
    text-align: left;
    cursor: pointer;
    transition: color .22s var(--aic-ease);
}
body.apex-aic .aic-ask__q:last-child { border-bottom: 1px solid var(--aic-line) }
body.apex-aic .aic-ask__q:hover { color: var(--aic-ink) }
body.apex-aic .aic-ask__q.is-on { color: var(--aic-ink) }
body.apex-aic .aic-ask__q:focus-visible { outline: var(--a-focus); outline-offset: var(--a-focus-off) }

body.apex-aic .aic-ask__q-mark {
    width: 11px; height: 11px; margin-top: .42em;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1.5px rgba(13, 35, 80, .3);
    transition: background .22s var(--aic-ease), box-shadow .22s var(--aic-ease);
}
body.apex-aic .aic-ask__q:hover .aic-ask__q-mark { box-shadow: inset 0 0 0 1.5px var(--aic-brand) }
body.apex-aic .aic-ask__q.is-on .aic-ask__q-mark { background: var(--aic-brand); box-shadow: none }

/* the live question keeps its own hairline underline drawing left to right */
body.apex-aic .aic-ask__q-text { position: relative; display: inline-block }
body.apex-aic .aic-ask__q-text::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -.18em;
    height: 1px; background: var(--aic-brand);
    transform: scaleX(0); transform-origin: left center;
    transition: transform .34s var(--aic-ease);
}
body.apex-aic .aic-ask__q.is-on .aic-ask__q-text::after { transform: scaleX(1) }

/* ── the panels ── */

body.apex-aic .aic-ask__panels { position: relative }
body.apex-aic .aic-ask.is-live .aic-ask__panels { min-height: 24rem }

/* Every panel is readable until JS arrives; then only the live one shows, as
   a column tall enough to hold the index beside it — so the wander row lands
   level with the last question however short the answer is. */
body.apex-aic .aic-ask.is-live .aic-ask__panel { display: none }
body.apex-aic .aic-ask.is-live .aic-ask__panel.is-on {
    display: flex; flex-direction: column;
    min-height: 100%;
    padding: clamp(1.5rem, 3.2vw, 2.4rem) clamp(1.5rem, 3.2vw, 2.6rem);
    background: var(--aic-card);
    border: 1px solid var(--aic-card-line);
    border-radius: var(--aic-r);
    box-shadow: var(--aic-lift);
}
body.apex-aic .aic-ask__panel + .aic-ask__panel { margin-top: clamp(2.2rem, 5vh, 3.4rem) }
body.apex-aic .aic-ask.is-live .aic-ask__panel + .aic-ask__panel { margin-top: 0 }

body.apex-aic .aic-ask__panel-q {
    margin: 0 0 clamp(1.3rem, 3vh, 1.9rem);
    padding-bottom: clamp(1.1rem, 2.4vh, 1.5rem);
    border-bottom: 1px solid var(--aic-line);
    font-size: clamp(1.3rem, 2.1vw, 1.72rem);
    line-height: 1.22; letter-spacing: -.018em;
    color: var(--aic-ink);
    text-wrap: pretty;
}

body.apex-aic .aic-ask__parts {
    margin: 0 0 clamp(1.6rem, 3.6vh, 2.4rem);
    display: grid; gap: clamp(1.35rem, 3vh, 1.95rem);
}
body.apex-aic .aic-ask__part {
    position: relative;
    display: grid; gap: .34rem;
    padding-left: 1.15rem;
}
body.apex-aic .aic-ask__part::before {
    content: "";
    position: absolute; left: 0; top: .42em; bottom: .2em;
    width: 2px; border-radius: 2px;
    background: rgba(34, 69, 138, .22);
    transform-origin: top center;
}
body.apex-aic .aic-ask__part:first-child::before { background: var(--aic-brand) }
html.aic-anim body.apex-aic .aic-ask__panel.is-swapping .aic-ask__part::before {
    animation: aic-stem .5s var(--aic-ease) backwards;
    animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes aic-stem { 0% { transform: scaleY(0) } 100% { transform: none } }

body.apex-aic .aic-ask__part dt {
    font-size: var(--a-t-micro); font-weight: 600; letter-spacing: normal;
    color: var(--aic-brand);
}
body.apex-aic .aic-ask__part dd {
    margin: 0;
    font-size: 1.02rem; line-height: 1.6;
    color: var(--aic-body);
    text-wrap: pretty;
}

/* each part writes in behind the one above it when the panel swaps */
html.aic-anim body.apex-aic .aic-ask__panel.is-swapping .aic-ask__part {
    animation: aic-part .42s var(--aic-ease) backwards;
    animation-delay: calc(var(--i, 0) * 70ms);
}
html.aic-anim body.apex-aic .aic-ask__panel.is-swapping .aic-ask__panel-q {
    animation: aic-part .38s var(--aic-ease) backwards;
}
@keyframes aic-part {
    0% { opacity: 0; transform: translateY(.6em) }
    100% { opacity: 1; transform: none }
}

/* ── the wander ── */

body.apex-aic .aic-ask__next {
    display: flex; flex-wrap: wrap; align-items: baseline;
    gap: .25rem .6rem;
    margin: clamp(1.5rem, 3.4vh, 2.2rem) 0 0;
    margin-top: auto; /* flex: hold the foot of the column */
    padding-top: 1.1rem;
    border-top: 1px solid var(--aic-line);
    font-size: .93rem; color: var(--aic-soft);
}

body.apex-aic .aic-ask__next-btn {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: 0; border: 0; background: none;
    font: 600 .98rem/1.35 var(--aic-sans);
    color: var(--aic-brand);
    text-align: left;
    cursor: pointer;
}
body.apex-aic .aic-ask__next-btn .aic-arrow {
    width: 15px; height: 15px; flex: none;
    transition: transform .25s var(--aic-ease);
}
body.apex-aic .aic-ask__next-btn:hover .aic-arrow { transform: translateX(4px) }
body.apex-aic .aic-ask__next-btn:focus-visible { outline: var(--a-focus); outline-offset: var(--a-focus-off) }

/* without JS the wander button cannot go anywhere, so it is not offered */
body.apex-aic .aic-ask:not(.is-live) .aic-ask__next { display: none }
/* ════ THE OBJECTS ════ 3 Nov critique pass. The brochure is tacky on purpose: it is
   the pitch, in nobody's name. Sizes inside an object are its own. Resolved is the
   default, and the pen only animates under html.aic-anim. */
body.apex-aic .aic-page { --hand: "Apex Hand", "Bradley Hand", "Segoe Print", cursive; --red: #cf2a27; --pen: #1f5fd6 }
body.apex-aic .aic-notes :where(p, ul, ol, li) { margin: 0; padding: 0; list-style: none }

body.apex-aic .aic-hero__free { margin: 0; font-weight: 600; color: var(--aic-ink) }
/* the paper belongs to the rows {
    content: ""; position: absolute; z-index: -1; left: 0; top: 0; bottom: 0; width: var(--bro-w);
    background: #fff;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 2px 4px rgba(10, 23, 48, .08), 0 30px 54px -24px rgba(16, 40, 92, .5);
}

/* the whiteboard: marker on a board, red for what he circled */

/* the trust sheet: writing paper, ranked, a line down the margin from works to demo */

/* ════ 4 · THE FIELD — effort against hours, live ════
   No tinted band. The ground stays white the whole way down the page and the
   instrument sits on it as a card, which is contrast without a stripe. */

body.apex-aic .aic-field__head { margin-bottom: clamp(2.6rem, 5vw, 3.8rem) }

body.apex-aic .aic-field__note {
    margin: .9rem 0 0;
    font-size: .95rem; color: var(--aic-soft);
    max-width: 32rem;
}

body.apex-aic .aic-field__plot {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: clamp(2.2rem, 5vw, 4.5rem);
    align-items: stretch;
    padding: clamp(1.6rem, 3.5vw, 2.8rem);
    background: var(--aic-card);
    border: 1px solid var(--aic-card-line);
    border-radius: var(--aic-r);
    box-shadow: var(--aic-lift);
}

body.apex-aic .aic-plot {
    position: relative;
    width: 100%; max-width: 32rem;
    aspect-ratio: 5 / 4;
    border: 1px solid var(--aic-line);
    border-radius: 14px;
    background: #fcfdff;
    overflow: hidden;
}

body.apex-aic .aic-plot__grid { position: absolute; inset: 0; width: 100%; height: 100% }
body.apex-aic .aic-plot__zone--go { fill: rgba(34, 69, 138, .06) }
body.apex-aic .aic-plot__zone--later { fill: rgba(122, 86, 0, .06) }
body.apex-aic .aic-plot__zone--no { fill: rgba(160, 49, 35, .05) }
body.apex-aic .aic-plot__rule { stroke: rgba(13, 35, 80, .16); stroke-width: .4; stroke-dasharray: 2 2 }

body.apex-aic .aic-plot__corner,
body.apex-aic .aic-plot__axis {
    position: absolute;
    font-size: var(--a-t-micro); font-weight: 600; letter-spacing: normal;
    color: var(--aic-soft);
}
body.apex-aic .aic-plot__corner--tl { top: .9rem; left: 1rem; color: var(--a-brand) }
body.apex-aic .aic-plot__corner--tr { top: .9rem; right: 1rem }
body.apex-aic .aic-plot__corner--br { bottom: 2.5rem; right: 1rem }
body.apex-aic .aic-plot__axis--x { bottom: .85rem; left: 1rem }
body.apex-aic .aic-plot__axis--y {
    left: .8rem; bottom: 2.9rem;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

body.apex-aic .aic-plot__dot {
    position: absolute;
    left: var(--x, 25%); top: var(--y, 15%);
    width: 0; height: 0;
    /* fast off the mark, long settle, so the dot arrives with some life in it */
    transition: left .5s cubic-bezier(.16, 1, .3, 1), top .5s cubic-bezier(.16, 1, .3, 1);
}
body.apex-aic .aic-plot__dot i {
    position: absolute; left: -9px; top: -9px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--aic-brand);
    box-shadow: 0 0 0 6px rgba(34, 69, 138, .14), 0 4px 12px rgba(13, 35, 80, .28);
    transition: transform .3s var(--aic-ease);
}

/* Flip "something already does this" and the grid stops mattering — the whole
   point of the switch, said in one gesture rather than a paragraph. */

/* Where buying lands on this same grid: low effort by definition, the same
   hours back. It is deliberately a good-looking position, because that is the
   point — this grid does not price the rent, and the rent is the argument. */
body.apex-aic .aic-plot__ghost {
    position: absolute;
    left: var(--x, 10%); top: var(--y, 15%);
    width: 0; height: 0;
    opacity: 0; visibility: hidden;
    transition: opacity .34s var(--aic-ease), visibility .34s, top .5s cubic-bezier(.16, 1, .3, 1);
}
body.apex-aic .aic-plot.is-shelved .aic-plot__ghost { opacity: 1; visibility: visible }
body.apex-aic .aic-plot__ghost i {
    position: absolute; left: -7px; top: -7px;
    width: 14px; height: 14px; border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 2px rgba(13, 35, 80, .45);
}
body.apex-aic .aic-plot__ghost b {
    position: absolute; left: 0; bottom: 14px;
    transform: translateX(-50%);
    font-size: .72rem; font-weight: 600; letter-spacing: .04em;
    white-space: nowrap;
    color: var(--aic-soft);
}

body.apex-aic .aic-field__side { display: grid; gap: 1.5rem; align-content: space-between }

/* ── the switch ── */
body.apex-aic .aic-switch {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .8rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--aic-line);
    cursor: pointer;
}
body.apex-aic .aic-switch input {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%);
}
body.apex-aic .aic-switch__track {
    width: 42px; height: 24px; border-radius: 999px;
    background: var(--a-line);
    box-shadow: inset 0 0 0 1px rgba(13, 35, 80, .06);
    transition: background .28s var(--aic-ease);
}
body.apex-aic .aic-switch__track i {
    display: block;
    width: 18px; height: 18px; margin: 3px; border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(13, 35, 80, .3);
    transition: transform .3s var(--aic-ease);
}
body.apex-aic .aic-switch__label { font-size: .98rem; font-weight: 600; color: var(--aic-ink); line-height: 1.35 }
body.apex-aic .aic-switch input:checked ~ .aic-switch__track { background: var(--aic-brand) }
body.apex-aic .aic-switch input:checked ~ .aic-switch__track i { transform: translateX(18px) }
body.apex-aic .aic-switch input:focus-visible ~ .aic-switch__track {
    outline: var(--a-focus); outline-offset: var(--a-focus-off);
}

body.apex-aic .aic-field__ctrl {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: .4rem 1rem;
}
body.apex-aic .aic-field__ctrl label { font-size: 1rem; font-weight: 600; color: var(--aic-ink) }
body.apex-aic .aic-field__ctrl output { font-size: .95rem; font-weight: 600; color: var(--aic-soft); font-variant-numeric: tabular-nums }

body.apex-aic .aic-range {
    grid-column: 1 / -1;
    appearance: none; -webkit-appearance: none;
    width: 100%; height: 22px; background: none; cursor: pointer;
}
body.apex-aic .aic-range::-webkit-slider-runnable-track {
    height: 5px; border-radius: 999px;
    background: linear-gradient(90deg, var(--aic-brand) var(--fill, 50%), rgba(13, 35, 80, .12) var(--fill, 50%));
}
body.apex-aic .aic-range::-moz-range-track { height: 5px; border-radius: 999px; background: rgba(13, 35, 80, .12) }
body.apex-aic .aic-range::-moz-range-progress { height: 5px; border-radius: 999px; background: var(--aic-brand) }
body.apex-aic .aic-range::-webkit-slider-thumb {
    appearance: none; -webkit-appearance: none;
    width: 21px; height: 21px; margin-top: -8px; border-radius: 999px;
    background: #fff; border: 2px solid var(--aic-brand);
    box-shadow: 0 2px 8px rgba(13, 35, 80, .25);
    transition: transform .2s var(--aic-ease);
}
body.apex-aic .aic-range::-webkit-slider-thumb:hover { transform: scale(1.12) }
body.apex-aic .aic-range::-moz-range-thumb {
    width: 17px; height: 17px; border-radius: 999px;
    background: #fff; border: 2px solid var(--aic-brand);
    box-shadow: 0 2px 8px rgba(13, 35, 80, .25);
}

/* The verdict, on a rule that takes the verdict's colour. The label swaps on
   a wipe so a changed answer registers as a change, not a re-render. */
body.apex-aic .aic-field__out {
    padding-top: 1.2rem;
    border-top: 2px solid var(--aic-ink);
    transition: border-color .3s;
    min-height: 8.5rem;
}
body.apex-aic .aic-field__out b {
    display: block; overflow: hidden;
    font-size: clamp(1.25rem, 2vw, 1.55rem); font-weight: 600; letter-spacing: -.02em;
    color: var(--aic-ink);
    transition: color .3s;
}
body.apex-aic .aic-field__out p { margin: .5rem 0 0; line-height: 1.58; max-width: 26rem }
/* One rule for every answer: the words carry the verdict, not a traffic light
   (Lachlan, 2026-10-28: green and yellow writing reads as AI). */
body.apex-aic .aic-field__out[data-v] { border-top-color: var(--aic-brand) }
body.apex-aic .aic-field__out[data-v] b { color: var(--aic-ink) }

html.aic-anim body.apex-aic .aic-field__out.is-swapping b > span,
html.aic-anim body.apex-aic .aic-field__out.is-swapping p { animation: aic-swap .34s var(--aic-ease) }
@keyframes aic-swap {
    0% { opacity: 0; transform: translateY(.55em) }
    100% { opacity: 1; transform: none }
}

body.apex-aic .aic-first__q { margin: 0 0 .6rem; font: 400 clamp(2.5rem, 4.6vw, 3.7rem)/1 var(--hand); color: var(--pen); transform: rotate(-.8deg); transform-origin: 0 50% }
body.apex-aic .aic-first__say .aic-lead { margin-top: 0 }

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

/* Full width: seven short rows carry themselves, and a sticky column beside
   them would only hold a heading over white. */
/* The FAQ is the shared component now (assets/css/apex-faq.css). All this
   page keeps is the tint: four custom properties, no forked rules. The
   superseded aic-faq__item / __chev / __wrap / __clip blocks are preserved in
   _archive/aic-copy-pass-2026-09-04/aic.css. */
body.apex-aic .aic-faq__list {
    --faq-line: var(--aic-line);
    --faq-ink: var(--aic-ink);
    --faq-body: var(--aic-body);
    --faq-accent: var(--aic-brand);
}

/* ★ .aic-faq__grid was named grid and was display:block, so every question row
   ran the full 1200px shell while the answer capped at 40rem. Half of each row
   was empty and the chevron sat 1200px from its question. A real two-column
   split fills the frame and gives the answers a readable measure. */
body.apex-aic .aic-faq__grid { display: grid; gap: clamp(1.6rem, 3.5vw, 2.6rem) }

@media (min-width: 900px) {
    body.apex-aic .aic-faq__grid {
        grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
        gap: clamp(2.5rem, 6vw, 6rem);
        align-items: start;
    }
    /* the heading holds its place while the reader works down the answers */
    body.apex-aic .aic-faq__head { position: sticky; top: clamp(6rem, 12vh, 9rem) }
}

body.apex-aic .aic-faq__head { margin-bottom: 0 }
body.apex-aic .aic-faq__head .aic-lead { max-width: 28rem; font-size: 1rem }


/* ════ 7 · THE CLOSE ════
   White, and deliberately so: the footer lands on a close-up ice shelf, and a
   distant ridge sitting on top of it reads as two horizons at two scales. The
   peaks belong higher up the page (the hero) and nowhere near the footer.
   Presence comes from scale and from answering the hero's slip instead. */

body.apex-aic .aic-cta {
    padding-block: clamp(3rem, 8vh, 5.5rem) clamp(3.5rem, 9vh, 6rem);
}

/* Site review R6 (27 Oct): the close sits on the page's left edge under a
   hairline, one heading, one line, one button and the email as a link. */
body.apex-aic .aic-cta__in {
    max-width: 44rem;
    border-top: 1px solid var(--a-hair);
    padding-top: clamp(2.4rem, 5vh, 3.4rem);
}
body.apex-aic .aic-cta__mail {
    align-self: center;
    font-weight: 600; color: var(--aic-brand);
    text-underline-offset: .18em;
}
body.apex-aic .aic-first__say .aic-lead + .aic-lead { margin-top: 1.1em }

/* The four things people bring, one last time, exactly as the hero's slip
   lists them. All four marks read the same. */

body.apex-aic .aic-cta h2 { font-size: var(--a-t-close); line-height: 1.04 }

body.apex-aic .aic-cta__copy {
    margin: 1.2rem 0 0;
    max-width: 38rem;
    font-size: var(--a-t-spoken); line-height: 1.6;
    color: var(--aic-body);
    text-wrap: pretty;
}

body.apex-aic .aic-cta__acts {
    display: flex; flex-wrap: wrap;
    gap: .9rem 1rem;
    margin-top: clamp(1.7rem, 3.5vh, 2.4rem);
}

body.apex-aic .aic-cta__hint { margin: 1.1rem 0 0; font-size: .93rem; color: var(--aic-body) }

body.apex-aic .aic-cta__index {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: .6rem clamp(1.2rem, 3vw, 2.4rem);
    margin-top: clamp(2.6rem, 6vh, 4rem);
    padding-top: 1.3rem;
    border-top: 1px solid var(--aic-line);
}
body.apex-aic .aic-cta__index a {
    font-size: .95rem; font-weight: 600; color: var(--aic-brand); text-decoration: none;
}
body.apex-aic .aic-cta__index a:hover { color: var(--aic-ink) }

/* ════ Footer landing — the ice shelf ════ */

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

body.apex-aic .nx-footer::before {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 2172 / 374;
    /* the top of the shelf dissolves into the page above (Lachlan, 29 Oct:
       the hard top edge read as cut off); the ledge and icicles stay crisp */
    background:
        linear-gradient(to bottom, var(--footer-fade, #fff) 0%, var(--footer-fade, #fff) 4%, rgba(255, 255, 255, 0) 55%) top center / 100% 100% no-repeat,
        url("../media/fx/fx-ice-shelf.webp") top center / 100% auto no-repeat;
}
/* the footer's own shell rule owns position, z-index, padding and font now */

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

@media (max-width: 1120px) {
    body.apex-aic .aic-ask__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 3.5vw, 3rem) }
    body.apex-aic .aic-field__plot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }

}

@media (max-width: 900px) {
    body.apex-aic .aic-hero {
        min-height: 0;
        padding-top: clamp(112px, 20vh, 160px);
        padding-bottom: clamp(2.5rem, 6vh, 4rem);
    }
    body.apex-aic .aic-hero__grid { grid-template-columns: 1fr; gap: clamp(2rem, 5vh, 3rem) }
    /* at phone widths a 104% strip is a 73px sliver, which reads as a smudge
       rather than a horizon; the same asset, scaled to earn its place */
    body.apex-aic .aic-hero__statement { max-width: 40rem }
    body.apex-aic .aic-hero__cue { display: none }

    /* Stacked, the index goes above the panel it drives. */
    body.apex-aic .aic-ask__grid { grid-template-columns: 1fr; gap: clamp(1.8rem, 4.5vh, 2.8rem) }
    body.apex-aic .aic-ask.is-live .aic-ask__panels { min-height: 0 }

    body.apex-aic .aic-head--split { grid-template-columns: 1fr; align-items: start; gap: 1.1rem }
    body.apex-aic .aic-field__plot { grid-template-columns: 1fr; gap: clamp(1.8rem, 4vh, 2.6rem) }
    body.apex-aic .aic-plot { max-width: 30rem; margin-inline: auto }
    body.apex-aic .aic-field__out { min-height: 0 }

}


@media (max-width: 620px) {
    body.apex-aic .aic-ask__q { font-size: 1rem; padding: .85rem 0 }
    body.apex-aic .aic-field__side { gap: 1.2rem }
    body.apex-aic .aic-plot { max-width: none }
    body.apex-aic .aic-plot__corner--br { bottom: 2.9rem }
    body.apex-aic .aic-cta__acts .aic-btn { width: 100%; justify-content: center }
}

@media (prefers-reduced-motion: reduce) {
    body.apex-aic .aic-hero__cue span { animation: none }
    body.apex-aic .aic-ask__q-text::after { transition: none }
    body.apex-aic .aic-plot__dot { transition: none }
    }


/* ════ 7 Nov: the games ════ every one of them ends in the form */

/* the hero pad: his written answers */
@keyframes aic-stick { from { scale: 2.2; opacity: 0 } }

/* the board: red questions answer back in blue */

/* the trust sheet as a game */


/* ════ 8 Nov widget pass ════ */
/* the board: answers write in under the question; a plain box says it's fine */


/* ════ 9 Nov: his critique, second attempt ════ the ask-me pad, the brochure and
   the blank boxes are gone (styles above removed, originals in
   _archive/aic-pre-crit-2026-11-09/). In their place: a card statement with his
   pen on it, a chatbot's answer marked up in red, and the trust game with its
   reasons printed. Pen blue is his voice, red is marking someone else's work. */

/* the statement: printed paper, his pen on the AI lines */
/* a crossed-off line: his pen through it, drawn left to right */

/* the chatbot: its window, plain; the red pen in the margin like a marked essay */
body.apex-aic .aic-chat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 19rem); gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center }
body.apex-aic .aic-chat__win { padding: clamp(1.2rem, 2.6vw, 2rem) clamp(1.1rem, 2.6vw, 2rem) 1rem; background: #fff; border: 1px solid #dbe4f1; border-radius: 18px; box-shadow: var(--aic-lift); color: #1b2436; font-size: 1rem; line-height: 1.55 }
body.apex-aic .aic-chat__me { width: fit-content; max-width: 75%; margin: 0 0 1.4rem auto !important; padding: .6em 1em; background: #eef1f6; border-radius: 18px; color: #1b2436 }
body.apex-aic .aic-chat__said { display: grid; gap: .9rem; counter-reset: aic-chat }
body.apex-aic .aic-chat__list { display: grid; gap: .55rem }
body.apex-aic .aic-chat__line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 13rem); column-gap: 1.6rem; align-items: start }
body.apex-aic .aic-chat__list .aic-chat__line { counter-increment: aic-chat }
body.apex-aic .aic-chat__list .aic-chat__line > p { position: relative; padding-left: 1.6em }
body.apex-aic .aic-chat__list .aic-chat__line > p::before { content: counter(aic-chat) "."; position: absolute; left: 0; font-weight: 600 }
body.apex-aic .aic-chat__line b { font-weight: 600 }
body.apex-aic .aic-chat__pen { grid-column: 2; font: 400 1.7rem/1 var(--hand); color: var(--red); font-style: normal; transform: rotate(-1.5deg); transform-origin: 0 50%; text-wrap: pretty }
html.aic-anim body.apex-aic .aic-chat.is-live .aic-chat__line > p { opacity: 0; transform: translateY(4px); transition: opacity .35s var(--aic-ease), transform .35s var(--aic-ease) }
html.aic-anim body.apex-aic .aic-chat.is-live .aic-chat__line.is-on > p { opacity: 1; transform: none }
html.aic-anim body.apex-aic .aic-chat.is-live .aic-chat__pen { opacity: 0; transition: opacity .4s var(--aic-ease) }
html.aic-anim body.apex-aic .aic-chat.is-live.is-marked .aic-chat__pen { opacity: 1 }
html.aic-anim body.apex-aic .aic-chat.is-live.is-marked .aic-chat__line:nth-child(2) .aic-chat__pen { transition-delay: .25s }
html.aic-anim body.apex-aic .aic-chat.is-live.is-marked .aic-chat__list .aic-chat__line:nth-child(3) .aic-chat__pen { transition-delay: .5s }
html.aic-anim body.apex-aic .aic-chat.is-live.is-marked .aic-chat__list .aic-chat__line:nth-child(5) .aic-chat__pen { transition-delay: .75s }
html.aic-anim body.apex-aic .aic-chat.is-live.is-marked .aic-chat__line--close .aic-chat__pen { transition-delay: 1s }
body.apex-aic .aic-chat__line.is-flash > p { animation: aic-chat-flash .45s var(--aic-ease) }
@keyframes aic-chat-flash { from { opacity: .25 } }
body.apex-aic .aic-chat__tools { display: flex; align-items: center; gap: .2rem; margin-top: 1.1rem; color: #6a7890 }
body.apex-aic .aic-chat__tools[hidden], body.apex-aic .aic-chat__count[hidden] { display: none }
body.apex-aic .aic-chat__tools button { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.25rem; padding: .35rem .5rem; border: 0; border-radius: 8px; background: none; color: inherit; font: 500 .9rem/1 var(--aic-sans); cursor: pointer }
body.apex-aic .aic-chat__tools button:hover { background: #f1f4f9; color: var(--aic-ink) }
body.apex-aic .aic-chat__tools button:focus-visible { outline: var(--a-focus); outline-offset: 1px }
body.apex-aic .aic-chat__tools svg { width: 1.15rem; height: 1.15rem }
body.apex-aic .aic-chat__regen { margin-left: .3rem; border: 1px solid #dbe4f1 !important; color: var(--aic-ink) !important }
body.apex-aic .aic-chat__count { margin-left: .5rem; font-size: .86rem; font-variant-numeric: tabular-nums }
body.apex-aic .aic-chat__mine { display: grid; gap: 1.1rem }
body.apex-aic .aic-chat__note { font: 400 clamp(2.2rem, 3.1vw, 2.8rem)/1.02 var(--hand); color: var(--pen); transform: rotate(-1.5deg); transform-origin: 0 50%; text-wrap: pretty }

/* the trust sheet: his read and the reason, printed once you've picked */

@media (max-width: 900px) {
    body.apex-aic .aic-chat { grid-template-columns: minmax(0, 1fr); align-items: start }
    body.apex-aic .aic-chat__mine { padding-bottom: 0 }
}
@media (max-width: 760px) {
    body.apex-aic .aic-chat__line { grid-template-columns: minmax(0, 1fr) }
    body.apex-aic .aic-chat__pen { grid-column: 1; margin: .25rem 0 0 1.6rem; font-size: 1.55rem }
    body.apex-aic .aic-chat__line--open .aic-chat__pen, body.apex-aic .aic-chat__line--close .aic-chat__pen { margin-left: 0 }
    body.apex-aic .aic-chat__me { max-width: 88% }
}


/* ════ 9 Nov: the first-call notes ════ an open notebook. Last Tuesday on the
   left as the owner tells it, where he'd start on the right. Ruled lines are
   the line-height, so the handwriting sits on them. */
body.apex-aic .aic-notes { --rule: 2.6rem; margin: clamp(2rem, 4vw, 3rem) 0 0 }
body.apex-aic .aic-notes__spread {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    border-radius: 6px; background: #fff;
    box-shadow: 0 2px 4px rgba(10, 23, 48, .08), 0 34px 60px -28px rgba(16, 40, 92, .5);
    font-family: var(--hand); color: #1c3f9e;
}
body.apex-aic .aic-notes__page {
    position: relative; padding: calc(var(--rule) * .6) clamp(1.2rem, 3vw, 2.4rem) calc(var(--rule) * 1.2);
    background: repeating-linear-gradient(transparent 0 calc(var(--rule) - 1px), #dbe5f3 calc(var(--rule) - 1px) var(--rule));
    background-position: 0 calc(var(--rule) * .6 + 1.8rem);
}
body.apex-aic .aic-notes__page--day { padding-left: clamp(4.4rem, 8vw, 6.2rem); border-radius: 6px 0 0 6px }
body.apex-aic .aic-notes__page--day::before { content: ""; position: absolute; top: 0; bottom: 0; left: clamp(3.4rem, 6.6vw, 5rem); width: 1px; background: rgba(207, 42, 39, .38) }
body.apex-aic .aic-notes__page--start { border-radius: 0 6px 6px 0; box-shadow: inset 18px 0 22px -18px rgba(16, 40, 92, .28) }
body.apex-aic .aic-notes__title { height: 1.8rem; margin: 0; font-size: 2.5rem; line-height: 1.8rem; color: #16233f; transform: rotate(-1deg); transform-origin: 0 50% }
body.apex-aic .aic-notes__day, body.apex-aic .aic-notes__start { font-size: 1.85rem; line-height: var(--rule) }
body.apex-aic .aic-notes__line { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 10.5rem; column-gap: 1rem; align-items: start }
body.apex-aic .aic-notes__time { position: absolute; right: calc(100% + clamp(1.4rem, 2.6vw, 1.9rem)); top: 0; font-size: 1.5rem; color: #55637c; white-space: nowrap }
body.apex-aic .aic-notes__text > span, body.apex-aic .aic-notes__do {
    background: linear-gradient(transparent 52%, rgba(255, 221, 51, .62) 52% 90%, transparent 90%) no-repeat 0 0 / 0 100%;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
    transition: background-size .45s var(--aic-ease);
}
body.apex-aic :is(.aic-notes__line, .aic-notes__pick).is-lit :is(.aic-notes__text > span, .aic-notes__do) { background-size: 100% 100% }
body.apex-aic .aic-notes__red { font-style: normal; font-size: 1.68rem; color: var(--red); transform: rotate(-2deg); transform-origin: 0 50%; text-wrap: balance }
body.apex-aic .aic-notes__red[hidden] { display: none }
body.apex-aic .aic-notes__line > .aic-notes__red { line-height: 1.1; padding-top: .55rem }
body.apex-aic .aic-notes__start { counter-reset: aic-start }
body.apex-aic .aic-notes__pick { counter-increment: aic-start; position: relative; padding-left: 1.9rem }
body.apex-aic .aic-notes__pick::before { content: counter(aic-start) "."; position: absolute; left: 0; top: 0; color: #16233f }
body.apex-aic .aic-notes__pick .aic-notes__red { display: block; line-height: var(--rule); transform: rotate(-1.2deg) }
body.apex-aic .aic-notes__pick.is-skip s { text-decoration: line-through 2px var(--red) }
body.apex-aic .aic-notes__pick.is-skip::before { color: var(--red) }
body.apex-aic :is(.aic-notes__line, .aic-notes__pick)[role="button"] { cursor: pointer; border-radius: 4px }
body.apex-aic :is(.aic-notes__line, .aic-notes__pick)[role="button"]:hover :is(.aic-notes__text > span, .aic-notes__do) { background-size: 100% 100%; background-image: linear-gradient(transparent 52%, rgba(255, 221, 51, .3) 52% 90%, transparent 90%) }
body.apex-aic :is(.aic-notes__line, .aic-notes__pick)[role="button"]:focus-visible { outline: var(--a-focus); outline-offset: 3px }
body.apex-aic .aic-notes__foot { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; align-items: baseline; justify-content: space-between; margin-top: 1.2rem; font-size: .95rem; color: var(--aic-soft) }
body.apex-aic .aic-notes__hint[hidden] { display: none }
/* written in as it arrives; nothing leaves */
html.aic-anim body.apex-aic .aic-notes :is(.aic-notes__line, .aic-notes__pick) { transition: opacity .5s var(--aic-ease), translate .5s var(--aic-ease); transition-delay: calc(var(--n, 0) * 110ms + .2s) }
html.aic-anim body.apex-aic .aic-notes__pick { transition-delay: calc(var(--n, 0) * 140ms + 1.2s) }
html.aic-anim body.apex-aic .aic-notes:not(.is-revealed) :is(.aic-notes__line, .aic-notes__pick) { opacity: 0; translate: 0 .5rem }
@media (max-width: 900px) {
    body.apex-aic .aic-notes__spread { grid-template-columns: minmax(0, 1fr) }
    body.apex-aic .aic-notes__page--day { border-radius: 6px 6px 0 0 }
    body.apex-aic .aic-notes__page--start { border-radius: 0 0 6px 6px; box-shadow: inset 0 18px 22px -18px rgba(16, 40, 92, .28); padding-left: clamp(4.4rem, 8vw, 6.2rem) }
}
@media (max-width: 620px) {
    body.apex-aic .aic-notes { --rule: 2.3rem }
    body.apex-aic .aic-notes__line { grid-template-columns: minmax(0, 1fr) }
    body.apex-aic .aic-notes__line > .aic-notes__red { padding-top: 0; line-height: var(--rule) }
    body.apex-aic .aic-notes__day, body.apex-aic .aic-notes__start { font-size: 1.62rem }
    body.apex-aic .aic-notes__page--day, body.apex-aic .aic-notes__page--start { padding-left: 3.7rem; padding-right: 1rem }
    body.apex-aic .aic-notes__page--day::before { left: 3rem }
    body.apex-aic .aic-notes__time { font-size: 1.2rem; right: calc(100% + .95rem); width: 2.4rem; white-space: normal; text-align: right; line-height: calc(var(--rule) / 2.1); padding-top: .25rem }
}
@media (prefers-reduced-motion: reduce) {
    body.apex-aic .aic-notes :is(.aic-notes__text > span, .aic-notes__do) { transition: none }
}

/* 9 Nov, four businesses: index tabs on the notebook's top edge choose the spread */
body.apex-aic .aic-notes__tabs { display: flex; gap: .35rem; padding-left: clamp(1.2rem, 4vw, 3rem); overflow-x: auto; scrollbar-width: none }
body.apex-aic .aic-notes__tabs[hidden] { display: none }
body.apex-aic .aic-notes__tabs button {
    flex: none; position: relative; top: 4px; padding: .5rem 1.15rem .75rem;
    border: 0; border-radius: 10px 10px 0 0; background: #e6edf8; color: #3c4b66;
    font: 400 1.7rem/1 var(--hand); cursor: pointer; transition: background .2s, color .2s, top .2s;
}
body.apex-aic .aic-notes__tabs button:hover { background: #d8e3f4; color: #16233f }
body.apex-aic .aic-notes__tabs button[aria-pressed="true"] { top: 0; background: #fff; color: #1c3f9e; box-shadow: 0 -6px 14px -10px rgba(16, 40, 92, .35) }
body.apex-aic .aic-notes__tabs button:focus-visible { outline: var(--a-focus); outline-offset: -3px }
body.apex-aic .aic-notes.is-live .aic-notes__spread { position: relative; border-top-left-radius: 0 }
body.apex-aic .aic-notes__spread[hidden] { display: none }
body.apex-aic .aic-notes__spread + .aic-notes__spread { margin-top: 1.6rem }
body.apex-aic .aic-notes.is-live .aic-notes__spread + .aic-notes__spread { margin-top: 0 }
html.aic-anim body.apex-aic .aic-notes__spread.is-fresh :is(.aic-notes__line, .aic-notes__pick) { opacity: 0; translate: 0 .5rem; transition: none }
html.aic-anim body.apex-aic .aic-notes__spread:not(.is-fresh) .aic-notes__pick { transition-delay: calc(var(--n, 0) * 120ms + .5s) }
@media (max-width: 620px) {
    body.apex-aic .aic-notes__tabs { padding-left: .6rem; gap: .25rem }
    body.apex-aic .aic-notes__tabs button { padding: .45rem .8rem .7rem; font-size: 1.45rem }
}