/* 1.50.5 — focused landing/bots presentation overrides. No API/DB behavior lives here. */
.site-brand-mark,
.mock-logo{
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
}
.site-brand-mark{overflow:visible}
.site-brand-mark img{width:38px;height:38px;filter:drop-shadow(0 8px 18px rgba(124,70,243,.22))}
.mock-logo img{width:31px;height:31px;filter:drop-shadow(0 6px 14px rgba(124,70,243,.22))}
.mock-home-icon{display:grid!important;place-items:center;background:color-mix(in srgb,#7c46f3 18%,var(--mock-panel))!important;color:#8f63ff!important}
.mock-home-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.mock-top{align-items:center}
.mock-chat-button{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--mock-line);background:var(--mock-panel-2);color:var(--mock-text);border-radius:8px;padding:5px 9px;font:inherit;font-size:9px;font-weight:800;pointer-events:none}
.mock-chat-button svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mock-channel.active{gap:6px}
.mock-channel-stream-users{display:inline-flex;margin-left:auto;padding-left:4px;min-width:30px}
.mock-channel-stream-users i{width:16px;height:16px;margin-left:-5px;border:2px solid var(--mock-sidebar);border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,#7c46f3 22%,var(--mock-panel));color:var(--mock-text);font-size:6px;font-style:normal;font-weight:900}
.mock-channel.active>em{margin-left:2px}

#pcordBlock330SiteHeroStreamDemo{position:relative;overflow:hidden}
.mock-stream.main{position:relative;isolation:isolate;padding:0!important;overflow:hidden;background:#080a10!important}
.mock-stream.main video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;opacity:.9;filter:saturate(.93) contrast(1.03)}
.mock-stream.main::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent 58%,rgba(4,6,11,.38))}
.mock-live-badge{z-index:2!important}
.mock-stream.person{position:relative;transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease}
.mock-stream.person::after{content:"";position:absolute;inset:-1px;border:2px solid transparent;border-radius:inherit;pointer-events:none;opacity:0}
.mock-stream.person{animation:mockSpeakerA 8.8s ease-in-out infinite}
.mock-stream.person.second{animation:mockSpeakerB 8.8s ease-in-out infinite}
@keyframes mockSpeakerA{0%,12%,38%,100%{box-shadow:none;transform:none}17%,30%{box-shadow:0 0 0 2px rgba(45,211,111,.78),0 0 20px rgba(45,211,111,.18);transform:translateY(-1px)}}
@keyframes mockSpeakerB{0%,48%,78%,100%{box-shadow:none;transform:none}54%,70%{box-shadow:0 0 0 2px rgba(45,211,111,.78),0 0 20px rgba(45,211,111,.18);transform:translateY(-1px)}}

.site-marquee{width:min(calc(100% - 36px),var(--site-max));margin:10px auto 0;border:1px solid var(--site-line);border-radius:18px;overflow:hidden;background:linear-gradient(100deg,color-mix(in srgb,var(--site-surface-solid) 84%,transparent),color-mix(in srgb,#7c46f3 7%,var(--site-surface-solid)));box-shadow:0 12px 40px rgba(0,0,0,.08)}
.site-marquee::before,.site-marquee::after{content:"";position:absolute;top:0;bottom:0;width:60px;z-index:2;pointer-events:none}
.site-marquee{position:relative}
.site-marquee::before{left:0;background:linear-gradient(90deg,var(--site-bg),transparent)}
.site-marquee::after{right:0;background:linear-gradient(-90deg,var(--site-bg),transparent)}
.site-marquee-track{min-height:54px;display:flex;align-items:center;justify-content:center;gap:14px;padding:0 30px;white-space:nowrap;overflow:hidden}
.site-marquee-track>span{display:inline-flex;align-items:center;gap:7px;color:var(--site-text);font-size:10px;font-weight:900;letter-spacing:.08em}
.site-marquee-track>span svg{width:14px;height:14px;fill:none;stroke:var(--site-primary-2);stroke-width:1.8}
.site-marquee-track>i{width:4px;height:4px;border-radius:50%;background:var(--site-primary-2);opacity:.48;flex:0 0 auto}

.feature-grid{min-width:0}
.feature-card{min-width:0;max-width:100%}
.feature-card.feature-wide{grid-template-columns:minmax(0,1fr) minmax(260px,.78fr);align-items:center;width:100%;max-width:100%;box-sizing:border-box;overflow:hidden}
.feature-card.feature-wide>.feature-copy{min-width:0}
.server-stack{position:relative;min-width:0;width:min(100%,390px);height:190px;margin-left:auto;perspective:900px;overflow:visible}
.server-stack span{position:absolute;left:0;right:0;top:50%;display:flex!important;align-items:center;gap:12px;min-width:0;margin:0!important;transform-origin:center;will-change:transform,opacity;animation:serverRoulette 10.8s cubic-bezier(.18,.72,.24,1) infinite;animation-delay:calc(var(--wheel-order) * -3.6s);box-shadow:0 18px 50px rgba(0,0,0,.14)}
.server-stack span:nth-child(2),.server-stack span:nth-child(3){transform:none}
.server-stack span b{flex:0 0 auto}
.server-stack span em{display:inline-block;max-width:calc(var(--type-chars) * 1ch);overflow:hidden;white-space:nowrap;font-style:normal;border-right:1px solid currentColor;animation:serverTyping 10.8s steps(var(--type-chars),end) infinite;animation-delay:calc(var(--wheel-order) * -3.6s)}
@keyframes serverRoulette{0%{transform:translateY(-50%) translateZ(0) scale(1);opacity:1;z-index:3}24%{transform:translateY(-50%) translateZ(0) scale(1);opacity:1}33%{transform:translateY(-118%) translateZ(-60px) scale(.91);opacity:.58}58%{transform:translateY(-118%) translateZ(-60px) scale(.91);opacity:.58}66%{transform:translateY(20%) translateZ(-90px) scale(.84);opacity:.24}91%{transform:translateY(20%) translateZ(-90px) scale(.84);opacity:.24}100%{transform:translateY(-50%) translateZ(0) scale(1);opacity:1}}
@keyframes serverTyping{0%,7%{max-width:0;border-right-color:currentColor}18%,72%{max-width:calc(var(--type-chars) * 1ch);border-right-color:transparent}82%,100%{max-width:calc(var(--type-chars) * 1ch);border-right-color:transparent}}

#pcordBlock329SiteDiscordVisual{transform-style:preserve-3d;will-change:translate}
#pcordBlock329SiteDiscordVisual .switch-card{will-change:translate;transition:box-shadow .35s ease,border-color .35s ease}
#pcordBlock329SiteDiscordVisual:hover .switch-card.cyber{box-shadow:0 26px 80px rgba(124,70,243,.2)}

.feature-video-frame{position:relative;overflow:hidden;background:#090c13!important}
.feature-video-frame video{display:block;width:100%;height:100%;aspect-ratio:16/9;object-fit:cover;object-position:center;filter:saturate(.94) contrast(1.03)}
.feature-video-frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 68%,rgba(5,7,12,.32))}
.feature-video-badge{position:absolute;left:12px;bottom:12px;z-index:2;padding:6px 8px;border-radius:7px;background:rgba(7,10,16,.74);backdrop-filter:blur(10px);color:#fff;font-size:8px;font-weight:900;letter-spacing:.08em}

.bots-teaser{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.72fr);gap:54px;align-items:center;border-top:1px solid var(--site-line);border-bottom:1px solid var(--site-line)}
.bots-teaser-copy h2{max-width:760px;font-size:clamp(38px,4.6vw,68px);line-height:.98;margin:12px 0 20px}
.bots-teaser-copy p{max-width:720px;color:var(--site-muted);line-height:1.72}
.bots-teaser-actions{display:flex;align-items:center;gap:20px;margin-top:28px;flex-wrap:wrap}
.bots-teaser-visual{position:relative;min-height:330px}
.bot-terminal{position:absolute;inset:28px 18px auto 0;border:1px solid var(--site-line-strong);border-radius:20px;background:color-mix(in srgb,var(--site-surface-solid) 92%,transparent);box-shadow:0 30px 70px rgba(0,0,0,.18);padding:18px;transform:rotate(-2deg)}
.bot-terminal>span{display:flex;gap:5px;margin-bottom:28px}.bot-terminal>span i{width:7px;height:7px;border-radius:50%;background:var(--site-line-strong)}
.bot-terminal code{display:block;color:var(--site-primary-2);font:700 12px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace}.bot-terminal strong{display:block;margin-top:12px;font:700 11px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;color:#43d17d}
.bot-event-card{position:absolute;right:0;bottom:46px;width:210px;padding:16px;border:1px solid var(--site-line-strong);border-radius:16px;background:var(--site-surface-solid);box-shadow:0 20px 45px rgba(0,0,0,.16)}
.bot-event-card.second{right:76px;bottom:0;transform:scale(.88);opacity:.72}.bot-event-card small,.bot-event-card b,.bot-event-card span{display:block}.bot-event-card small{color:var(--site-primary-2);font-size:8px;font-weight:900;letter-spacing:.12em}.bot-event-card b{margin-top:7px;font-size:12px}.bot-event-card span{margin-top:5px;color:var(--site-muted);font-size:9px}

/* Bots documentation page */
.bots-page main{position:relative;z-index:1}
.bots-hero{width:min(calc(100% - 36px),var(--site-max));margin:0 auto;min-height:660px;padding:110px 0 86px;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.72fr);gap:70px;align-items:center}
.bots-hero h1{font-size:clamp(52px,6.4vw,92px);line-height:.92;letter-spacing:-.055em;margin:14px 0 24px;max-width:820px}.bots-hero p{max-width:720px;color:var(--site-muted);font-size:15px;line-height:1.75}
.bots-code-window{overflow:hidden;border:1px solid var(--site-line-strong);border-radius:22px;background:color-mix(in srgb,var(--site-surface-solid) 94%,transparent);box-shadow:0 34px 90px rgba(0,0,0,.2)}
.bots-code-window>div{display:flex;align-items:center;gap:6px;padding:13px 16px;border-bottom:1px solid var(--site-line)}.bots-code-window>div span{width:8px;height:8px;border-radius:50%;background:var(--site-line-strong)}.bots-code-window>div b{margin-left:auto;color:var(--site-muted);font-size:9px;letter-spacing:.1em}.bots-code-window pre{margin:0;padding:28px;overflow:auto}.bots-code-window code{font:600 12px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--site-text)}.bots-code-window footer{display:flex;align-items:center;gap:7px;padding:13px 16px;border-top:1px solid var(--site-line);color:var(--site-muted);font-size:9px}.bots-code-window footer i{width:7px;height:7px;border-radius:50%;background:#43d17d;box-shadow:0 0 0 4px rgba(67,209,125,.12)}
.bots-doc-section{border-top:1px solid var(--site-line)}
.bots-capability-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.bots-capability-grid article{min-width:0;padding:24px;border:1px solid var(--site-line);border-radius:18px;background:color-mix(in srgb,var(--site-surface-solid) 75%,transparent)}.bots-capability-grid b{font-size:14px}.bots-capability-grid p{color:var(--site-muted);font-size:11px;line-height:1.7}
.bots-steps ol{counter-reset:botstep;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}.bots-steps li{counter-increment:botstep;padding:22px;border-top:1px solid var(--site-line-strong);background:linear-gradient(180deg,color-mix(in srgb,var(--site-primary) 5%,transparent),transparent)}.bots-steps li::before{content:"0" counter(botstep);display:block;margin-bottom:34px;color:var(--site-primary-2);font-size:10px;font-weight:900}.bots-steps li b{font-size:13px}.bots-steps li p{color:var(--site-muted);font-size:10px;line-height:1.65}
.bots-webhooks{display:grid;grid-template-columns:1fr .9fr;gap:60px;align-items:center}.bots-webhooks h2{font-size:clamp(38px,4.6vw,66px);line-height:1;margin:12px 0 18px}.bots-webhooks p{color:var(--site-muted);line-height:1.7}.bots-webhook-flow{display:flex;align-items:center;justify-content:center;gap:12px;min-height:260px;border:1px solid var(--site-line);border-radius:24px;background:radial-gradient(circle at 50% 50%,rgba(124,70,243,.12),transparent 62%)}.bots-webhook-flow span{padding:13px 16px;border:1px solid var(--site-line-strong);border-radius:12px;background:var(--site-surface-solid);font-size:10px;font-weight:900}.bots-webhook-flow i{color:var(--site-primary-2);font-style:normal}
.bots-security{padding-bottom:120px}.bots-security code{padding:.15em .4em;border-radius:5px;background:var(--site-surface-solid);color:var(--site-primary-2)}.bots-security-note{max-width:920px;margin:0 auto 32px;padding:20px 22px;border:1px solid color-mix(in srgb,#f0a743 38%,var(--site-line));border-radius:16px;background:color-mix(in srgb,#f0a743 7%,var(--site-surface-solid));display:grid;grid-template-columns:auto 1fr;gap:18px}.bots-security-note b{font-size:11px}.bots-security-note span{color:var(--site-muted);font-size:10px;line-height:1.65}

@media(max-width:1080px){
  .feature-card.feature-wide{grid-template-columns:minmax(0,1fr) minmax(230px,.72fr)}
  .bots-teaser,.bots-hero,.bots-webhooks{grid-template-columns:1fr}.bots-teaser-visual{min-height:300px}.bots-code-window{max-width:760px}.bots-capability-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bots-steps ol{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .site-brand-mark img{width:32px;height:32px}.mock-logo img{width:27px;height:27px}
  .site-marquee{width:calc(100% - 26px)}.site-marquee-track{justify-content:flex-start;overflow-x:auto;scrollbar-width:none;padding-inline:18px}.site-marquee-track::-webkit-scrollbar{display:none}.site-marquee::before,.site-marquee::after{width:22px}
  .feature-card.feature-wide{display:grid!important;grid-template-columns:1fr!important}.server-stack{width:100%;height:170px;margin:18px 0 0}.server-stack span:nth-child(2),.server-stack span:nth-child(3){transform:none}
  .bots-teaser{display:grid!important;gap:28px}.bots-teaser-actions{align-items:flex-start}.bots-teaser-actions .site-button{width:auto}.bots-teaser-visual{min-height:260px}.bot-event-card{width:170px}
  .bots-hero{width:calc(100% - 26px);min-height:auto;padding:76px 0 60px;gap:34px}.bots-hero h1{font-size:clamp(44px,13vw,64px)}.bots-code-window pre{padding:20px}.bots-capability-grid,.bots-steps ol{grid-template-columns:1fr}.bots-webhook-flow{min-height:210px;flex-direction:column}.bots-security-note{grid-template-columns:1fr}.bots-page .site-footer{margin-top:20px}
}
@media(prefers-reduced-motion:reduce){
  .mock-stream.person,.mock-stream.person.second,.server-stack span,.server-stack span em{animation:none!important}
  .server-stack{height:auto}.server-stack span{position:relative;top:auto;margin:8px 0!important;transform:none!important;opacity:1!important}.server-stack span em{max-width:none;border-right:0}
}

/* 1.50.6 — landing geometry follow-up: true 16:9 stream, wider mock and stable feature cards. */
.mock-stream.main::before,.mock-stream.main::after{display:none!important;content:none!important}
.mock-stream.main video{opacity:1!important;filter:none!important;background:#080a10}
#pcordBlock338SiteChatFeatureCard{grid-column:1/-1;padding-right:min(48%,480px)}
#pcordBlock338SiteChatFeatureCard #pcordBlock293SiteChatMotion{position:absolute;right:32px;bottom:50%;transform:translateY(50%);width:min(42%,390px);margin:0;padding:0}
.server-stack span em{flex:0 1 auto;max-width:none!important;min-width:0;overflow:visible;clip-path:inset(0 100% 0 0);border-right:0!important;animation:serverTyping1506 10.8s steps(var(--type-chars),end) infinite;animation-delay:calc(var(--wheel-order) * -3.6s)}
@keyframes serverTyping1506{0%,7%{clip-path:inset(0 100% 0 0)}18%,100%{clip-path:inset(0 0 0 0)}}
@media(min-width:1021px){
  .site-hero{grid-template-columns:minmax(0,.72fr) minmax(640px,1.28fr);gap:32px}
  .hero-stage{margin-right:-34px}
  .mock-app{inset:72px -30px 58px 0;grid-template-columns:58px 176px minmax(0,1fr) 112px}
  .mock-stream-grid{grid-template-columns:minmax(0,1fr) 94px!important;grid-template-rows:repeat(2,minmax(0,1fr))!important;gap:8px!important;align-items:center!important}
  .mock-stream-grid>.mock-stream.main{grid-column:1!important;grid-row:1/3!important;width:100%!important;height:auto!important;max-height:100%!important;aspect-ratio:16/9!important;align-self:center!important;justify-self:center!important}
  .mock-stream-grid>.mock-stream.person{grid-column:2!important;width:100%!important;height:auto!important;aspect-ratio:16/9!important;align-self:center!important}
  .mock-stream-grid>.mock-stream.person:nth-child(2){grid-row:1!important;grid-column:2!important}
  .mock-stream-grid>.mock-stream.person:nth-child(3){grid-row:2!important;grid-column:2!important}
}
@media(max-width:760px){
  #pcordBlock338SiteChatFeatureCard{grid-column:auto;padding-right:24px}
  #pcordBlock338SiteChatFeatureCard #pcordBlock293SiteChatMotion{position:relative;right:auto;bottom:auto;transform:none;width:min(100%,260px);margin:auto 0 0 auto;padding-top:28px}
}
@media(prefers-reduced-motion:reduce){.server-stack span em{clip-path:none!important}}


/* 1.50.7 — mock participants follow the real application: stream first, people below it. */
@media(min-width:1021px){
  .mock-stream-grid{
    grid-template-columns:repeat(24,minmax(0,1fr))!important;
    grid-template-rows:minmax(0,1fr) 72px!important;
    align-items:stretch!important;gap:8px!important;overflow:hidden
  }
  .mock-stream-grid>.mock-stream.main{
    grid-column:1/-1!important;grid-row:1!important;width:100%!important;height:auto!important;max-height:100%!important;
    aspect-ratio:16/9!important;align-self:center!important;justify-self:center!important;border-radius:10px!important;overflow:hidden!important
  }
  .mock-stream-grid>.mock-stream.person{
    grid-row:2!important;width:100%!important;height:100%!important;aspect-ratio:auto!important;align-self:stretch!important;border-radius:9px!important
  }
  .mock-stream-grid>.mock-stream.person:nth-child(2){grid-column:5/span 8!important}
  .mock-stream-grid>.mock-stream.person:nth-child(3){grid-column:13/span 8!important}
}

/* 1.50.8 — hero stream geometry: participants are structurally below the main 16:9 stream. */
#pcordBlock330SiteHeroStreamDemo.mock-stream-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:minmax(0,1fr) 68px!important;
  gap:8px!important;
  min-width:0!important;
  min-height:0!important;
  overflow:hidden!important;
  align-items:stretch!important;
}
#pcordBlock330SiteHeroStreamDemo>.mock-stream.main{
  grid-column:1!important;
  grid-row:1!important;
  width:auto!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  aspect-ratio:16/9!important;
  justify-self:center!important;
  align-self:center!important;
  border-radius:10px!important;
  overflow:hidden!important;
}
#pcordBlock330SiteHeroStreamDemo>.mock-stream-participants{
  grid-column:1!important;
  grid-row:2!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  width:min(72%,360px)!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  justify-self:center!important;
}
#pcordBlock330SiteHeroStreamDemo .mock-stream-participants>.mock-stream.person{
  position:relative!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  border-radius:9px!important;
  overflow:hidden!important;
}
@media(max-width:760px){
  #pcordBlock330SiteHeroStreamDemo.mock-stream-grid{grid-template-rows:minmax(0,1fr) 60px!important}
  #pcordBlock330SiteHeroStreamDemo>.mock-stream-participants{width:min(88%,320px)!important}
}