/*
 * waa-light.css — Website Assistant on the light system.
 *
 * Moves /business-apps/website-assistant/ off the night theme and onto the
 * same light world About (about.css), Contact (cnt2.css) and the blog
 * (blg3/pst3.css) run on. Palette and type scale are lifted verbatim from
 * pst3.css so the four surfaces are one system rather than four near-misses.
 *
 * SCOPED TO body.apex-waa, NEVER body.apex-wa.
 * page-custom-software-development.php carries apex-wa too, loads
 * waa-adnia.css, and reuses the .waa-* class names (its hero is a .waa-hero).
 * Scoping any of this to apex-wa would drag that page into the light system
 * as a side effect. apex-waa exists solely to prevent that.
 *
 * Loaded AFTER waa-adnia.css (declared dependency), so equal-specificity
 * selectors win on order and almost nothing here needs !important — the one
 * exception is the night field, which apex-fx.css sets with !important.
 *
 * waa-adnia.css is token-driven, so most of the conversion is the custom
 * property block below; the rules after it handle the surfaces that hardcode
 * a night value.
 */

/* ════════ SHELL ═════════════════════════════════════════════════════════
   Same story as the other three app pages: the adnia shell in main.css puts
   this page's content at x=130 while the chrome above and below it sits at
   120. One column. */
body.apex-waa .aad-shell {
    width: var(--a-shell);
    margin-inline: auto;
}


body.apex-waa {
    /* pst3.css palette — navy / accent / body / muted / hairline */
    --waa-ink: #0a1730;
    --waa-body: #33415e;
    --waa-soft: #4d5b74;
    --waa-brand: #22458a;
    --waa-accent: #22458a;
    --waa-line: var(--a-line);
    --waa-card: var(--a-card);
    --waa-card-border: var(--a-card-line);
    --waa-card-shadow: var(--a-card-shadow);
    --waa-head-font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --waa-paper: #f2f6fb;
    --waa-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    background: #fff;
}

/* ── kill the night field ────────────────────────────────────────────────
   apex-fx.css paints #050a18 on the shell and a gradient + inline-SVG
   starfield on article.aad-page, the latter with !important. Equal
   specificity plus !important, declared later, takes it. */
body.apex-waa .site-shell,
body.apex-waa .site-main { background: #fff }

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

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

/* ── one face across the page ─────────────────────────────────────────── */
body.apex-waa .waa-main,
body.apex-waa .waa-main *,
body.apex-waa .waa-hero,
body.apex-waa .waa-hero * { font-family: var(--waa-sans) }

/* ── type: pst3's scale, not the night build's poster sizes ───────────── */
body.apex-waa .waa-hero__title {
    font-size: var(--a-t-h1);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.028em;
    color: var(--waa-ink);
}

body.apex-waa .waa-head,
body.apex-waa .waa-main h2 {
    font-size: var(--a-t-head);   /* the site's head rank */
    font-weight: 600;
    letter-spacing: -.022em;
    color: var(--waa-ink);
}

body.apex-waa .waa-hero__statement {
    font-size: var(--a-t-lede);
    line-height: 1.6;
    color: var(--waa-body);
}
/* The live dots. The night sheets set these at neon #58d68d with a matching
   glow, which is a third green and reads as a sticker on a white page. The
   site has one go-green. */
body.apex-waa :is(.waa-demo__dot, .waa-hero__widget-dot, .waa-real__lead-dot) {
    background: var(--waa-brand);
    box-shadow: 0 0 0 3px rgba(34, 69, 138, .16);
}

/* the sub rank. waa-adnia sets .waa-step h3 and .waa-dcard h3 at 800 weight
   and two different sizes, both at (0,2,2). */
body.apex-waa :is(.waa-step, .waa-dcard, .waa-mode) h3 {
    font: 600 var(--a-t-sub)/1.2 var(--waa-sans);
    letter-spacing: -.015em;
}

/* ── surfaces: every night card becomes light paper ──────────────────── */
body.apex-waa .waa-card,
body.apex-waa .waa-dcard,
body.apex-waa .waa-panel,
body.apex-waa .waa-quote,
body.apex-waa .waa-demo__frame,
body.apex-waa .waa-real__shot {
    background: var(--waa-card);
    border: 1px solid var(--waa-card-border);
    box-shadow: var(--waa-card-shadow);
    color: var(--waa-body);
}

/* ── the chat mock ───────────────────────────────────────────────────────
   The transcript is the page's proof, so it keeps a real conversational
   contrast: the visitor speaks on paper, the assistant answers in navy. */
body.apex-waa .waa-bubble {
    background: #eaf0f8;
    border: 1px solid var(--waa-line);
    color: var(--waa-ink);
}

body.apex-waa .waa-bubble--bot,
body.apex-waa .waa-bubble--assistant,
body.apex-waa .waa-bubble--out {
    background: var(--waa-brand);
    border-color: var(--waa-brand);
    color: #fff;
}

body.apex-waa .waa-bubble--typing i { background: rgba(255, 255, 255, .8) }

/* ── rules, inputs and small marks ───────────────────────────────────── */
body.apex-waa .waa-input,
body.apex-waa .waa-demo__input {
    background: #fff;
    border: 1px solid var(--waa-line);
    color: var(--waa-ink);
}

body.apex-waa .waa-eyebrow,
body.apex-waa .waa-kicker,
body.apex-waa .waa-meta { color: var(--waa-soft) }

body.apex-waa .waa-stat__num { color: var(--waa-ink) }
body.apex-waa .waa-stat__label { color: var(--waa-ink) }
body.apex-waa .waa-stat p { color: var(--waa-soft) }

/* ── controls ────────────────────────────────────────────────────────────
   The filled primary is the one place a dark surface is correct on a light
   page; the ghost beside it takes the accent rather than a night tint. */
body.apex-waa .waa-btn,
body.apex-waa .waa-btn--primary {
    background: var(--waa-ink);
    border: 1px solid var(--waa-ink);
    color: #fff;
}

body.apex-waa .waa-btn:hover,
body.apex-waa .waa-btn--primary:hover {
    background: var(--waa-brand);
    border-color: var(--waa-brand);
}

body.apex-waa .waa-btn--ghost {
    background: transparent;
    border: 1px solid rgba(13, 35, 80, .24);
    color: var(--waa-brand);
}

body.apex-waa .waa-btn--ghost:hover {
    border-color: var(--waa-brand);
    color: var(--waa-ink);
}

body.apex-waa .waa-arrow { color: currentColor }

/* visible keyboard focus, matching the rest of the light system */
body.apex-waa .waa-main a:focus-visible,
body.apex-waa .waa-main button:focus-visible,
body.apex-waa .waa-hero a:focus-visible,
body.apex-waa .waa-main summary:focus-visible {
    outline: var(--a-focus);
    outline-offset: var(--a-focus-off);
}

/* ── the shared footer, re-skinned exactly as About and the blog do ───── */
body.apex-waa .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-waa .nx-footer__ridge { display: none }

body.apex-waa .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 */

/* ── controls, corrected to the real class names ─────────────────────────
   The buttons are .waa-chip / .waa-chip--solid, not .waa-btn. Measured after
   the token swap: the solid chip kept its night gradient and inherited
   --waa-body, giving dark navy text on medium blue; the ghost chip kept a
   translucent NIGHT fill, rgba(8,18,40,.4), which on a white page is a dark
   pill with dark text on it. Both are now the light system's own pair — a
   solid navy primary and a hairline ghost — matching About and Contact. */
/* The primary carries BOTH classes (`waa-chip waa-chip--solid`), and base and
   modifier are equal specificity (0,2,1) — so whichever is written last wins.
   Writing the modifier first, as this block originally did, let the ghost base
   silently strip the primary back to transparent with accent text. `:not()`
   and the doubled class make the two mutually exclusive, so source order
   cannot decide the outcome again. */
/* the site's button. The night base in waa-adnia.css draws a 999px pill at
   1rem/700; scoped here rather than there because body.apex-wa is shared with
   the Custom Software page. */
body.apex-waa .waa-chip {
    padding: var(--a-btn-pad);
    border-radius: var(--a-btn-r);
    font: var(--a-btn-font);
}

body.apex-waa .waa-chip:not(.waa-chip--solid) {
    background-image: none;
    background-color: #fff;
    border: 1px solid var(--a-card-line);
    color: var(--waa-ink);
}

body.apex-waa .waa-chip:not(.waa-chip--solid):hover,
body.apex-waa .waa-chip:not(.waa-chip--solid):focus-visible {
    border-color: var(--waa-brand);
    color: var(--waa-ink);
}

body.apex-waa .waa-chip.waa-chip--solid {
    background-image: none;
    background-color: var(--a-brand);
    border: 1px solid var(--a-brand);
    color: #fff;
    box-shadow: var(--a-btn-glow);
}

body.apex-waa .waa-chip.waa-chip--solid:hover,
body.apex-waa .waa-chip.waa-chip--solid:focus-visible {
    background-color: var(--a-brand-deep);
    border-color: var(--a-brand-deep);
    color: #fff;
}

/* the solid chip's own children can carry the night gradient too */
body.apex-waa .waa-chip.waa-chip--solid span,
body.apex-waa .waa-chip.waa-chip--solid i,
body.apex-waa .waa-chip.waa-chip--solid svg { color: #fff; background-image: none }

/* the hero's second action: the site's quiet button */
body.apex-waa .waa-hero__link {
    padding: var(--a-btn-pad);
    border: 1px solid var(--a-card-line);
    border-radius: var(--a-btn-r);
    font: var(--a-btn-font);
    background-color: #fff;
    color: var(--waa-ink);
}
body.apex-waa .waa-hero__link:hover { border-color: var(--a-brand); color: var(--a-brand) }
body.apex-waa .waa-hero__cue { color: var(--waa-soft) }

/* ── the shared Business Apps components ─────────────────────────────────
   .ba-founder and .ba-shot come from apex-fx.css, scoped to
   .aa-adnia-copy-page and coloured for the night ground: body copy at
   rgb(183,199,227) and captions at rgb(159,182,218). Measured on this page
   after the conversion those land at 1.71:1 and 2.06:1 on white — legible on
   #050a18, effectively invisible here. The other six Business Apps pages are
   still dark, so these corrections are fenced behind apex-waa like the rest. */
body.apex-waa .ba-founder,
body.apex-waa .ba-real__stage {
    background: transparent;
    color: var(--waa-body);
}

body.apex-waa .ba-founder__copy h2 { color: var(--waa-ink) }
body.apex-waa .ba-founder__copy p { color: var(--waa-body) }
body.apex-waa .ba-founder__sign { color: var(--waa-ink) }
body.apex-waa .ba-real__cap { color: var(--waa-soft) }

/* the screenshot frame keeps its dark window chrome — a product screenshot
   reads as a screenshot precisely because it has its own chrome — but the
   placeholder caption sits on the light page, not on the bar */
body.apex-waa .ba-shot {
    background: var(--waa-card);
    border: 1px solid var(--waa-card-border);
}

body.apex-waa .ba-shot__ph,
body.apex-waa .ba-shot__ph small { color: var(--waa-soft) }

/* the demo panel's status strip */
body.apex-waa .waa-demo__head { color: var(--waa-soft) }
body.apex-waa .waa-demo__head b,
body.apex-waa .waa-demo__head strong { color: var(--waa-ink) }

/* ── translucent night strips over the new light surfaces ────────────────
   These three carry a see-through NIGHT fill (rgba(8,18,40,.35–.55)) that was
   invisible against #050a18 but composites to a mid grey-blue band on paper,
   dragging the text on them to 1.7–2.8:1. They become light strips instead.
   `.ba-shot__ph` additionally lost to apex-fx's `.ba-shot.is-empty
   .ba-shot__ph` at (0,3,1), so it is matched at that specificity here. */
body.apex-waa .waa-demo__head {
    background-color: rgba(13, 35, 80, .04);
    border-bottom: 1px solid var(--waa-line);
}

body.apex-waa .ba-shot__bar {
    background-color: rgba(13, 35, 80, .06);
    border-bottom: 1px solid var(--waa-line);
}

body.apex-waa .ba-shot__bar b,
body.apex-waa .ba-shot__bar small { color: var(--waa-soft) }
body.apex-waa .ba-shot__bar i { background: rgba(13, 35, 80, .22) }

body.apex-waa .ba-shot.is-empty .ba-shot__ph,
body.apex-waa .ba-shot.is-empty .ba-shot__ph small { color: var(--waa-soft) }

/* the "new lead captured" callout was a dark aside floating on the stage */
body.apex-waa .waa-real__lead {
    background-color: #fff;
    border: 1px solid var(--waa-line);
    box-shadow: var(--a-card-shadow);
}

body.apex-waa .waa-real__lead strong { color: var(--waa-ink) }
body.apex-waa .waa-real__lead span { color: var(--waa-body) }

/* The callout paints a night gradient as its background-IMAGE, so setting
   background-color alone left the dark panel intact underneath and the
   corrected navy text sitting on it at 1:1. Clear the image too — the same
   trap the solid chip had. */
body.apex-waa .waa-real__lead { background-image: none }

/* ── the reserved screenshot slot ────────────────────────────────────────
   inc/waa-adnia-body.php only adds .is-empty when assets/media/ba-shots/
   waa-chat.jpg is absent — which it is, so this is a slot waiting on a real
   capture, not a broken image. On the night ground it read as a quiet panel;
   on white the 800-weight placeholder heading made it look like a failed
   asset. It now reads as a deliberately reserved space: dashed hairline,
   muted small caps, no shouting. Dropping the real screenshot in removes
   .is-empty and none of this applies. */
body.apex-waa .ba-shot.is-empty {
    background: repeating-linear-gradient(-45deg,
        rgba(13, 35, 80, .022) 0 10px, transparent 10px 20px), #f7f9fc;
    border-style: dashed;
    border-color: rgba(13, 35, 80, .18);
    box-shadow: none;
}

body.apex-waa .ba-shot.is-empty .ba-shot__ph {
    gap: .55rem;
    font: 600 15px/1.3 var(--waa-sans);
    letter-spacing: .01em;
    color: var(--waa-soft);
}

body.apex-waa .ba-shot.is-empty .ba-shot__ph small {
    font: 600 var(--a-t-micro)/1.3 var(--waa-sans);
    letter-spacing: var(--a-track-micro);
    text-transform: uppercase;
    /* #7d8ba6 measured 3.26:1 on the hatched slot — below the 4.5 floor for
       text this size, even as a placeholder label */
    color: var(--waa-soft);
}

/* ── the founder photograph ──────────────────────────────────────────────
   A 50%-opacity navy gradient in multiply blend was tuned to sink the photo
   into #050a18. Over a white page it just makes the picture look muddy and
   grey. A much lighter tint keeps it tied to the palette without dulling it. */
body.apex-waa .ba-founder__media::after {
    background: linear-gradient(150deg, rgba(28, 62, 134, .12), rgba(70, 116, 196, .05));
    mix-blend-mode: normal;
}

/* ── carousel controls ───────────────────────────────────────────────────
   The arrows kept a rgba(8,18,40,.5) night fill, which on paper is a heavy
   grey disc. White disc, hairline, navy glyph — the light system's own. */
body.apex-waa .waa-carousel__arrow {
    background: #fff;
    border: 1px solid rgba(13, 35, 80, .18);
    color: var(--waa-ink);
    box-shadow: 0 2px 8px rgba(15, 45, 100, .06);
}

body.apex-waa .waa-carousel__arrow:hover {
    border-color: var(--waa-brand);
    color: var(--waa-brand);
}

body.apex-waa .waa-carousel__dot { background: rgba(13, 35, 80, .18) }
body.apex-waa .waa-carousel__dot.is-active { background: var(--waa-brand) }

/* ── the close ───────────────────────────────────────────────────────────
   This was a paper card in a rounded box, sitting immediately above the
   footer's ice shelf: a frame around the page's last words. The card is gone
   and the section runs full bleed, with the shell moved to the inner block.

   It carried the pale fx-peaks strip for a day after that. Washing its
   lower half back to white hid the hard seam where the photograph's flat base
   met the footer, but not the real problem: the footer is a close-up ice
   shelf, and a distant range stacked directly on it is two horizons at two
   scales. The peaks are a high-on-the-page asset — the hero, or nothing. The
   close is white, and hands straight over to the shelf. */
body.apex-waa .waa-cta {
    padding-block: clamp(2.5rem, 7vh, 5rem) clamp(3.5rem, 9vh, 6rem);
}

body.apex-waa .waa-cta__panel {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

/* the hairline highlight along the panel's top edge went with the box */
body.apex-waa .waa-cta__panel::before { content: none }

/* the one small-text line that ends up over the ridge, where soft grey is
   marginal against the darkest snow: it takes the body tone instead */

/* the close rank, so the last line of this page is the size it is on the
   other twelve. Its two-column layout stays: this page is the one the rest
   of the site was drawn from, and its ending is an argument, not a sign-off. */
body.apex-waa .waa-cta__lead h2 { color: var(--waa-ink); font-size: var(--a-t-close); line-height: 1.06 }
body.apex-waa .waa-cta__lead p { color: var(--waa-body) }
/* the close's lead is two paragraphs now, and the reset above zeroes the gap */
body.apex-waa .waa-cta__lead p + p { margin-top: .9rem }
body.apex-waa .waa-cta__note,
body.apex-waa .waa-cta__panel small { color: var(--waa-soft) }

/* ── the black band above the footer ─────────────────────────────────────
   main.css sets `body.aa-adnia-copy-page .site-shell, .site-main {
   background: #050a18 !important }`. This page still carries that class — and
   unlike About it genuinely needs it, because its markup really is .aad-* and
   .ba-*, so the class cannot simply be dropped. The earlier white rule here
   therefore lost, and every pixel of shell not covered by article.aad-page
   showed through near-black: a hard dark band between the closing panel and
   the ice shelf. Beating an !important needs an !important.

   The trailing margin that created that strip goes too, so the shelf now
   rises directly out of the page instead of after a gap. */
/* main.css:13804 paints `body { background: #050a18 !important }` for every
   aa-adnia-copy-page, and the light conversion only covered .site-shell and
   .site-main. The BODY itself was still night on a page that renders white:
   it shows in the overscroll bounce and under a short page. */
body.apex-waa,
body.apex-waa .site-shell,
body.apex-waa .site-main { background: var(--a-page) !important }

body.apex-waa .waa-main > *:last-child { margin-bottom: 0 }
body.apex-waa .waa-cta { margin-bottom: 0 }

/* ── the hero on phones ──────────────────────────────────────────────────
   88svh is right on a desktop, where the centred block fills the frame. On a
   390x844 phone the same rule reserves ~743px for content that measures ~400,
   leaving roughly 290px of blank white between the buttons and the scroll
   cue. Below 900px, where the stage stacks under the copy, the hero sizes to
   its own content instead, with the top padding still clearing the fixed
   header. 900 rather than 760 because the stacked hero is tall enough at 860
   that vertical centring pushed the h1 up behind the header. */
@media (max-width: 900px) {
    body.apex-waa .waa-hero {
        min-height: 0;
        padding-block: clamp(104px, 18vh, 140px) clamp(36px, 7vh, 60px);
    }
    body.apex-waa .waa-hero__inner { margin-block: 0 }

    /* The scroll cue existed to say "there is more below" on a hero that
       filled the viewport. Stacked, the leads are already on screen, so the
       cue points at nothing and collides with what it sits beside. */
    body.apex-waa .waa-hero__cue { display: none }
}

/* ════════════════════════════════════════════════════════════════════════
   2026-08-22 — the funnel pass. The page sells the outcome (a named lead in
   the inbox) rather than touring the app, so the admin screenshots are gone
   and three new components carry the argument: the widget's own starter
   chips inside the transcript, the lead card, and the offer stack. All of it
   is still fenced behind apex-waa — Custom Software shares waa-adnia.css and
   the .waa-* names, and must not inherit any of this.
   ════════════════════════════════════════════════════════════════════════ */

/* the assistant's pricing reply is two paragraphs in the app; each is a
   block span inside the bubble so the gap survives */
body.apex-waa .waa-bubble__para { display: block }
body.apex-waa .waa-bubble__para + .waa-bubble__para { margin-top: .6rem }

/* The real widget seats the assistant on the left and the visitor on the
   right; the night build had them swapped. The closing panel keeps its
   right-aligned bubble, because there the assistant is making the pitch
   beside the buttons rather than replaying a chat. */
body.apex-waa .waa-demo__thread .waa-bubble--bot { align-self: flex-start; border-radius: 18px; border-bottom-left-radius: 6px }
body.apex-waa .waa-demo__thread .waa-bubble--visitor { align-self: flex-end; border-radius: 18px; border-bottom-right-radius: 6px }

/* ── the hero stage ──────────────────────────────────────────────────────
   The hero was one column of copy with the widget pill floating loose in the
   bottom-right corner, so better than half of the first viewport was white.
   The right column now carries what the page sells: two leads landing above
   the assistant's own opening line, in the arrangement they take on a real
   screen — notifications at the top, the chat down in the corner. */
/* no width here: .aad-shell owns it, and setting one full-bleeds the hero
   out of alignment with every section below it */
body.apex-waa .waa-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}
body.apex-waa .waa-hero__copy { min-width: 0 }
/* The stage is the sample chat now (2026-10-28 rebuild): the conversation
   that turns a 9pm visitor into a lead is the picture of the promise. */
body.apex-waa .waa-hero__stage {
    width: min(100%, 29rem);
    min-width: 0;
    margin: 0 0 0 auto;
}
body.apex-waa .waa-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.4rem;
    align-items: center;
}

/* ── section heads that fill the frame ───────────────────────────────────
   A left-aligned h2 with its lead paragraph stacked underneath left half the
   shell empty above two-column content. Splitting the head puts the lead in
   the second column, where the grid below it already is. */
body.apex-waa .waa-head--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1rem, 4vw, 3.4rem);
    align-items: end;
    max-width: none;
}
body.apex-waa .waa-head--split .waa-head__lead { margin: 0; max-width: 38rem }

/* the two numbers sat in a 56rem box inside a 1180px shell, leaving a third
   of the row blank; they take the full width and the copy keeps its measure */
body.apex-waa .waa-stats__grid { max-width: none; gap: clamp(1.4rem, 4vw, 3.6rem) }
body.apex-waa .waa-stat p { max-width: 34rem }

/* the accordion runs at a reading measure, so it centres under a centred
   head rather than hugging the left edge with a void beside it */
body.apex-waa .waa-faq__list { margin-inline: auto }
body.apex-waa .apex-faq {
    --faq-line:   var(--waa-line);
    --faq-ink:    var(--waa-ink);
    --faq-body:   var(--waa-body);
    --faq-accent: var(--waa-accent);
}

/* ── five minutes ────────────────────────────────────────────────────── */
/* The sticky intro could only travel the height of its own grid cell: the
   section is `align-items: start`, so with the steps beside it the left
   column went blank halfway down. Stretching the cell gives the sticky
   block the whole column, and the setup capture fills it. */
body.apex-waa .waa-method__intro { align-self: stretch }
body.apex-waa .waa-method__fig {
    margin: 2rem 0 0;
    max-width: 26rem;
    border: 1px solid var(--waa-line);
    border-radius: var(--a-r);
    overflow: hidden;
    background: #fff;
    box-shadow: var(--a-card-shadow);
}
body.apex-waa .waa-method__fig img { display: block; width: 100%; height: auto }
body.apex-waa .waa-method__fig figcaption {
    padding: .8rem 1rem 1rem;
    border-top: 1px solid var(--waa-line);
    color: var(--waa-soft);
    font-size: var(--a-t-mark);
    line-height: 1.5;
}

@media (max-width: 900px) {
    body.apex-waa .waa-hero__inner {
        grid-template-columns: 1fr;
        gap: clamp(1.8rem, 6vw, 2.8rem);
    }
    body.apex-waa .waa-hero__stage { width: 100%; margin-left: 0 }
    body.apex-waa .waa-head--split { grid-template-columns: 1fr; gap: 0 }
    body.apex-waa .waa-head--split .waa-head__lead { margin-top: 1.2rem }
}

/* ── THE OPENING ─────────────────────────────────────────────────────────
   waa-adnia.css sizes this hero at 88svh and centres the copy inside it, so
   the first line's position depended on how much copy the page carried. The
   site opens at one distance now and the hero grows to fit. */
body.apex-waa .waa-hero {
    min-height: 0;
    padding-block: var(--a-hero-pt) var(--a-hero-pb);
}
body.apex-waa .waa-hero__inner { margin-block: 0 }

/* ── section heads open on the left edge ─────────────────────────────────
   Three of this page's nine heads were centred, so the reader's eye had to
   find a new starting point three times on the way down. Every other page
   centres its close and nothing else. */
body.apex-waa .waa-head--center {
    margin-inline: 0;
    text-align: left;
}
body.apex-waa .waa-head--center .waa-head__lead { margin-inline: 0 }


/* ════════════════════════════════════════════════════════════════════════
   2026-10-28 rebuild. Every section below is set as type: no cards of icon
   plus heading, no tables, no coloured verdict writing. Ink states, soft is
   skippable, the one blue marks what Apex does or what you get.
   ════════════════════════════════════════════════════════════════════════ */

/* the hero headline settled at ~1.9s; it now runs at once and quicker */
body.apex-waa .waa-hero [data-reveal-words] .waa-word > span {
    transition-duration: .6s;
    transition-delay: calc(var(--w, 0) * 28ms);
}

/* ── the chat in the hero ── */
body.apex-waa .waa-hero__stage.waa-demo__panel {
    border: 1px solid var(--waa-card-border);
    border-radius: var(--a-r);
    background: #fff;
    box-shadow: var(--a-card-shadow);
    overflow: hidden;
}
body.apex-waa .waa-hero__stage .waa-demo__head {
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: .9rem 1.3rem;
    border-bottom: 1px solid var(--waa-line);
    font: 600 var(--a-t-mark)/1.2 var(--waa-sans);
    letter-spacing: 0;
    text-transform: none;
    color: var(--waa-ink);
}
body.apex-waa .waa-hero__stage .waa-demo__head span { color: var(--waa-soft); font-weight: 400 }
body.apex-waa .waa-hero__stage .waa-demo__thread { gap: .6rem; padding: 1.2rem 1.2rem 1.4rem }
body.apex-waa .waa-hero__stage .waa-bubble {
    max-width: 88%;
    margin: 0;
    padding: .7rem .95rem;
    font-size: .93rem;
    line-height: 1.45;
}

/* ── what you see in the morning ── */
body.apex-waa .waa-morning__body {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(1.6rem, 5vw, 4.5rem);
    align-items: center;
}
body.apex-waa .waa-notice {
    padding: 1.2rem 1.35rem;
    border: 1px solid var(--waa-card-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--a-card-shadow);
}
body.apex-waa .waa-notice p { margin: 0 }
body.apex-waa .waa-notice__from {
    display: flex;
    justify-content: space-between;
    color: var(--waa-soft);
    font-size: var(--a-t-mark);
}
body.apex-waa .waa-notice__title {
    margin-top: .55rem !important;
    color: var(--waa-ink);
    font-size: var(--a-t-spoken);
    font-weight: 600;
}
body.apex-waa .waa-notice__text { margin-top: .25rem !important; color: var(--waa-body); line-height: 1.5 }
body.apex-waa .waa-morning__quote {
    margin: 0;
    color: var(--waa-ink);
    font-size: var(--a-t-head);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -.018em;
    text-wrap: balance;
}
body.apex-waa .waa-morning__note {
    max-width: 36rem;
    margin: 1.2rem 0 0;
    color: var(--waa-body);
    font-size: var(--a-t-spoken);
    line-height: 1.55;
}

/* ── why people talk to it: three sentences, the last one is ours ── */
body.apex-waa .waa-vs__list { list-style: none; margin: 0; padding: 0 }
body.apex-waa .waa-vs__row {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: .4rem clamp(1.4rem, 4vw, 3.4rem);
    align-items: baseline;
    padding: clamp(1.2rem, 2.4vw, 1.8rem) 0;
    border-top: 1px solid var(--waa-line);
}
body.apex-waa .waa-vs__list > .waa-vs__row:last-child { border-bottom: 1px solid var(--waa-line) }
body.apex-waa .waa-vs__name { color: var(--waa-ink); font-size: var(--a-t-sub); font-weight: 600; letter-spacing: -.012em }
body.apex-waa .waa-vs__says { color: var(--waa-soft); font-size: var(--a-t-spoken); line-height: 1.5; max-width: 40rem }
body.apex-waa .waa-vs__row--this .waa-vs__name { color: var(--waa-brand) }
body.apex-waa .waa-vs__row--this .waa-vs__says { color: var(--waa-ink) }

/* ── what it asks for ── */
body.apex-waa .waa-asks__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.8rem, 5vw, 4.5rem);
    align-items: start;
}
body.apex-waa .waa-asks__modes { list-style: none; margin: 0; padding: 0 }
body.apex-waa .waa-asks__modes li {
    padding: 1.1rem 0;
    border-top: 1px solid var(--waa-line);
    color: var(--waa-body);
    font-size: var(--a-t-spoken);
    line-height: 1.5;
}
body.apex-waa .waa-asks__modes li:first-child { border-top: 0; padding-top: 0 }
body.apex-waa .waa-asks__modes b { display: block; margin-bottom: .2rem; color: var(--waa-ink); font-size: var(--a-t-sub); font-weight: 600 }
body.apex-waa .waa-asks__lead { margin: 0 0 1rem; color: var(--waa-ink); font-size: var(--a-t-spoken); line-height: 1.5 }
body.apex-waa .waa-asks__ends ul { list-style: none; margin: 0; padding: 0 }
body.apex-waa .waa-asks__ends li {
    padding: .85rem 0;
    border-top: 1px solid var(--waa-line);
    line-height: 1.45;
}
body.apex-waa .waa-asks__ends li span { display: block; color: var(--waa-soft) }
body.apex-waa .waa-asks__ends li b { color: var(--waa-brand); font-weight: 600 }
body.apex-waa .waa-asks__ends li b::before { content: "\2192\00a0" }

/* ── is it worth it ── */
body.apex-waa .waa-worth__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(1.8rem, 5vw, 4.5rem);
    align-items: start;
}
body.apex-waa .waa-worth__case { position: sticky; top: 18vh }
body.apex-waa .waa-worth__in { margin: 0 0 .9rem; color: var(--waa-soft); font-size: var(--a-t-mark) }
body.apex-waa .waa-worth__chat { display: flex; flex-direction: column; gap: .6rem }
body.apex-waa .waa-worth__chat .waa-bubble { max-width: 90%; margin: 0; padding: .75rem 1rem; border-radius: 18px; font-size: .95rem; line-height: 1.45 }
body.apex-waa .waa-worth__chat .waa-bubble--visitor { align-self: flex-end; border-bottom-right-radius: 6px }
body.apex-waa .waa-worth__chat .waa-bubble--bot { align-self: flex-start; border-bottom-left-radius: 6px }
body.apex-waa .waa-worth__cost {
    margin: 1.4rem 0 0;
    padding-top: 1.1rem;
    border-top: 1px solid var(--waa-line);
    color: var(--waa-ink);
    font-size: var(--a-t-spoken);
    line-height: 1.5;
}
body.apex-waa .waa-worth__why p {
    margin: 0;
    padding: 1.2rem 0;
    border-top: 1px solid var(--waa-line);
    color: var(--waa-body);
    font-size: var(--a-t-spoken);
    line-height: 1.6;
}
body.apex-waa .waa-worth__why p:first-child { border-top: 0; padding-top: 0 }
body.apex-waa .waa-worth__why b { display: block; margin-bottom: .25rem; color: var(--waa-ink); font-size: var(--a-t-sub); font-weight: 600 }
body.apex-waa :is(.waa-worth__why, .waa-close__call) a {
    color: var(--waa-brand);
    text-decoration: underline;
    text-underline-offset: .18em;
}

/* ── Brain Power ── */
body.apex-waa .waa-power__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.8rem, 5vw, 4.5rem);
    align-items: start;
}
body.apex-waa .waa-power__what {
    margin: 0;
    color: var(--waa-ink);
    font-size: var(--a-t-sub);
    line-height: 1.45;
    letter-spacing: -.01em;
}
body.apex-waa .waa-power__facts p {
    margin: 0;
    padding: 1rem 0;
    border-top: 1px solid var(--waa-line);
    color: var(--waa-body);
    line-height: 1.55;
}
body.apex-waa .waa-power__facts p:first-child { border-top: 0; padding-top: 0 }
body.apex-waa .waa-power__facts b { display: block; color: var(--waa-ink); font-size: var(--a-t-spoken); font-weight: 600 }

/* ── set it up yourself ── */
body.apex-waa .waa-method__sticky .waa-chip { margin-top: .4rem }
body.apex-waa .waa-step { padding-block: 1.3rem }
body.apex-waa .waa-step__num { margin-bottom: .55rem; color: var(--waa-brand) }
body.apex-waa .waa-step h3 { margin-bottom: .4rem }

/* ── the $100 setup ── */
body.apex-waa .waa-setup__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(1.8rem, 5vw, 4.5rem);
    align-items: start;
    padding-top: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid var(--waa-line);
}
body.apex-waa .waa-setup__grid .waa-head { margin: 0 }
body.apex-waa .waa-setup__price {
    margin: 1.1rem 0 0;
    color: var(--waa-brand);
    font-size: var(--a-t-close);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.03em;
}
body.apex-waa .waa-setup__price span { color: var(--waa-soft); font-size: var(--a-t-spoken); font-weight: 400; letter-spacing: 0 }
body.apex-waa .waa-setup__body > p {
    margin: 0 0 1rem;
    max-width: 38rem;
    color: var(--waa-body);
    font-size: var(--a-t-spoken);
    line-height: 1.6;
}
body.apex-waa .waa-setup__body > p:first-child { color: var(--waa-ink) }
body.apex-waa .waa-setup__act { margin-top: 1.6rem }
body.apex-waa .waa-setup__act p { margin: .9rem 0 0; color: var(--waa-soft); font-size: .92rem; line-height: 1.5 }

/* ── the close, with the founder in it ── */
body.apex-waa .waa-close { margin-bottom: 0 }
body.apex-waa .waa-close .ba-founder__copy h2 { font-size: var(--a-t-close); line-height: 1.06 }
body.apex-waa .waa-close__act { display: flex; flex-wrap: wrap; gap: .8rem 1rem; margin-top: 1.6rem }
body.apex-waa .waa-close__call { margin-top: 1.1rem !important; color: var(--waa-soft) !important; font-size: .95rem }

@media (max-width: 900px) {
    body.apex-waa :is(.waa-morning__body, .waa-asks__grid, .waa-worth__grid, .waa-power__grid, .waa-setup__grid) { grid-template-columns: 1fr }
    body.apex-waa .waa-vs__row { grid-template-columns: 1fr }
    body.apex-waa .waa-worth__case { position: static }
}

/* ════════ 4 NOV: THE PHONE, THE NOTICES, THE THREE WIDGETS ═══════════════ */
body.apex-waa .waa-page .waa-pen { margin: 0; font: 400 1.9rem/1.1 "Apex Hand", cursive; color: #1f5fd6; text-wrap: balance }
body.apex-waa .waa-textlink { color: var(--waa-brand); font-weight: 600; font-size: var(--a-t-btn, 1rem); text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px }
body.apex-waa .waa-textlink:hover { color: var(--waa-ink) }
body.apex-waa .waa-hero__actions { align-items: center; gap: 1.4rem }

/* the phone: as big as a phone */
body.apex-waa .waa-ph {
    justify-self: center; position: relative; z-index: 1; margin: 0;
    width: min(310px, 82vw); height: 640px; padding: 10px;
    background: #0b1220; border-radius: 50px;
    box-shadow: 0 0 0 1px #2b3650, 0 34px 60px -18px rgba(10, 23, 48, .5), 0 12px 24px -10px rgba(10, 23, 48, .3);
}
body.apex-waa .waa-ph__screen { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; background: #fff; border-radius: 41px }
body.apex-waa .waa-ph__island { position: absolute; top: 10px; left: 50%; width: 86px; height: 25px; margin-left: -43px; background: #0b1220; border-radius: 14px }
body.apex-waa .waa-ph__status { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 14px 24px 8px; font-size: .86rem; font-weight: 600; color: var(--waa-ink) }
body.apex-waa .waa-ph__status svg { width: 38px; height: 12px; fill: currentColor; color: var(--waa-ink) }
body.apex-waa .waa-ph__who { margin: 0; padding: 12px 18px 11px; font-size: .93rem; font-weight: 600; color: var(--waa-ink); text-align: center; border-bottom: 1px solid var(--waa-line) }
body.apex-waa .waa-ph__thread {
    flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: .55rem; padding: 14px 12px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26px); mask-image: linear-gradient(180deg, transparent 0, #000 26px);
}
body.apex-waa .waa-page .waa-ph__b { flex: none; margin: 0; max-width: 86%; padding: .58rem .8rem; font-size: .94rem; line-height: 1.38; border-radius: 16px; text-wrap: pretty }
body.apex-waa .waa-page .waa-ph__b--v { align-self: flex-end; background: #e9eef6; color: var(--waa-ink); border-bottom-right-radius: 5px }
body.apex-waa .waa-page .waa-ph__b--b { align-self: flex-start; background: var(--waa-brand); color: #fff; border-bottom-left-radius: 5px }
body.apex-waa .waa-ph__b.is-new { animation: waa-ph-in .32s cubic-bezier(.2, .8, .2, 1) both }
@keyframes waa-ph-in { from { opacity: 0; transform: translateY(8px) } }
body.apex-waa .waa-ph__dots { display: inline-flex; gap: 4px; padding: .72rem .85rem }
body.apex-waa .waa-ph__dots i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: waa-ph-dot 1s infinite }
body.apex-waa .waa-ph__dots i:nth-child(2) { animation-delay: .15s }
body.apex-waa .waa-ph__dots i:nth-child(3) { animation-delay: .3s }
@keyframes waa-ph-dot { 0%, 70%, 100% { opacity: .35 } 30% { opacity: 1 } }
body.apex-waa .waa-ph__cta { display: block; margin-top: .55rem; padding: .42rem .7rem; background: #fff; color: var(--waa-brand); font-weight: 600; text-align: center; border-radius: 9px }
body.apex-waa .waa-ph__input { display: flex; align-items: center; gap: .5rem; margin: 0 10px 18px; padding: .42rem .42rem .42rem .9rem; font-size: .92rem; color: var(--waa-soft); border: 1px solid #cfd8e6; border-radius: 22px }
body.apex-waa .waa-ph__input span { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap }
body.apex-waa .waa-ph__input.is-typing { color: var(--waa-ink) }
body.apex-waa .waa-ph__input.is-typing span { display: flex; justify-content: flex-end }
body.apex-waa .waa-ph__input i { flex: none; display: grid; place-items: center; width: 28px; height: 28px; background: var(--waa-brand); border-radius: 50% }
body.apex-waa .waa-ph__input svg { width: 14px; height: 14px }

/* the morning: notices, big enough to read */
body.apex-waa .waa-morning__body { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center }
body.apex-waa .waa-stack { display: grid; gap: .9rem }
body.apex-waa .waa-stack__item:nth-child(1) .waa-note { transform: rotate(-.5deg) }
body.apex-waa .waa-stack__item:nth-child(2) .waa-note { transform: translateX(14px) rotate(.4deg) }
body.apex-waa .waa-stack__item:nth-child(3) .waa-note { transform: translateX(-4px) rotate(-.25deg) }
body.apex-waa .waa-note { padding: 1rem 1.25rem 1.1rem; background: #fff; border: 1px solid var(--a-card-line); border-radius: 18px; box-shadow: var(--a-card-shadow-2, var(--a-card-shadow)) }
body.apex-waa .waa-note summary { display: block; cursor: pointer; list-style: none }
body.apex-waa .waa-note summary::-webkit-details-marker { display: none }
body.apex-waa .waa-note summary:focus-visible { outline: var(--a-focus); outline-offset: 4px; border-radius: 8px }
body.apex-waa .waa-page .waa-note__from { display: flex; justify-content: space-between; margin: 0 0 .3rem; font-size: .9rem; color: var(--waa-soft) }
body.apex-waa .waa-page .waa-note__title { display: block; margin: 0 0 .25rem; font-size: 1.06rem; font-weight: 600; color: var(--waa-ink) }
body.apex-waa .waa-page .waa-note__says { display: block; margin: 0; font-size: 1.14rem; line-height: 1.42; color: var(--waa-ink) }
body.apex-waa .waa-page .waa-note__open { display: inline-block; margin-top: .5rem; font-size: .96rem; font-weight: 600; color: var(--a-accent, #1f5fd6); text-decoration: underline; text-underline-offset: .2em }
body.apex-waa .waa-note__d[open] .waa-note__open { display: none }
body.apex-waa .waa-stack__item .waa-note:has(.waa-note__d[open]) { transform: none }
body.apex-waa .waa-page .waa-note__chat { display: flex; flex-direction: column; gap: .5rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--a-card-line) }
body.apex-waa .waa-page .waa-note__chat .waa-bubble { max-width: 85%; margin: 0; font-size: 1rem; line-height: 1.4 }
body.apex-waa .waa-page .waa-note__chat .waa-bubble--bot { align-self: flex-start; border-radius: 16px; border-bottom-left-radius: 5px }
body.apex-waa .waa-page .waa-note__chat .waa-bubble--visitor { align-self: flex-end; border-radius: 16px; border-bottom-right-radius: 5px }
body.apex-waa .waa-page .waa-morning__big { margin: 0 0 1rem; font-size: clamp(1.6rem, 2.7vw, 2.3rem); font-weight: 500; line-height: 1.18; letter-spacing: -.02em; color: var(--waa-ink); text-wrap: balance }
body.apex-waa .waa-page .waa-morning__note { margin: 0 0 1rem; font-size: var(--a-t-lede); line-height: 1.5; color: var(--waa-body) }

/* the objection: the same question, put to all three */
body.apex-waa .waa-vs .waa-head { margin-bottom: .9rem }
body.apex-waa .waa-page .waa-vs__lede { margin: 0 0 clamp(2rem, 4vw, 3.2rem); max-width: 40rem; font-size: var(--a-t-lede); line-height: 1.5; color: var(--waa-body) }
body.apex-waa .waa-vs__row3 { display: grid; gap: clamp(2rem, 3vw, 3rem); align-items: start }
body.apex-waa .waa-w { margin: 0; min-width: 0 }
body.apex-waa .waa-w .waa-pen { margin-top: 1rem }
body.apex-waa .waa-w__box { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--a-card-line); border-radius: 18px; box-shadow: var(--a-card-shadow-2, var(--a-card-shadow)) }
body.apex-waa .waa-w:nth-child(1) .waa-w__box { transform: rotate(-1.1deg) }
body.apex-waa .waa-w:nth-child(2) .waa-w__box { transform: rotate(.9deg) }
body.apex-waa .waa-page .waa-w__bar { position: relative; margin: 0; padding: .85rem 1.1rem; font-size: 1rem; font-weight: 600; color: var(--waa-ink); border-bottom: 1px solid var(--waa-line) }
body.apex-waa .waa-w__thread { display: flex; flex-direction: column; gap: .55rem; padding: 1rem }
body.apex-waa .waa-page .waa-w__opts { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin: .25rem 0 0 }
body.apex-waa .waa-w__opts span { padding: .46rem .5rem; font-size: .9rem; font-weight: 500; color: var(--waa-brand); text-align: center; border: 1px solid #b9c7de; border-radius: 9px }
body.apex-waa .waa-w__x { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font-size: 1.3rem; font-weight: 400; line-height: 1 }
body.apex-waa .waa-w__x svg { position: absolute; left: 50%; top: 50%; width: 42px; height: 36px; margin: -19px 0 0 -21px; fill: none; stroke: #1f5fd6; stroke-width: 2.2; stroke-linecap: round }
body.apex-waa .waa-w__box { overflow: visible }
body.apex-waa .waa-w__form { display: flex; flex-direction: column; padding: 1rem 1.1rem 1.1rem }
body.apex-waa .waa-page .waa-w__form p { margin: 0 0 .6rem; font-size: .96rem; line-height: 1.4; color: var(--waa-body) }
body.apex-waa .waa-w__form span { margin-bottom: .2rem; font-size: .84rem; color: var(--waa-soft) }
body.apex-waa .waa-w__form i { display: block; height: 30px; margin-bottom: .55rem; background: #f2f6fb; border: 1px solid #d6dfec; border-radius: 7px }
body.apex-waa .waa-w__form i.waa-w__tall { height: 58px }
body.apex-waa .waa-w__form b { margin-top: .2rem; padding: .5rem; font-size: .92rem; font-weight: 600; color: #fff; text-align: center; background: var(--waa-brand); border-radius: 8px }

/* what it asks for: the control */
body.apex-waa .waa-asks__grid { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: start }
body.apex-waa .waa-asks__modes { display: grid; gap: .6rem }
body.apex-waa .waa-mode-btn {
    display: block; width: 100%; padding: 1rem 1.2rem; text-align: left; cursor: pointer;
    background: #fff; border: 1px solid var(--a-card-line); border-radius: 14px; transition: background .2s, box-shadow .2s, border-color .2s;
}
body.apex-waa .waa-mode-btn b { display: block; margin-bottom: .2rem; font-size: var(--a-t-sub); font-weight: 600; letter-spacing: -.01em; color: var(--waa-ink) }
body.apex-waa .waa-mode-btn span { display: block; font-size: 1rem; line-height: 1.45; color: var(--waa-body) }
body.apex-waa .waa-mode-btn:hover { border-color: var(--waa-brand) }
body.apex-waa .waa-mode-btn:focus-visible { outline: 2px solid var(--waa-brand); outline-offset: 2px }
body.apex-waa .waa-mode-btn[aria-pressed="true"] { background: var(--waa-brand); border-color: var(--waa-brand); box-shadow: var(--a-card-shadow) }
body.apex-waa .waa-mode-btn[aria-pressed="true"] b,
body.apex-waa .waa-mode-btn[aria-pressed="true"] span { color: #fff }
body.apex-waa .waa-page .waa-asks__lead { margin: .9rem 0 0; font-size: 1.04rem; line-height: 1.5; color: var(--waa-body) }
body.apex-waa .waa-asks__panel .waa-pen { margin-top: 1.1rem }
body.apex-waa .waa-asks__panel[hidden] { display: none }

/* worth it: the number is the object */
body.apex-waa .waa-page .waa-worth__big { margin: 2.2rem 0 .3rem; font-size: clamp(2.6rem, 5.4vw, 4.4rem); font-weight: 500; line-height: 1; letter-spacing: -.035em; color: var(--waa-brand) }
body.apex-waa .waa-page .waa-worth__cost { margin: 0; font-size: var(--a-t-lede); line-height: 1.45; color: var(--waa-ink) }

/* the two doors */
body.apex-waa .waa-doors__grid { display: grid; gap: clamp(2.5rem, 5vw, 5rem); align-items: start }
body.apex-waa .waa-doors__steps { display: grid; gap: 1.5rem 2rem; margin: 0 0 1.8rem; padding: 0; list-style: none; counter-reset: wstep }
body.apex-waa .waa-doors__steps li { counter-increment: wstep }
body.apex-waa .waa-page .waa-doors__steps h3 { margin: 0 0 .25rem; font-size: 1.14rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--waa-ink) }
body.apex-waa .waa-page .waa-doors__steps h3::before { content: counter(wstep) ". "; color: var(--waa-brand) }
body.apex-waa .waa-page .waa-doors__steps p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--waa-body) }
body.apex-waa .waa-sticky { margin: 0 0 1.5rem; padding: 1.3rem 1.4rem 1.5rem; background: #fdf1a8; transform: rotate(-1.2deg); box-shadow: 0 16px 22px -12px rgba(10, 23, 48, .35) }
body.apex-waa .waa-page .waa-sticky__price { margin: 0; font: 400 3.2rem/1 "Apex Hand", cursive; color: #1f5fd6 }
body.apex-waa .waa-page .waa-sticky__hand { margin: .3rem 0 0; font: 400 2rem/1.08 "Apex Hand", cursive; color: #1f5fd6 }
body.apex-waa .waa-page .waa-doors__me > p { margin: 0 0 .85rem; font-size: 1.06rem; line-height: 1.5; color: var(--waa-body) }
body.apex-waa .waa-doors__me .waa-chip { margin-top: .6rem }

@media (min-width: 900px) {
    body.apex-waa .waa-morning__body { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr) }
    body.apex-waa .waa-vs__row3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr) }
    body.apex-waa .waa-asks__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr) }
    body.apex-waa .waa-doors__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr) }
    body.apex-waa .waa-doors__steps { grid-template-columns: 1fr 1fr }
    body.apex-waa .waa-faq { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: start }
    body.apex-waa .waa-faq__list { margin-inline: 0; width: 100%; max-width: none }
}
@media (min-width: 620px) and (max-width: 899px) {
    body.apex-waa .waa-vs__row3 { grid-template-columns: 1fr 1fr }
    body.apex-waa .waa-w--this { grid-column: 1 / -1; max-width: 32rem }
    body.apex-waa .waa-doors__steps { grid-template-columns: 1fr 1fr }
    body.apex-waa .waa-stack, body.apex-waa .waa-asks__show { max-width: 34rem }
}
@media (max-width: 899px) {
    body.apex-waa .waa-ph { margin-top: 1rem; height: 610px }
    /* the chat sits above the settings, so pressing one shows what it did */
    body.apex-waa .waa-asks__show { order: -1; min-height: 19.5rem }
    body.apex-waa .waa-sticky { max-width: 26rem }
}
@media (max-width: 619px) {
    body.apex-waa .waa-stack__item:nth-child(2) .waa-note { transform: rotate(.4deg) }
    body.apex-waa .waa-stack__item:nth-child(3) .waa-note { transform: rotate(-.25deg) }
}
@media (prefers-reduced-motion: reduce) {
    body.apex-waa .waa-ph__b.is-new, body.apex-waa .waa-ph__dots i { animation: none }
}

/* 4 Nov: a lead shows who it is first */
body.apex-waa .waa-page .waa-note__who { display: block; margin: .15rem 0 .2rem; font-weight: 600; color: var(--a-ink) }

/* ════════ 6 NOV: THE THREE CHATS WORK ═════════════════════════════════════
   The menu loops, the form replies next week and closes, the assistant takes
   three questions (waa-adnia.js initVs). Threads hold their height and scroll,
   so pressing never moves the page under the reader. */
body.apex-waa .waa-page .waa-vs__lede { text-wrap: pretty }
body.apex-waa [data-vs] .waa-w__thread { height: 17.5rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scroll-behavior: smooth }
body.apex-waa [data-vs-wa] .waa-w__thread { height: 19.5rem }
body.apex-waa [data-vs] .waa-w__thread > :first-child { margin-top: auto }
body.apex-waa .waa-page .waa-w__opts { padding: 0 1rem 1rem }
body.apex-waa .waa-w__opts button,
body.apex-waa .waa-w__ask button {
    padding: .46rem .5rem; font: inherit; font-size: .9rem; font-weight: 500; color: var(--waa-brand); text-align: center;
    background: #fff; border: 1px solid #b9c7de; border-radius: 9px; cursor: pointer;
    transition: background-color .15s, border-color .15s, transform .15s;
}
body.apex-waa .waa-w__opts button:hover,
body.apex-waa .waa-w__ask button:hover { background: #eef3fb; border-color: var(--waa-brand) }
body.apex-waa .waa-w__opts button:active,
body.apex-waa .waa-w__ask button:active { transform: translateY(1px) }
body.apex-waa .waa-w__ask button[aria-pressed="true"] { background: var(--waa-brand); border-color: var(--waa-brand); color: #fff }
body.apex-waa .waa-w__ask button:disabled { cursor: progress }
body.apex-waa .waa-page .waa-w__ask { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; padding: .8rem 1rem 1rem; border-top: 1px solid var(--waa-line) }
body.apex-waa .waa-w__ask span { flex-basis: 100%; font-size: .84rem; color: var(--waa-soft) }
body.apex-waa .waa-w__x { padding: 0; font: inherit; font-size: 1.3rem; font-weight: 400; line-height: 1; color: var(--waa-ink); background: none; border: 0; cursor: pointer }
body.apex-waa .waa-w__form i.waa-w__tall { padding: .45rem .55rem; font-size: .86rem; font-style: normal; color: var(--waa-ink) }
body.apex-waa .waa-w__send { margin-top: .2rem; padding: .5rem; font: inherit; font-size: .92rem; font-weight: 600; color: #fff; background: var(--waa-brand); border: 0; border-radius: 8px; cursor: pointer }
body.apex-waa .waa-w__send:hover { background: #1b3a75 }
body.apex-waa :is(.waa-w__done, .waa-w__gone):not([hidden]) {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem;
    min-height: 21.4rem; padding: 1.4rem; text-align: center;
}
body.apex-waa .waa-page :is(.waa-w__done, .waa-w__gone) p { margin: 0; font-size: .98rem; line-height: 1.45; color: var(--waa-body) }
body.apex-waa .waa-page .waa-w__done b { display: block; margin-bottom: .2rem; color: var(--waa-ink) }
body.apex-waa .waa-page .waa-w__tick { display: grid; place-items: center; width: 3rem; height: 3rem; color: #fff; background: var(--waa-brand); border-radius: 50% }
body.apex-waa .waa-w__tick svg { width: 1.5rem; height: 1.5rem }
body.apex-waa .waa-w__gone { background: repeating-linear-gradient(-45deg, #f6f8fc 0 10px, #fff 10px 20px); border-radius: 0 0 18px 18px }
body.apex-waa .waa-w__gone button { padding: .45rem .8rem; font: inherit; font-size: .9rem; font-weight: 600; color: var(--waa-brand); background: #fff; border: 1px solid #b9c7de; border-radius: 9px; cursor: pointer }
body.apex-waa .waa-page .waa-vs__go { margin: 2.2rem 0 0; text-align: center }
body.apex-waa .waa-vs__go:not([hidden]) { animation: waa-ph-in .4s cubic-bezier(.2, .8, .2, 1) both }
body.apex-waa .waa-w__box > [hidden] { display: none }

/* 6 Nov: the sum under "About 30 cents", with the reader's own job value */
body.apex-waa .waa-calc { display: grid; gap: .55rem; margin-top: 1.8rem; padding: 1.2rem 1.3rem 1.3rem; background: #fff; border: 1px solid var(--a-card-line); border-radius: 16px; box-shadow: var(--a-card-shadow) }
body.apex-waa .waa-calc__q { font-size: 1.02rem; font-weight: 600; color: var(--waa-ink) }
body.apex-waa .waa-calc__in { display: flex; align-items: center; gap: .3rem; width: 11rem; padding: .35rem .7rem; background: #f2f6fb; border: 1px solid #c9d5e8; border-radius: 10px }
body.apex-waa .waa-calc__in:focus-within { border-color: var(--waa-brand); box-shadow: 0 0 0 3px rgba(34, 69, 138, .15) }
body.apex-waa .waa-calc__in b { font-size: 1.5rem; font-weight: 500; color: var(--waa-soft) }
body.apex-waa .waa-calc__in input { width: 100%; min-width: 0; padding: 0; font: inherit; font-size: 1.5rem; font-weight: 600; color: var(--waa-ink); background: none; border: 0; outline: 0 }
body.apex-waa .waa-page .waa-calc__out { margin: .2rem 0 .3rem; font: 400 1.75rem/1.12 "Apex Hand", cursive; color: #1f5fd6; text-wrap: balance; min-height: 2.24em }
body.apex-waa .waa-calc .waa-textlink { justify-self: start }
@media (min-width: 900px) {
    /* with the sum in it the case is taller than a laptop screen, so it scrolls with the page */
    body.apex-waa .waa-worth__case { position: static }
}

/* 6 Nov: the app's own first screen, working (waa-adnia.js initWiz) */
body.apex-waa .waa-wiz {
    display: flex; flex-direction: column; align-items: center; max-width: 34rem;
    padding: 1.6rem clamp(1.2rem, 3vw, 2rem) 1.8rem; text-align: center;
    background: #fff; border: 1px solid var(--a-card-line); border-radius: 22px; box-shadow: var(--a-card-shadow-2, var(--a-card-shadow));
}
body.apex-waa .waa-page .waa-wiz__dots { display: flex; gap: 6px; align-self: flex-start; margin: 0 0 .4rem }
body.apex-waa .waa-wiz__dots i { width: 8px; height: 8px; background: #d7dce5; border-radius: 4px }
body.apex-waa .waa-wiz__dots i.is-on { width: 22px; background: #1660d6 }
body.apex-waa .waa-wiz__pen { width: 7.5rem; height: auto; margin: 0 0 .4rem }
body.apex-waa .waa-wiz.is-shake .waa-wiz__pen { animation: waa-wiz-tilt .5s ease }
body.apex-waa .waa-page .waa-wiz__hi { margin: 0 0 .35rem; font-size: clamp(1.6rem, 2.6vw, 2rem); font-weight: 700; letter-spacing: -.02em; color: #0b1428 }
body.apex-waa .waa-page .waa-wiz__lede { max-width: 26rem; margin: 0 0 1.2rem; font-size: 1rem; line-height: 1.5; color: #55627a; text-wrap: balance }
body.apex-waa .waa-wiz__label { align-self: flex-start; margin-bottom: .35rem; font-size: .95rem; font-weight: 600; color: #0b1428 }
body.apex-waa .waa-wiz__url {
    width: 100%; padding: .75rem .9rem; font: inherit; font-size: 1.05rem; color: #0b1428;
    background: #fff; border: 1.5px solid #a9c3ea; border-radius: 10px; outline: 0;
}
body.apex-waa .waa-wiz__url:focus { border-color: #1660d6; box-shadow: 0 0 0 4px rgba(22, 96, 214, .14) }
body.apex-waa .waa-page .waa-wiz__err { align-self: flex-start; min-height: 1.4em; margin: .4rem 0 .5rem; font-size: .9rem; color: #b42318; text-align: left }
body.apex-waa .waa-wiz__go {
    align-self: flex-end; padding: .75rem 2.2rem; font-weight: 600; color: #fff; text-decoration: none;
    background: #1660d6; border-radius: 12px; transition: background-color .15s;
}
body.apex-waa .waa-wiz__go:hover { background: #0f4fb5; color: #fff }
body.apex-waa .waa-wiz.is-shake { animation: waa-wiz-shake .4s ease }
@keyframes waa-wiz-shake { 20%, 60% { transform: translateX(-6px) } 40%, 80% { transform: translateX(6px) } }
@keyframes waa-wiz-tilt { 50% { transform: rotate(-8deg) } }
body.apex-waa .waa-page .waa-wiz__then { max-width: 34rem; margin: 1.3rem 0 0; font-size: 1.04rem; line-height: 1.55; color: var(--waa-body) }
@media (prefers-reduced-motion: reduce) {
    body.apex-waa .waa-wiz.is-shake, body.apex-waa .waa-wiz.is-shake .waa-wiz__pen { animation: none }
}

/* 6 Nov: ring the lead back from the morning notice (waa-adnia.js initRing) */
body.apex-waa .waa-note__ring {
    display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start; margin-top: .4rem;
    padding: .55rem 1rem; font: inherit; font-size: .95rem; font-weight: 600; color: #fff;
    background: #178a43; border: 0; border-radius: 999px; cursor: pointer; transition: background-color .15s;
}
body.apex-waa .waa-note__ring svg { width: 1rem; height: 1rem }
body.apex-waa .waa-note__ring:hover { background: #12733a }
body.apex-waa .waa-note__ring.is-calling svg { animation: waa-ring .5s ease-in-out infinite }
@keyframes waa-ring { 25% { transform: rotate(-14deg) } 75% { transform: rotate(14deg) } }
body.apex-waa .waa-page .waa-note__rang { margin: .4rem 0 0; font: 400 1.5rem/1.15 "Apex Hand", cursive; color: #1f5fd6; text-wrap: balance }
body.apex-waa .waa-page .waa-morning__go { margin: 1rem 0 0 }
body.apex-waa .waa-morning__go:not([hidden]) { animation: waa-ph-in .4s cubic-bezier(.2, .8, .2, 1) both }
@media (min-width: 900px) {
    body.apex-waa .waa-doors__grid { grid-template-columns: minmax(0, 34rem) minmax(0, 25rem); justify-content: space-between }
}
@media (prefers-reduced-motion: reduce) { body.apex-waa .waa-note__ring.is-calling svg { animation: none } }
body.apex-waa .waa-note__ring[hidden] { display: none }
@media (min-width: 900px) {
    /* opening a lead makes the stack tall; the words stay beside it */
    body.apex-waa .waa-morning__body { align-items: start }
    body.apex-waa .waa-morning__words { position: sticky; top: 22vh; padding-top: 2rem }
}

/* ════════ 8 NOV: THE WIDGET PASS ═════════════════════════════════════════
   (waa-adnia.js initPhone, initRing, initVs, initAsks, initCalc, initWiz) */

/* the hero phone's box is a real input; the loop types into the span over it */
body.apex-waa .waa-ph__input { position: relative }
body.apex-waa .waa-ph__input input {
    flex: 1 1 auto; min-width: 0; padding: .2rem 0; font: inherit; font-size: 16px; color: var(--waa-ink);
    background: none; border: 0; outline: 0;
}
body.apex-waa .waa-ph__input input::placeholder { color: var(--waa-soft); opacity: 1 }
body.apex-waa .waa-ph__input:focus-within { border-color: var(--waa-brand); box-shadow: 0 0 0 3px rgba(34, 69, 138, .15) }
body.apex-waa .waa-ph__input > span {
    position: absolute; left: .9rem; right: 3rem; top: 50%; transform: translateY(-50%);
    display: none; justify-content: flex-end; overflow: hidden; white-space: nowrap; color: var(--waa-ink); pointer-events: none;
}
body.apex-waa .waa-ph__input.is-typing > span { display: flex }
body.apex-waa .waa-ph__input.is-typing input::placeholder { color: transparent }
body.apex-waa .waa-ph__input button {
    flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
    background: var(--waa-brand); border: 0; border-radius: 50%; cursor: pointer;
}
body.apex-waa .waa-ph__input button svg { width: 14px; height: 14px }
body.apex-waa .waa-hero :is(button, input):focus-visible { outline: var(--a-focus); outline-offset: 2px }
body.apex-waa .waa-ph__input input:focus-visible { outline: 0 }

/* the pen link under the phone, once the reader has asked it something */
body.apex-waa .waa-page .waa-ph__go { position: absolute; left: 0; right: 0; top: calc(100% + .7rem); margin: 0; text-align: center }
body.apex-waa .waa-ph__go:not([hidden]) { animation: waa-ph-in .4s cubic-bezier(.2, .8, .2, 1) both }
body.apex-waa .waa-pen-link { font: 400 1.9rem/1.1 "Apex Hand", cursive; color: #1f5fd6; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em }
body.apex-waa .waa-pen-link:hover { color: var(--waa-ink) }

/* the morning: Ring sits on the closed notice */
body.apex-waa .waa-note__act { margin-top: .8rem }
body.apex-waa .waa-note__d[open] + .waa-note__act { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--a-card-line) }
/* one go-green on this site and no pills: the call button is a brand control */
body.apex-waa .waa-note__ring { margin-top: 0; background: var(--waa-brand); border-radius: var(--a-btn-r, 12px) }
body.apex-waa .waa-note__ring:hover { background: #1b3a75 }

/* the comparison: one box asks all three */
body.apex-waa .waa-vs__ask { display: grid; gap: .45rem; max-width: 34rem; margin: 0 0 clamp(2rem, 4vw, 3rem) }
body.apex-waa .waa-vs__ask label { font-size: 1.02rem; font-weight: 600; color: var(--waa-ink) }
body.apex-waa .waa-vs__ask-row { display: flex; gap: .5rem }
body.apex-waa .waa-vs__ask input {
    flex: 1 1 auto; min-width: 0; padding: .7rem .9rem; font: inherit; font-size: 1.02rem; color: var(--waa-ink);
    background: #fff; border: 1px solid #c9d5e8; border-radius: 10px; outline: 0;
}
body.apex-waa .waa-vs__ask input:focus { border-color: var(--waa-brand); box-shadow: 0 0 0 3px rgba(34, 69, 138, .15) }
body.apex-waa .waa-vs__ask button {
    flex: none; padding: .7rem 1.3rem; font: inherit; font-size: var(--a-t-btn, 1rem); font-weight: 600; color: #fff;
    background: var(--waa-brand); border: 0; border-radius: var(--a-btn-r, 12px); cursor: pointer;
}
body.apex-waa .waa-vs__ask button:hover { background: #1b3a75 }
body.apex-waa .waa-vs .waa-vs__lede { margin-bottom: 1.4rem }

/* what it asks for: every option on screen, ticked or not */
body.apex-waa .waa-asks__opts { display: grid; gap: .55rem; margin: 0; padding: 0; border: 0; min-width: 0 }
body.apex-waa .waa-asks__opts legend { margin: 0 0 .5rem; padding: 0; font-size: var(--a-t-sub); font-weight: 600; letter-spacing: -.01em; color: var(--waa-ink) }
body.apex-waa .waa-opt {
    display: flex; align-items: center; gap: .8rem; padding: .85rem 1.1rem; cursor: pointer;
    background: #fff; border: 1px solid var(--a-card-line); border-radius: 14px; transition: border-color .2s, box-shadow .2s;
}
body.apex-waa .waa-opt:hover { border-color: var(--waa-brand) }
body.apex-waa .waa-opt:has(input:checked) { border-color: var(--waa-brand); box-shadow: var(--a-card-shadow) }
body.apex-waa .waa-opt input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--waa-brand); cursor: pointer }
body.apex-waa .waa-opt input:focus-visible { outline: var(--a-focus); outline-offset: 3px }
body.apex-waa .waa-opt span { font-size: 1.06rem; font-weight: 600; color: var(--waa-ink) }
body.apex-waa .waa-page .waa-asks__go { margin: .8rem 0 0 }
body.apex-waa [data-ask-thread] { min-height: 15rem; justify-content: flex-end }

/* the sum: the coffee line */
body.apex-waa .waa-page .waa-calc__pen { margin: -.2rem 0 .3rem; font-size: 1.6rem }
body.apex-waa .waa-calc__pen:not([hidden]) { animation: waa-ph-in .4s cubic-bezier(.2, .8, .2, 1) both }

/* the app's first screen: Continue lights the second step */
body.apex-waa .waa-wiz__dots i { transition: background-color .3s }
body.apex-waa .waa-page .waa-wiz__next { align-self: stretch; margin: 0 0 1rem; padding: .7rem .9rem; font-size: .98rem; line-height: 1.45; color: #0b1428; text-align: left; background: #eef4fd; border-radius: 10px }
body.apex-waa .waa-wiz__next:not([hidden]) { animation: waa-ph-in .4s cubic-bezier(.2, .8, .2, 1) both }

@media (prefers-reduced-motion: reduce) {
    body.apex-waa :is(.waa-ph__go, .waa-calc__pen, .waa-wiz__next):not([hidden]) { animation: none }
    body.apex-waa .waa-wiz__dots i { transition: none }
}
/* 8 Nov: the screen clips rather than hides, so focusing the ask box (or a script) can never scroll the chat up inside the phone */
body.apex-waa .waa-ph__screen { overflow: clip }

/* ════════ 8 NOV, PASS 2: THE READER TALKS TO THE PHONE ══════════════════════
   (waa-adnia.js initPhone). The reader is a new visitor, not the one in the
   scripted chat, so a quiet line says so; from then on the thread scrolls
   like a real chat, so a long answer never pushes their question off the top.
   margin-top:auto keeps a short thread at the bottom without flex-end, which
   would make the top of a long one unreachable. */
body.apex-waa .waa-page .waa-ph__sep { flex: none; align-self: center; margin: .35rem 0 .1rem; font-size: .78rem; font-weight: 600; color: var(--waa-soft) }
body.apex-waa .waa-ph__thread.is-mine { overflow-y: auto; justify-content: flex-start; overscroll-behavior: contain; scrollbar-width: none }
body.apex-waa .waa-ph__thread.is-mine::-webkit-scrollbar { display: none }
body.apex-waa .waa-ph__thread.is-mine > :first-child { margin-top: auto }
/* 9 Nov egg: wait the 3 to 5 business days. The days stay, the reply lands last. */
body.apex-waa .waa-w__wait { padding: .45rem .8rem; font: inherit; font-size: .9rem; font-weight: 600; color: var(--waa-brand); background: #fff; border: 1px solid #b9c7de; border-radius: 9px; cursor: pointer }
body.apex-waa .waa-w__wait:hover { background: #eef3fb; border-color: var(--waa-brand) }
body.apex-waa .waa-w__wait[hidden], body.apex-waa .waa-w__days[hidden] { display: none }
body.apex-waa .waa-w__done:has(.waa-w__days:not([hidden])) { justify-content: flex-start }
body.apex-waa .waa-w__done:has(.waa-w__days:not([hidden])) .waa-w__tick { display: none }
body.apex-waa .waa-page .waa-w__days { display: grid; gap: .35rem; width: 100%; margin: .2rem 0 0; padding: .7rem 0 0; list-style: none; text-align: left; border-top: 1px solid var(--waa-line) }
body.apex-waa .waa-page .waa-w__day { margin: 0; font-size: .88rem; line-height: 1.4; color: var(--waa-soft); animation: waa-day-in .35s ease-out both }
body.apex-waa .waa-page .waa-w__day b { color: var(--waa-ink); font-weight: 600 }
body.apex-waa .waa-page .waa-w__reply { display: block; margin-top: .35rem; padding: .55rem .7rem; font-size: .88rem; line-height: 1.4; color: var(--waa-ink); background: #f3f6fb; border: 1px solid var(--waa-line); border-radius: 10px }
@keyframes waa-day-in { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { body.apex-waa .waa-page .waa-w__day { animation: none } }

/* 10 Nov: the phone's message bar only shows the loop typing now */
body.apex-waa .waa-ph__input span:empty::before { content: "Message"; color: var(--waa-soft) }
body.apex-waa .waa-ph__input button { pointer-events: none }