/* White sculpted material, illuminated from the upper left. */
:root {
  --soft-raised: 10px 10px 20px rgba(131,141,155,.30), -9px -9px 20px #fff;
  --soft-inset: inset 5px 5px 10px rgba(130,140,153,.30), inset -5px -5px 10px #fff;
  --soft-button: 5px 5px 9px rgba(124,134,148,.34), -5px -5px 10px #fff, inset 1px 1px 2px #fff;
}
.runner-card,
.runner-card:hover {
  background: linear-gradient(135deg, #f4f5f6, #fff 72%);
  border-color: transparent;
  box-shadow: var(--soft-raised), inset 2px 2px 3px #fff, inset -2px -2px 4px rgba(156,165,179,.16);
  transform: none;
  transition: box-shadow 240ms ease;
}
.runner-card:active { box-shadow: var(--soft-inset); }
.stamp,
.runner-card:hover .stamp {
  transform: none;
  border: 0;
  padding: 9px;
  background: #f6f7f8;
  box-shadow: var(--soft-inset), 1px 1px 2px #fff;
  object-fit: contain;
}
.brand-icon,
.neo-cta,
.updates-link {
  background: linear-gradient(145deg, #fff, #f0f2f4);
  border-color: transparent;
  box-shadow: var(--soft-button);
  transition: box-shadow 200ms ease, color 200ms ease;
}
.brand-icon {
  background: linear-gradient(145deg, #ffffff, #eef1f4);
  box-shadow: 7px 7px 14px rgba(124,134,148,.34), -7px -7px 14px #fff,
    inset 2px 2px 3px #fff, inset -2px -2px 4px rgba(156,165,179,.18);
}
.neo-cta:hover,
.runner-card:hover .cta { box-shadow: var(--soft-inset); }
.neo-cta:active { box-shadow: inset 4px 4px 8px rgba(184,192,203,.33), inset -4px -4px 8px #fff; }
.chip,
.hub-fold,
.signup-thanks {
  background: #f7f8f9;
  box-shadow: var(--soft-inset);
}
.accent { box-shadow: inset 0 1px 2px rgba(0,0,0,.13); }
.updates-modal,
.legal-dropup {
  background: linear-gradient(135deg, #f4f5f6, #fff 70%);
  border: 1px solid transparent;
  box-shadow: 14px 14px 28px rgba(121,132,150,.33), -12px -12px 26px #fff, inset 2px 2px 3px #fff, inset -2px -2px 4px rgba(156,165,179,.18);
}
.updates-modal::backdrop { background: rgba(247,249,252,.86); backdrop-filter: none; }
.updates-form {
  background: #f7f8f9;
  border-radius: 22px;
  box-shadow: var(--soft-inset);
  isolation: isolate;
  overflow: hidden;
}
.intro .signup-confirmation {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(42ch, calc(100vw - 36px));
  max-width: 42ch;
  margin: 20px 0 0;
  padding: 14px 20px;
  border-radius: 16px;
  background: #f7f8f9;
  box-shadow: var(--soft-inset);
  color: #646b77;
  font-size: 13px;
  line-height: 1.55;
}
.signup-confirmation[hidden] { display: none; }
.signup-fallback { background: transparent; }
.signup-fallback strong { font-size: 20px; font-weight: 650; letter-spacing: -.5px; }
.updates-loading { border-radius: inherit; }
.legal-toggle.neo-cta {
  background: linear-gradient(145deg, #ffffff, #eef1f4);
  border: 0;
  box-shadow: 6px 6px 12px rgba(124,134,148,.34), -6px -6px 12px #fff,
    inset 1px 1px 2px #fff;
}
.legal-toggle.neo-cta:hover,
.legal-toggle.neo-cta[aria-expanded="true"] { box-shadow: var(--soft-inset); }
.chip { box-shadow: inset 2px 2px 4px rgba(130,140,153,.27), inset -2px -2px 4px #fff; }
.hub-fold { border: 1px solid #fff; }
.signup-fallback { padding-left: 22px; padding-right: 22px; }
.updates-form { width: 100%; min-width: 0; }
.updates-form iframe {
  display: block;
  width: 100% !important;
  min-width: 0;
  max-width: 100%;
  height: 340px;
  border: 0;
}
@keyframes arrive { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .runner-card, .neo-cta, .brand-icon { transition: none; }
}
@media (max-width: 520px) {
  .updates-modal {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
    padding: 70px 14px 18px;
    overflow: auto;
    border-radius: 26px;
  }
  .updates-skip { top: 14px; right: 14px; }
  .updates-note { margin: 0 auto 18px; padding: 0 34px; }
  .updates-form { width: 100%; min-width: 0; min-height: 300px; }
  .updates-form iframe { width: 100% !important; max-width: 100%; height: 300px; }
  .updates-form .signup-fallback {
    display: flex;
    z-index: 10;
    background: #f7f8f9;
    border-radius: inherit;
    padding: 34px 20px;
  }
  .updates-form iframe,
  .updates-form > div:not(.signup-fallback):not(.signup-thanks) { visibility: hidden; }
  .updates-coffee { margin-top: 18px; }
}