/* Myanmar HR Answers design layer — both halves of the section.
 *
 * The presentation layer for Components/Pages/AnswersIndex.razor (/answers) and
 * Components/Pages/AnswerPage.razor (/answers/{slug}). One sheet rather than
 * two because the pair shares its hero, its palette and its link rows — the
 * .qans-item row is authored once here and used by both the index grid and the
 * related-answers rail, so the two pages cannot drift apart. Global CSS,
 * linked from App.razor, so the same rules every sibling page sheet calls out
 * apply here:
 *
 * 1. Nothing confines these rules to this page, so every selector is qans-
 *    prefixed or a descendant of one. No bare element selectors at the top
 *    level — an unlayered `h2` here would repaint every page on the site.
 * 2. @keyframes names are global too, hence the prefix on those as well: they
 *    must not collide with the compiled Tailwind bundle or with the qh-, qc-,
 *    qp-, qco-, qts- and qsm- animations the other page sheets declare. The
 *    admin back office already owns the bare `qa-` prefix, which is why this
 *    sheet uses `qans-` rather than the obvious short form.
 *
 * These rules are unlayered and Tailwind v4's utilities live inside @layer, so
 * they win regardless of specificity. That is what lets the page be styled
 * entirely from here rather than from utility classes: the bundle wwwroot
 * serves is a Next.js build artefact containing only the utilities that build
 * emitted, so a class invented in the markup would not exist at runtime.
 *
 * WHY THE HERO STAYS DARK. Both pages used to render on the shared dark
 * `hero-section`; keeping that violet field — now with the weave and the drift
 * glows — is what makes the index and an answer read as one section rather than
 * two pages that happen to link to each other. The redesign is in what follows
 * it: on the index, a topic rail that overlaps the hero and one card per bucket;
 * on an answer, a two-column reading layout with a sticky related rail.
 *
 * NO CONTENT LIVES HERE, AND NONE WAS ADDED. Every string on the page still
 * comes from the blog table — bucket names, answer titles, the answered-question
 * count. The topic chips and the count pills are that same data re-presented;
 * the chips are in-page anchors, so nothing about how an answer is reached
 * changed either.
 *
 * PALETTE. The logo ramp the pricing, help-centre and careers sheets share —
 * #a22dea (magenta-violet) → #7b5ee5 → #5b5de2 (indigo-blue), primary #4f46e5 —
 * over the dark violet field #221049 → #140f33. Emerald (#10b981) is the one hue
 * from outside that ramp and carries a single meaning, the one the old markup
 * already gave it: "this is the answer". It appears on the short-answer card and
 * nowhere else in this sheet.
 */

.qans-page {
    position: relative;
    background: linear-gradient(180deg, #fff 0%, #fbfaff 40%, #f5f3fd 100%);
}

/* ── hero ───────────────────────────────────────────────────────────── */
.qans-hero {
    position: relative;
    overflow: hidden;
    /* The bottom pad is deep because the topic rail is pulled back up into it. */
    padding: 74px 0 126px;
    background:
        radial-gradient(120% 150% at 84% -18%, #3d1d7a 0%, #241150 44%, #140f33 100%);
}

/* Diagonal hairline weave — texture at the edge of visibility, so the type on
   top of it never has to fight for contrast. */
.qans-hero__weave {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .5;
    background-image:
        repeating-linear-gradient(58deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 13px),
        repeating-linear-gradient(-58deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 17px);
    -webkit-mask-image: radial-gradient(ellipse 78% 70% at 30% 12%, #000, transparent 76%);
    mask-image: radial-gradient(ellipse 78% 70% at 30% 12%, #000, transparent 76%);
}

.qans-hero__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.qans-hero__glow i {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(94px);
    animation: qans-drift 28s ease-in-out infinite;
}

.qans-hero__glow i:nth-child(1) {
    width: 660px;
    height: 660px;
    top: -330px;
    right: -160px;
    background: radial-gradient(circle, rgba(162, 45, 234, .5), transparent 64%);
}

.qans-hero__glow i:nth-child(2) {
    width: 520px;
    height: 520px;
    bottom: -290px;
    left: -170px;
    animation-delay: -11s;
    background: radial-gradient(circle, rgba(79, 70, 229, .48), transparent 64%);
}

@keyframes qans-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    34%      { transform: translate(-40px, 32px) scale(1.09); }
    67%      { transform: translate(34px, -24px) scale(.93); }
}

.qans-hero__inner {
    position: relative;
    z-index: 5;
}

.qans-hero__copy { max-width: 780px; }

.qans-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 22px;
    padding: 8px 18px 8px 14px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .92);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.qans-eyebrow__pip {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 99px;
    background: #c084fc;
    box-shadow: 0 0 0 0 rgba(192, 132, 252, .6);
    animation: qans-pulse 2.6s ease-in-out infinite;
}

@keyframes qans-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(192, 132, 252, .55); }
    50%      { box-shadow: 0 0 0 7px rgba(192, 132, 252, 0); }
}

.qans-title {
    font-size: clamp(34px, 4.6vw, 56px);
    line-height: 1.06;
    letter-spacing: -.038em;
    font-weight: 800;
    color: #fff;
    margin: 0 0 20px;
}

.qans-accent {
    background: linear-gradient(96deg, #c4b5fd 0%, #d8b4fe 48%, #f0abfc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.qans-lede {
    font-size: clamp(15.5px, 1.25vw, 18px);
    line-height: 1.7;
    color: rgba(255, 255, 255, .76);
    max-width: 620px;
    margin: 0;
}

/* ── topic rail ─────────────────────────────────────────────────────── */
/* Lifted into the hero so the page's first white surface starts above the fold
   and the bucket names are readable without scrolling past 500 links. */
.qans-jump {
    position: relative;
    z-index: 6;
    margin-top: -66px;
    padding: 20px 22px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid #ece9f8;
    box-shadow: 0 38px 78px -46px rgba(28, 12, 66, .62);
}

.qans-jump__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.qans-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -.005em;
    color: #3f3d68;
    background: #f7f5ff;
    border: 1px solid #eae6fb;
    transition: color .22s, background .25s, border-color .22s, box-shadow .25s, transform .25s;
}

.qans-chip:hover {
    color: #fff;
    background: linear-gradient(135deg, #4f46e5, #7c3aed 56%, #a22dea);
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 18px 32px -18px rgba(99, 102, 241, .95);
}

/* A bucket name must not break across lines — in the mobile scroller a wrapped
   chip is taller than its row and drags the rail's height with it. */
.qans-chip__label { white-space: nowrap; }

.qans-chip__n {
    min-width: 22px;
    padding: 1px 6px;
    border-radius: 99px;
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #6d28d9;
    background: #ede9fe;
    transition: color .22s, background .25s;
}

.qans-chip:hover .qans-chip__n {
    color: #fff;
    background: rgba(255, 255, 255, .22);
}

/* ── body ───────────────────────────────────────────────────────────── */
.qans-body {
    position: relative;
    padding: 0 0 96px;
}

.qans-groups {
    display: grid;
    gap: 26px;
    margin-top: 44px;
}

/* ── bucket card ────────────────────────────────────────────────────── */
.qans-group {
    position: relative;
    overflow: hidden;
    padding: 26px 28px 28px;
    border-radius: 26px;
    background: #fff;
    border: 1px solid #eeecf9;
    box-shadow: 0 26px 56px -42px rgba(15, 23, 42, .5);
}

/* Anchored from the chips above, so the sticky site header — 81px tall, and a
   child of the scrolling box rather than of the viewport — must not land on top
   of the heading the jump arrives at. 104px clears it with room to breathe.
 *
 * This is scroll-padding on the scroll container, not the scroll-margin-top on
 * .qans-group that it replaces, because that property is not honoured on this
 * site. The inherited Next.js bundle makes <body> an internal scroll container
 * (see js/scroll-reset.js for the full derivation), and against a scrolling
 * <body> Chromium ignores the target's scroll-margin entirely: 0px, 104px and
 * 300px all land the group flush under the header, while scroll-padding on the
 * box that actually scrolls positions it exactly.
 *
 * Declared on both <html> and <body> for the same reason scroll-reset.js zeroes
 * both scrollTops — which one owns the scrollbar depends on CSS that may yet
 * change, and only the real scroll container's scroll-padding is ever read, so
 * the other is an inert declaration rather than a second offset that would add.
 *
 * :has() keeps it to this page. The offset belongs to the answers index, not to
 * every fragment landing on the site, and this sheet is global. */
html:has(.qans-page),
body:has(.qans-page) {
    scroll-padding-top: 104px;
}

.qans-group::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #4f46e5, #7c3aed 52%, #a22dea);
    opacity: .85;
}

.qans-group__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid #f1eefb;
}

/* The heading is the tile, not a label sitting next to one. Bucket names come
   from CMS tags and today they are the single letters A–M, so a monogram beside
   the title printed the same character twice. Sized from its own content —
   min-width keeps a lone letter square, the padding lets a word-based bucket
   grow into a section tab without a second rule. */
.qans-group__title {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 15px;
    border-radius: 15px;
    font-size: 18px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #fff;
    margin: 0;
    background: linear-gradient(135deg, #4f46e5, #7c3aed 58%, #a22dea);
    box-shadow: 0 16px 30px -16px rgba(79, 70, 229, .95);
}

/* Carries the eye from the tile across to the count. */
.qans-group__rule {
    flex: 1 1 auto;
    height: 1px;
    min-width: 12px;
    background: linear-gradient(90deg, #e6e1fa, rgba(230, 225, 250, 0));
}

.qans-group__n {
    flex: 0 0 auto;
    padding: 5px 12px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #6d28d9;
    background: #f5f1ff;
    border: 1px solid #ebe4fd;
}

/* ── answer rows ────────────────────────────────────────────────────── */
.qans-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.qans-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px 11px 13px;
    border-radius: 13px;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 550;
    color: #45495e;
    border: 1px solid transparent;
    transition: color .2s, background .22s, border-color .22s, transform .22s;
}

/* The rail wipes down on hover instead of sitting on every row — five hundred
   permanent bars would read as a table of contents nobody can scan. */
.qans-item::before {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    transform: scaleY(0);
    transform-origin: top;
    background: linear-gradient(180deg, #4f46e5, #a22dea);
    transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}

/* CSS-drawn chevron rather than an inline SVG: at five hundred rows the markup
   weight of a per-row icon is real, and this one inherits colour for free. */
.qans-item::after {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin-left: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    border-radius: 1px;
    transform: rotate(-45deg);
    opacity: 0;
    transition: opacity .22s, transform .22s;
}

.qans-item:hover {
    color: #4f46e5;
    background: #f8f6ff;
    border-color: #ede9fd;
    transform: translateX(2px);
}

.qans-item:hover::before { transform: scaleY(1); }

.qans-item:hover::after {
    opacity: 1;
    transform: rotate(-45deg) translate(2px, 2px);
}

.qans-item__txt { min-width: 0; }

/* ════════════════════════════════════════════════════════════════════════
   /answers/{slug} — a single answer.

   Everything above this line is shared or index-only; everything below is the
   detail page. The two heroes are the same element with a different pad, and
   the related rail reuses .qans-item, so an answer looks like the row that was
   clicked to reach it.
   ════════════════════════════════════════════════════════════════════════ */

/* Shallower than the index hero, which needs the extra depth for the topic rail
   pulled up into it. */
.qans-hero--post { padding: 56px 0 68px; }

.qans-hero--post .qans-hero__weave {
    -webkit-mask-image: radial-gradient(ellipse 82% 78% at 26% 18%, #000, transparent 78%);
    mask-image: radial-gradient(ellipse 82% 78% at 26% 18%, #000, transparent 78%);
}

/* ── breadcrumb ─────────────────────────────────────────────────────── */
.qans-crumbs { margin: 0 0 22px; }

.qans-crumbs__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12.5px;
    font-weight: 600;
}

.qans-crumbs__list a {
    color: rgba(255, 255, 255, .66);
    transition: color .2s;
}

.qans-crumbs__list a:hover { color: #fff; }

.qans-crumbs__sep {
    color: rgba(255, 255, 255, .3);
    user-select: none;
}

/* The question is the page, so it is set larger and tighter than the index's
   heading and given a measure that keeps it to three lines at most. */
.qans-post__title {
    font-size: clamp(26px, 3.3vw, 42px);
    line-height: 1.14;
    letter-spacing: -.032em;
    font-weight: 800;
    color: #fff;
    max-width: 900px;
    margin: 0;
}

/* ── reading layout ─────────────────────────────────────────────────── */
.qans-body--post { padding: 54px 0 92px; }

.qans-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 336px;
    align-items: start;
    gap: 48px;
}

/* An answer with no related siblings renders no aside at all, so the rail track
   would otherwise sit there as 336px of dead margin. Doubled class for the
   specificity to beat the 1180px breakpoint below, which media queries do not
   supply on their own. */
.qans-layout.qans-layout--solo { grid-template-columns: minmax(0, 1fr); }

.qans-main { min-width: 0; }

/* ── short answer ───────────────────────────────────────────────────── */
/* The one emerald surface on the page. It is the thing most visitors came for,
   so it sits above the body copy and is the only card with a filled ground. */
.qans-tldr {
    position: relative;
    overflow: hidden;
    padding: 22px 24px 24px;
    margin: 0 0 34px;
    border-radius: 20px;
    background: linear-gradient(135deg, #f0fdf6 0%, #ecfdf5 58%, #f2fdfa 100%);
    border: 1px solid #cdf0dd;
    box-shadow: 0 22px 46px -38px rgba(6, 95, 70, .55);
}

.qans-tldr::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: linear-gradient(180deg, #34d399, #059669);
}

.qans-tldr__label {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #047857;
}

/* CSS-drawn tick, same border trick as the row chevron — no icon font or SVG
   for a mark that appears once. */
.qans-tldr__tick {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    position: relative;
    border-radius: 99px;
    background: linear-gradient(135deg, #34d399, #059669);
    box-shadow: 0 8px 16px -8px rgba(5, 150, 105, .95);
}

.qans-tldr__tick::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 6.5px;
    width: 9px;
    height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
}

.qans-tldr__txt {
    font-size: 15.5px;
    line-height: 1.75;
    color: #14332a;
}

/* ── body copy ──────────────────────────────────────────────────────── */
/* The answer body is CMS HTML rendered through the Tailwind bundle's own
   .prose block, which is left to do the typography. These rules only reach
   inside it for the handful of things .prose leaves at browser defaults, and
   every one is a descendant of .qans-prose so no other page's .prose moves. */
.qans-prose { min-width: 0; }

.qans-prose .prose a {
    color: #6d28d9;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(109, 40, 217, .35);
    transition: color .2s, text-decoration-color .2s;
}

.qans-prose .prose a:hover {
    color: #a22dea;
    text-decoration-color: #a22dea;
}

.qans-prose .prose img {
    border-radius: 16px;
    border: 1px solid #eeecf9;
}

.qans-prose .prose blockquote {
    border-left: 3px solid #c4b5fd;
    background: #faf9ff;
    border-radius: 0 14px 14px 0;
    padding: 2px 20px;
}

/* ── sources ────────────────────────────────────────────────────────── */
.qans-sources {
    margin-top: 38px;
    padding: 24px 26px 26px;
    border-radius: 20px;
    background: #fbfaff;
    border: 1px solid #eeecf9;
}

.qans-sources__title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #6d28d9;
    margin: 0 0 16px;
}

.qans-sources__list {
    counter-reset: qans-src;
    margin: 0;
    padding: 0;
    list-style: none;
}

.qans-sources__list li {
    counter-increment: qans-src;
    position: relative;
    padding: 8px 0 8px 38px;
    font-size: 13.5px;
    line-height: 1.7;
    color: #55596e;
    border-top: 1px solid #f0edfa;
}

.qans-sources__list li:first-child { border-top: 0; }

/* Numbered from a counter rather than an <ol>: the markup keeps the plain <ul>
   the page always rendered, and the numbers are presentation. */
.qans-sources__list li::before {
    content: counter(qans-src);
    position: absolute;
    top: 9px;
    left: 0;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #6d28d9;
    background: #f1ebfe;
}

/* ── reviewer ───────────────────────────────────────────────────────── */
.qans-reviewer {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 28px 0 0;
    padding: 15px 18px;
    border-radius: 16px;
    font-size: 13.5px;
    line-height: 1.6;
    color: #6b7089;
    background: #fff;
    border: 1px solid #eeecf9;
}

.qans-reviewer__mark {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    position: relative;
    border-radius: 11px;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
}

/* A shield tick — "checked by a person" — drawn from the same borders as the
   short-answer mark so the two read as one family. */
.qans-reviewer__mark::after {
    content: "";
    position: absolute;
    top: 12px;
    left: 11px;
    width: 11px;
    height: 6px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
}

.qans-reviewer__name {
    font-weight: 750;
    color: #0b1020;
}

/* ── related rail ───────────────────────────────────────────────────── */
.qans-rail {
    position: sticky;
    top: 96px;
    min-width: 0;
}

.qans-rail__card {
    position: relative;
    overflow: hidden;
    padding: 22px 18px 20px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid #eeecf9;
    box-shadow: 0 30px 66px -46px rgba(28, 12, 66, .6);
}

.qans-rail__card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #4f46e5, #7c3aed 52%, #a22dea);
    opacity: .85;
}

.qans-rail__title {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #7c7f99;
    margin: 0 0 14px;
    padding: 0 8px;
}

.qans-rail__list {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Related titles run long in a 336px rail, so the row loosens up and drops the
   single-line assumption the index grid can make. */
.qans-rail__list .qans-item {
    align-items: flex-start;
    font-size: 13.5px;
    line-height: 1.5;
    padding: 11px 12px;
}

.qans-rail__list .qans-item::after { margin-top: 4px; }

/* ── responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
    .qans-layout { grid-template-columns: minmax(0, 1fr) 306px; gap: 36px; }
}

@media (max-width: 1024px) {
    /* The rail drops below the answer, so it stops being sticky — a full-width
       panel that tracks the viewport would cover the text behind it. */
    .qans-layout { grid-template-columns: minmax(0, 1fr); gap: 44px; }
    .qans-rail { position: static; }
}

@media (max-width: 900px) {
    .qans-list { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
    .qans-hero { padding: 56px 0 108px; }
    .qans-hero--post { padding: 44px 0 52px; }

    .qans-body--post { padding: 38px 0 62px; }

    .qans-tldr {
        padding: 18px 18px 20px;
        border-radius: 17px;
    }

    .qans-sources {
        padding: 20px 18px 22px;
        border-radius: 17px;
    }

    .qans-rail__card { padding: 18px 14px 16px; }

    .qans-jump {
        margin-top: -58px;
        padding: 16px 16px;
        border-radius: 20px;
    }

    /* Wrapping twenty-odd chips eats the screen on a phone, so the rail becomes
       one swipeable row. The edge fade is the affordance that it scrolls. */
    .qans-jump__list {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 2px;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, #000 0 92%, transparent);
        mask-image: linear-gradient(90deg, #000 0 92%, transparent);
    }

    .qans-jump__list::-webkit-scrollbar { display: none; }

    .qans-chip { flex: 0 0 auto; }

    .qans-body { padding-bottom: 64px; }
    .qans-groups { margin-top: 34px; gap: 20px; }

    .qans-group {
        padding: 22px 18px 24px;
        border-radius: 22px;
    }

    .qans-group__title {
        min-width: 40px;
        height: 40px;
        padding: 0 13px;
        font-size: 16.5px;
        border-radius: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qans-hero__glow i,
    .qans-eyebrow__pip { animation: none !important; }

    .qans-chip,
    .qans-item,
    .qans-item::before,
    .qans-item::after {
        transition: none;
    }

    .qans-chip:hover,
    .qans-item:hover { transform: none; }

    .qans-item:hover::after { transform: rotate(-45deg); }
}