:root { --navy:#17243f; --blue:#6e86b0; --paper:#f8f5ef; --line:#cfd5dc; --mist:#e8eff3; }
* { box-sizing:border-box; }
html { color:var(--navy); background:var(--paper); font-family:Arial,sans-serif; }
body { min-height:100vh; margin:0; background:linear-gradient(140deg,#f9f6ef 0 58%,#e8eff3 58% 100%); }
a { color:inherit; }
.pay-header { width:min(1180px,calc(100% - 48px)); min-height:110px; margin:auto; display:flex; justify-content:space-between; align-items:center; gap:24px; border-bottom:1px solid rgba(23,36,63,.16); }
.pay-brand { display:flex; align-items:center; gap:13px; text-decoration:none; }
.pay-brand-mark { display:block; width:42px; height:42px; flex:0 0 auto; color:var(--blue); fill:currentColor; }
.pay-brand span { display:grid; gap:4px; }
.pay-brand strong { display:grid; gap:0; font:400 22px/.9 Georgia,serif; letter-spacing:.02em; text-transform:uppercase; }
.pay-brand strong span { display:block; }
.pay-brand small { font-size:9px; letter-spacing:.14em; text-transform:uppercase; }
.pay-back { font-size:12px; text-underline-offset:5px; }
.pay-shell { width:min(1080px,calc(100% - 48px)); min-height:calc(100vh - 210px); margin:0 auto; padding:70px 0 80px; display:grid; grid-template-columns:minmax(0,.9fr) minmax(420px,1fr); align-items:start; gap:70px; }
.pay-shell--general { width:min(720px,calc(100% - 48px)); grid-template-columns:1fr; padding-top:52px; }
.pay-intro { padding-top:32px; }
.pay-kicker { margin:0 0 20px; color:#667794; font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }
.pay-intro h1,.pay-message h1 { margin:0; font:400 clamp(36px,4vw,54px)/1 Georgia,serif; letter-spacing:-.025em; }
.pay-intro > p:not(.pay-kicker),.pay-message > p:not(.pay-kicker) { max-width:620px; margin:25px 0 0; color:#526077; font-size:16px; line-height:1.7; }
.pay-trust { display:flex; flex-wrap:wrap; gap:8px; margin-top:32px; }
.pay-trust span { padding:9px 11px; border:1px solid rgba(23,36,63,.2); background:rgba(255,255,255,.45); font-size:10px; letter-spacing:.04em; }
.pay-card { padding:36px; border:1px solid rgba(23,36,63,.22); background:rgba(255,255,255,.91); box-shadow:0 22px 70px rgba(23,36,63,.1); }
.pay-card--general { padding:42px; }
.pay-card--general .pay-title { margin:0; color:var(--navy); font:600 17px/1.2 Arial,sans-serif; letter-spacing:.16em; }
.pay-lead { max-width:540px; margin:18px 0 0; color:#59677c; font-size:14px; line-height:1.6; }
.pay-message { grid-column:1/-1; max-width:720px; margin:auto; text-align:center; }
.pay-message .pay-primary { margin-top:28px; }
.pay-message-actions { margin-top:28px; display:flex; justify-content:center; flex-wrap:wrap; gap:10px; }
.pay-message-actions .pay-primary { margin-top:0; }
.pay-secondary { min-height:54px; padding:0 24px; border:1px solid var(--navy); display:inline-flex; justify-content:center; align-items:center; color:var(--navy); background:transparent; font-size:12px; font-weight:700; letter-spacing:.04em; text-decoration:none; }
.pay-reference { margin-top:18px; color:#738096; font-size:11px; }
.pay-order-head { display:flex; justify-content:space-between; align-items:start; gap:24px; padding-bottom:25px; border-bottom:1px solid var(--line); }
.pay-order-head > div { display:grid; gap:6px; }
.pay-order-head span { color:#738096; font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.pay-order-head strong { font:400 38px/1 Georgia,serif; }
.pay-order-head .pay-old-price { color:#808999; font-size:12px; text-decoration:line-through; }
.pay-order-head em { justify-self:start; padding:4px 7px; background:#e2ece6; color:#42624f; font-size:9px; font-style:normal; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.pay-order-head small { padding-top:4px; color:#8b93a0; font-size:9px; }
.pay-details { margin:0; padding:14px 0; }
.pay-details > div { display:grid; grid-template-columns:100px 1fr; gap:20px; padding:12px 0; border-bottom:1px solid #e5e7ea; }
.pay-details dt { color:#778195; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.pay-details dd { margin:0; font:400 16px/1.35 Georgia,serif; }
.pay-form { display:grid; gap:17px; margin-top:22px; }
.pay-form--general { margin-top:28px; }
.pay-options { min-width:0; margin:0; padding:0; border:0; display:grid; gap:9px; }
.pay-options legend { margin:0 0 10px; color:#657087; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.pay-option { position:relative; min-height:56px; padding:9px 16px 9px 48px; border:1px solid var(--line); background:white; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:18px; cursor:pointer; transition:border-color .18s ease,background .18s ease,transform .18s ease; }
.pay-option:hover { border-color:#9eacc0; transform:translateY(-1px); }
.pay-option:has(input:checked) { border-color:var(--navy); background:#eef3f6; box-shadow:inset 4px 0 0 var(--navy); }
.pay-option input { position:absolute; left:18px; width:17px; height:17px; margin:0; accent-color:var(--navy); }
.pay-option > span { display:grid; gap:4px; }
.pay-option strong { font:400 18px/1.2 Georgia,serif; }
.pay-option small { color:#7c8698; font-size:9px; letter-spacing:.04em; }
.pay-option b { font:600 17px/1 Arial,sans-serif; white-space:nowrap; }
.pay-field { display:grid; gap:8px; }
.pay-contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pay-field span { color:#657087; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.pay-field input,.pay-field select,.pay-field textarea { width:100%; min-height:52px; padding:0 14px; border:1px solid var(--line); border-radius:0; background:white; color:var(--navy); font:16px/1.45 Arial,sans-serif; outline:none; }
.pay-field textarea { min-height:88px; padding-top:13px; resize:vertical; }
.pay-field input:focus,.pay-field select:focus,.pay-field textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(110,134,176,.16); }
.pay-comment { border-top:1px solid rgba(23,36,63,.12); border-bottom:1px solid rgba(23,36,63,.12); }
.pay-comment summary { padding:13px 0; color:#59677c; font-size:11px; cursor:pointer; list-style:none; }
.pay-comment summary::-webkit-details-marker { display:none; }
.pay-comment summary::after { content:"+"; float:right; font-size:16px; line-height:.75; }
.pay-comment[open] summary::after { content:"−"; }
.pay-comment .pay-field { padding:2px 0 14px; }
.pay-consent { display:grid; grid-template-columns:18px 1fr; align-items:start; gap:10px; color:#59657a; font-size:11px; line-height:1.55; }
.pay-consent input { width:16px; height:16px; margin:1px 0 0; accent-color:var(--navy); }
.pay-offer-note { margin:-6px 0 0 28px; color:#7a8495; font-size:10px; line-height:1.5; }
.pay-offer-note a { color:inherit; }
.pay-primary { min-height:54px; padding:0 24px; border:1px solid var(--navy); background:var(--navy); color:white; display:inline-flex; justify-content:center; align-items:center; font-size:12px; font-weight:700; letter-spacing:.04em; text-decoration:none; cursor:pointer; }
.pay-form > .pay-primary { min-height:46px; padding:0 20px; justify-self:start; }
.pay-primary:hover { background:#263a61; }
.pay-note { margin:0; color:#848d9d; font-size:9px; line-height:1.5; text-align:center; }
.pay-honeypot { position:absolute !important; left:-10000px !important; width:1px !important; height:1px !important; overflow:hidden !important; }
.pay-pending { margin-top:22px; padding:18px; border:1px solid #c6d1db; background:var(--mist); }
.pay-pending strong { font:400 19px Georgia,serif; }
.pay-pending p { margin:8px 0 0; color:#59677c; font-size:11px; line-height:1.55; }
.pay-footer { width:min(1180px,calc(100% - 48px)); min-height:100px; margin:auto; display:flex; justify-content:space-between; align-items:center; gap:20px; border-top:1px solid rgba(23,36,63,.16); color:#6e788b; font-size:10px; }
@media (max-width:800px) {
  body { background:linear-gradient(165deg,#f9f6ef 0 60%,#e8eff3 60% 100%); }
  .pay-header { width:calc(100% - 32px); min-height:90px; }
  .pay-brand strong { font-size:18px; }
  .pay-brand small { font-size:7px; }
  .pay-back { font-size:10px; }
  .pay-shell { width:calc(100% - 24px); grid-template-columns:1fr; gap:28px; padding:38px 0 50px; }
  .pay-shell--general { width:calc(100% - 24px); }
  .pay-intro { padding:0 8px; }
  .pay-intro h1,.pay-message h1 { font-size:34px; }
  .pay-intro > p:not(.pay-kicker),.pay-message > p:not(.pay-kicker) { margin-top:18px; font-size:14px; }
  .pay-card { padding:25px 20px; }
  .pay-card--general { padding:28px 22px; }
  .pay-card--general .pay-title { font-size:16px; }
  .pay-contact-grid { grid-template-columns:1fr; }
  .pay-message { grid-column:auto; }
  .pay-footer { width:calc(100% - 32px); min-height:90px; align-items:flex-start; flex-direction:column; justify-content:center; gap:9px; }
}
@media (max-width:430px) {
  .pay-brand-mark { width:34px; height:34px; }
  .pay-brand { gap:9px; }
  .pay-brand strong { font-size:15px; line-height:.88; }
  .pay-brand small { font-size:6px; letter-spacing:.11em; }
  .pay-back { max-width:none; text-align:right; white-space:nowrap; }
  .pay-order-head { align-items:end; }
  .pay-order-head strong { font-size:34px; }
  .pay-details > div { grid-template-columns:78px 1fr; gap:12px; }
  .pay-option { min-height:56px; padding:9px 12px 9px 43px; gap:10px; }
  .pay-option input { left:15px; }
  .pay-option strong { font-size:16px; }
  .pay-option b { font-size:15px; }
}