/* pay.css — page-specific layout for the payment page (pay.html): a single
   centred pay card with the Stripe primary button, the instant-method grid
   (Venmo / Cash App / PayPal) and the Zelle copy block. The nav (opaque, from the
   SSI header partial) and body grain/glow come from the shared layer; pay has no
   footer. Cascade: tokens -> base -> site -> animations -> pay.css.

   Note: the card header uses class .brand, which is ALSO the shared nav brand
   (site.css). It is scoped here to .head .brand so it never restyles the nav. */

/* Centre the card; base.css gives the flex column, site.css the grain/glow. */
body{display:flex;align-items:center;justify-content:center;padding:110px 20px 48px}

.card{
  position:relative;z-index:1;width:100%;max-width:440px;
  opacity:0;transform:translateY(20px);animation:rise .8s .1s forwards;
}
@keyframes rise{to{opacity:1;transform:none}}

/* header */
.head{text-align:center;margin-bottom:34px}
.head .brand{font-family:var(--serif);font-weight:500;letter-spacing:.14em;font-size:1.35rem;text-transform:uppercase;line-height:1.2}
.head .brand .sub{display:block;font-size:.66rem;letter-spacing:.36em;color:var(--gold);margin-top:11px;font-weight:400}
.divider{width:54px;height:1px;background:var(--gold);margin:26px auto 0}

.intro{text-align:center;margin-bottom:30px}
.intro h1{font-family:var(--serif);font-weight:300;font-size:1.7rem;letter-spacing:-.01em;margin-bottom:8px}
.intro h1 .em{font-style:italic;color:var(--gold-soft)}
.intro p{color:var(--ink-soft);font-size:.94rem}

/* primary card pay */
.primary{
  display:flex;align-items:center;justify-content:center;gap:12px;
  width:100%;background:var(--gold);color:var(--bg);font-weight:500;
  font-size:1rem;letter-spacing:.04em;padding:18px;border-radius:3px;
  text-decoration:none;transition:all .3s;border:1px solid var(--gold);
}
.primary:hover{background:var(--gold-soft);transform:translateY(-2px)}
.primary svg{width:20px;height:20px;fill:var(--bg)}
.fee-note{text-align:center;color:var(--ink-dim);font-size:.78rem;margin:10px 0 0;letter-spacing:.02em}

.or{display:flex;align-items:center;gap:16px;color:var(--ink-dim);font-size:.72rem;
    letter-spacing:.2em;text-transform:uppercase;margin:28px 0}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line-soft)}

/* instant methods grid */
.methods{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.method{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:var(--panel);border:1px solid var(--line-soft);border-radius:3px;
  padding:22px 12px;text-decoration:none;color:var(--ink);transition:all .3s;min-height:104px;
}
.method:hover{border-color:var(--gold);transform:translateY(-2px)}
.method svg{width:26px;height:26px;fill:var(--gold)}
.method span{font-size:.86rem;letter-spacing:.04em;color:var(--ink-soft)}
.method:hover span{color:var(--ink)}
.method[aria-disabled="true"]{opacity:.35;pointer-events:none}

/* zelle block with copy */
.zelle{
  grid-column:1 / -1;background:var(--panel);border:1px solid var(--line-soft);
  border-radius:3px;padding:20px;display:flex;flex-direction:column;gap:12px;
}
.zelle-top{display:flex;align-items:center;gap:10px}
.zelle-top svg{width:22px;height:22px;fill:var(--gold)}
.zelle-top b{font-family:var(--serif);font-weight:400;font-size:1.1rem;color:var(--ink)}
.zelle-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-top:1px solid var(--line-soft);padding-top:11px;
}
.zelle-val{
  color:var(--ink-soft);font-size:.9rem;word-break:break-all;
  background:transparent;border:none;padding:0;margin:0;outline:none;
  font-family:inherit;flex:1;min-width:0;cursor:text;
}
.copy{
  background:transparent;border:1px solid var(--line);color:var(--gold);
  font-family:var(--sans);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 12px;border-radius:2px;cursor:pointer;transition:all .25s;white-space:nowrap;
}
.copy:hover{background:var(--gold);color:var(--bg)}
.copy.done{border-color:var(--gold);color:var(--gold-soft)}

.tips{text-align:center;color:var(--ink-soft);font-size:.9rem;margin-top:30px;
      font-style:italic;font-family:var(--serif)}

.secure{display:flex;align-items:center;justify-content:center;gap:7px;
        margin-top:26px;color:var(--ink-dim);font-size:.74rem;letter-spacing:.06em}
.secure svg{width:13px;height:13px;fill:var(--ink-dim)}