/*
 * ava-adnia.css — AI Visibility Audit page.
 * Rebuilt 29 Oct 2026 (the old pinned ask scene, signal board, report rows,
 * score dial, annotated screenshot and prompt-bar CTA are archived under the
 * theme's _archive/ava-rebuild-2026-10-29/). Light colours come from
 * apps-light.css; new rules use `body.apex-ava .ava-page` so they outrank it.
 * Scoped to body.apex-ava.
 */
body.apex-ava {
    --ava-ink: #f4f9ff;
    --ava-body: #b7c7e3;
    --ava-soft: #9fb6da;
    --ava-brand: #274d8a;
    --ava-accent: #6ea8ff;
    --ava-warn: #ff9d8d;
    --ava-line: rgba(150, 196, 255, .18);
    --ava-ease: cubic-bezier(.22, 1, .36, 1);
    --ava-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));
    --ava-card-border: rgba(150, 196, 255, .18);
    --ava-card-shadow: 0 30px 70px rgba(2, 8, 24, .5), inset 0 1px 0 rgba(255, 255, 255, .09);
    --ava-head-font: var(--a-sans);   /* was Avenir Next, which the theme never loads */
}

/* ════ Shared ════ */
body.apex-ava .ava-arrow { width: 1em; height: 1em; flex: none; }
body.apex-ava .ava-meta--center { justify-content: center; }
body.apex-ava .ava-meta--center i { flex: 0 0 5rem; }

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

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

body.apex-ava .ava-main > * { margin-block: var(--a-gap-move); }
/* the hero is outside .ava-main on this page, so this rule IS the
   hero-to-first-section gap. It ran at 50px while every other page ran the
   full move gap. */
body.apex-ava .ava-main > *:first-child { margin-top: var(--a-gap-move); }

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

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

/* ════ HERO ════ */
body.apex-ava .ava-hero {
    position: relative; z-index: 1;
    min-height: 100svh; display: flex; flex-direction: column;
    padding-bottom: clamp(3rem, 9vh, 7rem);
}
body.apex-ava .ava-hero__inner { margin-top: auto; max-width: 88rem; }
body.apex-ava .ava-hero__title {
    font: 800 clamp(2.7rem, 5vw, 4.3rem)/1.05 var(--ava-head-font); letter-spacing: -.02em; color: var(--ava-ink); margin: 0 0 1.7rem;
    text-wrap: balance; max-width: 18ch;
}
body.apex-ava .ava-hero__statement {
    font-family: var(--ava-head-font); font-weight: 400; font-size: clamp(1.05rem, 1.3vw, 1.24rem); line-height: 1.55; color: var(--ava-body); max-width: 46ch; text-wrap: pretty; margin: 0 0 2.2rem;
}
body.apex-ava .ava-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(--ava-head-font); color: var(--ava-ink);
    border: 1px solid rgba(160, 196, 255, .35);
    transition: transform .25s var(--ava-ease), background .25s var(--ava-ease);
}
body.apex-ava .ava-hero__link:hover { background: rgba(160, 196, 255, .1); }

/* ════ FAQ — flat dossier rows ════ */
/* ── One FAQ, site-wide (critique item 1a). Rows, summary type, chevron and
   open/close motion are apex-faq.css now. This one was already a hairline list, so only its palette stays ── */
body.apex-ava .apex-faq {
    --faq-line:   var(--ava-line);
    --faq-ink:    var(--ava-ink);
    --faq-body:   var(--ava-body);
    --faq-accent: var(--ava-accent);
}


body.apex-ava .ava-chip {
    display: inline-flex; align-items: center; gap: .6rem; padding: .92rem 1.6rem; border-radius: 999px; text-decoration: none; font: 700 1rem/1 var(--ava-head-font); color: var(--ava-ink); border: 1px solid rgba(160, 196, 255, .35); background: rgba(8, 18, 40, .4);
    transition: transform .25s var(--ava-ease), border-color .25s, box-shadow .25s;
}
body.apex-ava .ava-chip:hover { transform: translateY(-2px); border-color: rgba(150, 196, 255, .6); }
body.apex-ava .ava-chip--solid {
    color: #fff; border-color: transparent;
    background: linear-gradient(180deg, #3f72d6, var(--ava-brand)); box-shadow: 0 12px 30px rgba(39, 77, 138, .45);
}
body.apex-ava .ava-chip--solid:hover { box-shadow: 0 18px 42px rgba(39, 77, 138, .55); }
body.apex-ava .ava-chip svg { width: .95em; height: .95em; }

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

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

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

/* Site sweep 2026-09-05: the pinned scene centres its content in a full

/* ════ shared, light ════ */
body.apex-ava .ava-page .ava-head__lead { margin: 1.2rem 0 0; color: var(--ava-body); font-size: var(--a-t-spoken); line-height: 1.6; max-width: 40rem }
body.apex-ava .ava-page .ava-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: center }
/* the hero's second action: the site's quiet button, as on the WA and SEO pages */
body.apex-ava .ava-page .ava-hero__link {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    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(--ava-ink);
}
body.apex-ava .ava-page .ava-hero__link:hover { border-color: var(--a-brand); color: var(--a-brand) }
body.apex-ava .ava-page :is(.ava-five__grid) {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(1.8rem, 5vw, 4.5rem);
    align-items: start;
}
/* [data-mark] elements get --m (0 to 1) from the scroll position; the
   finished state is the default, so no script or reduced motion = all shown */
body.apex-ava .ava-page [data-mark] { --m: 1 }

/* ════ one question, five answers ════ */
body.apex-ava .ava-page .ava-five__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) }
body.apex-ava .ava-page .ava-five__intro { position: sticky; top: 18vh }
body.apex-ava .ava-page .ava-five__intro .ava-head { margin-bottom: 1.4rem }

body.apex-ava .ava-page .ava-five__lead { margin: 0; max-width: 30rem; color: var(--ava-body); font-size: var(--a-t-spoken); line-height: 1.6 }
body.apex-ava .ava-page .ava-ans {
    padding: 1.3rem 0;
    border-top: 1px solid var(--ava-line);
    opacity: calc(.18 + var(--m) * .82);
}
body.apex-ava .ava-page .ava-ans:first-child { border-top: 0; padding-top: 0 }
body.apex-ava .ava-page .ava-ans__who { margin: 0 0 .4rem; color: var(--ava-ink); font-weight: 600 }
/* the answer is uncovered left to right as --m runs 0 to 1 */
body.apex-ava .ava-page .ava-ans__text {
    margin: 0;
    color: var(--ava-body);
    font-size: var(--a-t-spoken);
    line-height: 1.75;
    clip-path: inset(0 calc((1 - var(--m)) * 100%) 0 0);
}
body.apex-ava .ava-page .ava-ans__text sup { color: var(--ava-soft); font-size: .62em }
/* a blacked-out business name */
body.apex-ava .ava-page .ava-x {
    display: inline-block;
    width: var(--w, 6em);
    height: .82em;
    margin-inline: .08em;
    border-radius: 3px;
    background: var(--ava-ink);
    vertical-align: -.06em;
}
body.apex-ava .ava-page .ava-you {
    padding: .05em .3em;
    border-radius: 4px;
    background: color-mix(in srgb, var(--a-brand) 14%, #fff);
    color: var(--a-brand);
    font-weight: 600;
}

/* ════ what's in the report: one reading column ════ */
body.apex-ava .ava-page .ava-read { max-width: 44rem }
body.apex-ava .ava-page .ava-read .ava-head { margin-bottom: 1.8rem }
body.apex-ava .ava-page .ava-read p {
    margin: 0 0 1.1rem;
    color: var(--ava-body);
    font-size: var(--a-t-spoken);
    line-height: 1.65;
}
body.apex-ava .ava-page .ava-read p:first-of-type { color: var(--ava-ink) }

/* ════ the honest part: the heading set large, the reason beside it ════ */
body.apex-ava .ava-page .ava-stance__inner {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: clamp(1.8rem, 5vw, 4.5rem);
    align-items: end;
    padding-block: clamp(2.2rem, 4vw, 3.2rem);
    border-block: 1px solid var(--ava-line);
}
body.apex-ava .ava-page .ava-stance__inner h2 {
    margin: 0;
    font-size: var(--a-t-close);
    line-height: 1.04;
    letter-spacing: -.025em;
    text-wrap: balance;
}
body.apex-ava .ava-page .ava-stance__body > p { margin: 0 0 1rem; color: var(--ava-body); font-size: var(--a-t-spoken); line-height: 1.6 }
body.apex-ava .ava-page .ava-stance__body > p:first-child { color: var(--ava-ink) }
body.apex-ava .ava-page .ava-stance__body > p:last-child { margin-bottom: 0 }

/* ════ two ways to start, side by side ════ */
body.apex-ava .ava-page .ava-start__grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2rem, 6vw, 5.5rem);
    align-items: start;
}
body.apex-ava .ava-page .ava-start__col h2 { margin: 0 0 1.4rem; font-size: var(--a-t-head); line-height: 1.1; letter-spacing: -.018em; text-wrap: balance }
body.apex-ava .ava-page .ava-start__col p { margin: 0 0 1rem; max-width: 36rem; color: var(--ava-body); font-size: var(--a-t-spoken); line-height: 1.6 }
body.apex-ava .ava-page .ava-start__col .ava-chip { margin-top: .8rem }
body.apex-ava .ava-page .ava-start__col + .ava-start__col { padding-left: clamp(1.6rem, 3vw, 2.6rem); border-left: 1px solid var(--ava-line) }

/* ════ questions ════ */
body.apex-ava .ava-page .ava-faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 6rem); align-items: start }
body.apex-ava .ava-page .ava-faq__sticky { position: sticky; top: 16vh }
body.apex-ava .ava-page .ava-faq__sticky h2 { margin: 0 }
body.apex-ava .ava-page .ava-faq__list { align-self: start }

/* ════ the close ════ */
body.apex-ava .ava-page .ava-close .ba-founder__copy h2 { font-size: var(--a-t-close); line-height: 1.06 }
body.apex-ava .ava-page .ava-close__act { display: flex; flex-wrap: wrap; gap: .8rem 1rem; margin-top: 1.6rem }
body.apex-ava .ava-page .ava-close__call { margin-top: 1.1rem; color: var(--ava-soft); font-size: .95rem }
body.apex-ava .ava-page .ava-close__call a { color: var(--ava-brand); text-decoration: underline; text-underline-offset: .18em }
body.apex-ava .ava-main > .ava-close { margin-bottom: 0 }

/* ════ RESPONSIVE ════ */
@media (max-width: 900px) {
    body.apex-ava .ava-page :is(.ava-five__grid, .ava-stance__inner, .ava-start__grid, .ava-faq) { grid-template-columns: 1fr }
    body.apex-ava .ava-page .ava-start__col + .ava-start__col { padding: clamp(2rem, 6vw, 3rem) 0 0; border-left: 0; border-top: 1px solid var(--ava-line) }
    body.apex-ava .ava-page :is(.ava-five__intro, .ava-faq__sticky) { position: static }
}

/* ════ REDUCED MOTION ════ */
@media (prefers-reduced-motion: reduce) {
    body.apex-ava [data-reveal],
    body.apex-ava [data-reveal-words],
    body.apex-ava [data-reveal-words] .ava-word > span {
        opacity: 1 !important; transform: none !important; transition: none !important;
    }
    body.apex-ava .ava-page [data-mark] { --m: 1 !important }
}

/* ════════ 4 NOV: REAL CAPTURES, THREE QUESTIONS, THE STAMP ════════════════ */
body.apex-ava .ava-page .ava-pen { display: block; margin: 0; font: 400 2rem/1.1 "Apex Hand", cursive; color: #1f5fd6; text-wrap: balance }
body.apex-ava .ava-page .ava-textlink { color: var(--ava-ink); font-weight: 600; text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px }
body.apex-ava .ava-page .ava-textlink:hover { color: var(--a-brand) }

body.apex-ava .ava-page .ava-hero__inner { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; margin-top: 0 }
body.apex-ava .ava-page .ava-hero__copy { min-width: 0 }
/* the picture is the hero now, so no full-height runway below it */
body.apex-ava .ava-page .ava-five.aad-shell { margin-top: clamp(2.5rem, 5vw, 4.5rem) }
body.apex-ava .ava-page .ava-stance h2 { font-size: clamp(2.5rem, 4.8vw, 4rem); line-height: 1.04 }
body.apex-ava .ava-hero { min-height: 0; padding-bottom: clamp(2.5rem, 6vh, 4.5rem) }
body.apex-ava .ava-page .ava-hero__title { margin: 0 0 1.5rem }
body.apex-ava .ava-page .ava-hero__statement { margin: 0 0 2rem }
body.apex-ava .ava-page .ava-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem }
body.apex-ava .ava-page .ava-shot { margin: 0; min-width: 0 }
body.apex-ava .ava-page .ava-shot img { display: block; width: 100%; height: auto; max-width: none; border: 1px solid var(--a-card-line); border-radius: 12px; box-shadow: var(--a-card-shadow-2, var(--a-card-shadow)) }
body.apex-ava .ava-page .ava-shot figcaption { margin-top: .8rem; font-size: 1rem; line-height: 1.45; color: var(--ava-body) }
body.apex-ava .ava-page .ava-shot--hero img { transform: rotate(.7deg) }

body.apex-ava .ava-page .ava-asks { display: grid; gap: .55rem }
body.apex-ava .ava-page .ava-ask {
    display: block; width: 100%; padding: .95rem 1.1rem; text-align: left; cursor: pointer;
    font-size: 1.1rem; font-weight: 500; line-height: 1.35; letter-spacing: -.01em; color: var(--ava-ink);
    background: #fff; border: 1px solid var(--a-card-line); border-radius: 14px; transition: background .2s, border-color .2s, color .2s;
}
body.apex-ava .ava-page .ava-ask:hover { border-color: var(--a-brand) }
body.apex-ava .ava-page .ava-ask:focus-visible { outline: 2px solid var(--a-brand); outline-offset: 2px }
body.apex-ava .ava-page .ava-ask[aria-pressed="true"] { color: #fff; background: var(--a-brand); border-color: var(--a-brand); box-shadow: var(--a-card-shadow) }
body.apex-ava .ava-page .ava-five__list.is-all .ava-ans { --m: 1 !important }
body.apex-ava .ava-page .ava-five__set[hidden] { display: none }
body.apex-ava .ava-page .ava-five__set > .ava-pen { margin-top: 1.1rem; font-size: 2.2rem }

body.apex-ava .ava-page .ava-report__grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center }
body.apex-ava .ava-page .ava-read { max-width: none }
body.apex-ava .ava-page .ava-read p { font-size: var(--a-t-lede); line-height: 1.55 }
body.apex-ava .ava-page .ava-shot .ava-pen { margin-bottom: .25rem }

body.apex-ava .ava-page .ava-start__col p.ava-stamp {
    display: inline-block; margin: 0 0 1.3rem; padding: .55rem 1.1rem .65rem;
    color: #cf2a27; font-size: 1.02rem; font-weight: 600; line-height: 1.25; text-align: center;
    border: 3px solid currentColor; border-radius: 8px; transform: rotate(-4deg); opacity: .9;
}
body.apex-ava .ava-page .ava-start__col p.ava-stamp b { display: block; font-size: clamp(2.8rem, 5vw, 3.8rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; color: inherit }
body.apex-ava .ava-page .ava-start__col p.ava-stamp.is-revealed { transform: rotate(-4deg) }

@media (min-width: 900px) {
    body.apex-ava .ava-page .ava-hero__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr) }
    body.apex-ava .ava-page .ava-report__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr) }
    body.apex-ava .ava-page .ava-five__intro .ava-head h2 { font-size: var(--a-t-head) }
}
@media (max-width: 899px) {
    body.apex-ava .ava-page .ava-five__intro { position: static }
}
@media (min-width: 900px) {
    body.apex-ava .ava-faq { grid-template-columns: minmax(0, .62fr) minmax(0, 1fr) }
}

/* ════════ 6 NOV: THE TWELVE QUESTIONS (ava-adnia.js initQs) ════════ */
body.apex-ava .ava-qs__grid { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: start }
body.apex-ava .ava-page .ava-qs__lede { margin: 0 0 1.4rem; font-size: 1.1rem; line-height: 1.55; color: var(--ava-body); text-wrap: pretty }
body.apex-ava .ava-qs__l { display: block; margin: 0 0 .35rem; font-size: .98rem; font-weight: 600; color: var(--ava-ink) }
body.apex-ava .ava-qs__in {
    display: block; width: 100%; max-width: 26rem; margin: 0 0 1rem; padding: .75rem .95rem; font: inherit; font-size: 1.05rem; color: var(--ava-ink);
    background: #fff; border: 1.5px solid #c9d5e8; border-radius: 12px; outline: 0;
}
body.apex-ava .ava-qs__in:focus { border-color: #1f5fd6; box-shadow: 0 0 0 4px rgba(31, 95, 214, .13) }
body.apex-ava .ava-page .ava-qs__err { min-height: 1.3em; margin: -.3rem 0 .8rem; font-size: .92rem; color: #b42318 }
body.apex-ava .ava-qs__set .ava-chip { border: 0; cursor: pointer; font: inherit }
body.apex-ava .ava-qs__sheet { padding: clamp(1.1rem, 2.4vw, 1.6rem); 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-ava .ava-page .ava-qs__head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 .7rem; padding-bottom: .7rem; border-bottom: 1px solid var(--a-card-line); font-size: .95rem; color: var(--ava-soft) }
body.apex-ava .ava-qs__head b { font-size: 1.05rem; color: var(--ava-ink) }
body.apex-ava .ava-page .ava-qs__list { margin: 0; padding: 0; list-style: none; max-height: 26rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin }
body.apex-ava .ava-qs__list li { border-bottom: 1px solid #eef1f6 }
body.apex-ava .ava-qs__list li:last-child { border-bottom: 0 }
body.apex-ava .ava-qs__list label { display: flex; gap: .7rem; align-items: flex-start; padding: .55rem .2rem; font-size: 1rem; line-height: 1.4; color: var(--ava-ink); cursor: pointer }
body.apex-ava .ava-qs__list input { flex: none; width: 1.05rem; height: 1.05rem; margin-top: .18rem; accent-color: #1f5fd6 }
body.apex-ava .ava-qs__list input:not(:checked) + span { color: #98a2b3; text-decoration: line-through }
body.apex-ava .ava-qs__list li.is-mine span { color: #1f5fd6; font-weight: 600 }
body.apex-ava .ava-qs__list li.is-new { animation: ava-q-in .35s ease both }
@keyframes ava-q-in { from { opacity: 0; transform: translateY(5px) } }
body.apex-ava .ava-page .ava-qs__more { padding: .55rem .2rem .2rem 1.75rem; font-size: .95rem; color: var(--ava-soft) }
body.apex-ava .ava-page .ava-qs__add { display: flex; gap: .5rem; margin: .8rem 0 0 }
body.apex-ava .ava-qs__add[hidden], body.apex-ava .ava-qs__go[hidden] { display: none }
body.apex-ava .ava-qs__add input { flex: 1; min-width: 0; padding: .55rem .75rem; font: inherit; font-size: .95rem; color: var(--ava-ink); background: #f6f8fc; border: 1px solid #c9d5e8; border-radius: 10px; outline: 0 }
body.apex-ava .ava-qs__add input:focus { border-color: #1f5fd6; background: #fff }
body.apex-ava .ava-qs__add button { padding: .5rem .9rem; font: inherit; font-size: .92rem; font-weight: 600; color: #1f5fd6; background: #fff; border: 1px solid #b9c7de; border-radius: 10px; cursor: pointer }
body.apex-ava .ava-page .ava-qs__pen { display: block; margin: 1rem 0 .4rem; font-size: 1.5rem; line-height: 1.15; text-wrap: balance }
body.apex-ava .ava-qs__go { display: inline-block; margin-top: .3rem }
@media (min-width: 900px) {
    body.apex-ava .ava-qs__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) }
}
@media (prefers-reduced-motion: reduce) { body.apex-ava .ava-qs__list li.is-new { animation: none } }

/* 6 Nov: the email every owner gets (initSpam) */
body.apex-ava .ava-spam { max-width: 34rem; margin: 1.8rem 0 0 }
body.apex-ava .ava-spam__mail {
    padding: 1.1rem 1.3rem 1rem; background: #fff; border: 1px solid var(--a-card-line); border-radius: 14px;
    box-shadow: var(--a-card-shadow-2, var(--a-card-shadow)); transform: rotate(.8deg); transform-origin: 80% 100%;
    transition: transform .6s cubic-bezier(.5, 0, .75, 0), opacity .5s ease .1s;
}
body.apex-ava .ava-spam__mail.is-binned { transform: translate(40%, 30%) rotate(18deg) scale(.4); opacity: 0; pointer-events: none }
body.apex-ava .ava-page .ava-spam__mail p { margin: 0 }
body.apex-ava .ava-page .ava-spam__from { display: flex; justify-content: space-between; font-size: .9rem; color: var(--ava-soft) }
body.apex-ava .ava-spam__from b { color: var(--ava-ink); font-weight: 600 }
body.apex-ava .ava-page .ava-spam__subj { margin: .25rem 0 .4rem !important; font-size: 1.08rem; font-weight: 700; color: var(--ava-ink) }
body.apex-ava .ava-page .ava-spam__body { font-size: .98rem; line-height: 1.5; color: var(--ava-body) }
body.apex-ava .ava-page .ava-spam__fine { margin-top: .5rem !important; font-size: .82rem; color: #667085 }
body.apex-ava .ava-page .ava-spam__acts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem !important }
body.apex-ava .ava-spam__acts button { padding: .45rem .85rem; font: inherit; font-size: .9rem; font-weight: 600; color: #1f5fd6; background: #fff; border: 1px solid #b9c7de; border-radius: 9px; cursor: pointer }
body.apex-ava .ava-spam__acts button:hover { background: #eef3fb; border-color: #1f5fd6 }
body.apex-ava .ava-page .ava-spam__pen { display: block; margin: 1rem 0 0 .4rem; font-size: 2.1rem; line-height: 1.1 }
@media (prefers-reduced-motion: reduce) { body.apex-ava .ava-spam__mail { transition: none } }
body.apex-ava .ava-spam__mail[hidden] { display: none }
body.apex-ava .ava-page .ava-spam__after { margin: .9rem 0 0 .4rem }
body.apex-ava .ava-page .ava-spam__after[hidden] { display: none }

/* ════════ 8 NOV: ASK MINE, THE FOLLOW-UP, THE TWELVE QUESTIONS FIXED ════════ */
/* "Ask mine" under the three questions (initMine) */
body.apex-ava .ava-page .ava-mine { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 .7rem; margin-top: 1.4rem; align-items: end }
body.apex-ava .ava-page .ava-mine__f { margin: 0; min-width: 0 }
body.apex-ava .ava-mine__f label { display: block; margin: 0 0 .3rem; font-size: .95rem; font-weight: 600; color: var(--ava-ink) }
body.apex-ava .ava-mine__f input {
    display: block; width: 100%; padding: .7rem .85rem; font: inherit; font-size: 1rem; color: var(--ava-ink);
    background: #fff; border: 1.5px solid #c9d5e8; border-radius: 12px; outline: 0;
}
body.apex-ava .ava-mine__f input:focus { border-color: #1f5fd6; box-shadow: 0 0 0 4px rgba(31, 95, 214, .13) }
body.apex-ava .ava-page .ava-mine__go { grid-column: 1 / -1; justify-self: start; margin-top: .8rem; cursor: pointer }
body.apex-ava .ava-page .ava-mine__err { grid-column: 1 / -1; margin: .4rem 0 0 }
body.apex-ava .ava-page .ava-mine__q { margin: 0 0 1.2rem; font-size: var(--a-t-spoken); font-weight: 600; line-height: 1.4; color: var(--ava-ink); text-wrap: balance }
/* an answer nobody has asked for yet: hatched and dashed, so it never reads as a blacked-out name */
body.apex-ava .ava-page .ava-q {
    display: inline-block; width: var(--w, 6em); max-width: 100%; height: .82em; margin-inline: .08em; vertical-align: -.06em;
    border: 1px dashed rgba(31, 95, 214, .4); border-radius: 3px;
    background: repeating-linear-gradient(-45deg, rgba(31, 95, 214, .1) 0 6px, rgba(31, 95, 214, .03) 6px 12px);
}
body.apex-ava .ava-page .ava-mine__form { margin-top: 1.1rem; cursor: pointer }
body.apex-ava .ava-page .ava-five__more {
    margin: .7rem 0 0; padding: .2rem 0; background: none; border: 0; cursor: pointer;
    font: inherit; font-size: 1rem; font-weight: 600; color: var(--ava-ink);
    text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px;
}
body.apex-ava .ava-page .ava-five__more:hover { color: var(--a-brand) }

/* the 2:14 am follow-up (initSpam) */
body.apex-ava .ava-spam__mail--again { transform: rotate(-.6deg) }
body.apex-ava .ava-spam__mail--again.is-arriving { animation: ava-mail-in .55s var(--ava-ease) backwards }
@keyframes ava-mail-in { from { opacity: 0; transform: translateY(-18px) rotate(-.6deg) } }
body.apex-ava .ava-spam__acts button:disabled { color: #98a2b3; border-color: #e3e8ef; background: #fff; cursor: default }
@media (prefers-reduced-motion: reduce) { body.apex-ava .ava-spam__mail--again.is-arriving { animation: none } }

/* twelve questions: the examples are numbered, not dead checkboxes */
body.apex-ava .ava-qs__list li.ava-qs__eg { display: flex; gap: .7rem; align-items: flex-start; padding: .55rem .2rem; font-size: 1rem; line-height: 1.4; color: var(--ava-body) }
body.apex-ava .ava-qs__num { flex: none; width: 1.05rem; text-align: right; font-weight: 600; color: var(--ava-soft); font-variant-numeric: tabular-nums }
body.apex-ava .ava-page .ava-qs__go { display: inline-flex; margin-top: .6rem; cursor: pointer }
/* the inner scroll hands the page back at its ends; on a phone there is no inner scroll at all */
body.apex-ava .ava-page .ava-qs__list { overscroll-behavior: auto }
@media (max-width: 899px) {
    body.apex-ava .ava-page .ava-qs__list { max-height: none; overflow: visible }
}

/* ════════ 8 NOV PASS 2 ════════ */
/* the hero link carries the price now, so it has to wrap on a phone */
body.apex-ava .ava-page .ava-hero__actions .ava-textlink { white-space: normal; text-wrap: balance }
/* the stamp: "Free / for a limited time / usually $100" */
body.apex-ava .ava-page .ava-start__col p.ava-stamp .ava-stamp__was { display: block; margin-top: .2rem; font-size: .92em; font-weight: 600; opacity: .85 }
/* what a Perplexity answer's footnotes point at, as the real one lists them */
body.apex-ava .ava-page .ava-ans__src { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: .7rem 0 0; padding: 0; list-style: none; font-size: .88rem; line-height: 1.4; color: var(--ava-soft) }
body.apex-ava .ava-page .ava-ans__src li { display: flex; align-items: center; gap: .4rem; min-width: 0 }
body.apex-ava .ava-page .ava-ans__n { display: inline-grid; place-items: center; flex: none; width: 1.25rem; height: 1.25rem; border: 1px solid var(--a-card-line); border-radius: 4px; font-size: .75rem; font-weight: 600; color: var(--ava-ink) }
body.apex-ava .ava-page .ava-ans__src .ava-x { height: .78em; vertical-align: -.04em }
body.apex-ava .ava-page .ava-ans__src .ava-you { padding: 0 .25em; font-size: inherit }
body.apex-ava .ava-page .ava-mine__twelve { display: block; margin-top: .9rem }