/* The arms (app) and How it pays (guide): the header they share, then the board. */

/* ---------- a header strip instead of a full stage ---------- */
.stage.page-head{position:relative;z-index:6;height:calc(82 * var(--u));overflow:visible;isolation:auto}
@media (max-width:1099.98px){
  .stage.page-head{height:calc(var(--head-top) + 66 * var(--u))}
}
.arms-page .masthead{--build-w:172}
.arms-page[data-connected="true"] .masthead{--build-w:120}

/* ---------- the lagoon stays behind, fixed ---------- */
.arms-page{min-height:100vh;min-height:100dvh;background:#1f74d4}
.lagoon{position:fixed;z-index:0}
.lagoon video{object-position:62% 50%}
.lagoon::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(31,116,212,.12) 0%, rgba(251,248,245,.3) 100%)}

.board-wrap{position:relative;z-index:1;width:min(1180px, 100% - 48px);margin:0 auto;padding:clamp(18px,3vw,40px) 0 72px;color:var(--navy)}
.board-head h1{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(40px,5.2vw,64px);line-height:1.05;letter-spacing:.012em}
.board-head p{margin:10px 0 0;max-width:34em;font-size:clamp(17px,1.5vw,21px);line-height:1.35}

.board{position:relative;margin-top:clamp(22px,3vw,36px)}
.board-body{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;transition:filter .6s ease,opacity .6s ease}
.board[data-locked="true"] .board-body{filter:blur(9px);opacity:.78;pointer-events:none;user-select:none}

.card{min-width:0;padding:clamp(18px,2vw,26px);border-radius:16px;background:rgba(255,255,255,.86);color:var(--navy)}
.card--deep{background:var(--deep) radial-gradient(70% 70% at 50% 46%, #2a68da 0%, rgba(42,104,218,0) 74%);color:#fff}
.card-label{margin:0;font-size:15px;line-height:1.3;font-weight:400;color:rgba(26,48,88,.78)}
.big{margin:8px 0 0;font-family:var(--display);font-weight:400;font-size:clamp(34px,3.6vw,48px);line-height:1;letter-spacing:.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.mid{margin:8px 0 0;font-family:var(--display);font-weight:400;font-size:clamp(24px,2.4vw,30px);line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.small{margin:10px 0 0;font-size:15px;line-height:1.4;color:rgba(26,48,88,.86)}
.is-new{animation:num-in .5s var(--out) both}
@keyframes num-in{from{opacity:.3;transform:translateY(-4px)}}

.board-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);gap:14px}
.col{display:grid;gap:14px;align-content:stretch}
.col .card{display:flex;flex-direction:column;justify-content:center}
.plate-card{display:flex;flex-direction:column;align-items:center;padding:14px 14px 18px}
.plate-card .plate{max-width:470px}
.plate-note{margin:2px 0 0;min-height:2.8em;max-width:26em;text-align:center;font-size:15px;line-height:1.4;color:rgba(255,255,255,.9)}

.sim-field{display:flex;align-items:baseline;gap:8px;margin-top:8px;padding:8px 14px 6px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px rgba(26,48,88,.45)}
.sim-field:focus-within{box-shadow:inset 0 0 0 2px var(--blue)}
.sim-field input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--navy);font-family:var(--display);font-size:30px;line-height:1.1;font-variant-numeric:tabular-nums}
.sim-field span{font-size:15px}
.sim-out{margin:12px 0 0;font-size:17px;line-height:1.35}
.sim-out b{font-weight:700;font-variant-numeric:tabular-nums}

.arm-rows{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:column;grid-template-rows:repeat(4,auto);column-gap:clamp(20px,4vw,56px)}
.arm-rows li{display:grid;grid-template-columns:2.2em minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px 0 9px;border-top:1px solid rgba(26,48,88,.16);font-size:16px;line-height:1.3;font-variant-numeric:tabular-nums}
.arm-rows .n{display:grid;place-items:center;width:1.75em;height:1.75em;border-radius:50%;background:rgba(26,48,88,.09);font-size:14px}
.arm-rows li.is-sale .n{background:var(--sucker);color:#fff}
.arm-rows .held{text-align:right;white-space:nowrap}
.arm-rows li:not(.is-sale) .held{color:rgba(26,48,88,.6)}

.totals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,3vw,40px)}

/* ---------- the gate: the blue card of the home page ---------- */
.gate-layer{position:absolute;inset:0;z-index:3;display:flex;align-items:flex-start;justify-content:center;padding:clamp(20px,5vw,64px) 0 80px;pointer-events:none;transition:opacity .35s ease}
.gate-layer.is-leaving{opacity:0}
.gate{position:sticky;top:clamp(88px,16vh,150px);width:min(420px,100%);padding:26px 24px 22px;border-radius:16px;background:var(--card);color:#fff;box-shadow:0 30px 70px rgba(8,30,80,.38);pointer-events:auto}
.gate h2{margin:0;font-family:var(--display);font-weight:400;font-size:34px;line-height:1.1;letter-spacing:.012em}
.gate p{margin:10px 0 0;font-size:17px;line-height:1.4;color:rgba(255,255,255,.9)}
.gate-wallets{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:8px}
.gate-wallets:empty{display:none}
.wallet-row{display:flex;align-items:center;gap:12px;width:100%;height:52px;margin:0;padding:2px 18px 0;border:0;border-radius:16px;background:rgba(255,255,255,.94);color:var(--navy);font:inherit;font-size:17.4px;text-align:left;cursor:pointer;transition:filter .15s}
.wallet-row img{width:24px;height:24px;border-radius:6px}
.wallet-row svg{margin-left:auto;width:11px;height:20px}
.wallet-row:hover{filter:brightness(1.06)}
.wallet-row[aria-busy="true"]{opacity:.6;cursor:progress}
.gate .gate-none{margin-top:20px;padding:14px 16px;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);font-size:16px}
.gate-read{display:inline-block;margin-top:18px;font-size:16px;border-bottom:1px solid rgba(255,255,255,.6)}
.gate-read:hover{border-bottom-color:#fff}

/* ---------- once connected ---------- */
.notice{margin-top:clamp(22px,3vw,36px);padding:clamp(20px,2.4vw,28px);border-radius:16px;background:var(--card);color:#fff;animation:notice-in .6s var(--out) both}
@keyframes notice-in{from{opacity:0;transform:translateY(12px)}}
.notice h2{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(24px,2.8vw,34px);line-height:1.15;letter-spacing:.012em}
.notice p{margin:8px 0 0;max-width:44em;font-size:17px;line-height:1.45;color:rgba(255,255,255,.92)}
.notice-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px}
.notice-row .btn{height:48px;padding:2px 22px 0;border-radius:14px;border:0;font-size:17px;cursor:pointer}
.notice-row .btn--light{background:#fff;color:var(--navy);box-shadow:none}
.notice-row .btn--glass{background:rgba(255,255,255,.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);-webkit-backdrop-filter:none;backdrop-filter:none}
.notice-row .btn--solid{background:#fff;color:var(--navy)}
.chip{display:flex;align-items:center;height:48px;padding:2px 18px 0;border-radius:14px;background:rgba(255,255,255,.14);font-size:16px;font-variant-numeric:tabular-nums}
.notice + .board{margin-top:14px}
button.btn{border:0;cursor:pointer}

.foot--glass{position:relative;z-index:1;background:transparent}
.foot--glass .foot-grid{padding:22px clamp(16px,2.4vw,28px);border:0;border-radius:16px;background:rgba(255,255,255,.86)}

@media (max-width:999.98px){
  .board-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .plate-card{grid-column:1 / -1;grid-row:1}
  .col{grid-auto-flow:row}
}
@media (max-width:639.98px){
  .board-wrap{width:calc(100% - 28px)}
  .board-grid{grid-template-columns:minmax(0,1fr)}
  .arm-rows{grid-template-columns:minmax(0,1fr);grid-auto-flow:row;grid-template-rows:none}
  .totals{grid-template-columns:minmax(0,1fr)}
  .gate{padding:22px 18px 18px}
  .gate h2{font-size:30px}
}

@media (prefers-reduced-motion:reduce){
  .board-body,.gate-layer,.wallet-row{transition:none}
  .notice,.is-new{animation:none}
}