/* ============================================================
   submit.css — /submit/ and /pay/<id>/ pages
   Loaded in addition to main.css on those two routes only.
   Inherits palette + typography from main.css :root.
   ============================================================ */

/* ============================================================
   SUBMIT — hero
   ============================================================ */
.submit-hero {
    padding: 3rem 0 2rem;
    border-bottom: 1px solid rgba(11,11,13,0.08);
    background:
        linear-gradient(to bottom, var(--bg) 0%, var(--bg) 100%),
        repeating-linear-gradient(0deg, transparent 0 39px, rgba(11,11,13,0.035) 39px 40px),
        repeating-linear-gradient(90deg, transparent 0 39px, rgba(11,11,13,0.035) 39px 40px);
    background-blend-mode: multiply;
}
.submit-hero__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 2.5rem;
    align-items: start;
}
.submit-hero__tag {
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 1rem;
}
.submit-hero h1 {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    line-height: 1;
    letter-spacing: -.03em;
    margin: 0 0 1.2rem;
    text-wrap: balance;
}
.submit-hero h1 em { font-style: italic; color: var(--orange); }
.submit-hero__lede {
    font-size: clamp(1.05rem, 1.4vw, 1.18rem);
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 56ch;
    margin: 0 0 1.6rem;
}
.submit-hero__bullets {
    list-style: none;
    padding: 0;
    margin: 1.4rem 0 0;
    display: grid;
    gap: .7rem;
    max-width: 62ch;
}
.submit-hero__bullets li {
    display: flex;
    gap: .8rem;
    align-items: baseline;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--ink-2);
}
.submit-hero__bullets b { color: var(--ink); }
.sh-mark {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: 2px solid var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-weight: 700;
    font-size: .9rem;
}
.sh-yes { background: var(--orange); color: #fff; border-color: var(--ink); }
.sh-no  { background: var(--bg-2); color: var(--ink); border-style: dashed; }

/* Plate sidebar (price display) */
.submit-hero__plate {
    position: relative;
    background: #fff;
    border: 2px solid var(--ink);
    padding: 1.4rem 1.4rem 1.2rem;
    box-shadow: 8px 8px 0 0 var(--ink);
}
.submit-hero__plate::before {
    content: '';
    position: absolute;
    inset: -2px;
    border: 2px solid var(--orange);
    pointer-events: none;
    transform: translate(4px, 4px);
    z-index: -1;
}
.sh-plate-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--mono);
    font-size: .7rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: .5rem;
}
.sh-plate-live {
    color: var(--orange);
    font-weight: 600;
    display: inline-flex; align-items: center; gap: .35rem;
}
.sh-plate-live::before {
    content: '';
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--orange);
    animation: sh-pulse 2s ease-in-out infinite;
}
@keyframes sh-pulse { 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

.sh-plate-price {
    display: flex;
    align-items: baseline;
    gap: .3rem;
    margin: .5rem 0 .3rem;
    font-family: var(--display);
}
.sh-plate-cur { font-size: 1.8rem; color: var(--orange); font-weight: 600; }
.sh-plate-num { font-size: 4.8rem; font-weight: 800; line-height: 1; color: var(--ink); letter-spacing: -.04em; }
.sh-plate-unit { font-family: var(--mono); font-size: .85rem; color: var(--ink-muted); letter-spacing: .1em; margin-left: .35rem; }
.sh-plate-sub {
    font-family: var(--mono);
    font-size: .78rem;
    color: var(--ink-muted);
    padding-bottom: .9rem;
    border-bottom: 1px dashed rgba(11,11,13,0.15);
}

.sh-plate-bars {
    display: grid;
    gap: .5rem;
    margin: .9rem 0;
}
.sh-bar {
    display: flex;
    gap: .6rem;
    align-items: baseline;
    font-family: var(--mono);
    font-size: .82rem;
}
.sh-bar .k { color: var(--orange); font-weight: 700; min-width: 3.5rem; }
.sh-bar .v { color: var(--ink-2); }

.sh-plate-pays {
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px dashed rgba(11,11,13,0.15);
}
.sh-plate-pays-label {
    font-family: var(--mono);
    font-size: .7rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: .5rem;
}
.sh-plate-pays-row {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}
.sh-pay {
    display: inline-block;
    padding: .22rem .5rem;
    background: var(--bg-2);
    border: 1px solid rgba(11,11,13,0.1);
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .05em;
    color: var(--ink-2);
}
.sh-pay-more { background: var(--ink); color: #fff; border-color: var(--ink); }

@media (max-width: 820px) {
    .submit-hero__grid { grid-template-columns: 1fr; gap: 1.6rem; }
    .submit-hero__plate { box-shadow: 6px 6px 0 0 var(--ink); }
}
@media (max-width: 460px) {
    .sh-plate-num { font-size: 3.6rem; }
    .submit-hero__plate { padding: 1rem 1rem .9rem; }
}

/* ============================================================
   SUBMIT — form
   ============================================================ */
.submit-form-section {
    padding: 2.5rem 0 4rem;
}
.submit-form {
    background: #fff;
    border: 2px solid var(--ink);
    box-shadow: 10px 10px 0 0 var(--ink);
    padding: 1.8rem 1.8rem 1.6rem;
    position: relative;
    max-width: 820px;
}
.sf-head {
    padding-bottom: 1.2rem;
    margin-bottom: 1.4rem;
    border-bottom: 1px dashed rgba(11,11,13,0.15);
}
.sf-head__tag {
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: .6rem;
}
.sf-head__title {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    line-height: 1.05;
    letter-spacing: -.02em;
    margin: 0 0 .6rem;
    color: var(--ink);
}
.sf-head__title em { font-style: italic; color: var(--orange); }
.sf-head__sub {
    font-size: .95rem;
    line-height: 1.5;
    color: var(--ink-muted);
    margin: 0;
    max-width: 60ch;
}

.sf-banner {
    padding: .8rem 1rem;
    margin-bottom: 1.4rem;
    border: 2px solid var(--ink);
    background: var(--orange);
    color: #fff;
    display: flex; gap: 1rem; align-items: baseline;
    font-family: var(--mono);
    font-size: .85rem;
}
.sf-banner strong { letter-spacing: .1em; text-transform: uppercase; }

.sf-grid { display: grid; gap: 1.6rem; }
.sf-block {
    border: 1px solid rgba(11,11,13,0.12);
    padding: 1.1rem 1.2rem 1.2rem;
    background: var(--bg-2);
    position: relative;
}
.sf-block--terms { background: #fff7f2; border-color: rgba(209,74,31,0.28); }
.sf-block__tag {
    font-family: var(--mono);
    font-size: .7rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 1rem;
}

.sf-row {
    display: block;
    margin-bottom: 1.1rem;
}
.sf-row:last-child { margin-bottom: 0; }
.sf-row--full { }

.sf-lbl {
    display: block;
    font-family: var(--mono);
    font-size: .78rem;
    letter-spacing: .05em;
    color: var(--ink);
    margin-bottom: .35rem;
    font-weight: 600;
}
.sf-lbl .req { color: var(--orange); font-weight: 700; }
.sf-hint {
    display: block;
    font-family: var(--body, inherit);
    font-weight: 400;
    font-size: .76rem;
    color: var(--ink-muted);
    letter-spacing: 0;
    margin-top: .15rem;
}

.sf-input,
.sf-select,
.sf-textarea {
    width: 100%;
    padding: .65rem .75rem;
    border: 1.5px solid var(--ink);
    background: #fff;
    font-family: var(--body, system-ui);
    font-size: 1rem;
    line-height: 1.4;
    color: var(--ink);
    transition: box-shadow .12s, border-color .12s;
    box-shadow: 2px 2px 0 0 var(--ink);
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
}
.sf-input:focus,
.sf-select:focus,
.sf-textarea:focus {
    outline: none;
    border-color: var(--orange);
    box-shadow: 2px 2px 0 0 var(--orange);
}
.sf-input--mono { font-family: var(--mono); font-size: .85rem; }
.sf-input--err {
    border-color: var(--orange);
    background: #fff7f2;
    box-shadow: 2px 2px 0 0 var(--orange);
}
.sf-textarea { resize: vertical; min-height: 110px; font-family: var(--mono); font-size: .9rem; }
.sf-select {
    background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
    background-position: calc(100% - 16px) 50%, calc(100% - 10px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 2rem;
    cursor: pointer;
}

.sf-err {
    display: block;
    font-family: var(--mono);
    font-size: .76rem;
    color: var(--orange);
    margin-top: .35rem;
}

/* Checkboxes */
.sf-check {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .7rem .8rem;
    align-items: start;
    padding: .6rem 0;
    cursor: pointer;
}
.sf-check:not(:last-child) { border-bottom: 1px dashed rgba(11,11,13,0.12); margin-bottom: .4rem; padding-bottom: .9rem; }
.sf-check input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.sf-check__box {
    width: 20px; height: 20px;
    border: 2px solid var(--ink);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .12s;
    margin-top: .1rem;
}
.sf-check input:checked + .sf-check__box {
    background: var(--orange);
}
.sf-check input:checked + .sf-check__box::after {
    content: '✓';
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
}
.sf-check input:focus-visible + .sf-check__box {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}
.sf-check__lbl {
    font-size: .92rem;
    line-height: 1.5;
    color: var(--ink-2);
}
.sf-check__lbl strong { color: var(--ink); }

/* Foot */
.sf-foot {
    margin-top: 1.6rem;
    padding-top: 1.2rem;
    border-top: 2px solid var(--ink);
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
.sf-foot__meta {
    font-family: var(--mono);
    font-size: .85rem;
    color: var(--ink-2);
    display: flex; gap: .4rem; flex-wrap: wrap;
}
.sf-foot__meta .k { color: var(--ink-muted); }
.sf-foot__meta .v { color: var(--ink); font-weight: 600; }
.sf-submit {
    display: inline-flex;
    align-items: baseline;
    gap: .5rem;
    padding: .85rem 1.4rem;
    border: 2px solid var(--ink);
    background: var(--orange);
    color: #fff;
    font-family: var(--mono);
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .08s, box-shadow .08s;
    box-shadow: 4px 4px 0 0 var(--ink);
}
.sf-submit:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 0 var(--ink); }
.sf-submit:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 0 var(--ink); }
.sf-submit__prefix { color: rgba(255,255,255,0.65); }
.sf-submit__arrow { font-size: 1.1rem; line-height: 0; }

/* Aside — secondary info cards */
.submit-aside {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 2rem;
    max-width: 1040px;
}
.sa-card {
    background: var(--bg-2);
    border: 1px solid rgba(11,11,13,0.1);
    padding: 1rem 1.1rem;
}
.sa-card h3 {
    font-family: var(--mono);
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .05em;
    margin: 0 0 .55rem;
    color: var(--orange);
    text-transform: uppercase;
}
.sa-card p { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--ink-2); }
.sa-card a { color: var(--orange); border-bottom: 1px solid var(--orange); }

@media (max-width: 820px) {
    .submit-form { padding: 1.2rem; box-shadow: 6px 6px 0 0 var(--ink); }
    .submit-aside { grid-template-columns: 1fr; }
    .sf-foot { flex-direction: column; align-items: stretch; }
    .sf-submit { justify-content: center; }
}

/* ============================================================
   PAY — shared
   ============================================================ */
.pay-section {
    padding: 2rem 0 4rem;
}
.pay-head {
    padding: 0 0 1.8rem;
    margin-bottom: 1.8rem;
    border-bottom: 2px solid var(--ink);
}
.pay-head__tag {
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: .8rem;
}
.pay-head h1 {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    line-height: 1;
    letter-spacing: -.02em;
    margin: 0 0 .8rem;
}
.pay-head h1 em { color: var(--orange); font-style: italic; }
.pay-head p {
    font-size: 1rem;
    color: var(--ink-2);
    line-height: 1.55;
    margin: 0;
    max-width: 64ch;
}
.pay-head code {
    font-family: var(--mono);
    background: var(--bg-2);
    padding: .15rem .45rem;
    font-size: .9em;
    border-radius: 2px;
}

/* Flash */
.pay-flash {
    display: none;
    padding: .75rem 1rem;
    background: var(--orange);
    color: #fff;
    font-family: var(--mono);
    font-size: .9rem;
    margin-bottom: 1rem;
    border: 2px solid var(--ink);
}
.pay-flash.on { display: block; }

/* Recap */
.pay-recap {
    background: #fff;
    border: 2px solid var(--ink);
    box-shadow: 6px 6px 0 0 var(--ink);
    margin-bottom: 1.8rem;
}
.pay-recap__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .8rem 1rem;
    border-bottom: 1px dashed rgba(11,11,13,0.15);
    background: var(--bg-2);
}
.pay-recap__head h2 {
    font-family: var(--mono);
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--orange);
    margin: 0;
}
.pay-recap__ref {
    font-family: var(--mono);
    font-size: .82rem;
    color: var(--ink);
    background: var(--ink);
    color: var(--bg);
    padding: .25rem .55rem;
    letter-spacing: .05em;
}
.pay-recap__body {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.5rem;
    padding: 1rem 1.2rem 1.2rem;
    align-items: end;
}
.pay-recap__type {
    font-family: var(--mono);
    font-size: .72rem;
    color: var(--ink-muted);
    letter-spacing: .18em;
    text-transform: uppercase;
}
.pay-recap__svc h3 {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: -.02em;
    margin: .15rem 0 .3rem;
}
.pay-recap__url {
    font-family: var(--mono);
    font-size: .82rem;
    color: var(--ink-muted);
    display: block;
    word-break: break-all;
}
.pay-recap__bits {
    margin-top: .5rem;
    font-family: var(--mono);
    font-size: .78rem;
    display: flex; gap: .3rem; flex-wrap: wrap;
}
.pay-recap__bits .k { color: var(--ink-muted); }
.pay-recap__bits .v { color: var(--ink-2); }
.pay-recap__total { text-align: right; }
.pay-recap__total .lbl {
    font-family: var(--mono);
    font-size: .7rem;
    letter-spacing: .18em;
    color: var(--ink-muted);
    text-transform: uppercase;
}
.pay-recap__total .val {
    font-family: var(--display);
    font-weight: 800;
    font-size: 2.4rem;
    color: var(--orange);
    line-height: 1;
    letter-spacing: -.03em;
    margin: .3rem 0 .2rem;
}
.pay-recap__total .per {
    font-family: var(--mono);
    font-size: .75rem;
    color: var(--ink-muted);
}

/* Progress bar */
.pay-prog {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    margin-bottom: 1.8rem;
    border: 2px solid var(--ink);
    background: #fff;
    box-shadow: 4px 4px 0 0 var(--ink);
}
.pay-prog__step {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem .7rem;
    border-right: 1px solid rgba(11,11,13,0.12);
    position: relative;
}
.pay-prog__step:last-child { border-right: none; }
.pay-prog__dot {
    flex-shrink: 0;
    width: 26px; height: 26px;
    background: var(--bg-2);
    border: 1.5px solid var(--ink);
    font-family: var(--mono);
    font-weight: 700;
    font-size: .85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-muted);
}
.pay-prog__step.on .pay-prog__dot {
    background: var(--orange);
    color: #fff;
    border-color: var(--ink);
    animation: sh-pulse 1.6s ease-in-out infinite;
}
.pay-prog__step.done .pay-prog__dot {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
}
.pay-prog__lbl {
    font-family: var(--mono);
    font-size: .76rem;
    letter-spacing: .05em;
    color: var(--ink-muted);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pay-prog__step.on .pay-prog__lbl,
.pay-prog__step.done .pay-prog__lbl { color: var(--ink); font-weight: 600; }

/* Stage */
.pay-stage {
    background: #fff;
    border: 2px solid var(--ink);
    box-shadow: 10px 10px 0 0 var(--ink);
    padding: 1.6rem 1.6rem 1.8rem;
    position: relative;
}

/* Coin picker */
.pay-pick-head { margin-bottom: 1.2rem; }
.pay-pick-head h3 {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    margin: 0 0 .35rem;
    letter-spacing: -.02em;
}
.pay-pick-head h3 em { color: var(--orange); font-style: italic; }
.pay-pick-head p { margin: 0; color: var(--ink-muted); font-size: .9rem; font-family: var(--mono); }

.pay-coingrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: .7rem;
}
.pay-coin {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .75rem .85rem;
    background: #fff;
    border: 1.5px solid var(--ink);
    cursor: pointer;
    text-align: left;
    transition: transform .08s, box-shadow .08s, background .12s;
    box-shadow: 3px 3px 0 0 var(--ink);
    position: relative;
}
.pay-coin:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 0 var(--ink);
    background: var(--bg-2);
}
.pay-coin:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.pay-coin.loading {
    background: var(--orange);
    color: #fff;
    box-shadow: 3px 3px 0 0 var(--ink);
}
.pay-coin--rec {
    background: linear-gradient(to right, #fff, #fff7f2);
    border-color: var(--orange);
    box-shadow: 3px 3px 0 0 var(--orange);
}
.pay-coin--rec::after {
    content: 'recommended';
    position: absolute; top: -9px; right: 10px;
    background: var(--orange);
    color: #fff;
    font-family: var(--mono);
    font-weight: 700;
    font-size: .6rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: .15rem .45rem;
    border: 1.5px solid var(--ink);
}
.pay-coin__icon {
    flex-shrink: 0;
    width: 36px; height: 36px;
    background: var(--bg-2);
    border: 1px solid rgba(11,11,13,0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pay-coin.loading .pay-coin__icon { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.3); }
.pay-coin__icon img { width: 22px; height: 22px; }
.pay-coin__body { flex: 1; min-width: 0; }
.pay-coin__title {
    display: flex; gap: .4rem; align-items: center; flex-wrap: wrap;
    font-family: var(--mono);
    font-size: .88rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.1;
}
.pay-coin.loading .pay-coin__title { color: #fff; }
.pay-coin__chain {
    font-family: var(--mono);
    font-weight: 500;
    font-size: .62rem;
    letter-spacing: .1em;
    padding: .12rem .35rem;
    background: var(--bg-2);
    border: 1px solid rgba(11,11,13,0.15);
    text-transform: uppercase;
    color: var(--ink-muted);
}
.pay-coin__chain.eth  { background: #eef2ff; color: #4338ca; border-color: rgba(67,56,202,0.3); }
.pay-coin__chain.tron { background: #fff0f1; color: #b91c1c; border-color: rgba(185,28,28,0.3); }
.pay-coin__tag {
    display: block;
    font-family: var(--mono);
    font-size: .72rem;
    color: var(--ink-muted);
    margin-top: .15rem;
}
.pay-coin.loading .pay-coin__tag { color: rgba(255,255,255,0.8); }
.pay-coin__arr {
    font-family: var(--mono);
    color: var(--orange);
    font-weight: 700;
    font-size: 1.05rem;
}
.pay-coin.loading .pay-coin__arr { color: #fff; }

.pay-pick-note {
    margin-top: 1.2rem;
    padding: .65rem .85rem;
    background: var(--bg-2);
    border-left: 3px solid var(--orange);
    font-family: var(--mono);
    font-size: .82rem;
    color: var(--ink-2);
}
.pay-pick-note b { color: var(--orange); }

/* Loading overlay */
.pay-loading {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
    z-index: 10;
}
.pay-loading.on { opacity: 1; pointer-events: auto; }
.pay-loading__card {
    text-align: center;
    max-width: 340px;
    padding: 1.5rem;
    background: #fff;
    border: 2px solid var(--ink);
    box-shadow: 6px 6px 0 0 var(--orange);
}
.pay-loading__spinner {
    width: 48px; height: 48px;
    margin: 0 auto 1rem;
    border: 4px solid var(--bg-2);
    border-top-color: var(--orange);
    border-radius: 50%;
    animation: pay-spin 1s linear infinite;
}
@keyframes pay-spin { to { transform: rotate(360deg); } }
.pay-loading__card h4 {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.15rem;
    margin: 0 0 .4rem;
    color: var(--ink);
}
.pay-loading__card p {
    font-family: var(--mono);
    font-size: .82rem;
    color: var(--ink-muted);
    margin: 0;
    line-height: 1.5;
}

/* Status banners (awaiting / confirming) */
.pay-banner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: .9rem 1.1rem;
    margin-bottom: 1.4rem;
    background: #fff7f2;
    border: 2px solid var(--orange);
    color: var(--ink);
}
.pay-banner--confirm {
    background: #f2fff4;
    border-color: #10b981;
}
.pay-banner__icon {
    font-size: 1.4rem;
    color: var(--orange);
    font-family: var(--mono);
}
.pay-banner--confirm .pay-banner__icon {
    color: #10b981;
    animation: pay-spin 2s linear infinite;
    display: inline-block;
}
.pay-banner__body h4 {
    font-family: var(--mono);
    font-size: .88rem;
    margin: 0 0 .2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink);
}
.pay-banner__body p {
    margin: 0;
    font-size: .85rem;
    color: var(--ink-2);
    line-height: 1.4;
}
.pay-banner__timer {
    font-family: var(--mono);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--orange);
    font-variant-numeric: tabular-nums;
    letter-spacing: .05em;
    background: var(--ink);
    color: var(--bg);
    padding: .35rem .6rem;
}

/* Pay grid (QR + details) */
.pay-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.6rem;
    margin-bottom: 1.4rem;
}
.pay-qr { text-align: center; }
.pay-qr__box {
    display: inline-flex;
    padding: 12px;
    background: #fff;
    border: 2px solid var(--ink);
    box-shadow: 5px 5px 0 0 var(--orange);
}
.pay-qr__box img { display: block; width: 220px; height: 220px; }
.pay-qr__fallback {
    width: 220px; height: 220px;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    font-family: var(--mono);
    font-size: .78rem;
    color: var(--ink-muted);
    text-align: center;
}
.pay-qr__chip {
    margin-top: .8rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .7rem;
    background: var(--bg-2);
    border: 1px solid rgba(11,11,13,0.1);
    font-family: var(--mono);
    font-size: .8rem;
    color: var(--ink-2);
}
.pay-qr__chip img { width: 14px; height: 14px; }

.pay-details {
    display: flex;
    flex-direction: column;
    gap: .9rem;
}
.pay-detail {
    padding: .8rem 1rem;
    background: var(--bg-2);
    border: 1px solid rgba(11,11,13,0.1);
}
.pay-detail__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: .4rem;
}
.pay-detail__head .k {
    font-family: var(--mono);
    font-size: .78rem;
    letter-spacing: .05em;
    color: var(--ink-muted);
    text-transform: uppercase;
    font-weight: 600;
}
.pay-detail__head .req {
    color: var(--orange);
    margin-left: .3rem;
    font-size: .7rem;
}
.pay-copy {
    background: none;
    border: 1px solid var(--ink);
    padding: .2rem .55rem;
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
    color: var(--ink);
    transition: background .12s, color .12s;
}
.pay-copy:hover { background: var(--ink); color: var(--bg); }
.pay-copy.ok { background: var(--orange); color: #fff; border-color: var(--orange); }
.pay-detail__v {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink);
    word-break: break-all;
    line-height: 1.3;
}
.pay-detail__v .unit {
    font-family: var(--mono);
    font-size: .85rem;
    color: var(--orange);
    font-weight: 600;
    margin-left: .3rem;
}
.pay-detail__v--mono {
    font-family: var(--mono);
    font-size: .88rem;
    font-weight: 500;
}
.pay-detail__warn {
    font-family: var(--mono);
    font-size: .75rem;
    color: var(--orange-ink);
    margin-top: .45rem;
}

/* Control buttons */
.pay-foot-ctrls {
    display: flex; gap: .8rem; flex-wrap: wrap;
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(11,11,13,0.15);
}
.pay-reset-btn,
.pay-cancel-btn {
    background: none;
    border: 1.5px solid var(--ink);
    padding: .5rem .9rem;
    font-family: var(--mono);
    font-size: .82rem;
    letter-spacing: .05em;
    cursor: pointer;
    color: var(--ink-2);
    transition: background .12s, color .12s;
}
.pay-reset-btn:hover { background: var(--ink); color: var(--bg); }
.pay-cancel-btn { border-color: var(--orange); color: var(--orange); }
.pay-cancel-btn:hover { background: var(--orange); color: #fff; }

/* Done state */
.pay-done,
.pay-dead {
    text-align: center;
    padding: 2.5rem 1rem;
}
.pay-done__ring {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px; height: 72px;
    background: var(--orange);
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    font-family: var(--mono);
    border: 3px solid var(--ink);
    box-shadow: 6px 6px 0 0 var(--ink);
    margin-bottom: 1.4rem;
}
.pay-done h3,
.pay-dead h3 {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.3rem, 2.2vw, 1.7rem);
    margin: 0 0 .8rem;
    color: var(--ink);
    letter-spacing: -.02em;
}
.pay-done p,
.pay-dead p {
    font-size: 1rem;
    color: var(--ink-2);
    line-height: 1.55;
    max-width: 58ch;
    margin: 0 auto .7rem;
}
.pay-done__ref {
    font-family: var(--mono);
    font-size: .9rem;
    margin-top: 1rem !important;
}
.pay-done__ref code {
    font-family: var(--mono);
    background: var(--bg-2);
    padding: .2rem .5rem;
    border: 1px solid var(--ink);
    font-weight: 700;
}
.pay-done__actions {
    margin-top: 1.4rem;
    display: flex;
    justify-content: center;
    gap: .8rem;
    flex-wrap: wrap;
}
.pay-btn {
    display: inline-flex; align-items: baseline; gap: .35rem;
    padding: .7rem 1.1rem;
    font-family: var(--mono);
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid var(--ink);
    cursor: pointer;
    transition: transform .08s, box-shadow .08s;
}
.pay-btn--primary {
    background: var(--orange);
    color: #fff;
    box-shadow: 4px 4px 0 0 var(--ink);
}
.pay-btn--primary:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 0 var(--ink); }
.pay-btn--ghost {
    background: #fff;
    color: var(--ink);
    box-shadow: 4px 4px 0 0 var(--ink);
}
.pay-btn--ghost:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 0 var(--orange); }

@media (max-width: 720px) {
    .pay-recap__body { grid-template-columns: 1fr; }
    .pay-recap__total { text-align: left; }
    .pay-prog { grid-template-columns: repeat(5, 1fr); }
    .pay-prog__step { padding: .55rem .3rem; flex-direction: column; gap: .25rem; text-align: center; }
    .pay-prog__lbl { font-size: .62rem; letter-spacing: .02em; }
    .pay-grid { grid-template-columns: 1fr; }
    .pay-qr { order: -1; }
    .pay-stage { padding: 1.1rem; box-shadow: 6px 6px 0 0 var(--ink); }
    .pay-coingrid { grid-template-columns: 1fr; }
    .pay-coin { padding: .6rem .7rem; }
}

/* ============================================================
   Header SUBMIT CTA — slightly different from subscribe style
   Orange pill → brutalist stamp.
   ============================================================ */
.mast-cta--submit {
    background: var(--orange) !important;
    color: #fff !important;
    border: 2px solid var(--ink) !important;
    box-shadow: 3px 3px 0 0 var(--ink) !important;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: transform .08s, box-shadow .08s;
}
.mast-cta--submit:hover {
    transform: translate(-1px,-1px);
    box-shadow: 4px 4px 0 0 var(--ink) !important;
}
.mast-cta--submit:active {
    transform: translate(1px,1px);
    box-shadow: 2px 2px 0 0 var(--ink) !important;
}