/* Full-screen welcome: original brand colors on white, with a black logo and entry control. */
.hpi {
  --hpi-m: clamp(14px, 2.4vmin, 32px);
  --hpi-btn: clamp(52px, 8.5vmin, 96px);
  position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2147483647; overflow: hidden;
  background: #fff; opacity: 1; transform: none;
  animation: hpi-in .6s ease both;
}
.hpi-stage { position: absolute; inset: 0; }
.hpi-enter {
  position: absolute; right: var(--hpi-m); bottom: var(--hpi-m); z-index: 2; width: var(--hpi-btn); height: var(--hpi-btn);
  display: grid; place-items: center; padding: 0; cursor: pointer; color: #fff; background: #000;
  border: 3px solid #000; border-radius: 6px;
  box-shadow: 0 5px 0 #d4d4d4, 0 0 0 1px #000;
  animation: hpi-pulse 2.4s ease-in-out 1s infinite;
}
.hpi-enter svg { width: 68%; height: 68%; display: block; }
.hpi-enter:hover { background: #181818; transform: translateY(2px); box-shadow: 0 3px 0 #d4d4d4, 0 0 0 1px #000; }
.hpi-enter:active { transform: translateY(5px); box-shadow: 0 0 0 #d4d4d4, 0 0 0 1px #000; }
.hpi-enter:focus-visible { outline: 3px solid #000; outline-offset: 4px; }
.hpi.is-leaving { opacity: 0; transform: scale(1.04); pointer-events: none; transition: opacity .55s ease, transform .55s ease; }
@keyframes hpi-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hpi-pulse { 0%, 100% { box-shadow: 0 5px 0 #d4d4d4, 0 0 0 1px #000, 0 0 0 0 rgba(0, 0, 0, 0); } 50% { box-shadow: 0 5px 0 #d4d4d4, 0 0 0 1px #000, 0 0 0 7px rgba(0, 0, 0, .16); } }
.hpi-logo {
  position: absolute; left: var(--hpi-m); top: var(--hpi-m); z-index: 1;
  width: clamp(220px, 34vw, 640px); height: auto; pointer-events: none; user-select: none; -webkit-user-drag: none;
  filter: brightness(0);
}
.hpi-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .hpi, .hpi-enter { animation: none; } .hpi.is-leaving { transition: opacity .01s; transform: none; } }

/* Only the decorative welcome field; the original logo and entry control keep their styles. */
.hpi .hpi-integrations {
  --hpi-card-size: clamp(52px, 10vmin, 96px);
  --hpi-card-gap: clamp(10px, 1.55vmin, 16px);
  position: absolute;
  inset: max(96px, 14vh) max(24px, 5vw) max(88px, 12vh);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--hpi-card-gap);
  pointer-events: none;
  user-select: none;
  color: #000;
}
.hpi .hpi-integration-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hpi-card-gap);
}
.hpi .hpi-integration-motion {
  flex: 0 0 auto;
  width: var(--hpi-card-size);
  height: var(--hpi-card-size);
  animation: hpi-integration-float var(--hpi-float-time) ease-in-out var(--hpi-float-delay) infinite;
}
.hpi .hpi-integration-card {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: clamp(9px, 1.4vmin, 13px);
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(0, 0, 0, .025), 0 8px 22px rgba(0, 0, 0, .06);
  animation: hpi-integration-enter .8s cubic-bezier(.2, .7, .2, 1) var(--hpi-card-delay) both;
}
.hpi .hpi-integration-card svg {
  display: block;
  width: 43%;
  height: 43%;
  overflow: visible;
}
.hpi .hpi-integration-card[data-hpi-app="Cal.com"] svg { width: 64%; }
.hpi .hpi-integration-card[data-hpi-app="Zoom"] { color: #fff; }
.hpi .hpi-integrations.is-paused .hpi-integration-motion,
.hpi .hpi-integrations.is-paused .hpi-integration-card { animation-play-state: paused; }
@keyframes hpi-integration-enter {
  from { opacity: 0; transform: translateY(20px) scale(.93); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes hpi-integration-float {
  0%, 100% { transform: translateY(-4px); }
  50% { transform: translateY(4px); }
}
@media (max-width: 767px) {
  .hpi .hpi-integrations {
    --hpi-card-size: clamp(32px, min(13vw, 8vh), 64px);
    --hpi-card-gap: clamp(10px, 2.6vw, 16px);
    inset: max(96px, 15vh) 24px max(96px, 14vh);
    align-content: center;
    flex-wrap: wrap;
    gap: var(--hpi-card-gap);
    max-width: calc(5 * var(--hpi-card-size) + 4 * var(--hpi-card-gap));
    margin-inline: auto;
  }
  .hpi .hpi-integration-column { display: contents; }
}
@media (max-height: 520px) and (max-width: 767px) {
  .hpi .hpi-integrations { --hpi-card-size: clamp(28px, 8vh, 40px); --hpi-card-gap: clamp(6px, 2vw, 10px); }
}
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  .hpi .hpi-integrations {
    --hpi-card-size: clamp(24px, min(9vh, 9vw), 48px);
    --hpi-card-gap: clamp(6px, 1vw, 8px);
    inset: 68px 16px 58px;
    flex-wrap: nowrap;
    max-width: none;
  }
  .hpi .hpi-integration-column { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .hpi .hpi-integration-motion,
  .hpi .hpi-integration-card { animation: none; }
}