/* Additions to the delivered pitch. The delivered styles themselves are unchanged. */
/* The delivered CSS sets display on .finale, .deckbar and slide sections, which beats the hidden
   attribute. Without this the finale video covers the whole page and every slide shows at once. */
[hidden]{display:none!important}
/* The images now carry width and height so nothing moves as they load. Without this the height
   attribute would win over the sizes the delivered styles give them. */
img{height:auto}
.login-icon{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--band-fg);flex:none}
.login-icon:hover{color:var(--accent)}
/* What the keyboard can now reach in the delivered page gets the delivered focus ring. */
.tablebox:focus-visible,video:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
/* With the icon the top bar is too wide for a 320px screen. */
@media (max-width:360px){header.top .wrap:has(.login-icon){flex-wrap:wrap}}
a.optlink{text-decoration:none;color:inherit}
a.optlink:hover{transform:translateY(-1px);box-shadow:0 0 0 2px var(--accent)}
.vthumb iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.kim-btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 28px;border-radius:14px;background:var(--accent);color:var(--accent-ink);font-family:var(--display);font-weight:800;font-size:20px;text-decoration:none}
.kim-btn:hover{transform:translateY(-1px)}
.kim-end{margin-top:28px}
.kim-end-foot{background:var(--band);padding:32px 0}
body.slides .kim-end-foot{display:none}

/* The pay counter and STOP, inside the yellow card */
#payMonth,#svgRate{font-variant-numeric:tabular-nums}
.paystop{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.stopbtn{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:.06em;min-height:64px;width:100%;border:0;border-radius:14px;background:var(--accent-ink);color:#F6F4EF;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.stopbtn:hover{background:#000}
.stopbtn:active{transform:translateY(1px)}
.againbtn{font-family:var(--display);font-weight:800;font-size:18px;min-height:52px;width:100%;border:2px solid var(--accent-ink);border-radius:14px;background:transparent;color:var(--accent-ink);cursor:pointer;touch-action:manipulation}
.againbtn:hover{background:rgba(23,28,38,.1)}
.pay .stopbtn:focus-visible,.pay .againbtn:focus-visible,.pay a:focus-visible,.kstats-l:focus-visible{outline:3px solid var(--accent-ink);outline-offset:3px}
.paystatus{margin:8px 0 0;font-weight:700;font-size:16px}
.paystatus:empty{display:none}
.paystatus.won{font-family:var(--display);font-weight:800;font-size:24px;line-height:1.2}
.paylock{margin:0;font-size:15px;font-weight:500}
.paylock a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.paynote{margin:0;font-size:14px;line-height:1.3}
.shake{animation:payShake .42s ease-in-out}
@keyframes payShake{0%,100%{transform:translateX(0)}15%,55%{transform:translateX(-9px)}35%,75%{transform:translateX(9px)}}
/* A bright flash, then the black glow pulses and stays. The thin amber edge keeps it visible on a dark page. */
.pay.won{animation:payWon 1.2s ease-out both}
@keyframes payWon{
  0%{background:#FFF27A;box-shadow:0 0 0 0 #000}
  18%{background:#FFF27A;box-shadow:0 0 0 3px #000,0 0 20px 6px rgba(0,0,0,.6)}
  45%{background:var(--accent);box-shadow:0 0 0 7px #000,0 0 0 9px var(--accent),0 0 56px 22px rgba(0,0,0,.95)}
  70%{background:var(--accent);box-shadow:0 0 0 4px #000,0 0 0 6px var(--accent),0 0 26px 8px rgba(0,0,0,.65)}
  100%{background:var(--accent);box-shadow:0 0 0 6px #000,0 0 0 8px var(--accent),0 0 44px 16px rgba(0,0,0,.9)}
}
.kstats:empty{display:none}
.kstats{margin-top:14px;padding-top:14px;border-top:2px solid var(--accent-ink);display:flex;flex-direction:column;gap:10px}
.kstats-t{font-family:var(--display);font-size:18px;font-weight:800;margin:0}
.kstats-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px 14px;margin:0;font-variant-numeric:tabular-nums}
.kstats-g dt{font-size:13px;font-weight:500}
.kstats-g dd{margin:0;font-weight:800;font-size:18px}
.kstats-l{list-style:none;margin:0;padding:0;max-height:220px;overflow-y:auto;font-size:14px;font-variant-numeric:tabular-nums}
.kstats-l li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 12px;padding:6px 0;border-top:1px solid rgba(23,28,38,.28)}
.kstats-r{font-weight:700}

/* "Til toppen" in the choices section, in the look of the page's other outlined controls. */
.totop{font:inherit;font-weight:700;font-size:16px;min-height:44px;margin-top:16px;padding:0 18px;border-radius:12px;border:2px solid var(--accent);background:transparent;color:var(--band-fg);cursor:pointer}
.totop:hover{background:var(--accent);color:var(--accent-ink)}