/* ============================================================================
   bx-market.css: the marketplaces' search in your own words (cards and loans),
   the browse tiles, the reading chips, and the Card Finder result cards that
   both the finder and the search page draw.

   Built to 01-STANDART-KACHESTVA (5 Sep 2026) and BANROX-DESIGN-TOKENS.md:
   palette and radii from section 4, motion from section 5 (300 ms rise, 75 ms
   press, 400 ms screen change on cubic-bezier(.2,.8,.2,1)), the iOS widgets of
   section 6 (segmented control, chips, toast, bottom sheet), the six states of
   section 7 and the phone rules of section 8. Buttons are the site's own .btn
   classes; nothing here defines a new button.

   Loaded from site/html.html's head_extra by the pages that use it. Versioned
   through asset(), so a change here reaches a cached browser on the next deploy.
   ============================================================================ */

/* ---------- 1. Card Finder results (moved here from finder_results.html, unchanged) ---------- */

/* ============================================================
   Card Finder, results.
   Built to 01-STANDART-KACHESTVA (5 Sep 2026): palette and
   radii from section 4, motion from section 5, toast from
   section 6, six states from section 7, phone rules from
   section 8. Buttons are the site's own .btn classes.
   ============================================================ */
.cr {
    --cr-lilac: #8585E9;
    --cr-info: #7C9BFF;
    --cr-success: #31A650;
    --cr-warning: #F89828;
    --cr-danger: #FF4242;
    --cr-ramp: radial-gradient(50% 169.64% at 50% 50%, #8585E9 0%, #264BFF 100%);
    --cr-glass: radial-gradient(50% 50% at 50% 50%, rgba(33, 33, 33, .004) 0%, rgba(33, 33, 33, .04) 100%);
    --cr-line: rgba(255, 255, 255, .1);
    --cr-hair: inset 0 0 0 1.5px var(--cr-line), inset 0 4px 20px rgba(255, 255, 255, .08);
    --cr-hair-live: inset 0 0 0 1.5px rgba(133, 133, 233, .5), inset 0 4px 20px rgba(255, 255, 255, .08), 0 20px 50px rgba(38, 75, 255, .24);
    --cr-glow: 0 12px 32px -12px rgba(38, 75, 255, .45);
    --cr-ease: cubic-bezier(.2, .8, .2, 1);
    --cr-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --cr-head: 'Inter Tight', 'Inter', sans-serif;
    --cr-serif: 'ZT Formom', 'Instrument Serif', Georgia, serif;
    max-width: 1180px;
    margin: 0 auto;
    font-family: var(--cr-sans);
}

/* ---------- header ---------- */
.cr-head { text-align: center; margin-bottom: 32px; }
.cr-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 16px 0 12px;
    border-radius: 999px;
    background: linear-gradient(184.41deg, rgba(226, 230, 255, .04) 9.68%, rgba(133, 133, 233, .04) 79.28%);
    box-shadow: inset 0 0 0 1.5px var(--cr-line);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
    margin-bottom: 20px;
}
.cr-eyebrow i { width: 6px; height: 6px; border-radius: 999px; background: var(--cr-lilac); flex: none; }
.cr-h1 {
    font-family: var(--cr-head);
    font-weight: 400;
    font-size: clamp(32px, 7vw, 48px);
    line-height: 1.02;
    letter-spacing: -.5px;
    color: #fff;
    margin: 0;
}
.cr-h1 em { font-family: var(--cr-serif); font-style: italic; font-weight: 400; }
.cr-sub {
    margin: 16px auto 0;
    max-width: 560px;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -.32px;
    color: rgba(255, 255, 255, .7);
}

/* ---------- answer recap ---------- */
.cr-answers { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-bottom: 32px; }
.cr-answers-label { font-size: 12px; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; color: rgba(255, 255, 255, .5); margin-right: 4px; }
.cr-chip {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .04) 0%, rgba(255, 255, 255, 0) 100%);
    box-shadow: inset 0 0 0 1.5px var(--cr-line);
    font-size: 13px;
    letter-spacing: -.26px;
    color: rgba(255, 255, 255, .8);
    white-space: nowrap;
}

/* ---------- match grid ---------- */
.cr-grid { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: stretch; }
@media (min-width: 900px) { .cr-grid.cr-grid--3 { grid-template-columns: 1.16fr 1fr 1fr; } }
@media (min-width: 900px) { .cr-grid.cr-grid--2 { grid-template-columns: 1.16fr 1fr; } }

/* hover: rise 2 px, lilac ring, soft glow, 300 ms. press: 75 ms */
.cr-match {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    border-radius: 24px;
    background: var(--cr-glass);
    box-shadow: var(--cr-hair);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    transition: box-shadow 300ms var(--cr-ease), transform 300ms var(--cr-ease);
}
.cr-match:hover { transform: translateY(-2px); box-shadow: var(--cr-hair-live); }
.cr-match:active { transform: translateY(0); transition-duration: 75ms; }

.cr-label {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .3px;
    color: #fff;
    box-shadow: inset 0 0 0 1.5px var(--cr-line);
    background: rgba(255, 255, 255, .04);
}
.cr-label--best { background: var(--cr-ramp); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .24); }
.cr-label--alt { background: rgba(133, 133, 233, .12); box-shadow: inset 0 0 0 1.5px rgba(133, 133, 233, .5); }

/* card face: skeleton plate until the issuer art has loaded, an honest plate when there is none */
.cr-face { position: relative; border-radius: 12px; overflow: hidden; max-width: 220px; }
.cr-face img { display: block; width: 100%; height: auto; opacity: 0; transition: opacity 300ms var(--cr-ease); }
.cr-face.is-ready img { opacity: 1; }
.cr-face.is-loading::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    box-shadow: inset 0 0 0 1.5px var(--cr-line);
}
.cr-face.is-loading { aspect-ratio: 1.586; }
.cr-plate {
    position: relative;
    aspect-ratio: 1.586;
    max-width: 220px;
    border-radius: 12px;
    padding: 14px;
    display: flex;
    align-items: flex-end;
    background: var(--cr-glass);
    box-shadow: var(--cr-hair);
}
.cr-plate::before { content: ""; position: absolute; left: 14px; top: 14px; width: 28px; height: 3px; border-radius: 999px; background: var(--cr-ramp); }
.cr-plate span { font-family: var(--cr-head); font-size: 13px; line-height: 1.2; color: rgba(255, 255, 255, .7); }

.cr-title {
    font-family: var(--cr-head);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.15;
    letter-spacing: -.4px;
    color: #fff;
}
.cr-match--best .cr-title { font-size: 24px; letter-spacing: -.48px; }

.cr-rows { display: flex; flex-direction: column; margin: 0; }
.cr-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    font-size: 13px;
    box-shadow: inset 0 -1.5px 0 0 var(--cr-line);
}
.cr-row:last-child { box-shadow: none; }
.cr-row dt { color: rgba(255, 255, 255, .5); white-space: nowrap; }
.cr-row dd { margin: 0; color: #fff; text-align: right; font-family: var(--cr-head); font-variant-numeric: lining-nums tabular-nums; }

.cr-bonus {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .7);
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
}

.cr-odds { display: flex; flex-direction: column; gap: 8px; }
.cr-badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -.28px;
}
.cr-badge--strong { background: rgba(49, 166, 80, .12); color: var(--cr-success); }
.cr-badge--fair { background: rgba(124, 155, 255, .14); color: var(--cr-info); }
.cr-badge--long { background: rgba(248, 152, 40, .12); color: var(--cr-warning); }
.cr-badge--outside { background: rgba(255, 66, 66, .1); color: var(--cr-danger); }
.cr-badge--unknown { background: rgba(255, 255, 255, .04); color: rgba(255, 255, 255, .7); }
.cr-odds-note { font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, .5); }

.cr-reasons { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cr-reasons li { position: relative; padding-left: 18px; font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .7); }
.cr-reasons li::before { content: ""; position: absolute; left: 0; top: 8px; width: 10px; height: 1.5px; border-radius: 999px; background: var(--cr-lilac); }

/* ---------- buttons: the site's own .btn, motion brought to the standard ---------- */
.cr-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.cr .btn {
    transition: transform 300ms var(--cr-ease), opacity 300ms var(--cr-ease), gap 300ms var(--cr-ease), box-shadow 300ms var(--cr-ease), background 300ms var(--cr-ease);
}
.cr .btn:hover { transform: translateY(-2px); box-shadow: var(--cr-glow); }
.cr .btn:active { transform: translateY(0); transition-duration: 75ms; }
.cr .btn:focus-visible { outline: 2px solid var(--cr-lilac); outline-offset: 3px; }
.cr .btn[disabled] { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; transition: none; }
.cr .btn_blur:hover { opacity: 1; background: rgba(255, 255, 255, .09); }

/* ---------- loosened filter notice: an honest answer instead of a dead end ---------- */
.cr-relax {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 780px;
    margin: 0 auto 24px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(248, 152, 40, .1);
    box-shadow: inset 0 0 0 1.5px rgba(248, 152, 40, .4);
    font-size: 14px;
    line-height: 1.5;
    color: #fff;
}
.cr-relax i {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border-radius: 999px;
    background: rgba(248, 152, 40, .18);
    position: relative;
}
.cr-relax i::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 4px;
    width: 1.5px;
    height: 10px;
    border-radius: 999px;
    background: var(--cr-warning);
}
.cr-relax b { font-weight: 500; }
.cr-relax span { color: rgba(255, 255, 255, .7); }

/* ---------- empty state (section 7): mark, one line, one action ---------- */
.cr-empty {
    max-width: 640px;
    margin: 0 auto;
    padding: 32px;
    border-radius: 24px;
    text-align: center;
    background: var(--cr-glass);
    box-shadow: var(--cr-hair);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.cr-empty-mark {
    width: 48px;
    height: 48px;
    margin: 0 auto 20px;
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .04) 0%, rgba(255, 255, 255, 0) 100%);
    box-shadow: inset 0 0 0 1.5px rgba(133, 133, 233, .5), inset 0 4px 20px rgba(255, 255, 255, .08);
    position: relative;
}
.cr-empty-mark::after { content: ""; position: absolute; left: 16px; top: 23px; width: 16px; height: 1.5px; border-radius: 999px; background: var(--cr-lilac); }
.cr-empty-title { font-family: var(--cr-head); font-weight: 400; font-size: 24px; line-height: 1.15; letter-spacing: -.48px; color: #fff; margin-bottom: 12px; }
.cr-empty p { font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .7); margin: 0 auto 24px; max-width: 420px; }
.cr-empty-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* ---------- after the grid ---------- */
.cr-after {
    margin-top: 32px;
    padding: 24px;
    border-radius: 24px;
    background: var(--cr-glass);
    box-shadow: var(--cr-hair);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.cr-after-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cr-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cr-share label { font-size: 12px; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; color: rgba(255, 255, 255, .5); width: 100%; }
.cr-share input {
    flex: 1 1 280px;
    min-width: 0;
    height: 44px;
    padding: 0 16px;
    border-radius: 12px;
    border: 0;
    outline: none;
    background: var(--cr-glass);
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3);
    font-family: var(--cr-sans);
    font-size: 16px;
    color: #fff;
    text-overflow: ellipsis;
    transition: box-shadow 300ms var(--cr-ease);
}
.cr-share input:focus-visible { box-shadow: inset 0 0 0 1.5px var(--cr-lilac); }
.cr-disclaimer { margin-top: 24px; font-size: 12px; line-height: 1.6; color: rgba(255, 255, 255, .5); max-width: 780px; }

/* ---------- toast (section 6): bottom, 2.5 s, not modal ---------- */
.cr-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 18px 0 14px;
    border-radius: 999px;
    background: #090C21;
    box-shadow: inset 0 0 0 1.5px var(--cr-line), inset 0 4px 20px rgba(255, 255, 255, .08), 0 16px 40px -12px rgba(0, 0, 0, .7);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -.28px;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 12px);
    transition: opacity 300ms var(--cr-ease), transform 300ms var(--cr-ease);
}
.cr-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.cr-toast i { width: 18px; height: 18px; border-radius: 999px; background: rgba(49, 166, 80, .16); position: relative; flex: none; }
.cr-toast i::after { content: ""; position: absolute; left: 6px; top: 3px; width: 5px; height: 8px; box-shadow: inset -1.5px -1.5px 0 0 var(--cr-success); transform: rotate(45deg); }
.cr-toast.is-warn i { background: rgba(248, 152, 40, .16); }
.cr-toast.is-warn i::after { left: 8px; top: 4px; width: 1.5px; height: 10px; box-shadow: none; background: var(--cr-warning); transform: none; border-radius: 999px; }

/* ---------- reveal: 400 ms, 12 px, short stagger ---------- */
.cr-fx { opacity: 0; transform: translateY(12px); animation: cr-rise 400ms var(--cr-ease) forwards; }
.cr-fx--1 { animation-delay: 60ms; }
.cr-fx--2 { animation-delay: 120ms; }
.cr-fx--3 { animation-delay: 180ms; }
@keyframes cr-rise { to { opacity: 1; transform: none; } }

/* ---------- phone (section 8) ---------- */
@media (max-width: 899px) {
    .cr-match { padding: 20px; border-radius: 16px; }
    .cr-match--best .cr-title { font-size: 22px; }
    .cr-after { padding: 20px; border-radius: 16px; }
}
@media (max-width: 600px) {
    .cr-answers { justify-content: flex-start; }
    .cr-head { text-align: left; }
    .cr-sub, .cr-h1 { margin-left: 0; }
    .cr-actions { flex-direction: column; }
    .cr-actions .btn, .cr-empty-actions .btn, .cr-after-row .btn { width: 100%; }
    .cr-share button { width: 100%; }
    .cr-toast { left: 16px; right: 16px; transform: translate(0, 12px); justify-content: center; }
    .cr-toast.is-on { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cr-fx { opacity: 1; transform: none; animation: none; }
    .cr *, .cr *::before, .cr *::after, .cr-toast {
        animation-duration: .001ms !important;
        animation-delay: 0ms !important;
        transition-duration: .001ms !important;
    }
    .cr-match:hover, .cr .btn:hover, .cr .btn:active { transform: none; }
}

/* ---------- 2. Tokens for the search surfaces ---------- */
.mkx {
    --bx-bg: #080814;
    --bx-card: #090C21;
    --bx-blue: #264BFF;
    --bx-blue-alt: #375DFB;
    --bx-lilac: #8585E9;
    --bx-success: #31A650;
    --bx-warning: #F89828;
    --bx-error: #FF4242;
    --bx-line: rgba(255, 255, 255, .10);
    --bx-line-14: rgba(255, 255, 255, .14);
    --bx-text: #FFFFFF;
    --bx-text-2: rgba(255, 255, 255, .7);
    --bx-text-3: rgba(255, 255, 255, .5);
    --bx-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bx-font-numbers: 'Inter Tight', 'Inter', system-ui, sans-serif;
    --bx-font-accent: 'ZT Formom', 'Instrument Serif', Georgia, serif;
    --bx-inset: inset 0 4px 20px rgba(255, 255, 255, .08);
    --bx-hair: inset 0 0 0 1.5px var(--bx-line), var(--bx-inset);
    --bx-hair-live: inset 0 0 0 1.5px rgba(133, 133, 233, .5), var(--bx-inset), 0 20px 50px rgba(38, 75, 255, .24);
    --bx-glow: 0 12px 32px -12px rgba(38, 75, 255, .45);
    --bx-ramp: radial-gradient(50% 169.64% at 50% 50%, #8585E9 0%, #264BFF 100%);
    --bx-glass: radial-gradient(50% 50% at 50% 50%, rgba(33, 33, 33, .004) 0%, rgba(33, 33, 33, .04) 100%);
    --bx-ease: cubic-bezier(.2, .8, .2, 1);
    --bx-t-hover: 300ms;
    --bx-t-press: 75ms;
    --bx-t-screen: 400ms;
    --bx-r-card: 24px;
    --bx-r-panel: 16px;
    --bx-r-control: 12px;
    --bx-r-pill: 999px;
    font-family: var(--bx-font);
    color: var(--bx-text);
    letter-spacing: -.01em;
}
.mkx *, .mkx *::before, .mkx *::after { box-sizing: border-box; }
.mkx .btn {
    transition: transform var(--bx-t-hover) var(--bx-ease), opacity var(--bx-t-hover) var(--bx-ease), gap var(--bx-t-hover) var(--bx-ease), box-shadow var(--bx-t-hover) var(--bx-ease), background var(--bx-t-hover) var(--bx-ease);
}
.mkx .btn:hover { transform: translateY(-2px); box-shadow: var(--bx-glow); opacity: 1; gap: 8px; }
.mkx .btn:active { transform: translateY(0); transition-duration: var(--bx-t-press); }
.mkx .btn:focus-visible { outline: 2px solid var(--bx-lilac); outline-offset: 3px; }
.mkx .btn[disabled], .mkx .btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; transition: none; }
.mkx .btn_blur:hover { opacity: 1; background: rgba(255, 255, 255, .09); }

/* ---------- 3. Hero: the eyebrow, the title and the subtitle are the site's own classes ---------- */
.mkx-hero { position: relative; }
.mkx-hero .ftbk_title { max-width: 900px; margin-left: auto; margin-right: auto; }
.mkx-hero .subtitle_bk { max-width: 620px; margin-left: auto; margin-right: auto; }

/* the entrance (section 5, the screen change): each block once, 400 ms from 12 px below, the
   groups 50 ms apart and the six tiles 25 ms apart inside their group. CSS only, so nothing is
   hidden first and shown later; the animation fills backwards from its first frame. */
.mkx-hero .mkx-in {
    /* backwards, not both: once the entrance is over the element is its normal self again, so
       the tiles' hover rise (a transform of its own) is not pinned by the animation's last frame */
    animation: mkx-enter var(--bx-t-screen) var(--bx-ease) backwards;
    animation-delay: calc(var(--i, 0) * 50ms + var(--j, 0) * 25ms);
}
@keyframes mkx-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- 4. The search bar (the "ask") ----------
   A pill field with the site's gradient button beside it. Hairline at rest, a lilac-to-blue
   ring and a soft glow while typing, the site's own .btn for the action (below the field and
   full width on a phone: primary action where the thumb is). ------------------------------ */
.mkx-ask { display: flex; align-items: stretch; gap: 12px; width: 100%; max-width: 880px; margin: 32px auto 0; }
.mkx-ask__field {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 0 12px 0 22px;
    border-radius: var(--bx-r-pill);
    background: rgba(9, 12, 33, .72);
    box-shadow: var(--bx-hair);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: text;
    transition: box-shadow var(--bx-t-hover) var(--bx-ease), transform var(--bx-t-hover) var(--bx-ease);
}
.mkx-ask__field::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(90deg, #8585E9 0%, #264BFF 55%, #8585E9 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--bx-t-hover) var(--bx-ease);
}
.mkx-ask__field:hover { box-shadow: inset 0 0 0 1.5px rgba(133, 133, 233, .35), var(--bx-inset); }
.mkx-ask__field:focus-within { box-shadow: var(--bx-inset), 0 20px 50px rgba(38, 75, 255, .24); }
.mkx-ask__field:focus-within::before { opacity: 1; }
.mkx-ask__icon { flex: none; width: 24px; height: 24px; color: var(--bx-text-2); transition: color var(--bx-t-hover) var(--bx-ease); }
.mkx-ask__field:focus-within .mkx-ask__icon { color: var(--bx-lilac); }
.mkx-ask__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 64px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--bx-text);
    font-family: var(--bx-font);
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.36px;
    -webkit-appearance: none;
    appearance: none;
}
.mkx-ask__input::placeholder { color: rgba(255, 255, 255, .42); font-weight: 400; }
.mkx-ask__input::-webkit-search-decoration, .mkx-ask__input::-webkit-search-cancel-button,
.mkx-ask__input::-webkit-search-results-button, .mkx-ask__input::-webkit-search-results-decoration { -webkit-appearance: none; display: none; }
.mkx-ask__clear {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--bx-r-pill);
    background: transparent;
    background-clip: content-box;
    box-shadow: inset 6px 6px 0 6px transparent;
    color: var(--bx-text-2);
    cursor: pointer;
    transition: background var(--bx-t-hover) var(--bx-ease), color var(--bx-t-hover) var(--bx-ease), transform var(--bx-t-press) var(--bx-ease);
}
.mkx-ask__clear::before { content: ""; position: absolute; width: 32px; height: 32px; border-radius: inherit; background: rgba(255, 255, 255, .06); transition: background var(--bx-t-hover) var(--bx-ease); }
.mkx-ask__clear { position: relative; }
.mkx-ask__clear svg { position: relative; }
.mkx-ask__clear:hover { color: var(--bx-text); }
.mkx-ask__clear:hover::before { background: rgba(255, 255, 255, .12); }
.mkx-ask__clear:active { transform: scale(.94); }
.mkx-ask__clear:focus-visible { outline: 2px solid var(--bx-lilac); outline-offset: 2px; }
.mkx-ask__clear[hidden] { display: none; }
.mkx-ask__kbd {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 26px;
    padding: 0 8px;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1.5px var(--bx-line);
    color: var(--bx-text-3);
    font-family: var(--bx-font);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .02em;
    user-select: none;
}
.mkx-ask__go { flex: none; display: flex; }
.mkx-ask__go .btn { height: 64px; padding: 0 28px; border-radius: 12px; }
.mkx-ask__go .btn_gradient:after { border-radius: 12px; }
.mkx-ask__go .btn .btn_txt { white-space: nowrap; }
.mkx-ask__go .btn .btn_icon { display: inline-flex; }
.mkx-ask.is-busy .mkx-ask__go .btn { pointer-events: none; }
.mkx-ask.is-busy .mkx-ask__go .btn_txt { opacity: .7; }
/* a tapped chip drops its words into the field: 300 ms, from 6 px above */
.mkx-ask__input.is-dropped { animation: mkx-drop var(--bx-t-hover) var(--bx-ease); }
@keyframes mkx-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (hover: none), (max-width: 899px) { .mkx-ask__kbd { display: none; } }

/* ---------- 5. Chips: the popular searches and the reading ---------- */
.mkx-popular { margin-top: 20px; text-align: center; }
.mkx-popular__label, .mkx-reading__label {
    display: block;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--bx-text-3);
}
.mkx-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.mkx-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--bx-r-pill);
    background: linear-gradient(90deg, rgba(255, 255, 255, .04) 0%, rgba(255, 255, 255, 0) 100%);
    box-shadow: inset 0 0 0 1.5px var(--bx-line), var(--bx-inset);
    color: var(--bx-text-2);
    font-family: var(--bx-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.28px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--bx-t-hover) var(--bx-ease), box-shadow var(--bx-t-hover) var(--bx-ease), color var(--bx-t-hover) var(--bx-ease), background var(--bx-t-hover) var(--bx-ease);
}
.mkx-chip:hover { color: var(--bx-text); transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px rgba(133, 133, 233, .5), var(--bx-inset), 0 10px 24px -12px rgba(38, 75, 255, .6); }
.mkx-chip:active { transform: translateY(0); transition-duration: var(--bx-t-press); }
.mkx-chip:focus-visible { outline: 2px solid var(--bx-lilac); outline-offset: 2px; }
.mkx-chip.is-on { color: var(--bx-text); background: rgba(55, 93, 251, .14); box-shadow: inset 0 0 0 1.5px rgba(55, 93, 251, .9), var(--bx-inset); }
.mkx-chip[aria-disabled="true"] { opacity: .4; cursor: not-allowed; transform: none; transition: none; box-shadow: inset 0 0 0 1.5px var(--bx-line); }
.mkx-chip__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin: 0 -6px 0 0;
    border-radius: var(--bx-r-pill);
    color: var(--bx-text-3);
    transition: background var(--bx-t-hover) var(--bx-ease), color var(--bx-t-hover) var(--bx-ease);
}
.mkx-chip:hover .mkx-chip__x { color: var(--bx-text); background: rgba(255, 255, 255, .1); }
.mkx-chip__x svg { width: 12px; height: 12px; }

/* under the popular chips: the five-question finder, a real button (the site's secondary style) */
.mkx-alt { display: flex; justify-content: center; margin-top: 20px; }
.mkx-alt .btn { min-height: 44px; }

/* ---------- 6. Browse by goal: six tiles ----------
   While a search is on the tiles fold away (the visitor has said what they want) and come
   back on clear: 300 ms on the grid row, so the catalog below slides up rather than jumps. */
.mkx-goals { display: grid; grid-template-rows: 1fr; margin-top: 40px; transition: grid-template-rows var(--bx-t-hover) var(--bx-ease), margin-top var(--bx-t-hover) var(--bx-ease), opacity var(--bx-t-hover) var(--bx-ease), visibility 0s 0s; }
.mkx-goals__inner { min-height: 0; }
/* clipped only while folded or moving, so the tiles' glow is free at rest */
.mkx-goals.is-folded .mkx-goals__inner, .mkx-goals.is-moving .mkx-goals__inner { overflow: hidden; }
.mkx-goals.is-folded { grid-template-rows: 0fr; margin-top: 0; opacity: 0; visibility: hidden; transition-delay: 0s, 0s, 0s, var(--bx-t-hover); }
.mkx-goals__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.mkx-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 132px;
    padding: 18px 16px;
    border-radius: var(--bx-r-panel);
    background: var(--bx-glass);
    box-shadow: var(--bx-hair);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    color: var(--bx-text);
    text-decoration: none;
    transition: transform var(--bx-t-hover) var(--bx-ease), box-shadow var(--bx-t-hover) var(--bx-ease);
}
.mkx-tile:hover { transform: translateY(-2px); box-shadow: var(--bx-hair-live); }
.mkx-tile:active { transform: translateY(0); transition-duration: var(--bx-t-press); }
.mkx-tile:focus-visible { outline: 2px solid var(--bx-lilac); outline-offset: 3px; }
.mkx-tile__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .04) 0%, rgba(255, 255, 255, 0) 100%);
    box-shadow: inset 0 0 0 1.5px rgba(133, 133, 233, .5), var(--bx-inset);
    color: var(--bx-lilac);
}
.mkx-tile__icon svg { width: 24px; height: 24px; }
.mkx-tile__icon { transition: box-shadow var(--bx-t-hover) var(--bx-ease), background var(--bx-t-hover) var(--bx-ease); }
.mkx-tile:hover .mkx-tile__icon { background: rgba(133, 133, 233, .12); box-shadow: inset 0 0 0 1.5px rgba(133, 133, 233, .9), var(--bx-inset); }
.mkx-tile__title { font-family: var(--bx-font-numbers); font-size: 17px; line-height: 1.15; letter-spacing: -.34px; }
.mkx-tile__desc { font-size: 12px; line-height: 1.45; color: var(--bx-text-3); }
.mkx-tile__arrow { position: absolute; right: 14px; top: 16px; width: 18px; height: 18px; color: var(--bx-text-3); opacity: 0; transform: translate(-4px, 4px); transition: opacity var(--bx-t-hover) var(--bx-ease), transform var(--bx-t-hover) var(--bx-ease), color var(--bx-t-hover) var(--bx-ease); }
.mkx-tile:hover .mkx-tile__arrow { opacity: 1; transform: none; color: var(--bx-lilac); }

/* ---------- 7. The catalog as the answer ----------
   With a search on, the catalog head reads the words back where the quick filters were: one
   chip per thing the words said, drawn like a checked quick filter (44 px, radius 8, the site's
   gradient ring), each with an x that runs the search without it. ---------------------------- */
.cc_catalog_head.is-search .cc_catalog_head_bottom { align-items: flex-start; }
.cc_catalog_head.is-search .cc_catalog_qfilters_title { width: auto; flex: none; padding: 13px 12px 0 0; white-space: nowrap; }
.cc_catalog_title [data-mkx-count] { font-variant-numeric: tabular-nums; }
.mkx-read { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: 12px; width: auto; min-width: 0; }
.mkx-read__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-width: 0; }
.mkx-read__links { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; }
.mkx-read__chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 10px 0 14px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
    background: rgba(255, 255, 255, .1);
    color: var(--bx-text);
    font-family: var(--bx-font-numbers);
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--bx-t-hover) var(--bx-ease), background var(--bx-t-hover) var(--bx-ease), box-shadow var(--bx-t-hover) var(--bx-ease), color var(--bx-t-hover) var(--bx-ease);
}
.mkx-read__chip::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 8px;
    padding: 1px;
    background: linear-gradient(-90deg, #8585E9, #264BFF);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    transition: opacity var(--bx-t-hover) var(--bx-ease);
}
.mkx-read__chip > * { position: relative; z-index: 1; }
.mkx-read__chip:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .14); box-shadow: var(--bx-glow); }
.mkx-read__chip:active { transform: translateY(0); transition-duration: var(--bx-t-press); }
.mkx-read__chip:focus-visible { outline: 2px solid var(--bx-lilac); outline-offset: 2px; }
.mkx-read__chip.is-still { cursor: default; padding-right: 14px; }
.mkx-read__chip.is-still:hover { transform: none; box-shadow: none; background: rgba(255, 255, 255, .1); }
.mkx-read__chip.is-quiet { background: rgba(255, 255, 255, .04); color: var(--bx-text-2); font-family: var(--bx-font); font-size: 14px; }
.mkx-read__chip.is-quiet::after { opacity: 0; }
.mkx-read__chip.is-quiet:hover { background: rgba(255, 255, 255, .04); }
.mkx-read__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    color: var(--bx-text-3);
    transition: background var(--bx-t-hover) var(--bx-ease), color var(--bx-t-hover) var(--bx-ease);
}
.mkx-read__x svg { width: 12px; height: 12px; }
.mkx-read__chip:hover .mkx-read__x { color: var(--bx-text); background: rgba(255, 255, 255, .12); }
.mkx-read__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-family: var(--bx-font); font-size: 14px; color: var(--bx-lilac); text-decoration: underline; text-decoration-color: rgba(133, 133, 233, .35); text-underline-offset: 3px; white-space: nowrap; transition: text-decoration-color var(--bx-t-hover) var(--bx-ease), color var(--bx-t-hover) var(--bx-ease); }
.mkx-read__link:hover { text-decoration-color: var(--bx-lilac); }
.mkx-read__link--quiet { margin-left: auto; color: var(--bx-text-3); text-decoration-color: rgba(255, 255, 255, .2); }
.mkx-read__link--quiet:hover { color: var(--bx-text-2); text-decoration-color: rgba(255, 255, 255, .5); }

/* the three best matches: the same row, a badge and the reasons on it */
.mkx-row--best.bg_gradient_border::before { background: linear-gradient(to bottom, rgba(133, 133, 233, .9), rgba(38, 75, 255, .35)); }
.mkx-row__marks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.mkx-mark {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 14px;
    border-radius: var(--bx-r-pill);
    background: rgba(255, 255, 255, .04);
    box-shadow: inset 0 0 0 1.5px var(--bx-line);
    color: var(--bx-text);
    font-family: var(--bx-font);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .3px;
    white-space: nowrap;
}
.mkx-mark--best { background: var(--bx-ramp); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .24); }
.mkx-mark--alt { background: rgba(133, 133, 233, .12); box-shadow: inset 0 0 0 1.5px rgba(133, 133, 233, .5); }
.mkx-odds { display: inline-flex; align-items: center; height: 28px; padding: 0 14px; border-radius: var(--bx-r-pill); font-family: var(--bx-font); font-size: 13px; font-weight: 500; letter-spacing: -.26px; white-space: nowrap; cursor: help; }
.mkx-odds--strong { background: rgba(49, 166, 80, .12); color: var(--bx-success); }
.mkx-odds--fair { background: rgba(124, 155, 255, .14); color: #7C9BFF; }
.mkx-odds--long { background: rgba(248, 152, 40, .12); color: var(--bx-warning); }
.mkx-odds--outside { background: rgba(255, 66, 66, .1); color: var(--bx-error); }
.mkx-odds--unknown { background: rgba(255, 255, 255, .04); color: var(--bx-text-2); }
.mkx-row__why { margin-top: 20px; }
.mkx-row__why-label { font-family: var(--bx-font); font-size: 12px; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; color: var(--bx-text-3); }
.mkx-row__reasons { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.mkx-row__reasons li { position: relative; padding-left: 18px; font-family: var(--bx-font); font-size: 14px; line-height: 1.45; letter-spacing: -.01em; color: var(--bx-text-2); }
.mkx-row__reasons li::before { content: ""; position: absolute; left: 0; top: 9px; width: 10px; height: 2px; border-radius: 999px; background: var(--bx-lilac); }

/* ---------- 8. Motion on the swap ---------- */
.mkx-hero ~ .cc_catalog { margin-top: 88px; }
.mkx-compare { display: inline-flex; align-items: center; gap: 8px; flex: 1 0 100%; min-height: 44px; cursor: pointer; }
.mkx-compare input { flex: none; }

/* the screen change (section 5): 400 ms from 12 px below; the first rows of a new list follow one another */
/* (literal values: the rows carry .mkx-fx outside any .mkx scope) */
.mkx-fx { opacity: 0; transform: translateY(12px); animation: mkx-rise 400ms cubic-bezier(.2, .8, .2, 1) forwards; }
.cc_catalog_item.mkx-fx { animation-delay: calc(var(--k, 0) * 40ms); }
@keyframes mkx-rise { to { opacity: 1; transform: none; } }

/* loading (section 7): a skeleton in the shape of the rows, never a spinner */
.mkx-skel { display: flex; flex-direction: column; gap: 56px; }
.mkx-skel__row { display: flex; gap: 24px; padding: 24px; border-radius: var(--bx-r-panel); background: var(--bx-glass); box-shadow: var(--bx-hair); }
.mkx-skel__side { flex: none; width: 292px; display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: var(--bx-r-panel); box-shadow: var(--bx-hair); }
.mkx-skel__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.mkx-skel__bar { height: 14px; border-radius: 999px; background: linear-gradient(90deg, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .11) 37%, rgba(255, 255, 255, .05) 63%); background-size: 400% 100%; animation: mkx-shimmer 1.4s ease infinite; }
.mkx-skel__bar--face { width: 100%; aspect-ratio: 1.586; height: auto; border-radius: 12px; }
.mkx-skel__bar--btn { width: 100%; height: 44px; border-radius: 8px; }
.mkx-skel__bar--title { width: 60%; height: 22px; }
.mkx-skel__bar--cols { width: 100%; height: 88px; border-radius: 12px; }
.mkx-skel__bar--short { width: 40%; }
.mkx-skel__bar--long { width: 90%; }
@keyframes mkx-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* notes that keep the answer honest: a loosened filter, an issuer the catalog lacks */
.mkx-note { display: flex; align-items: flex-start; gap: 12px; max-width: 780px; margin: 0 auto 24px; padding: 14px 16px; border-radius: var(--bx-r-panel); background: rgba(248, 152, 40, .1); box-shadow: inset 0 0 0 1.5px rgba(248, 152, 40, .4); font-size: 14px; line-height: 1.5; color: var(--bx-text); text-align: left; }
.mkx-note i { flex: none; position: relative; width: 18px; height: 18px; margin-top: 2px; border-radius: 999px; background: rgba(248, 152, 40, .18); }
.mkx-note i::after { content: ""; position: absolute; left: 8px; top: 4px; width: 1.5px; height: 10px; border-radius: 999px; background: var(--bx-warning); }
.mkx-note b { font-weight: 500; }
.mkx-note span { color: var(--bx-text-2); }

/* empty and error (section 7): a mark, one line, one action. Inside the catalog the state card
   takes the rows' place; the note above the rows keeps its own distance. */
.mkx-note { margin: 0 0 32px; max-width: none; }
.mkx-state { max-width: 640px; margin: 0 auto; padding: 32px; border-radius: var(--bx-r-card); text-align: center; background: var(--bx-glass); box-shadow: var(--bx-hair); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.mkx-state__mark { position: relative; width: 48px; height: 48px; margin: 0 auto 20px; border-radius: 12px; background: linear-gradient(90deg, rgba(255, 255, 255, .04) 0%, rgba(255, 255, 255, 0) 100%); box-shadow: inset 0 0 0 1.5px rgba(133, 133, 233, .5), var(--bx-inset); color: var(--bx-lilac); display: flex; align-items: center; justify-content: center; }
.mkx-state__mark svg { width: 24px; height: 24px; }
.mkx-state--error .mkx-state__mark { box-shadow: inset 0 0 0 1.5px rgba(255, 66, 66, .5), var(--bx-inset); color: var(--bx-error); }
.mkx-state__title { font-family: var(--bx-font-numbers); font-weight: 400; font-size: 24px; line-height: 1.15; letter-spacing: -.48px; color: var(--bx-text); margin-bottom: 12px; }
.mkx-state p { font-size: 15px; line-height: 1.55; color: var(--bx-text-2); margin: 0 auto 20px; max-width: 440px; }
.mkx-state .mkx-chips { margin-bottom: 20px; }
.mkx-state__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* the toast (section 6): bottom, 2.5 s, never modal */
.mkx-toast { position: fixed; left: 50%; bottom: 24px; z-index: 50; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px 0 14px; border-radius: var(--bx-r-pill); background: var(--bx-card); box-shadow: inset 0 0 0 1.5px var(--bx-line), var(--bx-inset), 0 16px 40px -12px rgba(0, 0, 0, .7); font-family: var(--bx-font); font-size: 14px; font-weight: 500; letter-spacing: -.28px; color: var(--bx-text); opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity var(--bx-t-hover) var(--bx-ease), transform var(--bx-t-hover) var(--bx-ease); }
.mkx-toast.is-on { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.mkx-toast i { position: relative; flex: none; width: 18px; height: 18px; border-radius: 999px; background: rgba(49, 166, 80, .16); }
.mkx-toast i::after { content: ""; position: absolute; left: 6px; top: 3px; width: 5px; height: 8px; box-shadow: inset -1.5px -1.5px 0 0 var(--bx-success); transform: rotate(45deg); }
.mkx-toast.is-warn i { background: rgba(248, 152, 40, .16); }
.mkx-toast.is-warn i::after { left: 8px; top: 4px; width: 1.5px; height: 10px; box-shadow: none; background: var(--bx-warning); transform: none; border-radius: 999px; }
.mkx-toast a { color: var(--bx-lilac); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 9. Loans: the same bar above Finder v2 ---------- */
.mkx--loans { margin: 8px 0 24px; }
.mkx--loans .mkx-ask { margin-top: 20px; }
.mkx--loans .mkx-reading { margin-top: 20px; text-align: center; }
.mkx--loans .mkx-reading .mkx-chips { align-items: center; }
.mkx--loans .mkx-reading[hidden] { display: none; }
.mkx-reading__adjust { display: inline-flex; align-items: center; min-height: 40px; padding: 0 6px; font-size: 14px; color: var(--bx-lilac); text-decoration: underline; text-decoration-color: rgba(133, 133, 233, .35); text-underline-offset: 3px; }
.mkx-reading__adjust:hover { text-decoration-color: var(--bx-lilac); }

/* ---------- 10. Phone (section 8): 44 px targets, one column, the action under the thumb ---------- */
@media (max-width: 1180px) { .mkx-goals__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px) {
    .mkx-reading__adjust { display: inline-flex; align-items: center; min-height: 44px; }
    .mkx-alt .btn { width: 100%; }
    .mkx-ask { flex-direction: column; gap: 10px; margin-top: 24px; }
    .mkx-ask__field { min-height: 56px; padding-left: 18px; }
    .mkx-ask__input { height: 56px; font-size: 16px; }
    .mkx-ask__go .btn { width: 100%; height: 52px; }
    .mkx-chip { min-height: 44px; }
    .mkx-tile { min-height: 0; }
    .mkx-state__actions .btn { width: 100%; }
    .mkx-skel__row { flex-direction: column; }
    .mkx-skel__side { width: 100%; }
    /* the reading takes the quick filters' place: its own row, scrolling sideways inside its block */
    .cc_catalog_head.is-search .cc_catalog_qfilters_title { width: 100%; padding: 0; }
    .mkx-read { width: 100%; margin-top: 12px; gap: 8px 12px; }
    .mkx-read__chips { flex: none; flex-wrap: nowrap; width: calc(100% + 32px); margin: 0 -16px; padding: 0 16px 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scroll-padding-left: 16px; scrollbar-width: none; }
    .mkx-read__chips::-webkit-scrollbar { display: none; }
    .mkx-read__chips > * { flex: none; scroll-snap-align: start; }
    .mkx-read__links { flex: none; width: 100%; }
    .mkx-read__link--quiet { margin-left: 0; }
    .mkx-row__marks { margin-bottom: 12px; }
}
@media (max-width: 600px) {
    /* the popular searches: one row that scrolls sideways inside its own block (section 8), snapping chip by chip */
    .mkx-popular .mkx-chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scroll-padding-left: 16px; scrollbar-width: none; margin: 0 -16px; padding: 4px 16px 8px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
    .mkx-popular .mkx-chips::-webkit-scrollbar { display: none; }
    .mkx-popular .mkx-chip { flex: none; scroll-snap-align: start; }
    .mkx-goals__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .mkx-tile { padding: 14px; gap: 10px; }
    .mkx-tile__title { font-size: 15px; }
    .mkx-state { padding: 24px 20px; border-radius: var(--bx-r-panel); }
    .mkx-toast { left: 16px; right: 16px; transform: translate(0, 12px); justify-content: center; }
    .mkx-toast.is-on { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mkx-fx, .mkx-hero .mkx-in { opacity: 1; transform: none; animation: none; }
    .mkx *, .mkx *::before, .mkx *::after, .mkx-toast, .mkx-goals, .mkx-read__chip, .cc_catalog_item.mkx-fx { animation-duration: .001ms !important; animation-delay: 0ms !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
    .mkx-chip:hover, .mkx-tile:hover, .mkx-read__chip:hover, .mkx .btn:hover, .mkx .btn:active { transform: none; }
}

/* ----------------------------------------------------------------------------
   The filter rail follows the page (Art, 18 Sep 2026: "the side bar also has to go up and down
   with scrolling"). Above 1024px the rail is a column beside the list; it now sticks under the
   fixed header and, when it is taller than the window, scrolls inside itself with no visible bar.
   Under 1024px it is the slide-in panel it already was (style.css), untouched. */
@media (min-width: 1025px) {
    .cc_catalog.d_flex { align-items: flex-start; }
    .cc_catalog_right { position: sticky; top: 104px; max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; }
    .cc_catalog_right::-webkit-scrollbar { display: none; }
}