.pay-page{background:#f7f7f2;color:#292d24;min-height:100vh}
.pay-header{max-width:1100px;margin:0 auto;padding:26px 32px;display:flex;align-items:center;justify-content:space-between;border:0;background:transparent;box-shadow:none;position:static}
.pay-header .header-actions{display:flex;gap:24px;align-items:center}.pay-header a:not(.brand){font-size:14px;color:#666d60}
.pay-main{max-width:980px;margin:30px auto 70px;padding:0 28px}.pay-main>h1{font-size:clamp(32px,4vw,48px);line-height:1.15;margin:12px 0 18px}.pay-main>.eyebrow{color:#65712f;letter-spacing:.13em;font-size:11px}
.pay-identity{font-size:13px;color:#72766c;margin-bottom:28px;overflow-wrap:anywhere}.pay-card{display:grid;grid-template-columns:1.05fr 1fr;border:1px solid #dedfd5;border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 12px 36px #252a1810}
.pay-summary{padding:36px;background:#eef0e4}.pay-product-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#dde3c6;color:#526410;font-size:24px;margin-bottom:28px}.pay-summary .eyebrow{font-size:11px;letter-spacing:.1em;color:#777c6c}.pay-summary h2{font-size:29px;line-height:1.2;margin:8px 0 16px}.pay-benefit{font-size:21px;font-weight:600;margin:10px 0}.pay-summary .muted{font-size:13px;line-height:1.7;color:#67705c}
.pay-lines{margin:26px 0 18px}.pay-lines>div{display:flex;justify-content:space-between;gap:16px;margin:10px 0;font-size:14px}.pay-lines dd{margin:0;font-variant-numeric:tabular-nums}.pay-total{border-top:1px solid #d6dbc8;padding-top:22px;display:flex;flex-direction:column;gap:8px}.pay-total>span:first-child{font-size:13px;color:#667154}.pay-total strong{font-size:43px;font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums}.pay-once{font-size:12px;color:#717766;margin:16px 0 0}
.pay-action{padding:40px 32px;display:flex;flex-direction:column;justify-content:center}.pay-methods{border:0;padding:0;margin:0 0 16px;min-width:0}.pay-methods legend{font-size:15px;font-weight:600;margin-bottom:18px}.pay-method-card{display:flex;gap:12px;align-items:center;border:1px solid #dedfd5;border-radius:13px;padding:18px 15px;margin:0 0 12px;cursor:pointer;background:white}.pay-method-card:has(input:checked){border-color:#627622;background:#f7f9ee;box-shadow:0 0 0 1px #627622}.pay-method-card input{width:17px;height:17px;margin:0;accent-color:#5b6e16}.pay-method-card strong{display:block;font-size:14px}.pay-method-card small{display:block;color:#777d6f;font-size:12px;margin-top:5px}.pay-submit{width:100%;min-height:52px;margin:8px 0 15px;border-radius:12px}.pay-submit:disabled{opacity:.5;cursor:not-allowed}.pay-fineprint{font-size:12px;line-height:1.8;color:#7b8074;margin:8px 0}.pay-fineprint a{text-underline-offset:3px}.pay-footer{text-align:center;color:#767c6c;font-size:12px;padding:30px 0}.pay-footer a{color:inherit}.pay-message{background:white;border:1px solid #dedfd5;border-radius:20px;padding:32px}.pay-message a{display:inline-block;margin:12px 18px 0 0}.pay-loading{padding:32px;background:#eef0e4;border-radius:20px}.pay-amount-edit{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:12px}.pay-amount-edit label{grid-column:1/-1}.pay-amount-edit input{min-width:0;width:100%}#change-amount{font-size:13px;margin-top:18px}#change-amount summary{cursor:pointer;text-decoration:underline;text-underline-offset:4px}.pay-retry{margin-bottom:12px}.pay-page .notice{margin:16px 0}.pay-page [hidden]{display:none!important}
.pay-order .pay-card{display:block;max-width:640px;margin:auto;padding:32px;text-align:center}.pay-order .pay-card h2{font-size:28px}.pay-order .order-amount{font-size:42px;margin:15px 0}.pay-order .qr-panel{background:transparent;padding:16px;border:0}.pay-order .qr-panel img{display:block;margin:0 auto 20px;width:220px;height:220px}.pay-order .button-row{justify-content:center;flex-wrap:wrap}.pay-order .order-state{margin:20px 0;font-size:16px}.pay-order .order-more{margin-top:25px;border-top:1px solid #e3e5db;padding-top:16px;text-align:left;font-size:12px;color:#717667}.pay-order .after-note{text-align:center}.pay-order #card-abandon-hint{font-size:12px}.pay-order .pay-main>h1,.pay-order .pay-main>.eyebrow,.pay-order .pay-identity{text-align:center}
@media(max-width:700px){.pay-header{padding:18px 20px}.pay-header .header-actions{gap:14px}.pay-main{margin:22px auto 40px;padding:0 16px}.pay-card{grid-template-columns:1fr;border-radius:18px}.pay-summary{padding:25px}.pay-product-icon{display:none}.pay-summary h2{font-size:25px}.pay-action{padding:25px}.pay-total strong{font-size:35px}.pay-lines{margin-top:20px}.pay-identity{margin-bottom:20px}.pay-order .pay-card{padding:24px 18px}}

.pay-order .pay-main .page-heading{margin:0 0 22px;text-align:center}.pay-order .pay-main .page-heading h1{font-size:36px;line-height:1.2;margin:8px 0 12px}.pay-order .pay-card{padding:24px}.pay-order .pay-card h2{font-size:24px;margin:4px 0 12px}.pay-order .order-amount{font-size:36px;margin:8px 0}.pay-order .order-state{margin:12px 0}.pay-order .qr-panel{padding:4px}.pay-order .qr-panel img{width:180px;height:180px;margin:4px auto 12px}.pay-order .qr-panel p{font-size:12px;margin:5px 0}.pay-order .button-row{margin-top:18px}.pay-order .order-more{margin-top:18px}

/* 2026-10-08 portal design layer. */
.pay-page { background: var(--ground); color: var(--ink); }
.pay-main > .eyebrow { font-family: var(--sans); font-size: 13px; letter-spacing: .06em; color: var(--accent); }
.pay-identity { color: var(--muted); font-size: 14px; }
.pay-card { border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: none; }
.pay-summary { background: var(--surface); }
.pay-product-icon { background: var(--accent-soft); color: var(--accent-strong); border-radius: var(--r-md); }
.pay-summary .eyebrow { color: var(--accent); }
.pay-summary .muted, .pay-once, .pay-fineprint, .pay-footer, .pay-total > span:first-child { color: var(--muted); }
.pay-total { border-top-color: var(--rule-strong); }
.pay-total strong { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; }
.pay-method-card { min-height: 72px; border: 1.5px solid var(--rule); border-radius: var(--r-md); }
.pay-method-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.pay-method-card input { accent-color: var(--accent); }
.pay-submit { border-radius: var(--r-pill); }
.pay-message, .pay-loading { border-radius: var(--r-lg); }
.pay-loading { background: var(--surface); }