/* Bezel buttons (2026-09-16). Bevelled faces on the primaries (red, the Apple and Google keys, the simulation pill);
   secondary buttons and Buy / Sell stay flat and only gain the raised shadow and the press - iOS draws them that way today. The site's buttons were flat fills with a soft drop shadow. This layer gives
   the main controls a raised, pressable face in the spirit of iOS keys: a slight vertical gradient on the face, a
   bright hairline along the top edge (the light catching the bezel), a darker hairline along the bottom, a thin
   ring a shade darker than the face, and a shadow that sits under the button rather than around it. Pressing
   drops the face by a pixel and pulls the shadow in. Shapes, sizes, colours and copy are unchanged: this file
   only adds depth. Remove the <link> to go back. */

/* ---- landing: Register, Log in, the simulation pill ---------------------------------------------------------- */
.btn{position:relative;background:#C8102E linear-gradient(180deg,#DE2B49 0%,#C8102E 58%,#B00D27 100%);border:1px solid rgba(110,0,18,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(0,0,0,.26),0 1px 0 rgba(0,0,0,.16),0 10px 22px rgba(200,16,46,.26);
  text-shadow:0 1px 0 rgba(0,0,0,.16);transition:transform .12s ease,box-shadow .12s ease,filter .12s ease}
.btn:hover{filter:brightness(1.04)}
.btn:active{transform:translateY(1px);box-shadow:inset 0 2px 4px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08),0 4px 10px rgba(200,16,46,.2);filter:none}
 /* secondary buttons stay flat, as iOS draws them today: a plain face raised by a shadow, no gradient, no bottom hairline */
.btn.ghost{background:var(--p1);color:var(--ink);border:1px solid rgba(27,20,16,.16);text-shadow:none;
  box-shadow:0 1px 0 rgba(27,20,16,.06),0 8px 18px rgba(27,20,16,.10)}
.btn.ghost:active{transform:translateY(1px);box-shadow:0 3px 8px rgba(27,20,16,.08)}
.dark .btn.ghost{background:#231E1A;color:#F4EDE2;border-color:rgba(255,255,255,.14);box-shadow:0 1px 0 rgba(0,0,0,.4),0 8px 20px rgba(0,0,0,.4)}
.dark .btn.ghost:active{box-shadow:0 3px 8px rgba(0,0,0,.4)}
/* the simulation pill: same treatment on the ink face */
.tryind{background:#1B1410 linear-gradient(180deg,#2A211D 0%,#1B1410 100%)!important;border:1px solid rgba(0,0,0,.55)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.5),0 1px 0 rgba(0,0,0,.4),0 10px 24px var(--shade)!important;transition:transform .12s ease,box-shadow .12s ease}
.tryhd:active .tryind{transform:translateY(1px);box-shadow:inset 0 2px 5px rgba(0,0,0,.55),0 4px 10px var(--shade)!important}
.dark .tryind{background:#F4EDE2 linear-gradient(180deg,#F8F2E6 0%,#E9E1D2 100%)!important;color:#1B1410!important;border-color:rgba(255,255,255,.35)!important;
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.12),0 1px 0 rgba(0,0,0,.35),0 10px 24px rgba(0,0,0,.45)!important}
.tryit.open .tryind{background:var(--p1)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 0 rgba(0,0,0,.08)!important}

/* ---- app: the card's primary button, Buy, Sell, the social buttons -------------------------------------------- */
.play,#aGo{background:#C8102E linear-gradient(180deg,#DE2B49 0%,#C8102E 58%,#B00D27 100%);border:1px solid rgba(110,0,18,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(0,0,0,.26),0 1px 0 rgba(0,0,0,.16),0 10px 22px rgba(200,16,46,.26)!important;
  text-shadow:0 1px 0 rgba(0,0,0,.16);transition:transform .12s ease,box-shadow .12s ease,filter .12s ease}
.play:active,#aGo:active{transform:translateY(1px);box-shadow:inset 0 2px 4px rgba(0,0,0,.28),0 4px 10px rgba(200,16,46,.2)!important}
.buy{box-shadow:0 1px 0 rgba(0,0,0,.12),0 8px 18px rgba(14,124,63,.24)!important;transition:transform .12s ease,box-shadow .12s ease}
.buy:active{transform:translateY(1px);box-shadow:0 3px 8px rgba(14,124,63,.2)!important}
.abtn.alt{border:1px solid rgba(27,20,16,.14)!important;box-shadow:0 1px 0 rgba(27,20,16,.06),0 6px 14px rgba(27,20,16,.08)}
.dark .abtn.alt{border-color:rgba(255,255,255,.12)!important;box-shadow:0 1px 0 rgba(0,0,0,.4),0 6px 16px rgba(0,0,0,.4)}
.social-apple{background:#000 linear-gradient(180deg,#2A2A2A 0%,#000 100%);border-color:#000;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.6),0 1px 0 rgba(0,0,0,.4),0 10px 22px rgba(0,0,0,.22)}
.dark .social-apple{background:#fff linear-gradient(180deg,#FFFFFF 0%,#EDE7DB 100%);border-color:#fff;
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.12),0 1px 0 rgba(0,0,0,.35),0 10px 22px rgba(255,255,255,.08)}
.social-google{background:#fff linear-gradient(180deg,#FFFFFF 0%,#F4EEE2 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(27,20,16,.08),0 1px 0 rgba(27,20,16,.12),0 8px 18px rgba(23,19,16,.08)}
.dark .social-google{background:#131314 linear-gradient(180deg,#1C1C1D 0%,#101011 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 1px 0 rgba(0,0,0,.5),0 8px 18px rgba(0,0,0,.4)}
.social-provider:active{transform:translateY(1px)!important;box-shadow:inset 0 2px 4px rgba(0,0,0,.25)!important}
@media(prefers-reduced-motion:reduce){.btn,.tryind,.play,#aGo,.buy,.social-provider{transition:none}}