/* the whole page continues the hero's dark ground */
/* hero ramp: fade into black, not white (beats hive-fluid.css) */
html body .pghero.skyhero{padding-bottom:clamp(180px,19vw,280px)!important}
html body .pghero.skyhero::before{
  content:"";display:block!important;position:absolute;left:-1px;right:-1px;bottom:-1px;z-index:3;
  height:clamp(300px,36vw,520px);pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(11,11,12,0) 0%,
    rgba(11,11,12,.02) 12%,
    rgba(11,11,12,.06) 22%,
    rgba(11,11,12,.12) 32%,
    rgba(11,11,12,.2) 41%,
    rgba(11,11,12,.3) 50%,
    rgba(11,11,12,.42) 58%,
    rgba(11,11,12,.55) 66%,
    rgba(11,11,12,.68) 74%,
    rgba(11,11,12,.8) 82%,
    rgba(11,11,12,.9) 89%,
    rgba(11,11,12,.96) 95%,
    rgba(11,11,12,1) 100%)!important}
html body .pghero.skyhero>.wrap{position:relative;z-index:4}
html,body{background:#0B0B0C!important}
main#main,main#main>section,#directory{background:#0B0B0C!important}
#directory .kicker{color:rgba(247,245,242,.55)!important}
#directory .lsec,#directory h2{color:#F7F5F2!important}
#directory .lsec span,#directory .lsub{color:rgba(247,245,242,.68)!important}

/* filter bar */
.idir-bar{border-bottom-color:rgba(247,245,242,.14)!important}
.idir-search{background:rgba(247,245,242,.06)!important;border-color:rgba(247,245,242,.18)!important}
.idir-search svg{color:rgba(247,245,242,.6)!important}
.idir-search input{color:#F7F5F2!important}
.idir-search input::placeholder{color:rgba(247,245,242,.5)!important}
.idir-chips button{background:transparent!important;border-color:rgba(247,245,242,.22)!important;color:rgba(247,245,242,.74)!important}
.idir-chips button:hover{border-color:rgba(247,245,242,.5)!important;color:#F7F5F2!important}
.idir-chips button.on{background:#F7F5F2!important;border-color:#F7F5F2!important;color:#0B0B0C!important}
.msel.igsel,select.msel{background:rgba(247,245,242,.06)!important;border-color:rgba(247,245,242,.2)!important;color:#F7F5F2!important}

/* connector tiles: white plates so the brand logos stay legible */
.idir-card{background:rgba(247,245,242,.06)!important;-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border-color:rgba(247,245,242,.14)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.1)!important}
.idir-card:hover{background:rgba(247,245,242,.11)!important;border-color:rgba(247,245,242,.3)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 18px 44px rgba(0,0,0,.45)!important}
.idir-card.on{background:rgba(247,245,242,.14)!important;border-color:rgba(247,245,242,.44)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 18px 44px rgba(0,0,0,.5)!important}
.idir-card .in{color:rgba(247,245,242,.72)!important}
.idir-det{background:rgba(247,245,242,.07)!important;-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);border-color:rgba(247,245,242,.16)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 22px 60px rgba(0,0,0,.45)!important}
.idir-det .dn{color:#F7F5F2!important}
.idir-det .dc{color:rgba(247,245,242,.55)!important}
main .idir-det .dd{color:rgba(247,245,242,.78)!important}
.idir-det b,.idir-det strong{color:#F7F5F2!important}
.idir-det span,.idir-det li,.idir-det p{color:rgba(247,245,242,.74)!important}
.idir-foot{color:rgba(247,245,242,.6)!important}

/* CTA band + anything else that painted parchment */
#waitlist,#waitlist .cta-band{background:#0B0B0C!important}
#waitlist .cta-band .band-kicker{color:rgba(247,245,242,.55)!important}
#waitlist .cta-band h2{color:#F7F5F2!important}
#waitlist .cta-band p{color:rgba(247,245,242,.72)!important}
#waitlist .cta-band a.ctaline{color:#F7F5F2!important;border-bottom-color:rgba(247,245,242,.4)!important}
#waitlist .cta-band .btn.primary{background:#F7F5F2!important;border-color:#F7F5F2!important;color:#0B0B0C!important}


/* logos drawn in near-black ink get a light plate so they stay legible on the glass */
.idir-card .ii{border-radius:16px;transition:background .2s}
.idir-card.dark-mark .ii{background:#F7F5F2;box-shadow:inset 0 0 0 1px rgba(27,27,27,.08);padding:9px;box-sizing:border-box}
.idir-det .dh span.dii{border-radius:11px}
.idir-det.dark-mark .dh span.dii{background:#F7F5F2;box-shadow:inset 0 0 0 1px rgba(27,27,27,.08);padding:6px;box-sizing:border-box}


.idir-more{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;text-decoration:none;
  background:rgba(247,245,242,.04);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  border:1px dashed rgba(247,245,242,.26);border-radius:20px;padding:30px 16px 24px;transition:background .2s,border-color .2s,transform .2s}
.idir-more:hover{background:rgba(247,245,242,.09);border-color:rgba(247,245,242,.48);transform:translateY(-2px)}
.idir-more .im-l{font-family:var(--f-ui);font-weight:500;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;line-height:1.45;color:rgba(247,245,242,.72)}
.idir-more:hover .im-l{color:#F7F5F2}

/* [mobile-filter-dropdown] mobile-only: category filter as a dropdown, shorter hero subline */
html body .idir-select{display:none}
html body .ihero-sub-short{display:none}
@media (max-width:768px){
  html body .idir-chips{display:none!important}
  html body .ihero-sub-long{display:none!important}
  html body .ihero-sub-short{display:block}
  html body .idir-select{position:relative;display:block;width:100%;margin-top:10px}
  html body .idir-select select{-webkit-appearance:none;appearance:none;width:100%;font-family:var(--f-ui);font-size:15px;color:#F7F5F2;background:rgba(247,245,242,.06);border:1px solid rgba(247,245,242,.18);border-radius:999px;padding:13px 42px 13px 18px;line-height:1.2;color-scheme:dark}
  html body .idir-select select option{background:#14161A;color:#F7F5F2}
  html body .idir-select svg{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;pointer-events:none;color:rgba(247,245,242,.6)}
}