/*
 * waa-adnia.css — Website Assistant page.
 * adnia (adniaconseils.ca) structure, placement and scroll motion, in the
 * dark aurora theme (tokens from tokens.css / the aad-* system; web_design.md
 * was archived 2026-08-06 to _archive/design-docs-2026-08-06/).
 * The aad-* components (nav, card-stack, pill-link, start panel, footer) are
 * styled by main.css via body.aa-adnia-copy-page — this file styles only the
 * page-specific waa-* sections. Scoped to body.apex-wa.
 */

body.apex-wa {
    --waa-ink: #f4f9ff;
    --waa-body: #b7c7e3;
    --waa-soft: #9fb6da;
    --waa-brand: #274d8a;
    --waa-accent: #6ea8ff;
    --waa-line: rgba(150, 196, 255, .18);
    --waa-ease: cubic-bezier(.22, 1, .36, 1);
    --waa-card: radial-gradient(120% 130% at 14% 0%, rgba(74, 126, 255, .16), transparent 48%), linear-gradient(165deg, rgba(26, 45, 84, .84), rgba(11, 22, 48, .92));
    --waa-card-border: rgba(150, 196, 255, .18);
    --waa-card-shadow: 0 30px 70px rgba(2, 8, 24, .5), inset 0 1px 0 rgba(255, 255, 255, .09);
    --waa-head-font: var(--a-sans);   /* was Avenir Next, which the theme never loads */
}

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

body.apex-wa .waa-head { max-width: 62rem; margin: 0 0 clamp(2.6rem, 5vw, 4.5rem); }
body.apex-wa .waa-head--center { margin-inline: auto; text-align: center; }
body.apex-wa .waa-head h2 {
    font: 800 clamp(1.95rem, 3.1vw, 2.85rem)/1.1 var(--waa-head-font); letter-spacing: -.018em; color: var(--waa-ink); margin: 0;
    text-wrap: balance;
}
body.apex-wa .waa-head__lead { margin: 1.2rem 0 0; color: var(--waa-body); font-size: var(--a-t-spoken); line-height: 1.6; max-width: 44rem; }
body.apex-wa .waa-head--center .waa-head__lead { margin-inline: auto; }

body.apex-wa .waa-textlink {
    display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
    color: var(--waa-accent); font-weight: 600; text-decoration: none;
}
body.apex-wa .waa-textlink:hover { color: #9cc2ff; }

/* main column rhythm — see `body.apex-waa .waa-main > *` further down. adnia's
   generous 5-11rem step is not what renders; the shared --a-gap-move is. */

/* ════ Scroll reveals ════ */
body.apex-wa [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));
}
body.apex-wa [data-reveal].is-revealed { opacity: 1; transform: none; filter: none }

/* word-by-word waterfall (adnia) — applied to h1 + every section h2 by JS */
body.apex-wa [data-reveal-words] { opacity: 1 !important; transform: none !important; }
body.apex-wa [data-reveal-words] .waa-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .09em; margin-bottom: -.09em; }
body.apex-wa [data-reveal-words] .waa-word > span { display: inline-block; transform: translateY(120%); transition: transform .8s var(--waa-ease); transition-delay: calc(var(--w, 0) * 45ms); }
body.apex-wa [data-reveal-words].is-revealed .waa-word > span { transform: none; }

/* ════ HERO — minimal giant statement (adnia), About type ════ */
body.apex-wa .waa-hero {
    position: relative; z-index: 1;
    display: flex; flex-direction: column;
    padding-bottom: clamp(3rem, 9vh, 7rem);
}
body.apex-wa .waa-hero__inner { margin-top: auto; max-width: 88rem; }
body.apex-wa .waa-hero__title {
    font: 800 clamp(2.7rem, 5vw, 4.3rem)/1.05 var(--waa-head-font); letter-spacing: -.02em; color: var(--waa-ink); margin: 0 0 1.7rem;
    text-wrap: balance;
}
body.apex-wa .waa-hero__statement {
    font-family: var(--waa-head-font); font-weight: 400; font-size: clamp(1.05rem, 1.3vw, 1.24rem); line-height: 1.55; color: var(--waa-body); max-width: 46ch; text-wrap: pretty; margin: 0 0 2.2rem;
}
body.apex-wa .waa-hero__link {
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .92rem 1.6rem; border-radius: 999px; text-decoration: none;
    font: 700 1rem/1 var(--waa-head-font); color: var(--waa-ink);
    border: 1px solid rgba(160, 196, 255, .35);
    transition: transform .25s var(--waa-ease), background .25s var(--waa-ease);
}
body.apex-wa .waa-hero__link:hover { background: rgba(160, 196, 255, .1); }
body.apex-wa .waa-hero__link:active { transform: translateY(1px) scale(.99); }
body.apex-wa .waa-hero__cue {
    position: absolute; left: 50%; bottom: 1.6rem; translate: -50% 0;
    width: 26px; height: 42px; border: 2px solid rgba(150, 196, 255, .5);
    border-radius: 14px; display: grid; place-items: start center; padding-top: 7px;
}
body.apex-wa .waa-hero__cue span { width: 4px; height: 8px; border-radius: 2px; background: var(--waa-accent); animation: waa-cue 1.6s var(--waa-ease) infinite; }
@keyframes waa-cue { 0% { opacity: 0; transform: translateY(-3px); } 40% { opacity: 1; } 80%, 100% { opacity: 0; transform: translateY(10px); } }

/* ════ DEMO BAND — the product as the media band (adnia video slot) ════ */
body.apex-wa .waa-demo__panel {
    max-width: 46rem; margin-inline: auto;
    border-radius: var(--a-r); overflow: hidden;
    background: var(--waa-card); border: 1px solid var(--waa-card-border); box-shadow: var(--waa-card-shadow);
    will-change: transform;
}
body.apex-wa .waa-demo__head {
    display: flex; align-items: center; gap: .6rem;
    padding: .95rem 1.4rem; font: 600 var(--a-t-micro)/1 var(--waa-head-font);
    letter-spacing: var(--a-track-micro); text-transform: uppercase; color: var(--waa-soft);
    border-bottom: 1px solid var(--waa-line); background: rgba(8, 18, 40, .35);
}
body.apex-wa .waa-demo__dot { width: 9px; height: 9px; border-radius: 999px; background: #58d68d; box-shadow: 0 0 10px rgba(88, 214, 141, .7); }
body.apex-wa .waa-demo__thread { display: flex; flex-direction: column; gap: .85rem; padding: 1.6rem 1.4rem; }
body.apex-wa .waa-demo__input {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin: 0 1.4rem 1.4rem; padding: .85rem 1.2rem;
    border: 1px solid var(--waa-line); border-radius: 999px; color: var(--waa-soft); font-size: .92rem;
    background: rgba(5, 12, 28, .45);
}
body.apex-wa .waa-demo__input b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; background: linear-gradient(180deg, #3461ab, var(--waa-brand)); color: #fff; }
body.apex-wa .waa-demo__input b svg { width: 14px; height: 14px; }

/* chat bubbles (shared: demo band + exchange carousel) */
body.apex-wa .waa-bubble {
    margin: 0; max-width: 78%;
    padding: .85rem 1.1rem; border-radius: 18px;
    font-size: .98rem; line-height: 1.5; text-align: left;
}
body.apex-wa .waa-bubble--visitor {
    align-self: flex-start; color: var(--waa-ink);
    background: rgba(150, 196, 255, .14); border: 1px solid rgba(150, 196, 255, .2);
    border-bottom-left-radius: 6px;
}
body.apex-wa .waa-bubble--bot {
    align-self: flex-end; color: #fff;
    background: linear-gradient(180deg, #3461ab, var(--waa-brand));
    border-bottom-right-radius: 6px;
    box-shadow: 0 8px 24px rgba(39, 77, 138, .3);
}
body.apex-wa .waa-bubble--typing { display: inline-flex; gap: .35rem; align-items: center; padding: 1rem 1.1rem; }
body.apex-wa .waa-bubble--typing i {
    width: 7px; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, .75);
    animation: waa-typing 1.2s ease-in-out infinite;
}
body.apex-wa .waa-bubble--typing i:nth-child(2) { animation-delay: .18s; }
body.apex-wa .waa-bubble--typing i:nth-child(3) { animation-delay: .36s; }
@keyframes waa-typing { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* hero: the product as it appears on a real site */
body.apex-wa .waa-hero__widget {
    position: absolute; right: clamp(1rem, 4vw, 4rem); bottom: clamp(4.5rem, 11vh, 8rem);
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .8rem 1.15rem; border-radius: 999px 999px 6px 999px;
    background: var(--waa-card); border: 1px solid var(--waa-card-border); box-shadow: var(--waa-card-shadow);
    color: var(--waa-ink); font-size: .92rem;
    animation: waa-bob 5s var(--waa-ease) infinite;
}
body.apex-wa .waa-hero__widget-dot { width: 9px; height: 9px; border-radius: 999px; background: #58d68d; box-shadow: 0 0 10px rgba(88, 214, 141, .7); flex: none; }
@keyframes waa-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* exchange carousel slides */
body.apex-wa .waa-slide__thread { display: flex; flex-direction: column; gap: .85rem; width: 100%; max-width: 38rem; margin-inline: auto; }

/* methodology scroll-progress line */
body.apex-wa .waa-method__col { position: relative; padding-left: clamp(1.4rem, 2.5vw, 2.2rem); }
body.apex-wa .waa-method__line {
    position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
    background: rgba(150, 196, 255, .12); border-radius: 2px; overflow: hidden;
}
body.apex-wa .waa-method__line i {
    position: absolute; inset: 0;
    /* brightest at the leading (bottom) edge so a full line reads as full */
    background: linear-gradient(180deg, rgba(110, 168, 255, .55), var(--waa-accent));
    transform-origin: top; transform: scaleY(0); will-change: transform;
}

/* ════ FAQ accordion ════ */
/* ── One FAQ, site-wide (critique item 1a). Rows, summary type, chevron and
   open/close motion are apex-faq.css now. Rounded cards over a dead dark background, same as the SEO page ── */
body.apex-wa .apex-faq {
    --faq-line:   var(--waa-line);
    --faq-ink:    var(--waa-ink);
    --faq-body:   var(--waa-body);
    --faq-accent: var(--waa-accent);
}

/* keyboard focus — visible on dark */
body.apex-wa a:focus-visible,
body.apex-wa button:focus-visible,
body.apex-wa summary:focus-visible {
    outline: var(--a-focus); outline-offset: var(--a-focus-off); border-radius: 6px;
}

/* ════ STATS BAND — periwinkle gradient figures ════ */
body.apex-wa .waa-stats__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.2rem, 3vw, 3rem); max-width: 56rem; }
body.apex-wa .waa-stat { padding: 1.5rem 0 0; border-top: 1px solid var(--waa-line); }
body.apex-wa .waa-stat__num {
    display: block; font: 800 clamp(2.8rem, 5vw, 4.2rem)/1 var(--waa-head-font);
    letter-spacing: -.02em; color: var(--waa-ink);
}
body.apex-wa .waa-stat__num em { font-style: normal; font-size: .55em; }
body.apex-wa .waa-stat__label { display: block; margin: .6rem 0 .5rem; font: 700 var(--a-t-sub)/1.25 var(--waa-head-font); color: var(--waa-ink); }
body.apex-wa .waa-stat p { margin: 0; color: var(--waa-soft); font-size: var(--a-t-body); line-height: 1.55; }

/* ════ ROTATING QUOTES — dark carousel ════ */
body.apex-wa .waa-carousel { max-width: 56rem; margin-inline: auto; }
body.apex-wa .waa-carousel__viewport { position: relative; }
body.apex-wa .waa-carousel__track { position: relative; }
body.apex-wa .waa-slide {
    margin: 0; position: absolute; inset: 0; opacity: 0; visibility: hidden;
    transition: opacity .6s var(--waa-ease); pointer-events: none;
    display: flex; flex-direction: column; align-items: center; text-align: center;
}
body.apex-wa .waa-slide.is-active { position: relative; opacity: 1; visibility: visible; pointer-events: auto; }
body.apex-wa .waa-slide figcaption { margin-top: 1.4rem; color: var(--waa-accent); font-weight: 700; letter-spacing: .02em; }

/* ════ CLOSING CTA — chat-style panel, quick-reply chips as the buttons ════ */
body.apex-wa .waa-cta__panel {
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
    gap: clamp(2rem, 4vw, 4.5rem); align-items: center;
    padding: clamp(2.2rem, 4.5vw, 4rem);
    border-radius: 30px;
    background:
        radial-gradient(110% 130% at 8% 0%, rgba(74, 126, 255, .2), transparent 52%),
        linear-gradient(165deg, rgba(26, 45, 84, .9), rgba(11, 22, 48, .96));
    border: 1px solid var(--waa-card-border); box-shadow: var(--waa-card-shadow);
}
body.apex-wa .waa-cta__panel::before {
    content: ""; position: absolute; top: 0; left: 8%; right: 38%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(110, 168, 255, .7), transparent);
}
body.apex-wa .waa-cta__lead h2 {
    font: 800 clamp(1.95rem, 3.1vw, 2.85rem)/1.1 var(--waa-head-font); letter-spacing: -.018em; color: var(--waa-ink); margin: 0 0 1rem; text-wrap: balance;
}
body.apex-wa .waa-cta__lead p { margin: 0; color: var(--waa-body); line-height: 1.6; max-width: 30rem; }
body.apex-wa .waa-cta__chat { display: flex; flex-direction: column; align-items: flex-end; gap: 1rem; }
body.apex-wa .waa-cta__chat .waa-bubble--bot { max-width: 100%; }
body.apex-wa .waa-cta__replies { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; }
body.apex-wa .waa-chip {
    display: inline-flex; align-items: center; gap: .6rem; padding: .92rem 1.6rem; border-radius: 999px; text-decoration: none; font: 700 1rem/1 var(--waa-head-font); color: var(--waa-ink); border: 1px solid rgba(160, 196, 255, .35); background: rgba(8, 18, 40, .4);
    transition: transform .25s var(--waa-ease), border-color .25s, box-shadow .25s;
}
body.apex-wa .waa-chip:hover { transform: translateY(-2px); border-color: rgba(150, 196, 255, .6); }
body.apex-wa .waa-chip--solid {
    color: #fff; border-color: transparent;
    background: linear-gradient(180deg, #3f72d6, var(--waa-brand)); box-shadow: 0 12px 30px rgba(39, 77, 138, .45);
}
body.apex-wa .waa-chip--solid:hover { box-shadow: 0 18px 42px rgba(39, 77, 138, .55); }
body.apex-wa .waa-chip svg { width: .95em; height: .95em; }
/* .waa-cta__hint is gone (2026-09-04): "Free to start · No credit card · About five minutes" was the dot-separated fact row critique item 2 names, and every fact in it is in the paragraph opposite. */
body.apex-wa .waa-carousel__controls { display: flex; align-items: center; justify-content: center; gap: 1.1rem; margin-top: 2.2rem; }
body.apex-wa .waa-carousel__arrow {
    width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center;
    background: rgba(8, 18, 40, .5); border: 1px solid var(--waa-line); color: var(--waa-ink);
    cursor: pointer; transition: border-color .25s, transform .25s var(--waa-ease);
}
body.apex-wa .waa-carousel__arrow svg { width: 16px; height: 16px; }
body.apex-wa .waa-carousel__arrow:hover { border-color: rgba(150, 196, 255, .5); transform: translateY(-1px); }
body.apex-wa .waa-carousel__dots { display: flex; gap: .5rem; }
body.apex-wa .waa-carousel__dot {
    width: 9px; height: 9px; border-radius: 999px; border: 0; padding: 0; cursor: pointer;
    background: rgba(150, 196, 255, .28); transition: background .25s, width .25s var(--waa-ease);
}
body.apex-wa .waa-carousel__dot.is-active { background: var(--waa-accent); width: 26px; }

/* ════ INSIGHTS — horizontal scroll carousel ════ */
body.apex-wa .waa-insights__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; max-width: none; flex-wrap: wrap; }
body.apex-wa .waa-article__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(165deg, rgba(26, 45, 84, .6), rgba(11, 22, 48, .8)); }
body.apex-wa .waa-article__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--waa-ease); }
/* drag-to-scroll affordance (adnia's "Glisser" deck feel) */
body.apex-wa [data-drag] { cursor: grab; }
body.apex-wa [data-drag].is-dragging { cursor: grabbing; }
body.apex-wa [data-drag].is-dragging * { pointer-events: none; }
body.apex-wa .waa-article__cat {
    margin: 1.2rem 1.3rem .2rem; align-self: flex-start;
    font: 600 .72rem/1 var(--waa-head-font); letter-spacing: .12em; text-transform: uppercase;
    color: var(--waa-accent); padding: .42rem .7rem; border: 1px solid var(--waa-line); border-radius: 999px;
}
body.apex-wa .waa-article__more { margin: auto 1.3rem 1.3rem; color: var(--waa-soft); font-weight: 700; display: inline-flex; align-items: center; gap: .45rem; }

/* ════ METHODOLOGY — sticky intro + tall steps (adnia) ════ */
body.apex-wa .waa-method { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
body.apex-wa .waa-method__sticky { position: sticky; top: 16vh; }
body.apex-wa .waa-method__sticky h2 {
    font: 800 clamp(1.95rem, 3.1vw, 2.85rem)/1.1 var(--waa-head-font); letter-spacing: -.018em; color: var(--waa-ink); margin: 0 0 1.1rem; text-wrap: balance;
}
body.apex-wa .waa-method__sticky .waa-head__lead { margin-bottom: 1.4rem; }
body.apex-wa .waa-method__steps { list-style: none; margin: 0; padding: 0; }
body.apex-wa .waa-step {
    border-top: 1px solid var(--waa-line); padding: clamp(1.8rem, 3.5vh, 2.8rem) 0;
}
body.apex-wa .waa-step:first-child { border-top: 0; padding-top: .4rem; }
body.apex-wa .waa-step__num { display: block; font: 600 var(--a-t-body)/1 var(--waa-head-font); letter-spacing: .05em; color: var(--waa-soft); margin-bottom: .9rem; }
body.apex-wa .waa-step h3 { margin: 0 0 .7rem; font: 800 clamp(1.35rem, 1.9vw, 1.8rem)/1.15 var(--waa-head-font); letter-spacing: -.012em; color: var(--waa-ink); }
body.apex-wa .waa-step p { margin: 0; color: var(--waa-body); font-size: var(--a-t-body); line-height: 1.6; max-width: 32rem; }

/* ════ FEATURE DECK — sticky split + horizontal scroll-scrub (adnia expertise pages) ════ */
body.apex-wa .waa-deck { position: relative; height: 280vh; }
body.apex-wa .waa-deck__pin {
    position: sticky; top: 0; height: 100svh;
    display: flex; align-items: center; overflow: hidden;
}
/* adnia line-animation: pill bars drifting at the section edges */
body.apex-wa .waa-deck__pill {
    position: absolute; top: var(--pt); width: var(--pw); height: clamp(14px, 2.2vh, 26px);
    border-radius: 999px; background: rgba(110, 168, 255, .08);
    border: 1px solid rgba(150, 196, 255, .08);
    will-change: transform; pointer-events: none;
}
body.apex-wa .waa-deck__pill--l { left: -12%; }
body.apex-wa .waa-deck__pill--r { right: -12%; }
body.apex-wa .waa-deck__grid {
    display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(2rem, 4vw, 4rem); align-items: center; width: min(1200px, 92vw);
}
body.apex-wa .waa-deck__intro { margin: 0; }
body.apex-wa .waa-deck__intro .waa-head__lead { margin-bottom: 1.6rem; }
body.apex-wa .waa-deck__viewport {
    overflow: hidden;
    /* blend the deck edges so cards fade in/out instead of clipping hard */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    padding-block: 30px; margin-block: -30px; /* keep card shadows un-clipped */
}
body.apex-wa .waa-deck__row {
    display: flex; gap: clamp(1rem, 1.8vw, 1.5rem);
    will-change: transform;
}
body.apex-wa .waa-dcard {
    flex: 0 0 clamp(264px, 24vw, 330px); min-height: min(62vh, 540px);
    display: flex; flex-direction: column;
    padding: clamp(1.4rem, 2vw, 1.9rem);
    background: var(--waa-card); border: 1px solid var(--waa-card-border);
    border-radius: var(--a-r); box-shadow: var(--waa-card-shadow);
}
body.apex-wa .waa-dcard__icon {
    width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px;
    background: rgba(110, 168, 255, .12); border: 1px solid var(--waa-line);
    color: var(--waa-accent); margin-bottom: 1.4rem;
}
body.apex-wa .waa-dcard__icon svg { width: 24px; height: 24px; }
body.apex-wa .waa-dcard h3 { margin: 0 0 .6rem; font: 800 1.35rem/1.15 var(--waa-head-font); letter-spacing: -.015em; color: var(--waa-ink); }
body.apex-wa .waa-dcard p { margin: 0 0 1.2rem; color: var(--waa-body); font-size: .95rem; line-height: 1.55; }
body.apex-wa .waa-dcard__list { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
body.apex-wa .waa-dcard__list li { position: relative; padding-left: 1.15rem; color: var(--waa-soft); font-size: .88rem; }
body.apex-wa .waa-dcard__list li::before { content: ""; position: absolute; left: 0; top: .48em; width: var(--a-mark); height: var(--a-mark); background: var(--waa-accent); }

/* band media scrub (scale eases as it enters — adnia video band) */
body.apex-wa [data-scrub-scale] { will-change: transform; }

/* ════ RESPONSIVE ════ */
@media (max-width: 900px) {
    body.apex-wa .waa-stats__grid { grid-template-columns: 1fr; gap: 0; }
    body.apex-wa .waa-method { grid-template-columns: 1fr; }
    body.apex-wa .waa-method__sticky { position: static; }
    body.apex-wa .waa-step { min-height: 0; }
    /* deck: no scrub — natural height, native horizontal swipe */
    body.apex-wa .waa-deck { height: auto; }
    body.apex-wa .waa-deck__pin { position: static; height: auto; display: block; padding-block: 1rem; }
    body.apex-wa .waa-deck__viewport { -webkit-mask-image: none; mask-image: none; padding-block: 0; margin-block: 0; }
    body.apex-wa .waa-cta__panel { grid-template-columns: 1fr; }
    body.apex-wa .waa-cta__chat { align-items: flex-start; }
    body.apex-wa .waa-cta__replies { justify-content: flex-start; }
    body.apex-wa .waa-deck__grid { grid-template-columns: 1fr; align-items: start; }
    body.apex-wa .waa-deck__viewport { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; padding-bottom: 1.2rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    body.apex-wa .waa-deck__viewport::-webkit-scrollbar { height: 0; }
    body.apex-wa .waa-dcard { scroll-snap-align: start; min-height: 0; }
    body.apex-wa .waa-deck__row { transform: none !important; }
}
@media (max-width: 600px) {
    body.apex-wa .waa-dcard { flex-basis: 78vw; }
    body.apex-wa .waa-bubble { max-width: 92%; }
    body.apex-wa .waa-hero__widget { display: none; }
}

/* ════ REDUCED MOTION ════ */
@media (prefers-reduced-motion: reduce) {
    body.apex-wa [data-reveal],
    body.apex-wa [data-reveal-words],
    body.apex-wa [data-reveal-words] .waa-word > span {
        opacity: 1 !important; transform: none !important; transition: none !important;
    }
    body.apex-wa .waa-hero__cue span { animation: none; }
    body.apex-wa .waa-bubble--typing i { animation: none; }
    body.apex-wa .waa-hero__widget { animation: none; }
    body.apex-wa .waa-method__line i { transform: none !important; }
    /* deck: static, naturally scrollable, pills parked */
    body.apex-wa .waa-deck { height: auto; }
    body.apex-wa .waa-deck__pin { position: static; height: auto; display: block; }
    body.apex-wa .waa-deck__viewport { overflow-x: auto; }
    body.apex-wa .waa-deck__row { transform: none !important; }
    body.apex-wa .waa-deck__pill { display: none; }
    body.apex-wa [data-scrub-scale] { transform: none !important; }
}

/* ════ IN THE WILD — the real screenshot, with the lead it produced ════
   This page's take on the shared .ba-shot frame: a single wide frame with
   the "lead captured" card overhanging its lower edge. Kept inside the
   container horizontally — `.aad-page` is `overflow: clip`, so anything
   poking out to the right would simply be sliced off. */
body.apex-wa .waa-real__stage {
    position: relative; margin-top: clamp(2rem, 4vh, 3rem);
    margin-bottom: 2.6rem; max-width: 66rem;
}
body.apex-wa .waa-real__lead {
    position: absolute; right: 1.4rem; bottom: -1.5rem;
    display: flex; align-items: center; gap: .85rem;
    padding: .95rem 1.2rem; border-radius: 14px; max-width: min(24rem, 84%);
    background: linear-gradient(160deg, rgba(32, 56, 104, .96), rgba(14, 28, 58, .98));
    border: 1px solid var(--waa-line); box-shadow: 0 26px 60px rgba(2, 8, 24, .6);
}
body.apex-wa .waa-real__lead-dot { width: 9px; height: 9px; border-radius: 999px; flex: none; background: #58d68d; box-shadow: 0 0 10px rgba(88, 214, 141, .7); }
body.apex-wa .waa-real__lead-body strong { display: block; font: 700 .96rem/1.2 var(--waa-head-font); color: var(--waa-ink); }
body.apex-wa .waa-real__lead-body span { display: block; margin-top: .2rem; color: var(--waa-soft); font-size: .85rem; line-height: 1.4; }
@media (max-width: 760px) {
    body.apex-wa .waa-real__lead { position: static; margin-top: 1.2rem; max-width: none; }
    body.apex-wa .waa-real__stage { margin-bottom: 0; }
}

/* Pressed feedback — matches .cs-btn:active on the service pages. */
body.apex-wa .waa-chip:active { transform: translateY(1px) scale(.99); }

/* ════════════════════════════════════════════════════════════════════════
   WEBSITE ASSISTANT ONLY — scoped to body.apex-waa.

   This fence was built because Custom Software once shared apex-wa AND this
   stylesheet AND the .waa-* class names, so anything scoped to apex-wa
   silently restyled that page too. It does not any more: Custom Software has
   its own apex-csd class and loads only csd.css. body.apex-wa and
   body.apex-waa are now two prefixes for the same single page, at the same
   specificity, separated only by source order. Checked 2026-09-01.

   The fence stays because it is the seam this file was cut along, and the
   things below it were written to override the things above it. Do not merge
   the two halves by hand; a value can be declared on both sides and the later
   one is the one that renders.
   ════════════════════════════════════════════════════════════════════════ */

/* ── the hero was bottom-anchored, and then it stopped being sized at all ──
   `.waa-hero` was 100svh with `.waa-hero__inner { margin-top: auto }`, which
   pinned the content to the floor of a full-height hero. Measured at 1440x900:
   the h1 started 478px down with nothing above it but sky — the first screen
   read as mostly empty. This file answered with 88svh and a centred block.

   Both are gone. `waa-light.css` sets `min-height: 0` and opens the page on
   the shared `--a-hero-pt` / `--a-hero-pb`, so the site starts at one distance
   everywhere and the hero grows to fit its copy. Four min-heights used to be
   written for this element across these two sheets and the fourth won; the
   three that never applied were removed 2026-09-01 rather than left to be
   read as the answer. The hero's height lives in waa-light.css now. */

/* ── section rhythm ──────────────────────────────────────────────────────
   `.waa-main > *` carried up to 11rem of margin on BOTH edges. Adjacent
   margins collapse to one, but against sections that also pad internally it
   produced the large empty bands between the deck, the founder block and the
   closing panel. One tighter step, still generous. */
body.apex-waa .waa-main > * { margin-block: var(--a-gap-move); }
/* the hero is outside .waa-main on this page, so this rule IS the
   hero-to-first-section gap. It ran at 40px while every other page ran the
   full move gap. */
body.apex-waa .waa-main > *:first-child { margin-top: var(--a-gap-move); }

/* the closing panel sat in its own pool of empty space before the footer */
body.apex-waa .waa-cta { margin-bottom: clamp(3rem, 6vh, 5rem); }

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

/* Site sweep 2026-09-05: the pinned scene centres its content in a full
   viewport, which already leaves half a screen of air above and below it.
   Stacking the section gap on top made a ~400px void at both ends at 1440.
   Where the pin is live, the neighbours' facing gaps go and the centring is
   the whole gap; below 900px and under reduced motion the pin is static and
   the normal rhythm stays. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
    body.apex-waa .waa-main > .waa-deck { margin-block: 0; }
    body.apex-waa .waa-main > :has(+ .waa-deck) { margin-bottom: 0; }
    body.apex-waa .waa-main > .waa-deck + * { margin-top: 0; }
}