:root {
    --ink: #1c1915;
    --muted: #5e584f;
    --line: #e4ddd2;
    --paper: #fffdf8;
    --bg: #f3efe6;
    --brand: #0f6e6e;
    --danger: #8d2f2f;
    --ok: #1f6b45;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    background:
        radial-gradient(1200px 500px at 10% -10%, color-mix(in srgb, var(--brand) 18%, white), transparent 60%),
        var(--bg);
    font: 16px/1.5 "Segoe UI", system-ui, sans-serif;
}

.top, .layout {
    width: min(1080px, calc(100% - 32px));
    margin: 0 auto;
}

.top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 28px 0 8px;
}

.brand { display: flex; gap: 12px; align-items: center; }
.brand img { width: 42px; height: 42px; }
.eyebrow { margin: 0; letter-spacing: 0.14em; text-transform: uppercase; font-size: 11px; color: var(--muted); }
.text-link { color: var(--brand); }

.layout {
    display: grid;
    grid-template-columns: 1.4fr 0.9fr;
    gap: 24px;
    padding: 18px 0 64px;
}

.layout.single { grid-template-columns: minmax(0, 640px); }

.paper, .paybox {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 28px;
}

.paper-head, .meta, .totals div, .split {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.paper h1, .paybox h2 { font-family: Palatino, "Iowan Old Style", Georgia, serif; font-weight: 600; margin: 0; }
.paper h1 { font-size: 34px; }
.status { margin: 0; color: var(--brand); font-weight: 650; }

.meta { margin: 22px 0; }
.meta dt, .totals dt { color: var(--muted); }
.meta dd, .totals dd { margin: 0; }

.lines { width: 100%; border-collapse: collapse; }
.lines th { text-align: left; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.lines th:last-child, .lines td:last-child { text-align: right; }
.lines td { border-top: 1px solid var(--line); padding: 12px 0; }

.totals { margin-top: 8px; }
.totals div { padding: 6px 0; }
.grand { border-top: 1px solid var(--ink); margin-top: 8px; padding-top: 12px; font-size: 20px; }

.memo, .terms, .lede, .hint, .fine, .demo-note { color: var(--muted); }
.demo-note { background: color-mix(in srgb, var(--brand) 8%, white); color: var(--ink); padding: 10px 12px; border-radius: 10px; }

.methods { display: flex; gap: 8px; margin: 16px 0; }
.method, .submit {
    border: 0;
    border-radius: 999px;
    padding: 10px 16px;
    font: inherit;
    cursor: pointer;
}
.method { background: transparent; border: 1px solid var(--line); }
.method.is-on, .submit { background: var(--brand); color: var(--brand-ink, white); }
.submit { width: 100%; margin-top: 8px; }
.panel { display: none; }
.panel.is-on { display: block; }

label { display: block; font-size: 13px; margin: 10px 0; }
input, .hosted {
    width: 100%;
    margin-top: 4px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px;
    font: inherit;
    background: white;
}
.hosted { min-height: 46px; }
.notice { background: #e7f5ee; color: var(--ok); padding: 10px 12px; border-radius: 10px; }
.alert { background: #fdecec; color: var(--danger); padding: 10px 12px; border-radius: 10px; }

@media (max-width: 800px) {
    .layout { grid-template-columns: 1fr; }
    .top { align-items: flex-start; }
}

#card-error{color:#b42318;background:#fef3f2;border:1px solid #fecdca;padding:10px 12px;border-radius:8px;margin:0 0 12px;}
.hosted iframe{border:0;width:100%;}