/* AtTheRate.ai - Brand, Website & SaaS App Design Case Study | MediaIkon - styles for case-attherate-ai-brand-app.html */
body{margin:0;background:#0B0B0C}
a{color:#F2F1EC}a:hover{color:#FFFFFF}
.mi-case img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.mi-case:hover img{transform:scale(1.035)}
.mi-case .mi-shade{transition:opacity .6s ease}
.mi-case:hover .mi-shade{opacity:.8}
.mi-case .mi-go{opacity:0;transform:translate(-8px,8px) scale(.85);transition:opacity .4s ease, transform .5s cubic-bezier(.2,.7,.2,1)}
.mi-case:hover .mi-go,.mi-case:focus-visible .mi-go{opacity:1;transform:none}
.mi-case .mi-info{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.mi-case:hover .mi-info{transform:translateY(-8px)}
.mi-case:focus-visible{outline:2px solid #F2F1EC;outline-offset:4px}
@media (prefers-reduced-motion: reduce){.mi-case img,.mi-case .mi-info,.mi-case .mi-go{transition:none}}
.mi-f{transition:background .2s ease,color .2s ease,border-color .2s ease}
.mi-f:hover{border-color:#F2F1EC !important}
.mi-navbar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:16px;row-gap:14px}.mi-navbar>:first-child{justify-self:start}.mi-navbar>nav{justify-self:center}.mi-navbar>:last-child{justify-self:end}
@media (max-width: 899px){.mi-navbar{grid-template-columns:minmax(0,1fr) auto}.mi-navbar>nav{grid-column:1/-1;grid-row:2;justify-self:center}}
/* mi-responsive:start */
header{position:relative;z-index:20 !important}
.mi-mnav{display:none;position:static}
.mi-mnav>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid #34343A;border-radius:999px;background:#121214;color:#F2F1EC;font-size:14px;font-weight:500;user-select:none}
.mi-mnav>summary::-webkit-details-marker{display:none}
.mi-mnav>summary:focus-visible{outline:2px solid #F2F1EC;outline-offset:2px}
.mi-mnav .mi-x{display:none}.mi-mnav[open] .mi-x{display:inline}.mi-mnav[open] .mi-bars{display:none}
.mi-mpanel{position:absolute;left:12px;right:12px;top:calc(100% - 6px);display:flex;flex-direction:column;gap:4px;padding:10px;border:1px solid #26262A;border-radius:24px;background:#121214;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.mi-mpanel a{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:0 18px;border-radius:16px;font-size:24px;font-weight:500;letter-spacing:-0.03em;text-decoration:none;color:#F2F1EC}
.mi-mpanel a[aria-current]{background:#F2F1EC;color:#0B0B0C}
.mi-mpanel .mi-mcta{margin-top:6px;justify-content:center;font-size:16px;font-weight:600;letter-spacing:0;color:#0B0B0C}
@media (max-width: 899px){
 .mi-navbar{grid-template-columns:minmax(0,1fr) auto auto !important;column-gap:10px !important}
 .mi-navbar>nav{display:none !important}
 .mi-mnav{display:block;grid-column:2;grid-row:1;justify-self:end}
 .mi-navbar>:last-child{grid-column:3;grid-row:1}
 .mi-hide-sm{display:none !important}
 footer a{padding-top:6px;padding-bottom:6px}
 .mi-stats{grid-template-columns:1fr 1fr !important}
 .mi-stats>div{padding:20px 16px !important;border-right:0 !important;border-bottom:1px solid #2A2A30}
 .mi-stats>div:nth-child(odd){border-right:1px solid #2A2A30 !important;padding-left:0 !important}
 .mi-stats>div:nth-last-child(-n+2){border-bottom:0}
}
@media (max-width: 640px){
 :is(.u-2d5f43,.u-634a81,.u-f10af2,.u-207d61,.u-c46141,.u-13d15c,.u-2132b0,.u-0808d9,.u-d7ae47){padding-top:72px !important;padding-bottom:72px !important}
 :is(.u-a7b1de){padding-top:56px !important;padding-bottom:80px !important}
 :is(.u-e47a87,.u-11c84b){padding-top:40px !important;padding-bottom:80px !important}
 :is(.u-a82d2e){padding-bottom:80px !important}
 :is(.u-c1ae60){padding-top:64px !important}
 :is(.u-00efe7),:is(.u-16f1e9){padding-left:0 !important}
 :is(.u-3c10e0),:is(.u-578fde){min-height:0 !important}
 .mi-case{aspect-ratio:4/5 !important;min-height:0 !important}
 .mi-case .mi-shade{background:linear-gradient(180deg,rgba(11,11,12,.1) 20%,rgba(11,11,12,.92) 75%) !important}
 .mi-stats>div>span:last-child{font-size:44px !important}
}
/* mi-responsive:end */

.mi-strip,.mi-scroll{scrollbar-width:thin;scrollbar-color:#9A9AA2 transparent}
.mi-scroll:focus-visible{outline:2px solid #F2F1EC;outline-offset:2px}
@media (max-width: 900px){.mi-2up{grid-template-columns:minmax(0,1fr) !important}.mi-3up{grid-template-columns:minmax(0,1fr) !important;max-width:520px}.mi-4up{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
@media (max-width: 640px){
 .mi-jmeta{grid-template-columns:1fr !important}
 .mi-jmeta>div{padding:16px 0 !important;border-right:0 !important;border-bottom:1px solid #2A2A30}
 .mi-jmeta>div:last-child{border-bottom:0}
}