/* FUTURE exchange - the public page at /exchange and its request status
   page. Sits on top of future-atmos.css (the night sky, the torus, the steel
   sweep) and future-pages.css (tokens, .mn-btn, .mn-input, .mn-check,
   .mn-name), the same pair the sign-in page uses, so the exchange reads as
   the platform's own front door. */

:root {
    --ex-font-num: 'Space Grotesk', var(--mn-font-body);
    --ex-panel: rgba(4, 6, 14, 0.55);
    --ex-radius: 1.25rem;

    /* Each kind of currency has its own light on the coin's rim: crypto the
       cyan end of the iris, cash the steel, cards the violet end. */
    --ex-tint-crypto: var(--mn-iris-1);
    --ex-tint-cash: var(--mn-chrome);
    --ex-tint-card: var(--mn-iris-3);

    --ex-ok: 52, 211, 153;
    --ex-warn: 251, 191, 36;
    --ex-bad: 248, 113, 113;
}

html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }

.ex-body { display: flex; flex-direction: column; min-height: 100vh; }
.ex-body > main { flex: 1; }

.ex-shell {
    width: 100%;
    max-width: 76rem;
    margin-inline: auto;
    padding-inline: 1rem;
}

@media (min-width: 640px) {
    .ex-shell { padding-inline: 1.5rem; }
}

/* Zero specificity, so link-styled buttons (.mn-btn) keep their own ink. */
:where(.ex-body a) { color: inherit; }

/* ---------- Header ---------- */

.ex-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: linear-gradient(180deg, rgba(4, 6, 12, 0.82), rgba(4, 6, 12, 0.55));
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    border-bottom: 1px solid var(--mn-hairline);
}

/* The iris hairline under the header, fading out at both ends. */
.ex-header::after {
    content: '';
    position: absolute;
    inset: auto 10% -1px;
    height: 1px;
    background: var(--mn-iris);
    opacity: 0.45;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}

.ex-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 4.25rem;
}

.ex-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
    min-width: 0;
}

.ex-lockup .mn-mark img {
    height: 2.1rem;
    width: auto;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 16px rgba(var(--mn-chrome-mid), 0.22));
}

.ex-lockup .mn-name { font-size: 0.95rem; }

.ex-lockup-tag {
    margin-inline-start: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(var(--mn-primary), 0.3);
    background: rgba(var(--mn-primary), 0.08);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgb(var(--mn-primary-2));
}

.ex-nav {
    display: none;
    gap: 2rem;
    font-size: 0.9rem;
}

.ex-nav a {
    color: rgb(var(--mn-ink-muted));
    text-decoration: none;
    transition: color 160ms ease;
}

.ex-nav a:hover { color: rgb(var(--mn-ink)); }

@media (min-width: 980px) {
    .ex-nav { display: flex; }
}

.ex-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    color: rgb(var(--mn-ink));
    background: rgba(var(--mn-primary-2), 0.05);
    box-shadow: inset 0 0 0 1px rgba(var(--mn-primary-2), 0.2);
    transition: background 160ms ease, box-shadow 160ms ease;
}

.ex-chip:hover {
    background: rgba(var(--mn-primary-2), 0.1);
    box-shadow: inset 0 0 0 1px rgba(var(--mn-accent-bright), 0.5), 0 0 24px -8px rgba(var(--mn-primary), 0.6);
}

.ex-chip svg { width: 1rem; height: 1rem; color: rgb(var(--mn-primary)); }

@media (max-width: 480px) {
    .ex-lockup-tag { display: none; }
    .ex-chip span { display: none; }
    .ex-chip { padding: 0.6rem; }
    .ex-chip:not(:has(svg)) span { display: inline; }
    .ex-chip:not(:has(svg)) { padding: 0.55rem 0.9rem; }
}

/* ---------- Hero ---------- */

/* Phones: headline, then the calculator, then the prices and perks.
   Wide screens: headline and prices on the left, the calculator beside them. */
.ex-hero {
    display: grid;
    grid-template-areas: 'copy' 'card' 'extra';
    gap: 2rem;
    padding-block: 2.5rem 3.5rem;
}

.ex-hero-copy { grid-area: copy; }
.ex-hero > .ex-card { grid-area: card; }
.ex-hero-extra { grid-area: extra; }

.ex-hero .ex-spot { margin-top: 0; }

@media (min-width: 1024px) {
    .ex-hero {
        grid-template-areas: 'copy card' 'extra card';
        grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
        grid-template-rows: auto 1fr;
        gap: 0 4.5rem;
        align-items: start;
        padding-block: 4.5rem 5rem;
    }

    .ex-hero-copy { padding-top: 2.5rem; }
    .ex-hero .ex-spot { margin-top: 2rem; }
}

.ex-hero-copy,
.ex-hero-extra { animation: mn-rise 700ms cubic-bezier(0.22, 1, 0.36, 1); }

.ex-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--mn-hairline);
    background: rgba(var(--mn-primary), 0.06);
    font-size: 0.8rem;
    color: rgb(var(--mn-ink-muted));
}

.ex-eyebrow i {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: rgb(var(--mn-iris-1));
    box-shadow: 0 0 0 0 rgba(var(--mn-iris-1), 0.6);
    animation: ex-live 2.4s ease-out infinite;
}

@keyframes ex-live {
    0% { box-shadow: 0 0 0 0 rgba(var(--mn-iris-1), 0.55); }
    70%, 100% { box-shadow: 0 0 0 0.55rem rgba(var(--mn-iris-1), 0); }
}

.ex-title {
    margin: 1.4rem 0 1.25rem;
    font-family: var(--mn-font-display);
    font-weight: 400;
    font-size: clamp(2rem, 4.6vw, 3.6rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

/* The one word in steel. */
.ex-title em {
    font-style: normal;
    background: linear-gradient(100deg, rgb(var(--mn-chrome-hi)) 8%, rgb(var(--mn-chrome)) 34%, rgb(var(--mn-chrome-mid)) 62%, rgb(var(--mn-iris-1)) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ex-lead {
    margin: 0;
    max-width: 34rem;
    font-size: 1.05rem;
    line-height: 1.65;
    color: rgb(var(--mn-ink-muted));
}

.ex-spot {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    max-width: 30rem;
    margin-top: 2rem;
}

.ex-spot-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem 1.1rem;
    border-radius: 1.1rem;
    border: 1px solid var(--mn-hairline);
    background: var(--ex-panel);
    overflow: hidden;
}

.ex-spot-tile::before {
    content: '';
    position: absolute;
    inset: 0 20% auto;
    height: 1px;
    background: var(--mn-iris);
    opacity: 0.5;
}

.ex-spot-tile span { font-size: 0.78rem; color: rgb(var(--mn-ink-muted)); }

.ex-spot-tile strong {
    font-family: var(--ex-font-num);
    font-weight: 600;
    font-size: clamp(1.3rem, 2.2vw, 1.6rem);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.ex-perks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.5rem;
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.9rem;
    color: rgb(var(--mn-ink-muted));
}

.ex-perks li { display: inline-flex; align-items: center; gap: 0.5rem; }

.ex-perks li::before {
    content: '';
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
    border-radius: 50%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23c8dcff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='m6 10.5 2.6 2.5L14 7.5'/%3E%3C/svg%3E") center / 0.8rem no-repeat,
        rgba(var(--mn-primary), 0.16);
    box-shadow: inset 0 0 0 1px rgba(var(--mn-primary), 0.35);
}

/* ---------- The exchange card ---------- */

.ex-card {
    position: relative;
    padding: 1.25rem;
    border-radius: 1.75rem;
    isolation: isolate;
    border: 1px solid var(--mn-hairline);
    background: linear-gradient(170deg, rgba(20, 26, 46, 0.82), rgba(var(--mn-surface), 0.92) 55%, rgba(4, 6, 12, 0.95));
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow:
        inset 0 1px 0 rgba(var(--mn-primary-2), 0.16),
        0 30px 70px -26px rgba(0, 0, 0, 0.85),
        0 0 70px -30px rgba(var(--mn-primary), 0.35);
    animation: mn-rise 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 480px) {
    .ex-card { padding: 1.5rem; }
}

.ex-card::before {
    content: '';
    position: absolute;
    inset: -1px 12% auto;
    height: 1px;
    background: var(--mn-iris);
    opacity: 0.8;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
}

.ex-steps {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.1rem;
}

.ex-steps span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.75rem 0.3rem 0.3rem;
    border-radius: 999px;
    font-size: 0.78rem;
    color: rgb(var(--mn-ink-muted));
    border: 1px solid var(--mn-hairline);
    transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
}

.ex-steps b {
    display: grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    font-family: var(--ex-font-num);
    font-size: 0.72rem;
    background: rgba(var(--mn-primary-2), 0.08);
}

.ex-steps .is-active {
    color: rgb(var(--mn-primary-2));
    border-color: rgba(var(--mn-primary), 0.45);
    background: rgba(var(--mn-primary), 0.1);
}

.ex-steps .is-active b {
    color: rgb(var(--mn-ink-on-primary));
    background: linear-gradient(180deg, rgb(var(--mn-chrome-hi)), rgb(var(--mn-chrome-mid)));
}

.ex-steps .is-done b { color: rgb(var(--mn-primary)); }

.ex-recent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.7rem 0.9rem;
    border-radius: 0.95rem;
    border: 1px solid var(--mn-hairline);
    background: var(--ex-panel);
    font-size: 0.875rem;
    text-decoration: none;
    transition: border-color 160ms ease;
}

.ex-recent:hover { border-color: rgba(var(--mn-primary), 0.45); }

.ex-sides { display: flex; flex-direction: column; }

.ex-side {
    position: relative;
    padding: 0.85rem 0.85rem 0.6rem;
    border-radius: var(--ex-radius);
    border: 1px solid var(--mn-hairline);
    background: var(--ex-panel);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.ex-side:focus-within {
    border-color: rgba(var(--mn-primary), 0.55);
    box-shadow: 0 0 0 4px rgba(var(--mn-primary), 0.08), 0 0 30px -14px rgba(var(--mn-primary-2), 0.5);
}

/* The open list of one side must float over the other side. */
.ex-side:has([aria-expanded="true"]) { z-index: 5; }

.ex-side-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0.2rem 0.6rem;
}

.ex-side-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgb(var(--mn-ink-muted));
}

.ex-side-hint {
    font-size: 0.75rem;
    color: rgba(var(--mn-ink-muted), 0.85);
    font-variant-numeric: tabular-nums;
    text-align: end;
}

.ex-amount {
    display: block;
    width: 100%;
    margin-top: 0.35rem;
    padding: 0.35rem 0.2rem 0.2rem;
    border: 0;
    background: transparent;
    color: #fff;
    font-family: var(--ex-font-num);
    font-weight: 600;
    font-size: 1.75rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.ex-amount:focus { outline: none; }
.ex-amount::placeholder { color: rgba(var(--mn-ink-muted), 0.5); }

.ex-swap {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: -0.7rem auto;
    border-radius: 50%;
    border: 1px solid rgba(var(--mn-primary), 0.35);
    background: radial-gradient(circle at 50% 30%, rgb(24, 32, 60), rgb(8, 11, 24));
    color: rgb(var(--mn-primary-2));
    cursor: pointer;
    box-shadow: 0 0 0 5px rgb(10, 13, 26), 0 0 26px -8px rgba(var(--mn-primary), 0.7);
    transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1), border-color 160ms ease;
}

.ex-swap svg { width: 1.25rem; height: 1.25rem; }
.ex-swap:hover { border-color: rgba(var(--mn-accent-bright), 0.8); }
.ex-swap.is-turned { transform: rotate(180deg); }
.ex-swap:focus-visible { outline: 2px solid rgb(var(--mn-primary-2)); outline-offset: 3px; }

/* ---------- Coins, tags and the currency picker ---------- */

.ex-coin {
    --coin-tint: var(--ex-tint-crypto);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 50%;
    font-family: var(--ex-font-num);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    color: rgb(var(--mn-chrome-hi));
    background:
        radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.2), transparent 58%),
        linear-gradient(160deg, rgb(22, 30, 56), rgb(6, 9, 20));
    box-shadow: inset 0 0 0 1px rgba(var(--coin-tint), 0.55), 0 0 18px -6px rgba(var(--coin-tint), 0.75);
}

/* The coin inherits its tint from the nearest element that sets it. */
[style*="--coin-tint"] .ex-coin,
.ex-side .ex-coin { --coin-tint: inherit; }

.ex-tag {
    display: inline-block;
    padding: 0.14rem 0.45rem;
    border-radius: 999px;
    font-family: var(--ex-font-num);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: rgb(var(--coin-tint, var(--mn-iris-1)));
    border: 1px solid rgba(var(--coin-tint, var(--mn-iris-1)), 0.45);
    vertical-align: middle;
}

.ex-tag[hidden] { display: none; }

.ex-picker { position: relative; }

.ex-picker-btn {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.45rem 0.75rem 0.45rem 0.45rem;
    border-radius: 0.95rem;
    border: 1px solid var(--mn-hairline);
    background: rgba(var(--mn-primary-2), 0.04);
    color: rgb(var(--mn-ink));
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease;
}

.ex-picker-btn:hover,
.ex-picker-btn[aria-expanded="true"] {
    background: rgba(var(--mn-primary-2), 0.08);
    border-color: rgba(var(--mn-primary), 0.4);
}

.ex-picker-btn:focus-visible { outline: 2px solid rgb(var(--mn-primary-2)); outline-offset: 2px; }

.ex-picker-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    font-size: 0.95rem;
}

.ex-chevron {
    width: 1.15rem;
    height: 1.15rem;
    margin-inline-start: auto;
    flex-shrink: 0;
    color: rgb(var(--mn-ink-muted));
    transition: transform 200ms ease;
}

.ex-picker-btn[aria-expanded="true"] .ex-chevron { transform: rotate(180deg); }

.ex-picker-list {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: min(22rem, 60vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.35rem;
    border-radius: 1rem;
    border: 1px solid rgba(var(--mn-primary), 0.28);
    background: rgba(9, 12, 26, 0.98);
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.9), 0 0 40px -20px rgba(var(--mn-primary), 0.5);
    animation: ex-drop 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes ex-drop {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.ex-picker-group {
    padding: 0.65rem 0.6rem 0.35rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(var(--mn-ink-muted), 0.8);
}

.ex-option {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.45rem 0.55rem;
    border: 0;
    border-radius: 0.7rem;
    background: transparent;
    color: rgb(var(--mn-ink));
    font: inherit;
    font-size: 0.9rem;
    text-align: start;
    cursor: pointer;
}

.ex-option .ex-coin { width: 1.85rem; height: 1.85rem; font-size: 0.9rem; }

.ex-option:hover,
.ex-option:focus-visible {
    outline: none;
    background: rgba(var(--mn-primary), 0.12);
}

.ex-option[aria-selected="true"] { background: rgba(var(--mn-primary), 0.08); }

.ex-option[aria-selected="true"]::after {
    content: '';
    width: 1rem;
    height: 1rem;
    margin-inline-start: auto;
    flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%238cb8ff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='m5 10.5 3.2 3L15 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ex-option-name { min-width: 0; }

/* ---------- Rate, reserve, messages ---------- */

.ex-meta {
    display: grid;
    gap: 0.45rem;
    margin: 1.1rem 0.3rem 1.2rem;
}

.ex-meta div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.875rem;
}

.ex-meta dt { color: rgb(var(--mn-ink-muted)); }

.ex-meta dd {
    margin: 0;
    font-family: var(--ex-font-num);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    text-align: end;
}

.ex-cta { min-height: 3.25rem; font-size: 1rem; }

.ex-field-error {
    margin: 0.45rem 0.25rem 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: rgb(252, 165, 165);
}

.ex-field-error[hidden] { display: none; }

.ex-sides + .ex-field-error { margin-top: 0.7rem; }

.ex-note {
    margin: 0;
    padding: 0.9rem 1rem;
    border-radius: 0.9rem;
    font-size: 0.9rem;
    color: rgb(var(--ex-warn));
    background: rgba(var(--ex-warn), 0.08);
    border: 1px solid rgba(var(--ex-warn), 0.25);
}

/* ---------- Step 2 ---------- */

.ex-step[hidden],
.mn-field[hidden] { display: none; }

.ex-step[data-step="2"] { animation: mn-rise 420ms cubic-bezier(0.22, 1, 0.36, 1); }

.ex-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    margin-bottom: 1.25rem;
    padding: 0.85rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(var(--mn-primary), 0.3);
    background: rgba(var(--mn-primary), 0.07);
    color: rgb(var(--mn-ink-muted));
    font: inherit;
    font-size: 0.875rem;
    line-height: 1.5;
    text-align: start;
    cursor: pointer;
}

.ex-summary strong {
    font-family: var(--ex-font-num);
    font-weight: 600;
    color: rgb(var(--mn-ink));
    white-space: nowrap;
}

.ex-summary-edit {
    flex-shrink: 0;
    font-size: 0.8rem;
    color: rgb(var(--mn-primary));
}

.ex-summary:hover .ex-summary-edit { color: rgb(var(--mn-primary-2)); }

.ex-card .mn-label small {
    margin-inline-start: 0.3rem;
    font-weight: 400;
    color: rgba(var(--mn-ink-muted), 0.7);
}

.ex-grid-2 { display: grid; gap: 0 0.75rem; }

@media (min-width: 520px) {
    .ex-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ex-prefixed { position: relative; }

.ex-prefixed span {
    position: absolute;
    left: 1rem;
    top: 50%;
    translate: 0 -50%;
    color: rgb(var(--mn-ink-muted));
    pointer-events: none;
}

.ex-prefixed .mn-input { padding-inline-start: 2rem; }

.ex-textarea { resize: vertical; min-height: 4.25rem; line-height: 1.5; }

.ex-agree {
    align-items: flex-start;
    margin: 0.5rem 0 1.25rem;
    line-height: 1.45;
}

.ex-agree input { margin-top: 0.15rem; flex-shrink: 0; }
.ex-agree a { color: rgb(var(--mn-primary-2)); }
.ex-agree-error { margin: -0.9rem 0.25rem 1.1rem; }

.ex-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.ex-fineprint {
    margin: 0.85rem 0 0;
    text-align: center;
    font-size: 0.78rem;
    color: rgba(var(--mn-ink-muted), 0.85);
}

/* ---------- Status pills ---------- */

.ex-status {
    --tone: var(--mn-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgb(var(--tone));
    background: rgba(var(--tone), 0.1);
    box-shadow: inset 0 0 0 1px rgba(var(--tone), 0.35);
}

.ex-status::before {
    content: '';
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: currentColor;
}

.ex-status[data-status="new"] { --tone: var(--ex-warn); }
.ex-status[data-status="in_progress"] { --tone: var(--mn-primary); }
.ex-status[data-status="completed"] { --tone: var(--ex-ok); }
.ex-status[data-status="canceled"] { --tone: var(--mn-ink-muted); }

.ex-status--lg { padding: 0.4rem 0.85rem; font-size: 0.85rem; }

/* ---------- Sections ---------- */

.ex-section {
    position: relative;
    padding-block: 3.5rem;
}

@media (min-width: 1024px) {
    .ex-section { padding-block: 4.5rem; }
}

.ex-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 1rem;
    right: 1rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--mn-primary-2), 0.16), transparent);
}

.ex-section-head { max-width: 40rem; margin-bottom: 2rem; }

.ex-section-head p {
    margin: 1rem 0 0;
    line-height: 1.65;
    color: rgb(var(--mn-ink-muted));
}

.ex-kicker {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: var(--mn-iris);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ex-h2 {
    margin: 0.7rem 0 0;
    font-family: var(--mn-font-display);
    font-weight: 400;
    font-size: clamp(1.45rem, 2.8vw, 2.2rem);
    line-height: 1.2;
    text-wrap: balance;
}

.ex-tile {
    position: relative;
    padding: 1.5rem;
    border-radius: 1.4rem;
    border: 1px solid var(--mn-hairline);
    background: linear-gradient(170deg, rgba(20, 26, 46, 0.6), rgba(8, 11, 22, 0.78));
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: border-color 200ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ex-tile:hover {
    border-color: rgba(var(--mn-primary), 0.35);
    transform: translateY(-2px);
}

.ex-tile h3 {
    margin: 1rem 0 0.5rem;
    font-size: 1.05rem;
    font-weight: 600;
}

.ex-tile p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: rgb(var(--mn-ink-muted));
}

.ex-flow {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 860px) {
    .ex-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ex-num {
    display: block;
    font-family: var(--mn-font-display);
    font-weight: 300;
    font-size: 2.4rem;
    line-height: 1;
    background: linear-gradient(176deg, rgb(var(--mn-chrome-hi)) 0%, rgb(var(--mn-chrome)) 40%, rgb(var(--mn-chrome-lo)) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ex-reserves {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ex-reserves li {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem 1rem;
    border-radius: 1.1rem;
    border: 1px solid var(--mn-hairline);
    background: var(--ex-panel);
}

.ex-reserve-text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }

.ex-reserve-name {
    font-size: 0.82rem;
    color: rgb(var(--mn-ink-muted));
}

.ex-reserve-text strong {
    font-family: var(--ex-font-num);
    font-weight: 600;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

.ex-why {
    display: grid;
    gap: 1rem;
}

@media (min-width: 640px) {
    .ex-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
    .ex-why { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ex-icon {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.85rem;
    color: rgb(var(--mn-primary-2));
    background: rgba(var(--mn-primary), 0.1);
    box-shadow: inset 0 0 0 1px rgba(var(--mn-primary), 0.3), 0 0 24px -10px rgba(var(--mn-primary), 0.7);
}

.ex-icon svg { width: 1.3rem; height: 1.3rem; }

.ex-aml {
    position: relative;
    display: grid;
    gap: 1.5rem;
    padding: 1.75rem 1.5rem 3.5rem;
    border-radius: 1.75rem;
    border: 1px solid var(--mn-hairline);
    background: linear-gradient(170deg, rgba(20, 26, 46, 0.6), rgba(8, 11, 22, 0.8));
    overflow: hidden;
    isolation: isolate;
}

/* The line of light script along the bottom edge, as on the sign-in card. */
.ex-aml::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 3.25rem;
    z-index: -1;
    pointer-events: none;
    background:
        var(--mn-band) repeat-x 0 100% / 400px 70%,
        var(--mn-band-deep) repeat-x 140px 100% / 400px 100%;
    opacity: 0.4;
    animation: mn-card-swell 22s linear infinite;
}

@media (min-width: 960px) {
    .ex-aml {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
        gap: 3rem;
        padding: 2.75rem 2.75rem 4rem;
    }

    .ex-aml .ex-section-head { margin-bottom: 0; }
}

.ex-rules {
    display: grid;
    gap: 0.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: rule;
}

.ex-rules li {
    position: relative;
    padding-inline-start: 2.4rem;
    font-size: 0.92rem;
    line-height: 1.6;
    color: rgb(var(--mn-ink-muted));
    counter-increment: rule;
}

.ex-rules li::before {
    content: counter(rule, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0.1rem;
    font-family: var(--ex-font-num);
    font-size: 0.78rem;
    font-weight: 600;
    color: rgb(var(--mn-primary));
}

/* ---------- Footer ---------- */

.ex-footer {
    margin-top: 2rem;
    padding-block: 3rem 2rem;
    border-top: 1px solid var(--mn-hairline);
    background: linear-gradient(180deg, rgba(4, 6, 12, 0.3), rgba(4, 6, 12, 0.85));
}

.ex-footer-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem 3rem;
}

.ex-footer-brand p {
    max-width: 22rem;
    margin: 1rem 0 0;
    font-size: 0.88rem;
    line-height: 1.6;
    color: rgb(var(--mn-ink-muted));
}

.ex-footer-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 3rem;
    margin: 0;
}

.ex-footer-facts dt {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(var(--mn-ink-muted), 0.8);
}

.ex-footer-facts dd { margin: 0.4rem 0 0; font-size: 0.9rem; }
.ex-footer-facts a { text-decoration: none; }
.ex-footer-facts a:hover { color: rgb(var(--mn-primary-2)); }

.ex-footer-base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 2.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(var(--mn-primary-2), 0.07);
    font-size: 0.8rem;
    color: rgba(var(--mn-ink-muted), 0.8);
}

.ex-footer-base a { text-decoration: none; }
.ex-footer-base a:hover { color: rgb(var(--mn-ink)); }

/* ---------- Request status page ---------- */

.ex-status-page {
    max-width: 44rem;
    padding-block: 2.5rem 4rem;
}

.ex-ticket { padding: 1.5rem; }

@media (min-width: 640px) {
    .ex-ticket { padding: 2.25rem; }
}

.ex-ticket-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.ex-ticket-title {
    margin: 0.45rem 0 0.35rem;
    font-family: var(--mn-font-display);
    font-weight: 400;
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    line-height: 1.1;
}

.ex-ticket-date { font-size: 0.85rem; color: rgb(var(--mn-ink-muted)); }

.ex-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    padding: 0.9rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(var(--ex-ok), 0.35);
    background: rgba(var(--ex-ok), 0.08);
    font-size: 0.9rem;
    line-height: 1.5;
}

.ex-banner p { margin: 0; flex: 1 1 18rem; }
.ex-banner strong { color: rgb(var(--ex-ok)); }

.ex-copy {
    padding: 0.5rem 0.9rem;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgb(var(--mn-ink));
    background: rgba(var(--mn-primary-2), 0.08);
    box-shadow: inset 0 0 0 1px rgba(var(--mn-primary-2), 0.25);
    cursor: pointer;
}

.ex-copy:hover { background: rgba(var(--mn-primary-2), 0.14); }

.ex-track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 0 1.75rem;
    padding: 0;
    list-style: none;
    counter-reset: track;
}

.ex-track li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    text-align: center;
    font-size: 0.8rem;
    color: rgba(var(--mn-ink-muted), 0.75);
}

/* The rail between dots, lit up to wherever the request has got to. */
.ex-track li + li::before {
    content: '';
    position: absolute;
    top: 0.7rem;
    right: 50%;
    width: 100%;
    height: 2px;
    background: rgba(var(--mn-primary-2), 0.12);
    border-radius: 2px;
}

.ex-track li.is-done + li::before { background: linear-gradient(90deg, rgb(var(--mn-primary)), rgb(var(--mn-iris-1))); }

.ex-track-dot {
    position: relative;
    z-index: 1;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    border: 2px solid rgba(var(--mn-primary-2), 0.18);
    background: rgb(8, 11, 22);
}

.ex-track .is-done { color: rgb(var(--mn-ink)); }

.ex-track .is-done .ex-track-dot {
    border-color: transparent;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23060a18' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='m5.5 10.5 3 3 6-6.5'/%3E%3C/svg%3E") center / 0.9rem no-repeat,
        linear-gradient(180deg, rgb(var(--mn-chrome-hi)), rgb(var(--mn-chrome-mid)));
}

.ex-track .is-current { color: rgb(var(--mn-primary-2)); font-weight: 600; }

.ex-track .is-current .ex-track-dot {
    border-color: rgb(var(--mn-primary));
    box-shadow: 0 0 0 4px rgba(var(--mn-primary), 0.14), 0 0 20px -2px rgba(var(--mn-primary), 0.7);
    animation: ex-beat 2.2s ease-in-out infinite;
}

.ex-track[data-canceled="true"] .is-current { color: rgb(var(--mn-ink-muted)); }

.ex-track[data-canceled="true"] .is-current .ex-track-dot {
    border-color: rgba(var(--mn-ink-muted), 0.6);
    box-shadow: none;
    animation: none;
}

@keyframes ex-beat {
    0%, 100% { box-shadow: 0 0 0 4px rgba(var(--mn-primary), 0.14), 0 0 20px -2px rgba(var(--mn-primary), 0.7); }
    50% { box-shadow: 0 0 0 7px rgba(var(--mn-primary), 0.06), 0 0 26px 0 rgba(var(--mn-primary), 0.5); }
}

.ex-deal {
    display: grid;
    gap: 0.75rem;
    align-items: center;
    padding: 1.1rem;
    border-radius: var(--ex-radius);
    border: 1px solid var(--mn-hairline);
    background: var(--ex-panel);
}

@media (min-width: 560px) {
    .ex-deal { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 1rem; }
}

.ex-deal-side { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }

.ex-deal-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgb(var(--mn-ink-muted));
}

.ex-deal-amount {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--ex-font-num);
    font-weight: 600;
    font-size: 1.35rem;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.ex-deal-amount small { font-size: 0.85rem; color: rgb(var(--mn-ink-muted)); font-weight: 500; }
.ex-deal-amount .ex-coin { width: 1.9rem; height: 1.9rem; font-size: 0.9rem; }
.ex-deal-name { font-size: 0.82rem; color: rgb(var(--mn-ink-muted)); }

.ex-deal-arrow {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    color: rgb(var(--mn-primary-2));
    border: 1px solid rgba(var(--mn-primary), 0.3);
    justify-self: start;
}

.ex-deal-arrow svg { width: 1.1rem; height: 1.1rem; }

@media (max-width: 559px) {
    .ex-deal-arrow { transform: rotate(90deg); }
}

.ex-details {
    display: grid;
    margin: 1.25rem 0;
}

.ex-details div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.7rem 0.2rem;
    border-bottom: 1px dashed rgba(var(--mn-primary-2), 0.1);
    font-size: 0.9rem;
}

.ex-details dt { color: rgb(var(--mn-ink-muted)); flex-shrink: 0; }
.ex-details dd { margin: 0; text-align: end; min-width: 0; overflow-wrap: anywhere; }
.ex-mono { font-family: var(--ex-font-num); font-size: 0.85rem; letter-spacing: 0.01em; }

.ex-callout {
    padding: 1rem 1.1rem;
    border-radius: 1rem;
    border-inline-start: 2px solid rgb(var(--mn-primary));
    background: rgba(var(--mn-primary), 0.06);
    font-size: 0.92rem;
    line-height: 1.6;
    color: rgb(var(--mn-ink-muted));
}

.ex-callout p { margin: 0; }
.ex-callout strong { color: rgb(var(--mn-ink)); }

.ex-actions {
    display: grid;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

@media (min-width: 520px) {
    .ex-actions:has(> :nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ex-actions .mn-btn + .mn-btn { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .ex-hero-copy,
    .ex-hero-extra,
    .ex-card,
    .ex-step[data-step="2"],
    .ex-picker-list,
    .ex-eyebrow i,
    .ex-aml::after,
    .ex-track .is-current .ex-track-dot {
        animation: none !important;
    }

    .ex-swap,
    .ex-tile { transition: none; }
}