/* ─── Tokens — Coming Soon design system (colors, typography, spacing, borders, motion) ─── */
:root {
  /* colors: base */
  --ink-0: #000000;
  --ink-1: #0A0A0A;
  --paper-1: #F5F5F3;
  --paper-2: #8A8A86;
  --line-1: #2A2A28;
  --line-2: #3D3D3A;
  --line-3: #5A5A56;
  --signal-error: #C8534B;

  /* colors: semantic */
  --surface-page: var(--ink-0);
  --surface-raised: var(--ink-1);
  --surface-input: transparent;
  --text-primary: var(--paper-1);
  --text-secondary: var(--paper-2);
  --text-inverse: var(--ink-0);
  --border-quiet: var(--line-1);
  --border-hover: var(--line-2);
  --border-focus: var(--paper-1);
  --cta-bg: var(--paper-1);
  --cta-bg-hover: #FFFFFF;
  --cta-text: var(--ink-0);
  --text-error: var(--signal-error);
  --focus-ring: var(--paper-1);

  /* typography */
  --font-core: "IBM Plex Mono", "Plex Mono Fallback", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-shout: var(--font-core);
  --weight-regular: 300;
  --weight-medium: 400;
  --weight-semibold: 500;
  --label-size: 12px;
  --label-size-lg: 14px;
  --label-weight: var(--weight-medium);
  --label-tracking: 0.06em;
  --body-size: 15px;
  --body-leading: 1.55;

  /* spacing */
  --control-height: 54px;
  --control-pad-x: 16px;

  /* borders */
  --radius-hair: 2px;

  /* motion */
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 200ms;
  --duration-slow: 900ms;
}

/* Yeezy's type: IBM Plex Mono, thin and mechanical. While it loads, the
   system mono stands in so nothing jumps from proportional to monospaced. */
@font-face {
  font-family: "Plex Mono Fallback";
  src: local("SF Mono"), local("Menlo"), local("Consolas"), local("Courier New");
  font-weight: 200 600;
  font-display: swap;
}

/* ─── Base ─── */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html, body { margin: 0; padding: 0; background: #000000; }
body {
  color: var(--text-primary);
  font-family: var(--font-core);
  font-size: var(--body-size);
  line-height: var(--body-leading);
}
::selection { background: var(--paper-1); color: var(--ink-0); }
[hidden] { display: none !important; }
.b86-page a { color: var(--text-secondary); text-decoration: none; transition: color var(--duration-fast) var(--ease-premium); }
.b86-page a:hover { color: var(--text-primary); opacity: .6; }
.b86-page :focus-visible { outline: 1px solid var(--focus-ring); outline-offset: 3px; }

/* ─── Keyframes ─── */
@keyframes b86-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes b86-gemroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-100%, 0, 0); } }
@keyframes b86-pulse {
  0% { transform: scale(1); }
  14% { transform: scale(1.07); }
  28% { transform: scale(1.015); }
  42% { transform: scale(1.045); }
  58%, 100% { transform: scale(1); }
}
@keyframes b86-drop {
  0% { opacity: 0; transform: translateY(-60vh) rotate(-14deg); }
  70% { opacity: 1; transform: translateY(0) rotate(2deg); }
  85% { transform: translateY(-6px) rotate(-1deg); }
  100% { opacity: 1; transform: translateY(0) rotate(0deg); }
}

/* ─── Page shell ─── */
.b86-page {
  position: relative;
  /* no double-tap zoom: taps stay taps */
  touch-action: manipulation;
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-core);
  display: flex;
  flex-direction: column;
  padding: 14px clamp(22px, 4vw, 40px) 10px;
}

/* ─── Background video ─── */
.b86-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* No native chrome on the background videos, whatever their state. */
.b86-bg-video::-webkit-media-controls,
.b86-bg-video::-webkit-media-controls-enclosure,
.b86-bg-video::-webkit-media-controls-panel,
.b86-bg-video::-webkit-media-controls-play-button,
.b86-bg-video::-webkit-media-controls-overlay-play-button,
.b86-bg-video::-webkit-media-controls-start-playback-button,
.b86-reward-video::-webkit-media-controls,
.b86-reward-video::-webkit-media-controls-enclosure,
.b86-reward-video::-webkit-media-controls-panel,
.b86-reward-video::-webkit-media-controls-play-button,
.b86-reward-video::-webkit-media-controls-overlay-play-button,
.b86-reward-video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}
.b86-bg-shade {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 24%, rgba(0,0,0,0.06) 32%, rgba(0,0,0,0.06) 42%, rgba(0,0,0,0.5) 52%, rgba(0,0,0,0.66) 70%, rgba(0,0,0,0.78) 100%);
}
.b86-bg-video {
  z-index: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 25%;
  height: 25%;
  object-fit: cover;
  transform-origin: 0 0;
  transform: scale(4.32) translate(-1%, -1%);
  filter: blur(1.5px);
}

/* The still frame sits on top of the video and only steps aside once the video
   is really moving. Whenever the browser refuses to play (iOS Low Power Mode),
   the still covers Safari's grey play button until the image fallback in app.js
   takes over. */
.b86-bg-still { transition: opacity 400ms var(--ease-premium); }
.b86-bg.b86-moving .b86-bg-still { opacity: 0; }
/* a video replaced by its <img> twin */
.b86-video-off { display: none !important; }

/* ─── Header ─── */
.b86-header {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  font-size: var(--label-size);
  font-weight: var(--weight-regular);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  animation: b86-enter var(--duration-slow) var(--ease-premium) 0ms both;
}
.b86-logo {
  display: block;
  width: min(400px, 62vw);
  max-height: 12vh;
  object-fit: contain;
  height: auto;
  filter: brightness(0) invert(1);
  animation: b86-enter var(--duration-slow) var(--ease-premium) 220ms both;
}

/* ─── Main ─── */
.b86-main {
  position: relative;
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
}
.b86-ice {
  position: relative;
  width: clamp(92px, 12vw, 140px);
  margin: 0 auto clamp(4px, 0.8vh, 10px);
  animation: b86-enter var(--duration-slow) var(--ease-premium) 480ms both;
}
.b86-ice img {
  display: block;
  width: 100%;
  height: auto;
  /* No CSS filter here: the brightness is baked into the PNG, because Safari
     draws a faint box around transparent images that carry filter effects. */
  filter: none;
}

/* ─── Form ─── */
#b86-form {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin-top: clamp(4px, 1vh, 12px);
  animation: b86-enter var(--duration-slow) var(--ease-premium) 660ms both;
}
#b86-form form { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; margin: 0; }
.b86-row { display: flex; align-items: stretch; gap: 10px; }

.b86-field,
.b86-picker-toggle {
  height: var(--control-height);
  font-family: var(--font-core);
  box-sizing: border-box;
  background: transparent;
  border: 0.5px solid var(--border-focus);
  border-radius: var(--radius-hair);
  color: #FFFFFF;
  font-family: var(--font-core);
  font-size: var(--label-size);
  font-weight: var(--weight-regular);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  transition: border-color var(--duration-fast) var(--ease-premium);
}
.b86-field { width: 100%; padding: 0 var(--control-pad-x); outline: none; }
/* The message box: same frame as the fields, just taller and with room to breathe. */
.b86-message {
  height: auto;
  min-height: clamp(130px, 22vh, 190px);
  padding: 16px var(--control-pad-x);
  line-height: 1.7;
  resize: vertical;
}
.b86-phone { flex: 1 1 auto; min-width: 0; width: auto; }

#b86-form .b86-field:hover,
.b86-picker-toggle:hover { border-color: var(--border-hover); }
#b86-form .b86-field:focus,
.b86-picker-toggle:focus-visible { outline: none; border-color: var(--border-focus); }
/* Placeholders are hints, not content: a notch smaller than the typed text and
   half transparent, so the two fields stay discreet before anyone types. */
#b86-form .b86-field::placeholder {
  color: rgba(255, 255, 255, 0.52);
  opacity: 1;            /* Firefox dims placeholders on its own */
  font-size: 11px;
  letter-spacing: 0.1em;
}

.b86-error {
  margin: 0;
  font-family: var(--font-core);
  font-size: 10.5px;
  font-weight: var(--weight-regular);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--text-error);
}

/* iOS zooms into any field whose text is smaller than 16px as soon as it gets
   focus, and never zooms back out on its own. On touch screens the fields carry
   exactly that threshold size so the keyboard opens without moving the page;
   the mouse/desktop layout keeps the 12px of the design. */
@media (pointer: coarse) {
  /* Only the text inputs need the threshold, and only for the text being typed:
     Safari sizes its zoom on the input, never on ::placeholder, which keeps its
     own smaller size above. Buttons never trigger the zoom. */
  .b86-field { font-size: 16px; letter-spacing: 0.04em; }
}

/* Country dial picker */
.b86-picker { position: relative; flex: 0 0 92px; }
.b86-picker-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 0 14px;
  cursor: pointer;
}
.b86-picker-chevron {
  width: 5px;
  height: 5px;
  border-right: 1px solid var(--text-primary);
  border-bottom: 1px solid var(--text-primary);
  transform: translateY(-2px) rotate(45deg);
}
.b86-picker-menu {
  position: absolute;
  z-index: 20;
  left: 0;
  bottom: calc(100% + 6px);
  width: 264px;
  max-height: min(320px, calc(100vh - 340px));
  max-height: min(320px, calc(100svh - 340px));
  overflow-y: auto;
  background: var(--surface-page);
  border: 1px solid var(--border-quiet);
  border-radius: var(--radius-hair);
}
.b86-picker-menu::-webkit-scrollbar { width: 3px; }
.b86-picker-menu::-webkit-scrollbar-thumb { background: var(--border-hover); }
.b86-picker-group-label {
  position: sticky;
  top: 0;
  padding: 12px 14px 8px;
  background: var(--surface-page);
  font-family: var(--font-core);
  font-size: 10px;
  font-weight: var(--label-weight);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-quiet);
}
.b86-picker-option {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-core);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-primary);
  transition: background var(--duration-fast) var(--ease-premium);
}
.b86-picker-option:hover { background: rgba(245, 245, 243, 0.06); }
.b86-picker-option > span:last-child { color: var(--text-secondary); }

/* Submit */
.b86-submit {
  height: var(--control-height);
  background: #F5F5F3;
  border: 0;
  border-radius: var(--radius-hair);
  color: #000000;
  font-family: var(--font-core);
  font-size: 10px;
  font-weight: var(--weight-regular);
  letter-spacing: 0.18em;
  line-height: 1.3;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-premium);
}
.b86-submit:hover { background: #FFFFFF; }
/* the label is long: ease the tracking on narrow phones so it never clips */
@media (max-width: 400px) {
  .b86-submit { font-size: 9px; letter-spacing: 0.12em; }
}

/* Consent */
.b86-consent {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 12px;
  cursor: pointer;
  font-family: var(--font-core);
  font-size: 10.5px;
  line-height: 1.6;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--text-primary);
}
.b86-consent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin: 3px 0 0;
  border: 0.5px solid var(--border-focus);
  border-radius: var(--radius-hair);
  background: transparent;
  cursor: pointer;
}
.b86-consent input[type="checkbox"]:checked { background: var(--paper-1); border-color: var(--paper-1); }
.b86-consent input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 3.5px;
  top: 0.5px;
  width: 3px;
  height: 6px;
  border-right: 1.5px solid var(--surface-page);
  border-bottom: 1.5px solid var(--surface-page);
  transform: rotate(42deg);
}

/* ─── Reward screen (after a valid sign-up) ─── */
/* The native Webflow form only exists to carry submissions to the dashboard and
   to the notification email; our own form is the visible one. */
.w-form {
  position: absolute !important;
  left: -9999px !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.b86-reward { position: fixed; z-index: 40; inset: 0; background: #000000; }
/* Small brand mark at the top of the reward screen, so it still reads as BHÉTÉ86. */
.b86-reward-logo {
  position: absolute;
  z-index: 3;
  top: clamp(16px, 3.2vh, 32px);
  left: 50%;
  transform: translateX(-50%);
  width: min(150px, 34vw);
  height: auto;
  filter: brightness(0) invert(1);
  pointer-events: none;
}
.b86-reward-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 88%;
}
.b86-reward-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 40%, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.9) 26%, rgba(0,0,0,0.55) 48%, rgba(0,0,0,0.66) 100%);
}
.b86-reward-stack {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3.4vh, 36px);
  padding: 0 clamp(22px, 4vw, 40px) clamp(96px, 19vh, 190px);
}

.b86-gem {
  width: clamp(200px, 30vw, 360px);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  mix-blend-mode: screen;
  transition: transform 120ms var(--ease-premium), filter 120ms var(--ease-premium);
  animation: b86-drop 1400ms var(--ease-premium) both;
}
.b86-gem[disabled] { cursor: default; }
.b86-gem-pulse { display: block; width: 100%; animation: b86-pulse 1600ms var(--ease-premium) 1400ms infinite; }
.b86-gem-frame { display: block; position: relative; width: 100%; aspect-ratio: 700 / 394; overflow: hidden; }
.b86-gem-frame img {
  position: absolute;
  top: 0;
  left: 0;
  width: 3000%;
  max-width: none;   /* Webflow's base CSS sets img{max-width:100%}, which would
                        squash all 30 frames into one box */
  height: 100%;
  animation: b86-gemroll 1200ms steps(30, end) infinite;
  will-change: transform;
  backface-visibility: hidden;
}
.b86-gem.is-spinning .b86-gem-frame img { animation-duration: 300ms; }

.b86-state { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.b86-state[data-state="waiting"] { animation: b86-enter var(--duration-slow) var(--ease-premium) 0ms both; }
.b86-state[data-state="expired"] { animation: b86-enter 500ms var(--ease-premium) both; }
.b86-state[data-state="revealed"] { gap: 14px; animation: b86-enter 500ms var(--ease-premium) both; }

.b86-shout {
  margin: 0;
  font-family: var(--font-shout);
  font-weight: var(--weight-regular);
  font-size: clamp(20px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-align: center;
  color: #FFFFFF;
  text-shadow: 3px 3px 0 #000000, -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000;
}
.b86-clock { font-size: clamp(26px, 4.4vw, 52px); line-height: 1; font-variant-numeric: tabular-nums; }
.b86-code { font-size: clamp(22px, 4.4vw, 48px); line-height: 1; }
.b86-note {
  margin: 0;
  font-family: var(--font-core);
  font-weight: var(--weight-regular);
  font-size: clamp(11px, 1.3vw, 14px);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--text-primary);
}
.b86-note--wide { max-width: 34ch; line-height: 1.8; text-align: center; }
.b86-note--lead { max-width: 50ch; line-height: 1.7; text-align: center; text-wrap: balance; }
.b86-outro {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 4vh, 44px);
  transform: translateX(-50%);
  width: min(96vw, 680px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.b86-note--bottom {
  /* one line, always: the size follows the viewport so it never wraps */
  white-space: nowrap;
  font-size: min(2vw, 11px);
  line-height: 1.7;
  text-align: center;
  max-width: 100%;
}
/* Closing line: back to the core mono, the page's own type, so it reads as a sign-off
   rather than as part of the block above. */
.b86-note--sign {
  margin-top: 4px;
  font-family: var(--font-core);
  font-size: min(1.8vw, 9.5px);
  letter-spacing: 0.16em;
  line-height: 1.6;
  color: rgba(245, 245, 243, 0.72);
}
.b86-back {
  margin-top: 6px;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-core);
  font-weight: var(--weight-regular);
  font-size: clamp(11px, 1.3vw, 14px);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: #FFFFFF;
}
.b86-close {
  position: absolute;
  z-index: 2;
  top: clamp(14px, 3vh, 30px);
  right: clamp(16px, 3vw, 34px);
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-core);
  font-weight: var(--weight-regular);
  font-size: 22px;
  line-height: 1;
  color: #FFFFFF;
}

/* ─── Footer ─── */
.b86-footer {
  position: relative;
  display: flex;
  justify-content: center;
  padding-bottom: 0;
  animation: b86-enter var(--duration-slow) var(--ease-premium) 770ms both;
}
/* `.b86-page a` is more specific than `.b86-tiktok`, so it has to be matched
   here, otherwise the icon inherits the grey link colour. */
.b86-page a.b86-tiktok,
.b86-page a.b86-tiktok:hover {
  display: flex;
  color: #FFFFFF;
  opacity: 1;
}

/* Language switch, bottom right of the footer */
.b86-lang {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}
.b86-lang-btn {
  padding: 2px 1px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-core);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 245, 243, 0.45);
  transition: color var(--duration-fast) var(--ease-premium);
}
.b86-lang-btn:hover { color: rgba(245, 245, 243, 0.8); }
.b86-lang-btn[aria-current="true"] {
  color: #FFFFFF;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.55);
}
.b86-lang-sep {
  width: 1px;
  height: 9px;
  background: rgba(245, 245, 243, 0.25);
}
/* On a narrow screen the centred logo reaches the corner, so the header keeps a
   band free above it for the language switch. */
/* ─── Desktop, iPad and up ───
   The hands become a framed medallion instead of filling the screen, and the
   type steps down so the composition reads as one block, not a poster. */
@media (min-width: 768px) {
  /* The hands sit in the empty band between the code block and the closing
     lines: a small soft-edged medallion, never a full-bleed background. */
  .b86-reward-video {
    inset: auto;
    left: 50%;
    top: 76.5%;
    width: min(30vh, 300px);
    height: min(30vh, 300px);
    transform: translate(-50%, -50%);
    /* the clasped hands sit low in the 720x1280 source: this centres them in
       the square crop */
    object-position: 50% 96%;
    filter: brightness(0.86) saturate(0.92);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 40%, rgba(0, 0, 0, 0) 70%);
    mask-image: radial-gradient(circle at 50% 50%, #000 40%, rgba(0, 0, 0, 0) 70%);
  }
  .b86-reward-veil {
    background: linear-gradient(to bottom, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.5) 52%, rgba(0,0,0,0.46) 76%, rgba(0,0,0,0.82) 93%, rgba(0,0,0,0.92) 100%);
  }
  .b86-reward-logo { width: 132px; top: clamp(18px, 3vh, 30px); }
  .b86-reward-stack {
    gap: clamp(12px, 2vh, 24px);
    padding-bottom: clamp(70px, 13vh, 140px);
  }
  /* Bigger and closer to the sprite's native 260px frame, so the stone stays
     sharp. The roll itself is untouched: same keyframes and same timings as on
     the phone. */
  .b86-gem { width: clamp(210px, 19vw, 272px); }
  /* Mouse-only polish: the stone lifts and catches more light under the
     cursor. The roll is driven by .b86-gem-frame img, which is left alone. */
  .b86-gem:not([disabled]) .b86-gem-frame {
    transition: transform 180ms var(--ease-premium), filter 180ms var(--ease-premium);
  }
  .b86-gem:not([disabled]):hover .b86-gem-frame {
    transform: scale(1.05);
    filter: brightness(1.12) contrast(1.04);
  }
  .b86-shout { font-size: clamp(22px, 2.3vw, 30px); }
  .b86-clock { font-size: clamp(26px, 2.8vw, 36px); }
  .b86-code { font-size: clamp(24px, 2.6vw, 34px); }
  .b86-note { font-size: 12px; }
  .b86-note--lead { max-width: 46ch; line-height: 1.75; }
  .b86-note--bottom { font-size: 10px; }
  .b86-note--sign { font-size: 9px; }
  .b86-back { font-size: 12px; }
  .b86-logo { width: min(340px, 34vw); }
  .b86-ice { width: clamp(96px, 9vw, 120px); }
}
@media (max-width: 520px) {
  .b86-header { padding-top: 18px; }
  .b86-lang { gap: 7px; }
  .b86-lang-btn { font-size: 11px; letter-spacing: 0.16em; }
}

/* Reduced motion: collapse durations rather than killing animations, which would
   freeze the gem sprite on a single frame and hide the entrance states. */
@media (prefers-reduced-motion: reduce) {
  .b86-header, .b86-logo, .b86-ice, #b86-form, .b86-footer, .b86-state, .b86-gem {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
  .b86-gem-pulse { animation: none !important; }
  * { transition-duration: 1ms !important; }
}

/* Contact page: the social icons and the address keep their own colour against
   `.b86-page a`, which is more specific than a bare class. */
.b86-page .b86-contact-icons a {
  color: #FFFFFF;
  opacity: 1;
  /* the video behind can be bright: the mark keeps its own edge */
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
}
.b86-page .b86-contact-icons a:hover { opacity: 0.6; }
.b86-page a.b86-contact-mail { color: #FFFFFF; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75); }
.b86-page a.b86-contact-mail:hover { color: #FFFFFF; opacity: 1; }

/* ─── One voice ───
   IBM Plex Mono already spaces every glyph on the same grid: the tracking the
   site carried over from its old proportional face only pulls words apart.
   Everything reads at the font's own rhythm, as on yeezy.com. */
body *:not(text) { letter-spacing: 0 !important; }