/*
 * saa-adnia.css — SEO Article Authoring page.
 * Shared system: dark aurora aad-* theme tokens + the adnia scroll language.
 * Page-unique mechanics: pinned "article assembles itself" scene, alternating
 * editorial rows, statement band with stat chips, SERP parallax collage,
 * split FAQ, centered CTA. Scoped to body.apex-saa.
 */

body.apex-saa {
    --saa-ink: #f4f9ff;
    --saa-body: #b7c7e3;
    --saa-soft: #9fb6da;
    --saa-brand: #274d8a;
    --saa-accent: #6ea8ff;
    --saa-line: rgba(150, 196, 255, .18);
    --saa-ease: cubic-bezier(.22, 1, .36, 1);
    --saa-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));
    --saa-card-border: rgba(150, 196, 255, .18);
    --saa-card-shadow: 0 30px 70px rgba(2, 8, 24, .5), inset 0 1px 0 rgba(255, 255, 255, .09);
    --saa-head-font: var(--a-sans);   /* was Avenir Next, which the theme never loads */
}

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

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

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

body.apex-saa .saa-main > * { margin-block: var(--a-gap-move); }
/* the hero is outside .saa-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-saa .saa-main > *:first-child { margin-top: var(--a-gap-move); }

/* ════ Scroll reveals ════ */
body.apex-saa [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-saa [data-reveal].is-revealed { opacity: 1; transform: none; filter: none }
/* floated panels drift with scroll after revealing — no transform transition */
body.apex-saa [data-float].is-revealed { transition: opacity .7s var(--saa-ease); }

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

/* ════ HERO — statement + mock brief input ════ */
body.apex-saa .saa-hero {
    position: relative; z-index: 1;
    min-height: 100svh; display: flex; flex-direction: column;
    padding-bottom: clamp(3rem, 9vh, 7rem);
}
body.apex-saa .saa-hero__inner { margin-top: auto; max-width: 88rem; }
body.apex-saa .saa-hero__title {
    font: 800 clamp(2.7rem, 5vw, 4.3rem)/1.05 var(--saa-head-font); letter-spacing: -.02em; color: var(--saa-ink); margin: 0 0 1.7rem;
    text-wrap: balance;
}
body.apex-saa .saa-hero__statement {
    font-family: var(--saa-head-font); font-weight: 400; font-size: clamp(1.05rem, 1.3vw, 1.24rem); line-height: 1.55; color: var(--saa-body); max-width: 46ch; text-wrap: pretty; margin: 0 0 2.2rem;
}
body.apex-saa .saa-hero__brief {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    width: min(34rem, 100%); padding: 1rem 1.1rem 1rem 1.4rem;
    border-radius: var(--a-r); text-decoration: none;
    border: 1px solid var(--saa-line); background: rgba(8, 18, 40, .55);
    color: var(--saa-soft); font-size: .98rem;
    box-shadow: var(--saa-card-shadow);
}
body.apex-saa .saa-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-saa .saa-hero__cue span { width: 4px; height: 8px; border-radius: 2px; background: var(--saa-accent); animation: saa-cue 1.6s var(--saa-ease) infinite; }
@keyframes saa-cue { 0% { opacity: 0; transform: translateY(-3px); } 40% { opacity: 1; } 80%, 100% { opacity: 0; transform: translateY(10px); } }

/* ════ FAQ — split: sticky intro + accordion ════ */
body.apex-saa .saa-faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
body.apex-saa .saa-faq__sticky { position: sticky; top: 16vh; }
body.apex-saa .saa-faq__sticky h2 {
    font: 800 clamp(1.95rem, 3.1vw, 2.85rem)/1.1 var(--saa-head-font); letter-spacing: -.018em; color: var(--saa-ink); margin: 0 0 1.1rem; text-wrap: balance;
}
body.apex-saa .saa-faq__sticky .saa-head__lead { margin-bottom: 1.4rem; }
/* ── One FAQ, site-wide (critique item 1a). Rows, summary type, chevron and
   open/close motion are apex-faq.css now. Rounded cards, and a dark card background the light system had already
   painted over; the two-column sticky layout above stays ── */
body.apex-saa .apex-faq {
    --faq-line:   var(--saa-line);
    --faq-ink:    var(--saa-ink);
    --faq-body:   var(--saa-body);
    --faq-accent: var(--saa-accent);
}
body.apex-saa .saa-faq__list { align-self: start }

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

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

/* ════ RESPONSIVE ════ */
@media (max-width: 900px) {
    body.apex-saa .saa-faq { grid-template-columns: 1fr; }
    body.apex-saa .saa-faq__sticky { position: static; }
}

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

/* Pressed feedback — matches .cs-btn:active on the service pages. */
body.apex-saa .saa-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-saa .saa-hero { position: relative; isolation: isolate }

/* ════════════════════════════════════════════════════════════════════════
   2026-10-28 rebuild. Set as type on the light system: no pinned scene, no
   pills, no fanned cards, no coloured verdict writing. apps-light.css loads
   after this sheet and paints `.aad-page p` at (0,2,2), so every rule here
   carries `.saa-page` to sit at (0,3,1) or above.
   ════════════════════════════════════════════════════════════════════════ */

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

/* ── hero: copy left, the Search Console chart right (seo-proof.css) ── */
body.apex-saa .saa-page .saa-hero__inner--graph {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 4.5vw, 4rem);
    align-items: center;
}
body.apex-saa .saa-page .saa-hero__copy { min-width: 0 }
body.apex-saa .saa-page .saa-hero__title { margin: 0 0 1.4rem }
body.apex-saa .saa-page .saa-hero__statement { margin: 0 0 2rem; max-width: 40rem }
body.apex-saa .saa-page .saa-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 page */
body.apex-saa .saa-page .saa-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(--saa-ink);
}
body.apex-saa .saa-page .saa-hero__link:hover { border-color: var(--a-brand); color: var(--a-brand) }

/* ── shared section grids ── */
body.apex-saa .saa-page :is(.saa-month__grid, .saa-google__grid, .saa-yours__grid, .saa-worth__grid, .saa-power__grid, .saa-setup__grid) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.8rem, 5vw, 4.5rem);
    align-items: start;
}
body.apex-saa .saa-page :is(.saa-worth__grid, .saa-setup__grid) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) }
body.apex-saa .saa-page :is(.saa-month__where, .saa-yours__facts, .saa-worth__why, .saa-power__facts) p {
    margin: 0;
    padding: 1.1rem 0;
    border-top: 1px solid var(--saa-line);
    color: var(--saa-body);
    font-size: var(--a-t-spoken);
    line-height: 1.6;
}
body.apex-saa .saa-page :is(.saa-month__where, .saa-yours__facts, .saa-worth__why, .saa-power__facts) p:first-child { border-top: 0; padding-top: 0 }
body.apex-saa .saa-page :is(.saa-month__where, .saa-yours__facts, .saa-worth__why, .saa-power__facts) b {
    display: block;
    margin-bottom: .2rem;
    color: var(--saa-ink);
    font-size: var(--a-t-sub);
    font-weight: 600;
    letter-spacing: -.012em;
}
body.apex-saa .saa-page .saa-power__facts p { font-size: var(--a-t-body) }
body.apex-saa .saa-page .saa-power__facts b { font-size: var(--a-t-spoken) }

/* ── the month: four titles, the dates under them ── */
body.apex-saa .saa-page .saa-month__list { list-style: none; margin: 0; padding: 0 }
body.apex-saa .saa-page .saa-month__post { padding: 1.1rem 0; border-top: 1px solid var(--saa-line) }
body.apex-saa .saa-page .saa-month__post:first-child { border-top: 0; padding-top: 0 }
body.apex-saa .saa-page .saa-month__title {
    display: block;
    color: var(--saa-ink);
    font-size: var(--a-t-sub);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.012em;
}
body.apex-saa .saa-page .saa-month__when { display: block; margin-top: .3rem; color: var(--saa-soft); font-size: .95rem }
body.apex-saa .saa-page .saa-month__post--wait .saa-month__when { color: var(--saa-brand); font-weight: 600 }

/* ── written from your business ── */
body.apex-saa .saa-page .saa-yours__lead,
body.apex-saa .saa-page .saa-power__what {
    margin: 0;
    color: var(--saa-ink);
    font-size: var(--a-t-sub);
    line-height: 1.45;
    letter-spacing: -.01em;
}

/* ── Google's rules: the argument, and Google's own words beside it ── */
body.apex-saa .saa-page .saa-google__why p {
    margin: 0 0 1rem;
    color: var(--saa-body);
    font-size: var(--a-t-spoken);
    line-height: 1.6;
}
body.apex-saa .saa-page .saa-google__why p:first-child {
    color: var(--saa-ink);
    font-size: var(--a-t-sub);
    line-height: 1.45;
    letter-spacing: -.01em;
}
body.apex-saa .saa-page .saa-google__rules { display: grid; gap: 1rem }

body.apex-saa .saa-page .saa-rule {
    margin: 0;
    padding: 1.3rem 1.4rem;
    border: 1px solid var(--saa-card-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--a-card-shadow);
}
body.apex-saa .saa-page .saa-rule p { margin: 0 }
body.apex-saa .saa-page .saa-rule__text { color: var(--saa-ink); font-size: var(--a-t-sub); line-height: 1.4; letter-spacing: -.01em }
body.apex-saa .saa-page .saa-rule__from { margin-top: .7rem !important; font-size: var(--a-t-mark) }
body.apex-saa .saa-page .saa-rule__from a { color: var(--saa-soft) }
body.apex-saa .saa-page .saa-rule__from a:hover { color: var(--saa-brand) }

/* ── handwriting: the interview notepad's blue pen, in the site's one handwriting face.
   Each [data-mark] reads --m (0 to 1) from saa-adnia.js; without the script, or with
   reduced motion, --m is 1. */
body.apex-saa .saa-page {
    --saa-hand: "Apex Hand", "Bradley Hand", "Segoe Print", "Comic Neue", cursive;
    --saa-pen: var(--saa-brand);
    --saa-rule: rgba(39, 77, 138, .11);
}
body.apex-saa .saa-page [data-mark] { --m: 1 }
body.apex-saa .saa-page .saa-hand {
    font-family: var(--saa-hand);
    font-weight: 500;
    color: var(--saa-pen);
    letter-spacing: 0;
}

/* ── the red pen: the marked sample post (seo-proof.css) under its head ── */
body.apex-saa .saa-page .saa-pen__head { margin-bottom: clamp(2.2rem, 4vw, 3.2rem) }
body.apex-saa .saa-page .saa-pen__lead {
    margin: 1rem 0 0;
    max-width: 38rem;
    color: var(--saa-body);
    font-size: var(--a-t-spoken);
    line-height: 1.6;
}
body.apex-saa .saa-page .saa-pen__note {
    max-width: 37.5rem;
    margin: clamp(2rem, 4vw, 3rem) auto 0;
    color: var(--saa-soft);
    font-size: .95rem;
    line-height: 1.55;
}

body.apex-saa .saa-page .saa-tick path {
    fill: none;
    stroke: var(--saa-pen);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    vector-effect: non-scaling-stroke;
}

/* ── the interview: a notepad of answers, then the paragraph they became ── */
body.apex-saa .saa-page .saa-ask__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.8rem, 5vw, 4.5rem);
    align-items: center;
}
body.apex-saa .saa-page .saa-pad {
    margin: 0;
    padding: 1.5rem 1.6rem 1.3rem;
    border: 1px solid var(--saa-card-border);
    border-top: 10px solid var(--saa-pen); /* impeccable-disable-line border-accent-on-rounded -- the notepad binding; its top corners are square, only the foot is rounded */
    border-radius: 0 0 6px 6px;
    background-color: #fff;
    background-image: repeating-linear-gradient(180deg, transparent 0 calc(2.2rem - 1px), var(--saa-rule) calc(2.2rem - 1px) 2.2rem);
    background-position: 0 3.4rem;
    box-shadow: var(--a-card-shadow);
}
body.apex-saa .saa-page .saa-pad p { margin: 0 }
body.apex-saa .saa-page .saa-pad__head { margin-bottom: 1rem; color: var(--saa-soft); font-size: var(--a-t-mark) }
body.apex-saa .saa-page .saa-pad__q { color: var(--saa-ink); font-size: 1.02rem; font-weight: 600; line-height: 1.4 }
body.apex-saa .saa-page .saa-hand--answer {
    margin: .3rem 0 1.2rem !important;
    font-size: 1.6rem;
    line-height: 1.3;
    clip-path: inset(-.4em calc((1 - var(--m)) * 100%) -.4em 0);
}
body.apex-saa .saa-page .saa-pad__skip { color: var(--saa-soft); font-size: var(--a-t-mark) }
body.apex-saa .saa-page .saa-ask__lead { margin: 0 0 1.6rem; color: var(--saa-ink); font-size: var(--a-t-sub); line-height: 1.45; letter-spacing: -.01em }
body.apex-saa .saa-page .saa-ask__para { margin: 0; padding: 0 0 0 1.2rem; border-left: 2px solid var(--saa-line) }
body.apex-saa .saa-page .saa-ask__para p { margin: 0; color: var(--saa-body); font-size: var(--a-t-spoken); line-height: 1.65 }
body.apex-saa .saa-page .saa-ask__para .saa-ask__from { margin-bottom: .4rem; color: var(--saa-soft); font-size: var(--a-t-mark) }
/* the pen underlines the words that came from the answers */
body.apex-saa .saa-page .saa-under {
    background-image: linear-gradient(var(--saa-pen), var(--saa-pen));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: calc(var(--m) * 100%) 2px;
    color: color-mix(in srgb, var(--saa-ink) calc(var(--m) * 100%), var(--saa-body));
}

/* ── the brief: five post extras as real toggles on a small post ── */
body.apex-saa .saa-page .saa-brief__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(1.8rem, 5vw, 4.5rem);
    align-items: start;
}
body.apex-saa .saa-page .saa-brief__intro { margin: 0 0 1.2rem; color: var(--saa-ink); font-size: var(--a-t-sub); line-height: 1.45; letter-spacing: -.01em }
body.apex-saa .saa-page .saa-brief__list { list-style: none; margin: 0; padding: 0 }
body.apex-saa .saa-page .saa-brief__list li + li { border-top: 1px solid var(--saa-line) }
body.apex-saa .saa-page .saa-tick {
    display: flex;
    align-items: center;
    gap: .9rem;
    width: 100%;
    padding: .8rem 0;
    border: 0;
    background: none;
    color: var(--saa-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
body.apex-saa .saa-page .saa-tick svg { flex: none; width: 1.75rem; height: 1.75rem; overflow: visible }
body.apex-saa .saa-page .saa-tick rect { fill: #fff; stroke: var(--saa-soft); stroke-width: 1.5 }
body.apex-saa .saa-page .saa-tick path { stroke-width: 2.6; stroke-dashoffset: 1; transition: stroke-dashoffset .35s ease }
body.apex-saa .saa-page .saa-tick[aria-pressed="true"] path { stroke-dashoffset: 0 }
body.apex-saa .saa-page .saa-tick b { display: block; font-size: var(--a-t-spoken); font-weight: 600 }
body.apex-saa .saa-page .saa-tick small { display: block; margin-top: .1rem; color: var(--saa-soft); font-size: .92rem }
body.apex-saa .saa-page .saa-tick:hover b { color: var(--saa-brand) }
body.apex-saa .saa-page .saa-tick:focus-visible { outline: 2px solid var(--saa-brand); outline-offset: 2px; border-radius: 6px }
body.apex-saa .saa-page .saa-brief__more { margin: 1rem 0 0; color: var(--saa-soft); font-size: .95rem; line-height: 1.55 }

body.apex-saa .saa-page .saa-mini {
    padding: 1.6rem 1.7rem 1.4rem;
    border: 1px solid var(--saa-card-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--a-card-shadow);
}
body.apex-saa .saa-page .saa-mini p { margin: 0 }
body.apex-saa .saa-page .saa-mini__title { color: var(--saa-ink); font-size: var(--a-t-sub); font-weight: 600; line-height: 1.25; letter-spacing: -.012em }
body.apex-saa .saa-page .saa-mini__p { margin-top: .9rem !important; color: var(--saa-body); line-height: 1.6 }
/* each extra opens and closes its own height, so the post reflows */
body.apex-saa .saa-page .saa-mini__x { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .4s ease, opacity .3s ease }
body.apex-saa .saa-page .saa-mini__x > div { overflow: hidden; min-height: 0 }
body.apex-saa .saa-page .saa-mini__x.is-off { grid-template-rows: 0fr; opacity: 0 }
body.apex-saa .saa-page :is(.saa-mini__fast, .saa-mini__tip) {
    margin-top: .9rem !important;
    padding: .8rem 1rem;
    border-radius: 8px;
    background: rgba(39, 77, 138, .07);
    color: var(--saa-body);
    line-height: 1.55;
}
body.apex-saa .saa-page :is(.saa-mini__fast, .saa-mini__tip, .saa-mini__src) b { display: block; color: var(--saa-ink); font-weight: 600 }
body.apex-saa .saa-page .saa-mini__src { margin-top: 1rem !important; padding-top: .8rem; border-top: 1px solid var(--saa-line); color: var(--saa-soft); font-size: .92rem }
body.apex-saa .saa-page .saa-mini__a { color: inherit; transition: color .25s ease }
body.apex-saa .saa-page .saa-mini__a.is-link { color: var(--saa-brand); text-decoration: underline; text-underline-offset: .18em }
body.apex-saa .saa-page .saa-mini__fn { color: var(--saa-brand); font-weight: 700; transition: opacity .25s ease }
body.apex-saa .saa-page .saa-mini__fn.is-off { opacity: 0 }

/* ── is it worth it ── */
body.apex-saa .saa-page .saa-worth__case { position: sticky; top: 18vh }
body.apex-saa .saa-page .saa-worth__q {
    margin: 0;
    color: var(--saa-ink);
    font-size: var(--a-t-head);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -.018em;
    text-wrap: balance;
}
body.apex-saa .saa-page .saa-worth__cost {
    margin: 1.3rem 0 0;
    padding-top: 1.1rem;
    border-top: 1px solid var(--saa-line);
    color: var(--saa-body);
    font-size: var(--a-t-spoken);
    line-height: 1.55;
}
body.apex-saa .saa-page :is(.saa-worth__why, .saa-close__call) a {
    color: var(--saa-brand);
    text-decoration: underline;
    text-underline-offset: .18em;
}

/* ── set it up yourself ── */
body.apex-saa .saa-page .saa-steps {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(1.8rem, 5vw, 4.5rem);
    align-items: start;
}
body.apex-saa .saa-page .saa-steps__intro { align-self: stretch }
body.apex-saa .saa-page .saa-steps__sticky { position: sticky; top: 18vh }
body.apex-saa .saa-page .saa-steps__sticky h2 { margin: 0 0 1.4rem }
body.apex-saa .saa-page .saa-steps__list { list-style: none; margin: 0; padding: 0 }
body.apex-saa .saa-page .saa-step { padding: 1.2rem 0; border-top: 1px solid var(--saa-line) }
body.apex-saa .saa-page .saa-step:first-child { border-top: 0; padding-top: 0 }
body.apex-saa .saa-page .saa-step__num { display: block; margin-bottom: .45rem; color: var(--saa-brand); font-weight: 600 }
body.apex-saa .saa-page .saa-step h3 { margin: 0 0 .35rem; font: 600 var(--a-t-sub)/1.2 var(--app-sans, var(--saa-head-font)); letter-spacing: -.015em }
body.apex-saa .saa-page .saa-step p { margin: 0; max-width: 34rem; color: var(--saa-body); line-height: 1.6 }

/* ── or I do it ── */
body.apex-saa .saa-page .saa-setup__grid {
    padding-top: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid var(--saa-line);
}
body.apex-saa .saa-page .saa-setup__grid .saa-head { margin: 0 }
body.apex-saa .saa-page .saa-setup__body > p {
    margin: 0 0 1rem;
    max-width: 38rem;
    color: var(--saa-body);
    font-size: var(--a-t-spoken);
    line-height: 1.6;
}
body.apex-saa .saa-page .saa-setup__body > p:first-child { color: var(--saa-ink) }
body.apex-saa .saa-page .saa-setup__act { margin-top: 1.6rem }
body.apex-saa .saa-page .saa-setup__act p { margin: .9rem 0 0; color: var(--saa-soft); font-size: .92rem; line-height: 1.5 }

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

@media (max-width: 900px) {
    body.apex-saa .saa-page :is(.saa-hero__inner--graph, .saa-ask__grid, .saa-brief__grid, .saa-month__grid, .saa-google__grid, .saa-yours__grid, .saa-worth__grid, .saa-power__grid, .saa-setup__grid, .saa-steps) { grid-template-columns: 1fr }
    body.apex-saa .saa-page :is(.saa-worth__case, .saa-steps__sticky) { position: static }
}

/* ════════ 4 NOV: SLOP AGAINST THIS APP'S, THE CALENDAR, THE DOORS ═════════ */
body.apex-saa .saa-page .saa-hand--answer { font-size: 2rem; line-height: 1.1; color: #1f5fd6 }
body.apex-saa .saa-page .saa-pen-note { display: block; font: 400 1.9rem/1.1 "Apex Hand", cursive; color: #1f5fd6; text-wrap: balance }
body.apex-saa .saa-page .saa-textlink { color: var(--saa-ink); font-weight: 600; text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px }
body.apex-saa .saa-page .saa-textlink:hover { color: var(--saa-pen) }
body.apex-saa .saa-hero__actions { align-items: center; gap: 1.4rem }

body.apex-saa .saa-page .saa-slop__grid { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: start }
body.apex-saa .saa-page .saa-vs { margin: 0; min-width: 0 }
body.apex-saa .saa-page .saa-vs__tags { display: flex; justify-content: space-between; margin-bottom: .6rem; font-size: 1rem; font-weight: 600; color: var(--saa-ink) }
body.apex-saa .saa-page .saa-vs__frame {
    position: relative; display: grid; overflow: hidden; background: #fff;
    border: 1px solid var(--a-card-line); border-radius: 14px; box-shadow: var(--a-card-shadow-2, var(--a-card-shadow));
}
body.apex-saa .saa-page .saa-vs__ours,
body.apex-saa .saa-page .saa-vs__slop { grid-area: 1 / 1; padding: clamp(1.3rem, 3vw, 2.2rem) }
body.apex-saa .saa-page .saa-vs__ours { background: #fff }
body.apex-saa .saa-page .saa-vs__slop { background: #f1efe9; clip-path: inset(0 calc(100% - var(--x)) 0 0) }
body.apex-saa .saa-page .saa-vs__frame p { margin: 0 0 .85rem; font-size: 1.04rem; line-height: 1.55; color: var(--saa-body); text-wrap: pretty }
body.apex-saa .saa-page .saa-vs__frame .saa-vs__title { margin-bottom: .5rem; font-size: clamp(1.45rem, 2.4vw, 1.9rem); font-weight: 600; line-height: 1.16; letter-spacing: -.02em; color: var(--saa-ink); text-wrap: balance }
body.apex-saa .saa-page .saa-vs__frame .saa-vs__by { font-size: .9rem; color: var(--saa-soft) }
body.apex-saa .saa-page .saa-vs__frame .saa-vs__h { margin: 1.1rem 0 .3rem; font-size: 1.16rem; font-weight: 600; color: var(--saa-ink) }
body.apex-saa .saa-page .saa-vs__slop p { color: #5c5a54 }
body.apex-saa .saa-page .saa-vs__line { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: var(--saa-pen); pointer-events: none }
body.apex-saa .saa-page .saa-vs__line i { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 44px; height: 44px; margin: -22px 0 0 -22px; color: #fff; background: var(--saa-pen); border-radius: 50%; box-shadow: 0 6px 14px rgba(10, 23, 48, .3) }
body.apex-saa .saa-page .saa-vs__line svg { width: 24px; height: 24px }
body.apex-saa .saa-page .saa-vs__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y }
body.apex-saa .saa-page .saa-vs__range:focus-visible ~ * { outline: none }
body.apex-saa .saa-page .saa-vs__frame:focus-within { outline: 2px solid var(--saa-pen); outline-offset: 3px }
body.apex-saa .saa-page .saa-vs figcaption { margin-top: .7rem; text-align: center }
/* 8 Nov: it rests on this app's article (--x 0) with a handle under the line.
   The range is the keyboard's; only the handle and the line take a pointer, so
   a tap on the words never jumps it. The frame stops clipping so the handle can
   sit on its bottom edge, and the two articles round their own corners. */
body.apex-saa .saa-page .saa-vs__frame { overflow: visible }
body.apex-saa .saa-page :is(.saa-vs__ours, .saa-vs__slop) { border-radius: 13px }
body.apex-saa .saa-page .saa-vs__line { pointer-events: auto; cursor: ew-resize; touch-action: none }
body.apex-saa .saa-page .saa-vs__line::before { content: ""; position: absolute; top: 0; bottom: 0; left: -11px; width: 24px }
body.apex-saa .saa-page .saa-vs__knob {
    position: absolute; z-index: 3; bottom: -22px; left: clamp(22px, var(--x), calc(100% - 22px));
    display: grid; place-items: center; width: 44px; height: 44px; margin-left: -22px;
    color: #fff; background: var(--saa-pen); border-radius: 50%; box-shadow: 0 6px 14px rgba(10, 23, 48, .3);
    cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
}
body.apex-saa .saa-page .saa-vs__knob svg { width: 24px; height: 24px }
body.apex-saa .saa-page .saa-vs.is-dragging .saa-vs__knob { cursor: grabbing }
body.apex-saa .saa-page .saa-vs.is-dragging { user-select: none; -webkit-user-select: none }
body.apex-saa .saa-page .saa-vs__range { inset: auto; left: 0; bottom: 0; width: 1px; height: 1px; pointer-events: none }
body.apex-saa .saa-page .saa-vs__frame:focus-within { outline: 0 }
body.apex-saa .saa-page .saa-vs__frame:has(.saa-vs__range:focus-visible) .saa-vs__knob { outline: 2px solid var(--saa-pen); outline-offset: 3px }
body.apex-saa .saa-page .saa-vs figcaption { margin-top: 2.1rem }
/* the red pen strikes each tell as the line uncovers it; struck, it stays struck */
body.apex-saa .saa-page .saa-tell {
    background: linear-gradient(#c8261e, #c8261e) 0 58% / 0 2px no-repeat;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
    transition: background-size .5s cubic-bezier(.4, .1, .3, 1), color .5s ease;
}
body.apex-saa .saa-page .saa-tell.is-struck { background-size: 100% 2px; color: #8d8a83 }
@media (prefers-reduced-motion: reduce) {
    body.apex-saa .saa-page .saa-tell { transition: none }
}
body.apex-saa .saa-page .saa-slop__lead { margin: 0 0 1.5rem; font-size: var(--a-t-lede); line-height: 1.5; color: var(--saa-ink) }
/* 8 Nov pass 2: the pantry capture (.saa-slop__real) is gone, its rules are in
   _archive/apps-audit-2026-11-08b/saa/. The pen points down to the red pen post. */
body.apex-saa .saa-page .saa-slop__down { margin: 0 0 1.8rem; max-width: 18em; text-decoration: none }
body.apex-saa .saa-page .saa-slop__down:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em }
body.apex-saa .saa-page .saa-slop__down:focus-visible { outline: 2px solid #1f5fd6; outline-offset: 3px; border-radius: 4px }
body.apex-saa .saa-page .saa-slop__google { margin: 0 }
body.apex-saa .saa-page .saa-slop__google p { margin: 0 0 .3rem; font-size: 1.14rem; font-weight: 500; line-height: 1.4; letter-spacing: -.01em; color: var(--saa-ink) }
body.apex-saa .saa-page .saa-slop__google cite { font-size: .92rem; font-style: normal }
body.apex-saa .saa-page .saa-slop__google a { color: var(--saa-soft) }
body.apex-saa .saa-page .saa-pen__lead { max-width: 40rem }

/* the month: a paper calendar, Tuesdays ringed in pen */
body.apex-saa .saa-page .saa-month__grid { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center }
body.apex-saa .saa-page .saa-cal { padding: clamp(1.1rem, 2.4vw, 1.8rem); background: #fff; transform: rotate(-.6deg); border: 1px solid var(--a-card-line); border-radius: 6px; box-shadow: var(--a-card-shadow-2, var(--a-card-shadow)) }
body.apex-saa .saa-page .saa-cal__m { margin: 0 0 .9rem; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 600; letter-spacing: -.02em; color: var(--saa-ink) }
body.apex-saa .saa-page .saa-cal__days { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: clamp(.5rem, 1.2vw, .9rem); text-align: center; font-variant-numeric: tabular-nums }
body.apex-saa .saa-page .saa-cal__days b { font-size: .86rem; font-weight: 600; color: var(--saa-soft) }
body.apex-saa .saa-page .saa-cal__days span { position: relative; font-size: clamp(1rem, 1.6vw, 1.14rem); line-height: 2; color: var(--saa-body) }
body.apex-saa .saa-page .saa-cal__days .is-post { font-weight: 600; color: var(--saa-ink) }
body.apex-saa .saa-page .saa-cal__days svg { position: absolute; left: 50%; top: 50%; width: 2.9em; height: 2.3em; margin: -1.15em 0 0 -1.45em; fill: none; stroke: #1f5fd6; stroke-width: 2.4; stroke-linecap: round }
body.apex-saa .saa-page .saa-cal__days svg path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s ease .3s }
body.apex-saa .saa-page .saa-cal.is-revealed .saa-cal__days svg path { stroke-dashoffset: 0 }
body.apex-saa .saa-page .saa-month__below { display: grid; gap: clamp(1.6rem, 4vw, 4rem); margin-top: clamp(2.2rem, 4vw, 3.4rem) }
body.apex-saa .saa-page .saa-month__below p { margin: 0 0 .9rem; font-size: 1.06rem; line-height: 1.55; color: var(--saa-body) }
body.apex-saa .saa-page .saa-month__below b { font-weight: 600; color: var(--saa-ink) }
body.apex-saa .saa-page .saa-month__below .saa-slop__google p { font-size: 1.1rem; color: var(--saa-ink) }

/* sixty cents: each post is another result */
body.apex-saa .saa-page .saa-serps { display: grid; gap: .9rem }
body.apex-saa .saa-page .saa-serp { padding: 1rem 1.2rem 1.05rem; background: #fff; border: 1px solid #e3e6ea; border-radius: 12px; box-shadow: var(--a-card-shadow); font-family: arial, sans-serif } /* impeccable-disable-line overused-font -- Google's own results font, this is a drawn Google result */
body.apex-saa .saa-page .saa-serp:nth-child(2) { margin-left: clamp(0px, 2vw, 22px) }
body.apex-saa .saa-page .saa-serp p { margin: 0; font-family: arial, sans-serif } /* impeccable-disable-line overused-font */
body.apex-saa .saa-page .saa-serp__site { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem !important; font-size: .86rem; color: #202124 }
body.apex-saa .saa-page .saa-serp__site i { flex: none; width: 18px; height: 18px; background: var(--saa-ink); border-radius: 50% }
body.apex-saa .saa-page .saa-serp__site span { color: #4d5156 }
body.apex-saa .saa-page .saa-serp__title { margin-bottom: .25rem !important; font-size: 1.2rem; line-height: 1.3; color: #1a0dab }
body.apex-saa .saa-page .saa-serp__desc { font-size: .9rem; line-height: 1.5; color: #4d5156 }
body.apex-saa .saa-page .saa-worth__why .saa-worth__cost { margin: 0 0 1.3rem; font-size: clamp(1.3rem, 2.1vw, 1.65rem); font-weight: 500; line-height: 1.3; letter-spacing: -.015em; color: var(--saa-ink) }

/* two doors */
body.apex-saa .saa-page .saa-doors__steps { display: grid; gap: 1.5rem clamp(1.5rem, 3vw, 2.6rem); margin: 0 0 1.8rem; padding: 0; list-style: none; counter-reset: sstep }
body.apex-saa .saa-page .saa-doors__steps li { counter-increment: sstep }
body.apex-saa .saa-page .saa-doors__steps h3 { margin: 0 0 .25rem; font-size: 1.14rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--saa-ink) }
body.apex-saa .saa-page .saa-doors__steps h3::before { content: counter(sstep) ". "; color: var(--saa-pen) }
body.apex-saa .saa-page .saa-doors__steps p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--saa-body) }
body.apex-saa .saa-page .saa-doors__me { display: grid; gap: clamp(1.6rem, 4vw, 4rem); align-items: center; margin-top: clamp(3rem, 6vw, 5rem) }
body.apex-saa .saa-page .saa-doors__pad { padding: 1.5rem 1.6rem 1.6rem; transform: rotate(-1deg) }
body.apex-saa .saa-page .saa-pad .saa-doors__price { font: 400 3.4rem/1 "Apex Hand", cursive; color: #1f5fd6;}
body.apex-saa .saa-page .saa-pad .saa-doors__hand { margin-top: .4rem; font: 400 2rem/1.1 "Apex Hand", cursive; color: #1f5fd6;}
body.apex-saa .saa-page .saa-doors__body p { margin: 0 0 .9rem; font-size: 1.06rem; line-height: 1.55; color: var(--saa-body) }
body.apex-saa .saa-page .saa-doors__body .saa-chip { margin-top: .5rem }

@media (min-width: 900px) {
    body.apex-saa .saa-page .saa-slop__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr) }
    /* shorter without the capture, so it sits level with the middle of the slider */
    body.apex-saa .saa-page .saa-slop__side { align-self: center }
    body.apex-saa .saa-page .saa-month__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr) }
    body.apex-saa .saa-page .saa-month__below { grid-template-columns: 1fr 1fr }
    body.apex-saa .saa-page .saa-doors__steps { grid-template-columns: repeat(3, 1fr) }
    body.apex-saa .saa-page .saa-doors__me { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) }
}
@media (min-width: 620px) and (max-width: 899px) {
    body.apex-saa .saa-page .saa-doors__steps { grid-template-columns: 1fr 1fr }
    body.apex-saa .saa-page .saa-doors__me { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) }
    body.apex-saa .saa-page .saa-month__grid { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr) }
}

/* ════════ 6 NOV: THE CALENDAR IS THE CONTROL (saa-adnia.js initCal) ════════ */
body.apex-saa .saa-page .saa-cal__d {
    position: relative; padding: 0; font: inherit; font-size: clamp(1rem, 1.6vw, 1.14rem); line-height: 2; color: var(--saa-body);
    background: none; border: 0; border-radius: 50%; cursor: pointer; font-variant-numeric: tabular-nums;
}
body.apex-saa .saa-page .saa-cal__d:hover { color: var(--saa-ink); background: #eef3fb }
body.apex-saa .saa-page .saa-cal__d:focus-visible { outline: 2px solid #1f5fd6; outline-offset: 1px }
body.apex-saa .saa-page .saa-cal__d.is-past { color: #a3adbd }
body.apex-saa .saa-page .saa-cal__d.is-past.is-post { color: var(--saa-soft) }
body.apex-saa .saa-page .saa-cal__d.is-post { font-weight: 600; color: var(--saa-ink) }
body.apex-saa .saa-page .saa-cal__d:not(.is-post) svg { display: none }
body.apex-saa .saa-page .saa-cal__d.is-new svg path { animation: saa-ring .55s ease forwards }
@keyframes saa-ring { from { stroke-dashoffset: 1 } to { stroke-dashoffset: 0 } }
body.apex-saa .saa-page .saa-cal__d.is-no { animation: saa-no .35s ease }
@keyframes saa-no { 25%, 75% { transform: translateX(-3px) } 50% { transform: translateX(3px) } }
body.apex-saa .saa-page .saa-cal__pen { min-height: 2.3em; margin: 1rem 0 0; font: 400 1.55rem/1.15 "Apex Hand", cursive; color: #1f5fd6; text-wrap: balance }
/* 8 Nov: the warning stays in the same blue pen; the words carry it, not a verdict colour (this file, line 157) */
body.apex-saa .saa-page .saa-cal__pen.is-warn { color: #1f5fd6 }
body.apex-saa .saa-page .saa-month__go { margin: 1.4rem 0 0 }
body.apex-saa .saa-page .saa-month__post.is-new { animation: saa-in .35s ease both }
@keyframes saa-in { from { opacity: 0; transform: translateY(6px) } }
@media (prefers-reduced-motion: reduce) {
    body.apex-saa .saa-page .saa-cal__d.is-new svg path, body.apex-saa .saa-page .saa-cal__d.is-no, body.apex-saa .saa-page .saa-month__post.is-new { animation: none }
    body.apex-saa .saa-page .saa-cal__d svg path { stroke-dashoffset: 0 }
}

/* 6 Nov: the first post, from the question their customers ask most (initFirst) */
body.apex-saa .saa-page .saa-first { max-width: 44rem; margin: 0 0 1.4rem; padding: clamp(1.2rem, 2.6vw, 1.8rem); 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-saa .saa-page .saa-first__q { display: block; margin: 0 0 .7rem; font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 600; letter-spacing: -.015em; color: var(--saa-ink) }
body.apex-saa .saa-page .saa-first__row { display: flex; flex-wrap: wrap; gap: .6rem }
body.apex-saa .saa-page .saa-first__in {
    flex: 1 1 18rem; min-width: 0; padding: .8rem 1rem; font: inherit; font-size: 1.05rem; color: var(--saa-ink);
    background: #f6f8fc; border: 1.5px solid #c9d5e8; border-radius: 12px; outline: 0;
}
body.apex-saa .saa-page .saa-first__in:focus { border-color: #1f5fd6; background: #fff; box-shadow: 0 0 0 4px rgba(31, 95, 214, .13) }
body.apex-saa .saa-page .saa-first__row .saa-chip { flex: none; border: 0; cursor: pointer; font: inherit }
body.apex-saa .saa-page .saa-first__err { min-height: 1.3em; margin: .5rem 0 0; font-size: .92rem; color: #b42318 }
body.apex-saa .saa-page .saa-first__res { margin-top: .6rem; animation: saa-in .4s ease both }
body.apex-saa .saa-page .saa-first__pen { margin: 1rem 0 0; font: 400 1.7rem/1.15 "Apex Hand", cursive; color: #1f5fd6 }
body.apex-saa .saa-page .saa-first__pen .saa-textlink { margin-left: .5rem; font-family: var(--font-body, var(--a-sans)); font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--saa-ink); vertical-align: .25em }
body.apex-saa .saa-page .saa-first__res[hidden], body.apex-saa .saa-page .saa-first__pen[hidden] { display: none }
body.apex-saa .saa-page .saa-doors__then { max-width: 44rem; margin: 0 0 1.4rem; font-size: 1.06rem; line-height: 1.55; color: var(--saa-body) }
/* the two doors side by side: your first post, or his $25 */
body.apex-saa .saa-page .saa-doors__grid { display: grid; gap: clamp(2.5rem, 5vw, 5rem); align-items: start }
body.apex-saa .saa-page .saa-doors__grid .saa-doors__me { display: block; margin-top: 0 }
body.apex-saa .saa-page .saa-doors__grid .saa-doors__pad { margin-bottom: 1.6rem }
@media (min-width: 900px) {
    body.apex-saa .saa-page .saa-doors__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr) }
}

/* ════════ 8 NOV: THE READER'S OWN WORDS (saa-adnia.js initCal, initAsk, initBrief) ════════ */
/* the calendar: their own question goes on the next free day */
body.apex-saa .saa-page .saa-cal__own { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--a-card-line) }
body.apex-saa .saa-page .saa-cal__ask { display: block; margin: 0 0 .55rem; font-size: 1rem; font-weight: 600; color: var(--saa-ink) }
body.apex-saa .saa-page .saa-cal__row { display: flex; flex-wrap: wrap; gap: .6rem }
body.apex-saa .saa-page .saa-cal__row .saa-first__in { flex: 1 1 10rem }
body.apex-saa .saa-page .saa-cal__row .saa-chip { flex: none; border: 0; cursor: pointer; font: inherit }
body.apex-saa .saa-page .saa-cal__mine { margin: .8rem 0 0 }
body.apex-saa .saa-page .saa-cal__mine[hidden] { display: none }
body.apex-saa .saa-page .saa-month__post.is-yours .saa-month__title { color: #1f5fd6 }

/* the interview: their line on the pad, in the same blue pen */
body.apex-saa .saa-page .saa-pad__yours { margin: .2rem 0 1rem }
body.apex-saa .saa-page .saa-pad__yours .saa-pad__q { display: block }
body.apex-saa .saa-page .saa-pad__in {
    display: block; width: 100%; min-height: 2.6em; margin: .3rem 0 .7rem; padding: .15rem .1rem;
    font: 400 2rem/1.1 "Apex Hand", cursive; color: #1f5fd6;
    background: transparent; border: 0; border-bottom: 1.5px dashed #b9c8e2; border-radius: 0;
    resize: vertical; outline: 0;
}
body.apex-saa .saa-page .saa-pad__in::placeholder { color: #8fa6cc }
body.apex-saa .saa-page .saa-pad__in:focus { border-bottom: 1.5px solid #1f5fd6 }
body.apex-saa .saa-page .saa-pad__in:focus-visible { outline: 2px solid #1f5fd6; outline-offset: 3px; border-radius: 4px }
body.apex-saa .saa-page .saa-pad__yours .saa-chip { border: 0; cursor: pointer; font: inherit }
body.apex-saa .saa-page .saa-pad .saa-pad__err { min-height: 1.3em; margin: .4rem 0 0; font-size: .92rem; color: var(--saa-ink) }
body.apex-saa .saa-page .saa-ask__pen { margin: 1.2rem 0 0; font: 400 1.7rem/1.15 "Apex Hand", cursive; color: #1f5fd6 }
body.apex-saa .saa-page .saa-ask__pen .saa-textlink { margin-left: .5rem; font-family: var(--font-body, var(--a-sans)); font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--saa-ink); vertical-align: .25em; white-space: normal }
body.apex-saa .saa-page .saa-ask__pen[hidden] { display: none }
body.apex-saa .saa-page .saa-ask__para.is-yours p:last-child { animation: saa-in .4s ease both }

/* the extras: the ticked ones go to the form */
body.apex-saa .saa-page .saa-brief__go { margin: 1.1rem 0 0 }

/* the first post's day */
body.apex-saa .saa-page .saa-first__pen .saa-textlink { white-space: normal }

@media (prefers-reduced-motion: reduce) {
    body.apex-saa .saa-page .saa-ask__para.is-yours p:last-child { animation: none }
}
/* 9 Nov egg: the wrong fact in the usual article, ringed in the same red pen once it's found */
body.apex-saa .saa-page .saa-lie.is-caught {
    padding: 0 .2em; border-radius: .5em; box-shadow: 0 0 0 2px #c8261e;
    -webkit-box-decoration-break: clone; box-decoration-break: clone; color: var(--saa-ink);
}
body.apex-saa .saa-page .saa-vs__slop { cursor: default }
body.apex-saa .saa-page .saa-penlink { font: inherit; color: inherit; text-decoration: underline; text-underline-offset: .16em; text-decoration-thickness: 1px }
body.apex-saa .saa-page .saa-penlink:hover { color: var(--saa-ink) }