:root {
    --ink:#262930;
    --text:#515660;
    --muted:#6b707a;
    --accent:#34383f;
    --accent-hover:#202329;
    --button-bg:#475569;
    --button-hover:#334155;
    --button-focus:#34383f;
    --mint:#f6f7f8;
    --border:#e2e4e7;
    --paper:#fff;
    --canvas:#ffffff
}
* {
    box-sizing:border-box
}
body {
    margin:0;
    background:var(--canvas);
    color:var(--ink);
    font-family:"Segoe UI",Arial,sans-serif;
    -webkit-font-smoothing:antialiased
}
button,a {
    -webkit-tap-highlight-color:transparent
}
button {
    font:inherit
}
a {
    color:inherit
}
button:focus-visible,a:focus-visible {
    outline:3px solid #9ca3af;
    outline-offset:5px
}
svg {
    width:22px;
    height:22px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.65;
    stroke-linecap:round;
    stroke-linejoin:round;
    flex-shrink:0
}
.symbols {
    position:absolute;
    width:0;
    height:0;
    overflow:hidden
}
.topbar {
    height:100px;
    background:#fff;
    border-bottom:1px solid var(--border)
}
.header-inner {
    max-width:1104px;
    height:100%;
    margin:0 auto;
    padding:0 32px;
    display:flex;
    align-items:center;
    justify-content:space-between
}
.brand {
    display:flex;
    gap:11px;
    align-items:center;
    text-decoration:none
}
.brand-mark {
    width:37px;
    height:40px;
    border-radius:10px;
    background:var(--accent);
    color:#fff;
    display:grid;
    place-items:center
}
.brand-mark svg {
    width:23px;
    height:23px;
    stroke-width:2.8
}
.wordmark {
    font-size:25px;
    font-weight:650;
    letter-spacing:-1.1px;
    line-height:1
}
.wordmark span {
    font-size:10px;
    letter-spacing:2.5px;
    display:block;
    margin-top:7px;
    font-weight:600;
    color:var(--muted)
}
.header-note {
    display:flex;
    align-items:center;
    gap:8px;
    color:#6b707a;
    font-size:13px
}
.header-note svg {
    width:15px;
    height:15px
}
main {
    max-width:1040px;
    margin:0 auto;
    padding:44px 0 0
}
.progress {
    display:flex;
    align-items:center;
    gap:16px;
    font-size:12px;
    font-weight:500;
    margin-bottom:43px;
    color:#949daa
}
.step {
    display:flex;
    align-items:center;
    gap:8px;
    white-space:nowrap
}
.step-dot {
    width:22px;
    height:22px;
    border-radius:50%;
    display:grid;
    place-items:center;
    border:1px solid #e2e4e7;
    font-size:10px
}
.step-dot svg {
    width:12px;
    height:12px;
    stroke-width:2
}
.step.done {
    color:#34383f
}
.done .step-dot {
    border-color:#e9ebee;
    background:#e9ebee
}
.step.current {
    color:var(--accent);
    font-weight:650
}
.current .step-dot {
    background:var(--accent);
    color:white;
    border-color:var(--accent)
}
.progress-line {
    height:1px;
    background:#e2e4e7;
    width:50px
}
.eyebrow {
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:1.8px;
    font-weight:650;
    color:#6b707a;
    margin:0 0 9px
}
h1 {
    font-size:36px;
    line-height:1.2;
    letter-spacing:-1.2px;
    font-weight:600;
    margin:0 0 12px
}
.intro {
    font-size:15px;
    color:var(--text);
    line-height:1.6;
    margin:0
}
.payment-shell {
    margin-top:30px;
    border:1px solid var(--border);
    border-radius:18px;
    background:var(--paper);
    overflow:hidden;
    display:grid;
    grid-template-columns:360px 1fr;
    box-shadow:0 18px 50px -30px #26293020
}
.invoice {
    padding:33px 31px 28px;
    background:#f3f4f5;
    border-right:1px solid var(--border);
    display:flex;
    flex-direction:column
}
.summary-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:18px
}
.summary-caption {
    font-size:12px;
    color:#6b707a;
    font-weight:500
}
.status {
    display:flex;
    gap:5px;
    align-items:center;
    padding:4px 9px;
    border:1px solid #e2e4e7;
    border-radius:20px;
    color:#6b707a;
    background:#e9ebee;
    font-size:11px;
    font-weight:550
}
.status:before {
    content:"";
    width:5px;
    height:5px;
    border-radius:50%;
    background:#34383f
}
.amount {
    font-size:48px;
    line-height:1.15;
    font-weight:600;
    letter-spacing:-1.8px;
    font-variant-numeric:tabular-nums;
    margin:0
}
.currency {
    font-size:11px;
    color:#6b707a;
    margin:9px 0 32px;
    letter-spacing:.8px
}
.invoice-details {
    padding-top:24px;
    border-top:1px solid #e2e4e7;
    margin:0
}
.detail {
    margin:0 0 23px
}
.detail dt {
    font-size:11px;
    line-height:1.4;
    color:#6b707a;
    margin-bottom:7px
}
.detail dd {
    font-size:14px;
    color:#262930;
    font-weight:550;
    margin:0;
    overflow-wrap:anywhere
}
.reference {
    font-variant-numeric:tabular-nums;
    letter-spacing:.5px
}
.summary-note {
    display:flex;
    gap:10px;
    margin-top:auto;
    padding-top:28px;
    align-items:flex-start
}
.summary-note svg {
    color:#6b707a;
    width:17px;
    height:17px;
    margin-top:1px
}
.summary-note p {
    color:#6b707a;
    font-size:11px;
    line-height:1.7;
    margin:0;
    max-width:235px
}
.payment {
    padding:32px 36px 28px
}
h2 {
    font-size:19px;
    font-weight:600;
    letter-spacing:-.35px;
    margin:0 0 7px
}
.method-intro {
    font-size:12px;
    line-height:1.6;
    color:var(--muted);
    margin:0 0 24px
}
.choices {
    display:grid;
    gap:12px
}
/* Soft method hues keep each option distinct within the charcoal theme. */
.method-fields > label[for="card-method"] {
    --method-bg:#f3f7fd;
    --method-hover:#edf3fc;
    --method-selected:#e8f0fc;
}
.method-fields > label[for="bnpl-method"] {
    --method-bg:#fdf4f7;
    --method-hover:#fbedf3;
    --method-selected:#f9e7ef;
}
.method-fields > label[for="bank-method"] {
    --method-bg:#f1f9f7;
    --method-hover:#eaf6f2;
    --method-selected:#e3f3ee;
}
.method {
    appearance:none;
    width:100%;
    border:1px solid var(--border);
    background:var(--method-bg, white);
    border-radius:11px;
    padding:18px;
    text-align:left;
    display:flex;
    gap:13px;
    align-items:flex-start;
    cursor:pointer;
    transition:border-color .16s,background .16s
}
.method-radio:not(:disabled):not(:checked) + .method:hover {
    border-color:#9ca3af;
    background:var(--method-hover, white)
}
.method-radio:checked + .method {
    border:1.5px solid var(--accent);
    background:var(--method-selected, #f6f7f8);
    padding:17.5px
}
.method-icon {
    width:37px;
    height:37px;
    border:1px solid #e2e4e7;
    border-radius:9px;
    background:white;
    display:grid;
    place-items:center;
    color:var(--accent);
    flex-shrink:0
}
.method-icon svg {
    width:21px;
    height:21px
}
.method-copy {
    flex:1;
    min-width:0
}
.method-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    min-height:20px
}
.method-title {
    font-size:13px;
    font-weight:600
}
.method-description {
    display:block;
    font-size:11px;
    line-height:1.65;
    font-weight:400;
    color:#6b707a;
    margin-top:5px
}
.method-radio:not(:disabled) + .method .method-description {
    color:#606671
}
.radio {
    width:17px;
    height:17px;
    border:1px solid #e2e4e7;
    border-radius:50%;
    display:grid;
    place-items:center;
    flex-shrink:0
}
.radio svg {
    width:10px;
    height:10px;
    stroke-width:2.5
}
.method-radio:checked + .method .radio {
    border-color:var(--accent);
    background:var(--accent);
    color:white
}
.method-radio:not(:checked) + .method .radio svg {
    visibility:hidden
}
.method-radio:disabled + .method {
    background:#f8f9fb;
    color:#949daa;
    border-color:#e2e4e7;
    cursor:not-allowed
}
.method-radio:disabled + .method .method-icon {
    border-color:#e2e4e7;
    background:#f2f4f7;
    color:#949daa
}
.method-radio:disabled + .method .method-description {
    color:#949daa
}
.unavailable {
    font-size:9px;
    font-weight:500;
    padding:3px 7px;
    background:#eceff3;
    color:#949daa;
    border-radius:4px;
    white-space:nowrap
}
.method-hint {
    display:flex;
    align-items:flex-start;
    gap:9px;
    margin:20px 0 23px;
    padding:0 2px;
    color:#6b707a;
    font-size:11px;
    line-height:1.7
}
.method-hint svg {
    width:15px;
    height:15px;
    flex-shrink:0;
    margin-top:2px;
    color:#6b707a
}
.continue {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    width:100%;
    min-height:49px;
    background:var(--button-bg);
    border:1px solid var(--button-bg);
    color:white;
    padding:12px 18px;
    border-radius:8px;
    cursor:pointer;
    font-size:12px;
    font-weight:600;
    box-shadow:0 3px 6px #2629300d;
    transition:background .16s
}
/* Shared action colours across lookup, confirmation, bank and checkout pages. */
.checkout-shell .retry-button {
    background:var(--button-bg);
    border-color:var(--button-bg);
    color:white
}
.continue:hover, .checkout-shell .retry-button:hover {
    background:var(--button-hover);
    border-color:var(--button-hover)
}
.continue:focus-visible, .checkout-shell .retry-button:focus-visible,
.bank-details .copy-button:focus-visible {
    outline:3px solid var(--button-focus);
    outline-offset:4px
}
.continue:disabled, .checkout-shell .retry-button:disabled {
    background:#e5e7eb;
    border-color:#d4d8de;
    color:#6b7280;
    cursor:not-allowed;
    box-shadow:none
}
.bank-details .copy-button { color:var(--button-bg); }
.bank-details .copy-button:hover {
    background:#edf1f6;
    border-color:#cbd5e1;
    color:var(--button-hover)
}
.continue svg {
    width:17px;
    height:17px;
    stroke-width:1.8
}
.next-step {
    text-align:center;
    color:#949daa;
    font-size:10px;
    line-height:1.5;
    margin:12px 0 0
}
.bottom-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:24px 2px 0;
    font-size:12px
}
.back {
    display:flex;
    align-items:center;
    gap:7px;
    border:0;
    padding:3px 0;
    background:transparent;
    font-size:12px;
    color:#6b707a;
    cursor:pointer
}
.back svg {
    width:14px;
    height:14px
}
.help {
    color:#6b707a;
    font-size:11px
}
.help a {
    font-weight:600;
    color:#34383f;
    text-underline-offset:3px;
    margin-left:3px
}
.footer {
    max-width:1040px;
    margin:47px auto 0;
    padding:22px 0 28px;
    border-top:1px solid var(--border);
    display:flex;
    justify-content:space-between;
    font-size:10px;
    color:#949daa;
    letter-spacing:.1px
}
.footer a {
    text-decoration:none
}
.footer a:hover {
    text-decoration:underline
}
@media(min-width:1200px) {
    main {
        padding-top:47px
    }
    .payment-shell {
        margin-top:32px
    }
    .payment {
        padding:34px 38px 30px
    }
    .invoice {
        padding:34px 32px 30px
    }
    .method {
        padding:20px 18px
    }
    .method-radio:checked + .method {
        padding:19.5px 17.5px
    }
}
@media(max-width:1100px) {
    main {
        margin:0 32px
    }
    .footer {
        margin-left:32px;
        margin-right:32px
    }
    .payment-shell {
        grid-template-columns:34% 1fr
    }
    .invoice {
        padding:28px 24px
    }
    .payment {
        padding:28px
    }
    .amount {
        font-size:42px
    }
}
@media(max-width:700px) {
    .topbar {
        height:80px
    }
    .header-inner {
        padding:0 23px
    }
    .wordmark {
        font-size:23px
    }
    .wordmark span {
        font-size:8px;
        letter-spacing:2.3px
    }
    .brand-mark {
        width:33px;
        height:36px
    }
    .header-note {
        font-size:0;
        gap:0
    }
    .header-note svg {
        width:17px;
        height:17px
    }
    main {
        margin:0 22px;
        padding-top:26px
    }
    .progress {
        gap:9px;
        font-size:10px;
        margin-bottom:29px
    }
    .progress-line {
        width:17px
    }
    .step {
        gap:5px
    }
    .step-dot {
        width:18px;
        height:18px;
        font-size:9px
    }
    .eyebrow {
        font-size:9px;
        letter-spacing:1.5px
    }
    h1 {
        font-size:29px;
        letter-spacing:-1px
    }
    .intro {
        font-size:13px;
        line-height:1.65;
        max-width:300px
    }
    .payment-shell {
        grid-template-columns:1fr;
        border-radius:13px;
        margin-top:23px
    }
    .invoice {
        padding:24px;
        border-right:0;
        border-bottom:1px solid var(--border)
    }
    .summary-top {
        margin-bottom:10px
    }
    .amount {
        font-size:39px
    }
    .currency {
        margin:6px 0 23px;
        font-size:10px
    }
    .invoice-details {
        padding-top:17px;
        display:grid;
        grid-template-columns:1fr
    }
    .detail {
        margin-bottom:16px
    }
    .detail:last-child {
        margin-bottom:0
    }
    .detail dt {
        font-size:10px;
        margin-bottom:4px
    }
    .detail dd {
        font-size:12px
    }
    .summary-note {
        display:none
    }
    .payment {
        padding:26px 22px 25px
    }
    h2 {
        font-size:18px
    }
    .method-intro {
        font-size:11px;
        margin-bottom:20px
    }
    .method {
        padding:16px 13px;
        gap:10px
    }
    .method-radio:checked + .method {
        padding:15.5px 12.5px
    }
    .method-icon {
        width:32px;
        height:32px;
        border-radius:7px
    }
    .method-icon svg {
        width:18px;
        height:18px
    }
    .method-title {
        font-size:12px
    }
    .method-description {
        font-size:10px
    }
    .unavailable {
        font-size:8px;
        padding:3px 5px
    }
    .method-heading {
        gap:5px
    }
    .radio {
        width:15px;
        height:15px
    }
    .method-hint {
        font-size:10px;
        margin:18px 0 20px;
        gap:7px
    }
    .continue {
        font-size:11px;
        min-height:49px;
        padding-left:14px;
        padding-right:14px
    }
    .next-step {
        font-size:9px
    }
    .bottom-row {
        align-items:flex-start;
        gap:20px;
        padding-top:21px
    }
    .back {
        font-size:10px;
        gap:5px;
        white-space:nowrap
    }
    .help {
        font-size:10px;
        text-align:right;
        line-height:1.7
    }
    .help a {
        white-space:nowrap
    }
    .footer {
        margin:30px 22px 0;
        padding:18px 0 24px;
        font-size:9px
    }
}
.summary-caption {
    font-size:13px
}
.detail dt {
    font-size:12px;
    color:#6b707a
}
.detail dd {
    font-size:15px
}
.summary-note p {
    font-size:12px;
    color:#6b707a
}
.method-intro {
    font-size:14px;
    color:#6b707a
}
.method-title {
    font-size:15px
}
.method-description {
    font-size:13px;
    color:#6b707a
}
.method-hint {
    font-size:12px;
    color:#6b707a
}
.continue {
    font-size:14px
}
.next-step {
    font-size:11px;
    color:#6b707a
}
.unavailable {
    font-size:10px
}
.help {
    font-size:12px
}
.back {
    font-size:13px
}
@media(max-width:700px) {
    .summary-caption {
        font-size:12px
    }
    .detail dt {
        font-size:11px
    }
    .detail dd {
        font-size:13px
    }
    .method-intro {
        font-size:12px
    }
    .method-title {
        font-size:14px
    }
    .method-description {
        font-size:12px
    }
    .method-hint {
        font-size:12px
    }
    .continue {
        font-size:13px
    }
    .next-step {
        font-size:10px
    }
    .unavailable {
        font-size:9px
    }
    .back {
        font-size:11px
    }
    .help {
        font-size:11px
    }
    .method-icon {
        width:30px;
        height:32px
    }
    .method {
        gap:9px
    }
    .method-heading {
        flex-wrap:wrap
    }
    .desktop-break {
        display:none
    }
}
@media(prefers-reduced-motion:reduce) {
    * {
        transition:none!important
    }
}
/* Native radio selection controls presentation and routing, including without JS. */
.method-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
.method-fields > .method { margin-bottom: 12px; }
.method-fields > .method:last-of-type { margin-bottom: 0; }
.sr-only, .method-radio {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.method-radio:focus-visible + .method { outline: 3px solid #9ca3af; outline-offset: 4px; }
#card-method:checked ~ .continue-actions .bank-action,
#card-method:checked ~ .continue-actions .bnpl-action,
#card-method:checked ~ .bnpl-next,
#card-method:checked ~ .bank-next,
#bnpl-method:checked ~ .continue-actions .card-action,
#bnpl-method:checked ~ .continue-actions .bank-action,
#bnpl-method:checked ~ .card-next,
#bnpl-method:checked ~ .bank-next,
#bank-method:checked ~ .continue-actions .card-action,
#bank-method:checked ~ .continue-actions .bnpl-action,
#bank-method:checked ~ .bnpl-next,
#bank-method:checked ~ .card-next { display: none; }
.continue { text-decoration: none; }
.back { text-decoration: none; }
.back:hover { text-decoration: underline; text-underline-offset: 3px; }
.notice { padding: 14px 18px; margin-top: 24px; border: 1px solid #e2e4e7; border-radius: 9px; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.notice-error { background: #fff5f3; border-color: #f0d5ce; color: #943b2b; }
.notice-info { background: #f6f7f8; color: #515660; }
.pending-note { margin: 0 0 20px; padding: 12px 14px; background: #f3f4f5; border: 1px solid #e2e4e7; border-radius: 8px; color: #515660; font-size: 12px; line-height: 1.7; }
.closed-status { font-size: 30px; font-weight: 600; margin: 0 0 28px; overflow-wrap: anywhere; }
.status-message { font-size: 15px; line-height: 1.8; color: #6b707a; margin-top: 16px; }
.status { max-width: 65%; overflow-wrap: anywhere; }

.site-logo { display: block; width: 180px; height: 48px; object-fit: contain; }
@media (max-width: 700px) { .site-logo { width: 150px; height: 40px; } }