/* tip.sirdominic.scot: two big buttons and nothing in their way. A small heading, then Revolut
   and Throne as two tall glass panels filling the screen (stacked on phones). Each: its mark,
   its name huge in the Haus face, one mono line, "send ↗". Hover is a hard cut to solid red. */
.tip.is-here { border-color: #ff2a1f; }
.tipx { min-height: calc(100svh - var(--head-h)); display: grid; grid-template-rows: auto minmax(0, 1fr); gap: clamp(1rem, 3svh, 1.8rem); padding: clamp(.5rem, 2svh, 1.2rem) var(--gutter) clamp(1.2rem, 4svh, 2.4rem); }
.tipx-h { display: grid; justify-items: center; gap: .7rem; text-align: center; font: 400 clamp(1.6rem, 3.6vw, 2.8rem)/.9 var(--heavy); text-transform: uppercase; letter-spacing: -.01em; text-shadow: var(--soft); }
.tipx-t { font: inherit; }
.tipx-k { display: inline-flex; gap: .8em; font: 500 .7rem/1 var(--mono); letter-spacing: .16em; color: var(--ink-60); text-shadow: none; }
.tipx-k i { font-style: normal; color: var(--red); }

.pays { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.8rem, 1.6vw, 1.4rem); min-height: 0; }
.pay {
  position: relative; display: grid; grid-template-rows: auto auto auto auto; justify-items: center; align-content: center; text-align: center;
  gap: clamp(.6rem, 2svh, 1.2rem); padding: clamp(1.6rem, 5svh, 3rem) 1.5rem; min-height: clamp(260px, 52svh, 640px);
  border-radius: 14px; text-decoration: none; color: var(--ink);
  background: linear-gradient(150deg, #212121, #0f0f0f 50%, #161616);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 40px 90px -50px rgba(0, 0, 0, .95), 0 30px 90px -60px rgba(255, 0, 0, .5);
}
.pay::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .1) 35%, rgba(255, 255, 255, .04) 60%, rgba(255, 255, 255, .22));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.pay-mark { width: clamp(44px, 5vw, 72px); height: auto; aspect-ratio: 1; fill: currentColor; margin-bottom: .4rem; }
.pay-name { font: 400 clamp(3rem, 9vw, 8.4rem)/.86 var(--heavy); text-transform: uppercase; letter-spacing: -.015em; text-shadow: var(--soft); align-self: center; }
.pay-line { font: 500 clamp(.68rem, .9vw, .8rem)/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-60); }
.pay-go {
  display: inline-flex; align-items: center; gap: .6em; margin-top: .4rem; padding: .55em 0 .6em; border-bottom: 2px solid var(--ink);
  font: 400 clamp(1rem, 1.5vw, 1.25rem)/1 var(--heavy); letter-spacing: .03em; text-transform: uppercase; text-shadow: var(--soft);
}
.pay-go::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--red); }
.pay-arrow { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pay:hover, .pay:focus-visible { background: var(--red); color: #000; outline: none; box-shadow: 0 40px 100px -40px rgba(255, 0, 0, .75); }
.pay:hover::before, .pay:focus-visible::before { display: none; }
.pay:hover .pay-name, .pay:hover .pay-go, .pay:focus-visible .pay-name, .pay:focus-visible .pay-go { text-shadow: none; }
.pay:hover .pay-line, .pay:focus-visible .pay-line { color: rgba(0, 0, 0, .7); }
.pay:hover .pay-go, .pay:focus-visible .pay-go { border-bottom-color: #000; }
.pay:hover .pay-go::before, .pay:focus-visible .pay-go::before { background: #000; }
.pay:hover .pay-arrow { transform: translate(3px, -3px); }
.pay:focus-visible { box-shadow: 0 0 0 3px var(--ground), 0 0 0 5px var(--ink); }
@media (max-width: 640px) {
  .pays { grid-template-columns: 1fr; }
  .pay { min-height: clamp(220px, 34svh, 340px); }
  .pay-name { font-size: clamp(2.8rem, 15vw, 4.4rem); }
}

@media (max-width: 640px), (pointer: coarse) {
  .tipx-k { font-size: .76rem; }
  .pay-line { font-size: .78rem; }
  .pay-go { min-height: 44px; }
}