/* Wallet link page (link.html) in the Arceus look. Prefix k-, mobile first.
   Needs arceus.css and body class="arc". The form keeps its ids (linkForm, code,
   linkMsg, linkGo) because the inline script uses them. */

.k-hero{position:relative;isolation:isolate;overflow:hidden;padding:clamp(40px,7vw,96px) 0 clamp(44px,6vw,80px);background:var(--a-night)}
.k-hero__art{position:absolute;inset:0;z-index:-3}
.k-hero__art img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;opacity:.45}
.k-hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:radial-gradient(45% 60% at 78% 50%,rgba(145,70,255,.22),transparent 70%),
             linear-gradient(90deg,rgba(11,13,20,.96) 0%,rgba(11,13,20,.8) 55%,rgba(11,13,20,.5) 100%),
             linear-gradient(0deg,var(--a-night) 0%,transparent 45%)}
.k-hero .a-vignette{z-index:-1}
.k-in{display:grid;grid-template-columns:1fr;gap:clamp(24px,4vw,48px);align-items:start}
@media(min-width:960px){.k-in{grid-template-columns:1.05fr .95fr;align-items:center}}
.k-hero .a-h1{font-size:clamp(40px,6vw,80px);margin:6px 0 4px}
.k-hero .a-lead{max-width:52ch}

.k-steps{list-style:none;margin:26px 0 0;padding:0;counter-reset:none}
.k-steps .a-band{padding-left:16px;align-items:flex-start}
.k-steps .a-band::before{display:none}
.k-steps .a-band__sub b{color:var(--a-cream);font-weight:700}
.k-n{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;margin-top:2px;border-radius:50%;
  font:400 16px/1 var(--a-display);color:var(--a-gold-hi);box-shadow:inset 0 0 0 1px rgba(231,182,74,.5);
  transition:background var(--a-dur) var(--a-ease),color var(--a-dur) var(--a-ease)}
.k-steps .a-band:hover .k-n{background:var(--a-gold);color:var(--a-ink)}

.k-form{width:100%;max-width:520px;justify-self:center;padding-bottom:22px}
.k-form .a-panel__body{display:flex;flex-direction:column}
.k-form label{margin-bottom:10px}
.k-form input{display:block;width:100%;height:68px;padding:0 18px;border:0;border-radius:var(--a-r);
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--a-rule);color:var(--a-cream);
  font:400 30px/1 var(--a-display);letter-spacing:.14em;text-transform:uppercase;text-align:center;
  transition:box-shadow var(--a-dur) var(--a-ease),background var(--a-dur) var(--a-ease)}
.k-form input::placeholder{color:rgba(244,238,220,.26)}
.k-form input:focus{outline:none;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 2px var(--a-gold)}
.k-form .msg{min-height:1.5em;margin:14px 0;font-size:14px;line-height:1.5;color:var(--a-soft)}
.k-form .msg.bad{color:var(--a-red)}
.k-form.is-done .msg{color:var(--a-leaf)}
.k-form.is-done input{box-shadow:inset 0 0 0 2px var(--a-leaf)}
.k-form .btnrow .btn{width:100%}
.k-form .btn[disabled]{opacity:.6;cursor:progress;transform:none}
.k-fine{margin:16px 0 0}

.k-three{display:grid;grid-template-columns:1fr;gap:clamp(16px,2.2vw,24px)}
@media(min-width:860px){.k-three{grid-template-columns:repeat(3,minmax(0,1fr))}}
.k-card{padding:22px 22px 24px;display:flex;flex-direction:column;gap:8px}
.k-card .a-h3{margin:0}
.k-card p{margin:0;font-size:14.5px;line-height:1.55}
.k-note{margin-top:26px;text-align:center;display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:center;align-items:center}