@font-face{font-family:Pretendard;src:local("Pretendard");font-display:swap}
:root{--page:#e9e9ec;--surface:#f7f7f8;--ink:#18181a;--muted:#6c6c72;--dark:#0b0b0d;--line:rgba(0,0,0,.09);--r:clamp(28px,3vw,46px);--gap:10px}
*{box-sizing:border-box}html{background:var(--page);scroll-behavior:smooth}body{margin:0;background:var(--page);color:var(--ink);font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;letter-spacing:-.01em;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}img{display:block}.capsule{border:1px solid var(--line);border-radius:999px}
.topbar{position:fixed;z-index:50;top:14px;left:clamp(16px,3vw,42px);right:clamp(16px,3vw,42px);display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}.topbar>*{pointer-events:auto}
.brand,.nav,.nav-toggle{height:52px;background:rgba(255,255,255,.95);box-shadow:0 4px 24px rgba(0,0,0,.04)}.brand{display:flex;align-items:center;gap:10px;padding:0 18px 0 13px;font-size:15px;font-weight:600}.brand img{width:31px;max-height:27px;object-fit:contain}
.nav-shell{position:relative}.nav{display:flex;align-items:center;padding:4px}.nav a{height:42px;display:flex;align-items:center;padding:0 15px;border-radius:999px;font-size:13px;font-weight:600;color:#343438}.nav a:hover,.nav a:focus-visible{background:#ededf0;outline:none}.nav-toggle{display:none;align-items:center;gap:10px;padding:0 17px;color:#2c2c30;font:600 13px Pretendard,-apple-system,sans-serif;cursor:pointer}.nav-toggle i,.nav-toggle i:after{display:block;width:14px;height:1.5px;background:#2c2c30;content:""}.nav-toggle i:after{transform:translateY(5px)}
main{display:grid;gap:var(--gap);padding:0 var(--gap) var(--gap)}.panel,.card{background:var(--surface);border-radius:var(--r);overflow:hidden}.hero{min-height:94svh;border-radius:0 0 var(--r) var(--r);display:grid;place-items:center;text-align:center}.hero-inner{width:min(1100px,90vw)}.hero-mark{width:clamp(78px,7vw,108px);margin:0 auto 32px}.hero h1,.detail h1{margin:0;font-size:clamp(56px,7.4vw,108px);line-height:1.04;letter-spacing:-.035em;font-weight:650}.hero p{margin:24px auto 0;font-size:clamp(18px,1.6vw,24px);line-height:1.6;color:var(--muted)}
.cta{display:inline-flex;align-items:center;gap:25px;margin-top:27px;padding:12px 17px 12px 20px;border-radius:999px;font-size:13px;font-weight:600}.primary{background:var(--ink);color:white}.inverse{background:white;color:#151517}.text-cta{display:inline-block;margin-top:23px;font-size:14px;font-weight:600;color:#345d9d}.light-link{color:#c9d8ff}
.feature{min-height:820px;display:grid;grid-template-columns:1.04fr .96fr;align-items:center;padding:clamp(68px,7vw,112px)}.dark-panel,.dark-card{background:var(--dark);color:#f7f7f8}.copy{max-width:780px}.eyebrow{margin:0 0 16px;font-size:clamp(16px,1.3vw,20px);line-height:1.35;font-weight:600}.copy h2{margin:0;font-size:clamp(52px,6.5vw,98px);line-height:1.05;letter-spacing:-.032em;font-weight:650}.description{max-width:600px;margin:23px 0 0;color:var(--muted);font-size:clamp(17px,1.45vw,21px);line-height:1.65}.dark-panel .description{color:#aaaab0}.visual{display:flex;align-items:center;justify-content:center;height:100%}.visual .vexa{width:min(84%,620px)}.visual .mts{width:min(72%,460px)}.visual .multi-art{width:min(60%,360px)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:stretch}.card{min-height:660px;padding:clamp(54px,5vw,78px);display:flex;flex-direction:column;text-align:center;border:1px solid var(--line)}.card>div{position:relative;z-index:2}.card h3{margin:0;font-size:clamp(42px,4.5vw,68px);line-height:1.07;letter-spacing:-.03em;font-weight:650}.card>div>p:last-of-type{max-width:470px;margin:19px auto 0;color:#77777d;font-size:17px;line-height:1.62}.dark-card>div>p:last-of-type{color:#a7a7ad}.card>img{width:min(34%,240px);height:auto;margin:auto auto 0}.dark-card>img{width:min(38%,260px)}
.detail{min-height:88svh;margin-top:0;padding:clamp(110px,10vw,160px) clamp(40px,9vw,150px);display:grid;grid-template-columns:1.1fr .9fr;align-items:center}.detail>div{max-width:850px}.detail>div>p:last-child,.detail-band>p:last-child{max-width:720px;color:var(--muted);font-size:clamp(18px,1.6vw,24px);line-height:1.65}.dark-panel.detail>div>p:last-child{color:#aaaab0}.detail-art{justify-self:center;max-width:70%;max-height:420px;object-fit:contain}.detail-band{padding:clamp(70px,8vw,120px);min-height:480px}.detail-band h2{font-size:clamp(42px,5vw,76px);margin:0;line-height:1.08;letter-spacing:-.03em}
.site-footer{padding:0 10px 18px;background:var(--page);color:#626267;font-size:12px}.footer-inner{max-width:1440px;margin:auto;padding:34px clamp(16px,3vw,34px) 20px;border-top:1px solid rgba(0,0,0,.12)}.footer-directory{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;padding-bottom:30px}.footer-directory>div{display:flex;flex-direction:column;align-items:flex-start;gap:9px}.footer-directory h4{margin:0 0 3px;color:#202023;font-size:12px;font-weight:650}.footer-directory a{line-height:1.45}.footer-directory a:hover{text-decoration:underline}.footer-note{padding:15px 0;border-top:1px solid rgba(0,0,0,.08);border-bottom:1px solid rgba(0,0,0,.08);color:#76767b}.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:16px}.footer-brand{display:flex;align-items:center;gap:9px;color:#28282b;font-size:13px;font-weight:600}.footer-brand img{width:30px}
@media(max-width:800px){.topbar{left:10px;right:10px}.nav{display:none;position:absolute;right:0;top:60px;width:min(340px,calc(100vw - 20px));height:auto;padding:8px;flex-direction:column;align-items:stretch;border-radius:25px}.nav.open{display:flex}.nav a{height:46px;padding:0 16px}.nav-toggle{display:flex}.hero{min-height:86svh}.hero h1,.detail h1{font-size:12.4vw;line-height:1.07}.feature{min-height:730px;grid-template-columns:1fr;padding:80px 22px;align-items:start}.copy h2{font-size:12.5vw;line-height:1.08}.visual{position:absolute;left:0;right:0;bottom:0;height:42%;opacity:.72}.duo{grid-template-columns:1fr}.card{min-height:600px}.detail{min-height:760px;grid-template-columns:1fr;padding:110px 22px 70px;align-items:start}.detail-art{align-self:end;max-height:260px}.footer-directory{grid-template-columns:repeat(2,1fr)}.footer-bottom{align-items:flex-start;flex-direction:column}}
@media(max-width:480px){.footer-directory{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Multi_Web0.15 — independent Multi Account entry */
.topbar{gap:10px}
.account-entry{width:52px;height:52px;flex:0 0 52px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.95);box-shadow:0 4px 24px rgba(0,0,0,.04)}
.account-entry svg{width:21px;height:21px;fill:none;stroke:#252528;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.account-entry:hover,.account-entry:focus-visible{background:#ededf0;outline:none}
@media(max-width:800px){.topbar{align-items:flex-start}.account-entry{width:52px;height:52px}.nav-shell{margin-left:auto}}

/* Multi_Web0.16 — centered navigation, logo-only brand, Search + Account */
.topbar{align-items:flex-start}
.brand{width:52px;height:52px;padding:0;justify-content:center;gap:0}
.brand img{width:31px;max-height:29px}.brand span{display:none}
.nav-shell{position:absolute;left:50%;transform:translateX(-50%)}
.top-actions{display:flex;gap:8px;margin-left:auto}
.icon-entry{width:52px;height:52px;display:flex;align-items:center;justify-content:center;border:0;cursor:pointer;background:rgba(255,255,255,.95);box-shadow:0 4px 24px rgba(0,0,0,.04)}
.icon-entry svg{width:21px;height:21px;fill:none;stroke:#252528;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.icon-entry:hover,.icon-entry:focus-visible{background:#ededf0;outline:none}
.search-popover,.account-popover{position:absolute;top:60px;right:0;background:rgba(255,255,255,.97);box-shadow:0 16px 50px rgba(0,0,0,.11);border:1px solid rgba(0,0,0,.06)}
.search-popover{width:min(560px,calc(100vw - 32px));padding:12px;border-radius:25px}
.search-form{height:50px;display:flex;align-items:center;gap:10px;padding:0 14px;background:#f2f2f4;border-radius:16px}
.search-form svg{width:19px;fill:none;stroke:#77777d;stroke-width:1.7;stroke-linecap:round}
.search-form input{width:100%;border:0;outline:0;background:transparent;color:#18181a;font:500 16px Pretendard,-apple-system,sans-serif}
.search-results{display:grid;gap:3px;padding-top:8px}.search-results:empty{display:none}
.search-results a{display:block;padding:11px 13px;border-radius:13px;font-size:13px;font-weight:600}.search-results a:hover,.search-results a:focus-visible{background:#f1f1f3;outline:none}
.search-results small{display:block;margin-top:3px;color:#7b7b80;font-size:11px;font-weight:500}
.account-popover{width:260px;padding:12px;border-radius:25px;display:grid;gap:4px}
.account-popover[hidden],.search-popover[hidden]{display:none}
.account-popover a{padding:12px 14px;border-radius:14px;font-size:13px;font-weight:600}.account-popover a:hover,.account-popover a:focus-visible{background:#f1f1f3;outline:none}
.account-popover .popover-primary{background:#18181a;color:#fff;text-align:center}.account-popover .popover-primary:hover{background:#303034}
.popover-title{margin:6px 14px 8px;font-size:15px;font-weight:650}.account-popover .popover-more{margin-top:5px;border-top:1px solid rgba(0,0,0,.07);border-radius:0;padding-top:14px;color:#626267}.popover-more span{float:right}
@media(max-width:960px){
 .nav-shell{position:relative;left:auto;transform:none;margin-left:auto}
 .top-actions{margin-left:0}
}
@media(max-width:520px){
 .topbar{left:10px;right:10px}
 .brand,.icon-entry,.nav-toggle{width:48px;height:48px}
 .nav-toggle{padding:0 14px}.nav-toggle span{display:none}
 .nav{top:56px}
 .search-popover,.account-popover{top:56px;right:0}
 .search-popover{width:calc(100vw - 20px)}
}

/* Multi_Web0.17 — unified dynamic top bar + bounded typography */
.topbar{
  position:fixed;z-index:50;top:14px;left:50%;right:auto;
  width:min(900px,calc(100vw - 28px));transform:translateX(-50%);
  display:block;pointer-events:none;
}
.topbar>*{pointer-events:auto}
.unified-bar{
  width:max-content;max-width:100%;height:52px;margin:0 auto;
  display:flex;align-items:center;padding:4px;
  background:rgba(255,255,255,.95);
  border:1px solid rgba(0,0,0,.09);
  box-shadow:0 4px 24px rgba(0,0,0,.05);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
.unified-bar .brand{
  width:44px;height:44px;padding:0;display:flex;align-items:center;justify-content:center;
  background:transparent;box-shadow:none;border:0;border-radius:999px;
}
.unified-bar .brand:hover,.unified-bar .brand:focus-visible{background:#ededf0;outline:none}
.unified-bar .brand img{width:29px;max-height:27px;object-fit:contain}
.unified-bar .nav-shell{position:static;transform:none}
.unified-bar .nav{
  position:static;display:flex;align-items:center;height:44px;padding:0;
  background:transparent;border:0;box-shadow:none;border-radius:0;
}
.unified-bar .nav a{
  height:40px;display:flex;align-items:center;padding:0 14px;
  border-radius:999px;font-size:13px;font-weight:600;color:#343438;
}
.unified-bar .top-actions{display:flex;align-items:center;gap:0;margin:0}
.unified-bar .icon-entry{
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;box-shadow:none;border-radius:999px;
}
.unified-bar .nav-toggle{
  display:none;width:auto;height:44px;padding:0 14px;
  background:transparent;border:0;box-shadow:none;border-radius:999px;
}
.search-popover,.account-popover{top:60px;right:0}

/* Desktop type has explicit ceilings. */
.hero h1,.detail h1{font-size:clamp(48px,6vw,84px)}
.copy h2{font-size:clamp(44px,5.4vw,72px)}
.card h3{font-size:clamp(38px,4vw,58px)}
.detail-band h2{font-size:clamp(38px,4.5vw,64px)}
.hero p{font-size:clamp(17px,1.35vw,21px)}
.description{font-size:clamp(16px,1.25vw,20px)}
.detail>div>p:last-child,.detail-band>p:last-child{font-size:clamp(17px,1.4vw,21px)}

@media(max-width:800px){
  .topbar{top:10px;width:calc(100vw - 20px)}
  .unified-bar{height:50px}
  .unified-bar .brand,.unified-bar .icon-entry{width:42px;height:42px}
  .unified-bar .brand img{width:27px}
  .unified-bar .nav{display:none;position:absolute;left:0;right:0;top:58px;width:100%;height:auto;
    padding:8px;flex-direction:column;align-items:stretch;background:rgba(255,255,255,.98);
    border:1px solid rgba(0,0,0,.08);border-radius:24px;box-shadow:0 16px 50px rgba(0,0,0,.10)}
  .unified-bar .nav.open{display:flex}
  .unified-bar .nav a{height:44px;padding:0 14px}
  .unified-bar .nav-toggle{display:flex;align-items:center;gap:9px}
  .unified-bar .top-actions{margin-left:auto}
  .search-popover,.account-popover{top:58px}
  .hero h1,.detail h1{font-size:clamp(38px,10vw,50px);line-height:1.08}
  .copy h2{font-size:clamp(36px,9.5vw,46px);line-height:1.1}
  .card h3{font-size:clamp(34px,8.7vw,44px);line-height:1.1}
  .detail-band h2{font-size:clamp(34px,8.7vw,44px)}
  .hero p,.description,.detail>div>p:last-child,.detail-band>p:last-child{font-size:17px}
}
@media(max-width:420px){
  .unified-bar .nav-toggle{padding:0 10px}
  .unified-bar .nav-toggle span{display:none}
  .unified-bar .brand,.unified-bar .icon-entry{width:40px;height:40px}
  .hero h1,.detail h1{font-size:clamp(36px,10vw,44px)}
  .copy h2{font-size:clamp(34px,9.3vw,42px)}
  .card h3,.detail-band h2{font-size:clamp(32px,8.8vw,40px)}
}

/* Multi_Web0.18 — fixed artwork layout system
   Artwork keeps a stable visual frame and does not grow/shrink freely with copy. */
.visual{
  position:relative;
  width:100%;
  height:520px;
  min-height:520px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.visual img{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  object-fit:contain;
  max-width:none;
  max-height:none;
}
.visual .vexa{width:520px;height:520px}
.visual .mts{width:400px;height:400px}
.visual .multi-art{width:320px;height:320px}

.card>img{
  width:220px;height:220px;
  min-width:220px;min-height:220px;
  max-width:220px;max-height:220px;
  object-fit:contain;
  margin:auto auto 0;
}
.dark-card>img{
  width:240px;height:240px;
  min-width:240px;min-height:240px;
  max-width:240px;max-height:240px;
}
.detail-art{
  width:360px;height:360px;
  max-width:360px;max-height:360px;
  object-fit:contain;
  justify-self:center;
}

/* Mobile uses its own fixed artwork frames rather than viewport-relative image scaling. */
@media(max-width:800px){
  .feature{position:relative;padding-bottom:330px}
  .visual{
    position:absolute;left:0;right:0;bottom:24px;top:auto;
    width:100%;height:280px;min-height:280px;opacity:1;
  }
  .visual .vexa{width:270px;height:270px}
  .visual .mts{width:220px;height:220px}
  .visual .multi-art{width:190px;height:190px}
  .card>img{
    width:180px;height:180px;min-width:180px;min-height:180px;
    max-width:180px;max-height:180px;
  }
  .dark-card>img{
    width:195px;height:195px;min-width:195px;min-height:195px;
    max-width:195px;max-height:195px;
  }
  .detail-art{
    width:230px;height:230px;max-width:230px;max-height:230px;
    align-self:end;
  }
}
@media(max-width:420px){
  .feature{padding-bottom:285px}
  .visual{height:240px;min-height:240px}
  .visual .vexa{width:235px;height:235px}
  .visual .mts{width:195px;height:195px}
  .visual .multi-art{width:165px;height:165px}
  .card>img{width:160px;height:160px;min-width:160px;min-height:160px;max-width:160px;max-height:160px}
  .dark-card>img{width:175px;height:175px;min-width:175px;min-height:175px;max-width:175px;max-height:175px}
  .detail-art{width:200px;height:200px;max-width:200px;max-height:200px}
}

/* Multi_Web0.19 — fixed layout slots, adaptive artwork inside them.
   The slot geometry is stable; artwork scales fluidly within bounded slots. */
.visual{
  position:relative;
  width:100%;
  height:auto;
  min-height:0;
  aspect-ratio:1 / 1;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.visual img{
  position:static;
  transform:none;
  width:auto;
  height:auto;
  object-fit:contain;
  max-width:100%;
  max-height:100%;
}
.visual .vexa{width:min(88%,520px);height:auto;max-height:88%}
.visual .mts{width:min(72%,400px);height:auto;max-height:72%}
.visual .multi-art{width:min(60%,320px);height:auto;max-height:60%}

.card>img{
  width:clamp(150px,32%,220px);
  height:auto;
  min-width:0;min-height:0;
  max-width:220px;max-height:220px;
  object-fit:contain;
  margin:auto auto 0;
}
.dark-card>img{
  width:clamp(165px,36%,240px);
  height:auto;
  min-width:0;min-height:0;
  max-width:240px;max-height:240px;
}
.detail-art{
  width:min(72%,360px);
  height:auto;
  max-width:360px;
  max-height:360px;
  object-fit:contain;
  justify-self:center;
}

@media(max-width:800px){
  .feature{position:relative;padding-bottom:clamp(260px,72vw,330px)}
  .visual{
    position:absolute;
    left:50%;right:auto;bottom:24px;top:auto;
    transform:translateX(-50%);
    width:min(78vw,300px);
    height:auto;min-height:0;
    aspect-ratio:1 / 1;
    opacity:1;
  }
  .visual .vexa{width:92%;height:auto;max-height:92%}
  .visual .mts{width:76%;height:auto;max-height:76%}
  .visual .multi-art{width:64%;height:auto;max-height:64%}
  .card>img{
    width:clamp(145px,42vw,180px);
    height:auto;min-width:0;min-height:0;
    max-width:180px;max-height:180px;
  }
  .dark-card>img{
    width:clamp(155px,46vw,195px);
    height:auto;min-width:0;min-height:0;
    max-width:195px;max-height:195px;
  }
  .detail-art{
    width:min(62vw,230px);
    height:auto;
    max-width:230px;max-height:230px;
    align-self:end;
  }
}
@media(max-width:420px){
  .feature{padding-bottom:clamp(235px,70vw,285px)}
  .visual{width:min(72vw,255px)}
  .card>img{width:min(44vw,160px);max-width:160px;max-height:160px}
  .dark-card>img{width:min(48vw,175px);max-width:175px;max-height:175px}
  .detail-art{width:min(58vw,200px);max-width:200px;max-height:200px}
}

/* Multi_Web0.20 — inverse capsule contrast */
.unified-bar{
  background:rgba(15,15,17,.94);
  border-color:rgba(255,255,255,.10);
  color:#f7f7f8;
}
.unified-bar .brand img{content:url("assets/multi_white.png")}
.unified-bar .nav a{color:#f3f3f5}
.unified-bar .nav a:hover,.unified-bar .nav a:focus-visible,
.unified-bar .brand:hover,.unified-bar .brand:focus-visible,
.unified-bar .icon-entry:hover,.unified-bar .icon-entry:focus-visible,
.unified-bar .nav-toggle:hover,.unified-bar .nav-toggle:focus-visible{background:rgba(255,255,255,.10)}
.unified-bar .icon-entry svg{stroke:#f3f3f5}
.unified-bar .nav-toggle{color:#f3f3f5}
.unified-bar .nav-toggle i,.unified-bar .nav-toggle i:after{background:#f3f3f5}
body.topbar-on-dark .unified-bar{
  background:rgba(255,255,255,.95);
  border-color:rgba(0,0,0,.08);
  color:#18181a;
}
body.topbar-on-dark .unified-bar .brand img{content:url("assets/multi_black.png")}
body.topbar-on-dark .unified-bar .nav a,
body.topbar-on-dark .unified-bar .nav-toggle{color:#29292d}
body.topbar-on-dark .unified-bar .icon-entry svg{stroke:#252528}
body.topbar-on-dark .unified-bar .nav-toggle i,
body.topbar-on-dark .unified-bar .nav-toggle i:after{background:#252528}
body.topbar-on-dark .unified-bar .nav a:hover,
body.topbar-on-dark .unified-bar .brand:hover,
body.topbar-on-dark .unified-bar .icon-entry:hover,
body.topbar-on-dark .unified-bar .nav-toggle:hover{background:#ededf0}
@media(max-width:800px){
 .unified-bar .nav{background:rgba(15,15,17,.98);border-color:rgba(255,255,255,.10)}
 body.topbar-on-dark .unified-bar .nav{background:rgba(255,255,255,.98);border-color:rgba(0,0,0,.08)}
}

/* Multi_Web0.21 — Dynamic Capsule navigation */
.topbar{width:min(980px,calc(100vw - 28px))}
.dynamic-capsule{
  position:relative;overflow:hidden;
  width:min(760px,100%);height:52px;
  transition:width .52s cubic-bezier(.22,1,.36,1),height .52s cubic-bezier(.22,1,.36,1),
             border-radius .45s cubic-bezier(.22,1,.36,1),background-color .35s ease,
             box-shadow .35s ease,color .25s ease;
  will-change:width,height,border-radius;
}
.dynamic-capsule.is-expanded{
  width:min(960px,100%);height:360px;border-radius:34px;
  align-items:flex-start;
}
.dynamic-capsule .brand,.dynamic-capsule .capsule-primary,.dynamic-capsule .top-actions{
  position:relative;z-index:3;flex-shrink:0;
}
.dynamic-capsule .capsule-expanded{
  position:absolute;z-index:2;left:0;right:0;top:58px;height:calc(100% - 58px);
  padding:24px 30px 30px;opacity:0;transform:translateY(-12px) scale(.985);
  pointer-events:none;transition:opacity .25s ease,transform .45s cubic-bezier(.22,1,.36,1);
}
.dynamic-capsule.is-expanded .capsule-expanded{opacity:1;transform:none;pointer-events:auto}
.mega-panel{display:none;grid-template-columns:1.35fr 1fr 1fr;gap:44px}
.mega-panel.active{display:grid}
.mega-panel p{margin:0 0 15px;font-size:12px;font-weight:500;color:#8d8d93}
.mega-panel a{display:block;width:max-content;max-width:100%;margin:0 0 12px;font-size:15px;font-weight:600}
.mega-panel .mega-lead{font-size:30px;line-height:1.16;letter-spacing:-.025em;margin-bottom:13px}
.dynamic-capsule.is-expanded .nav a.is-active{background:rgba(255,255,255,.11)}
body.topbar-on-dark .dynamic-capsule.is-expanded .nav a.is-active{background:#ededf0}
.dynamic-capsule,.dynamic-capsule *{transition-timing-function:cubic-bezier(.22,1,.36,1)}
@media(max-width:800px){
 .dynamic-capsule{width:min(100%,420px)}
 .dynamic-capsule.is-expanded{height:min(520px,calc(100vh - 20px));border-radius:30px}
 .dynamic-capsule .capsule-primary{display:flex;position:static;width:auto;height:44px;padding:0;flex-direction:row;background:transparent;border:0;box-shadow:none}
 .dynamic-capsule .capsule-primary a{display:none}
 .dynamic-capsule .capsule-primary a.is-active{display:flex}
 .dynamic-capsule .capsule-expanded{top:56px;padding:22px 24px 28px;overflow:auto}
 .mega-panel{grid-template-columns:1fr;gap:22px}
 .mega-panel .mega-lead{font-size:27px}
}
@media(max-width:520px){
 .dynamic-capsule .capsule-primary{display:none}
 .dynamic-capsule.is-expanded{height:min(560px,calc(100vh - 20px))}
 .mega-panel{gap:18px}
 .mega-panel .mega-lead{font-size:25px}
}
@media(prefers-reduced-motion:reduce){
 .dynamic-capsule,.dynamic-capsule *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* Multi_Web0.22 — interactive action language
   Multi blue is used as an interaction/accent state, not as a permanent background decoration. */
:root{
  --multi-blue:#5f9fe9;
  --multi-blue-strong:#438ee5;
  --multi-blue-soft:#79adf0;
}

/* Primary pill actions: geometry stays stable while color, arrow and elevation respond. */
.cta,.button,.learn-more,.hero a[class*="btn"],.copy a[class*="btn"],
.card a[class*="btn"],a.action{
  transition:
    background-color .32s cubic-bezier(.22,1,.36,1),
    color .32s cubic-bezier(.22,1,.36,1),
    border-color .32s cubic-bezier(.22,1,.36,1),
    box-shadow .38s cubic-bezier(.22,1,.36,1),
    transform .38s cubic-bezier(.22,1,.36,1);
}
.cta:hover,.button:hover,.learn-more:hover,.hero a[class*="btn"]:hover,
.copy a[class*="btn"]:hover,.card a[class*="btn"]:hover,a.action:hover{
  background:var(--multi-blue);
  color:#fff;
  border-color:var(--multi-blue);
  box-shadow:0 10px 28px rgba(67,142,229,.22);
  transform:translateY(-1px);
}
.cta:active,.button:active,.learn-more:active,.hero a[class*="btn"]:active,
.copy a[class*="btn"]:active,.card a[class*="btn"]:active,a.action:active{
  background:var(--multi-blue-strong);
  transform:translateY(0) scale(.985);
  box-shadow:0 5px 14px rgba(67,142,229,.18);
}

/* Existing rounded links/buttons used by the current homepage. */
.feature a,.card a,.detail a,.detail-band a{
  transition:
    background-color .32s cubic-bezier(.22,1,.36,1),
    color .32s cubic-bezier(.22,1,.36,1),
    border-color .32s cubic-bezier(.22,1,.36,1),
    box-shadow .38s cubic-bezier(.22,1,.36,1),
    transform .38s cubic-bezier(.22,1,.36,1);
}
.feature a:hover,.card a:hover,.detail a:hover,.detail-band a:hover{
  background-color:var(--multi-blue);
  border-color:var(--multi-blue);
  color:#fff;
  box-shadow:0 10px 28px rgba(67,142,229,.20);
  transform:translateY(-1px);
}

/* Text/navigation interactions get a restrained blue cue instead of becoming large blue blocks. */
.mega-panel a,.footer a{
  transition:color .26s ease,opacity .26s ease,transform .32s cubic-bezier(.22,1,.36,1);
}
.mega-panel a:hover,.footer a:hover{color:var(--multi-blue-soft)}
.mega-panel .mega-lead:hover{transform:translateX(4px)}

/* Keyboard users receive the same brand interaction cue. */
a:focus-visible,button:focus-visible{
  outline:2px solid var(--multi-blue);
  outline-offset:3px;
}

/* Dark surfaces keep enough contrast while preserving the same Multi-blue identity. */
.dark-panel .feature a:hover,.dark-card a:hover{
  background:var(--multi-blue-soft);
  border-color:var(--multi-blue-soft);
  color:#0d1622;
}

/* Touch devices should not remain visually stuck in a hover state. */
@media(hover:none){
  .feature a:hover,.card a:hover,.detail a:hover,.detail-band a:hover,
  .cta:hover,.button:hover,.learn-more:hover,a.action:hover{
    transform:none;box-shadow:none;
  }
}
@media(prefers-reduced-motion:reduce){
  .feature a,.card a,.detail a,.detail-band a,.cta,.button,.learn-more,a.action,
  .mega-panel a,.footer a{transition-duration:.01ms!important}
}

/* Multi_Web0.23
   Interaction components are separated:
   1) navigation-item
   2) text-link
   3) capsule-button
   This layer intentionally overrides the broad v0.22 selectors. */

:root{
  --multi-blue:#5f9fe9;
  --multi-blue-strong:#438ee5;
  --multi-blue-soft:#79adf0;
}

/* ---------- Dynamic Capsule geometry ---------- */
.topbar{
  width:auto;
  max-width:calc(100vw - 28px);
}
.dynamic-capsule{
  width:max-content;
  max-width:calc(100vw - 28px);
  min-width:0;
  height:52px;
  margin-inline:auto;
  padding:4px 7px;
  border-radius:999px;
  justify-content:flex-start;
  transition:
    width .52s cubic-bezier(.22,1,.36,1),
    max-width .52s cubic-bezier(.22,1,.36,1),
    height .52s cubic-bezier(.22,1,.36,1),
    border-radius .46s cubic-bezier(.22,1,.36,1),
    background-color .32s ease,
    box-shadow .36s ease;
}
.dynamic-capsule.is-expanded{
  width:min(920px,calc(100vw - 28px));
  max-width:min(920px,calc(100vw - 28px));
  height:350px;
  border-radius:32px;
}
.dynamic-capsule .brand{flex:0 0 44px}
.dynamic-capsule .capsule-primary{flex:0 0 auto}
.dynamic-capsule .top-actions{flex:0 0 auto;margin-left:2px}

/* Normal navigation items stay neutral. */
.dynamic-capsule .capsule-primary a{
  color:#f3f3f5;
  background:transparent;
  transition:
    background-color .28s ease,
    color .28s ease,
    transform .34s cubic-bezier(.22,1,.36,1);
}
.dynamic-capsule .capsule-primary a:hover,
.dynamic-capsule .capsule-primary a:focus-visible{
  color:#fff;
  background:rgba(255,255,255,.10);
  transform:none;
  box-shadow:none;
}
body.topbar-on-dark .dynamic-capsule .capsule-primary a{color:#29292d}
body.topbar-on-dark .dynamic-capsule .capsule-primary a:hover,
body.topbar-on-dark .dynamic-capsule .capsule-primary a:focus-visible{
  color:#111114;background:#ededf0;
}

/* Expanded navigation text uses blue only on interaction. */
.mega-panel a{
  color:inherit;
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  transform:none;
  transition:color .25s ease,transform .32s cubic-bezier(.22,1,.36,1);
}
.mega-panel a:hover,.mega-panel a:focus-visible{
  color:var(--multi-blue-soft)!important;
  background:transparent!important;
  transform:translateX(3px);
}
.mega-panel .mega-lead{color:inherit}

/* ---------- Text-link component ----------
   Links such as Explore Technology → are neutral by default.
   Blue is an interaction state, not their resting color. */
.feature a:not(.capsule-button):not(.button):not(.cta),
.card a:not(.capsule-button):not(.button):not(.cta),
.detail a:not(.capsule-button):not(.button):not(.cta),
.detail-band a:not(.capsule-button):not(.button):not(.cta){
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  color:inherit!important;
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  transform:none;
  transition:
    color .28s ease,
    transform .34s cubic-bezier(.22,1,.36,1);
}
.feature a:not(.capsule-button):not(.button):not(.cta):hover,
.card a:not(.capsule-button):not(.button):not(.cta):hover,
.detail a:not(.capsule-button):not(.button):not(.cta):hover,
.detail-band a:not(.capsule-button):not(.button):not(.cta):hover{
  color:var(--multi-blue-strong)!important;
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  transform:translateX(3px);
}
.dark-panel .feature a:not(.capsule-button):not(.button):not(.cta),
.dark-card a:not(.capsule-button):not(.button):not(.cta){
  color:#f3f3f5!important;
}
.dark-panel .feature a:not(.capsule-button):not(.button):not(.cta):hover,
.dark-card a:not(.capsule-button):not(.button):not(.cta):hover{
  color:var(--multi-blue-soft)!important;
}

/* ---------- Capsule-button component ----------
   Existing actual pill buttons retain their shape and turn blue on hover. */
.cta,.button,.learn-more,a.action,.capsule-button{
  color:inherit;
  transition:
    background-color .30s cubic-bezier(.22,1,.36,1),
    color .30s ease,
    border-color .30s ease,
    box-shadow .36s cubic-bezier(.22,1,.36,1),
    transform .36s cubic-bezier(.22,1,.36,1);
}
.cta:hover,.button:hover,.learn-more:hover,a.action:hover,.capsule-button:hover{
  background:var(--multi-blue)!important;
  border-color:var(--multi-blue)!important;
  color:#fff!important;
  box-shadow:0 10px 28px rgba(67,142,229,.20)!important;
  transform:translateY(-1px)!important;
}
.cta:active,.button:active,.learn-more:active,a.action:active,.capsule-button:active{
  background:var(--multi-blue-strong)!important;
  transform:scale(.985)!important;
}

/* Avoid the previous v0.22 broad card-link fill behavior. */
.feature a:hover,.card a:hover,.detail a:hover,.detail-band a:hover{
  box-shadow:none;
}

/* Keep keyboard feedback precise without permanently tinting content. */
a:focus-visible,button:focus-visible{
  outline:2px solid var(--multi-blue);
  outline-offset:3px;
}

@media(max-width:800px){
  .topbar{width:calc(100vw - 20px);max-width:none}
  .dynamic-capsule{
    width:max-content;
    max-width:calc(100vw - 20px);
  }
  .dynamic-capsule.is-expanded{
    width:calc(100vw - 20px);
    max-width:calc(100vw - 20px);
    height:min(520px,calc(100vh - 20px));
  }
}
@media(max-width:520px){
  .dynamic-capsule{padding-inline:5px}
  .dynamic-capsule.is-expanded{height:min(560px,calc(100vh - 20px))}
}
@media(prefers-reduced-motion:reduce){
  .dynamic-capsule,
  .dynamic-capsule *,
  .feature a,.card a,.detail a,.detail-band a,
  .cta,.button,.learn-more,a.action,.capsule-button{
    transition-duration:.01ms!important;
  }
}

/* Multi_Web0.24 — invariant centered Top Bar
   The Top Bar itself always remains centered in the viewport.
   Its collapsed/expanded width may change, but never its horizontal anchor. */

.topbar{
  position:fixed;
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  width:max-content !important;
  max-width:calc(100vw - 28px) !important;
  margin:0 !important;
}

.dynamic-capsule{
  position:relative;
  left:auto !important;
  right:auto !important;
  margin-inline:auto !important;
  transform-origin:50% 0 !important;
}

/* Expansion grows equally from the center rather than appearing to grow
   toward either the logo side or the action side. */
.dynamic-capsule.is-expanded{
  margin-inline:auto !important;
}

/* Keep the visual menu group centered inside the capsule independently
   from asymmetric logo/action widths on desktop. */
@media (min-width:801px){
  .dynamic-capsule:not(.is-expanded) .capsule-primary{
    position:absolute !important;
    left:50% !important;
    top:4px;
    height:44px;
    transform:translateX(-50%) !important;
    display:flex;
    align-items:center;
    z-index:4;
  }

  .dynamic-capsule:not(.is-expanded) .brand{
    margin-right:clamp(390px, 35vw, 520px);
  }

  .dynamic-capsule:not(.is-expanded) .top-actions{
    margin-left:auto;
  }

  /* Expanded state returns the primary row to normal flow while the
     whole capsule itself remains viewport-centered. */
  .dynamic-capsule.is-expanded .capsule-primary{
    position:relative !important;
    left:auto !important;
    top:auto;
    transform:none !important;
  }

  .dynamic-capsule.is-expanded .brand{
    margin-right:0;
  }
}

/* Responsive state also keeps the capsule's center locked to viewport center. */
@media(max-width:800px){
  .topbar{
    left:50% !important;
    transform:translateX(-50%) !important;
    width:max-content !important;
    max-width:calc(100vw - 20px) !important;
  }
  .dynamic-capsule{
    margin-inline:auto !important;
  }
  .dynamic-capsule.is-expanded{
    width:calc(100vw - 20px) !important;
    max-width:calc(100vw - 20px) !important;
  }
}

/* Multi_Web0.25 — expanded header row alignment correction
   Rule:
   - Top-row navigation is ALWAYS centered in the expanded capsule.
   - Logo remains on the left and actions remain on the right.
   - Mega-menu content below remains left-aligned. */

@media (min-width:801px){
  /* The capsule becomes the positioning reference for all three top-row zones. */
  .dynamic-capsule.is-expanded{
    position:relative !important;
  }

  /* Expanded top-row menu: center it independently from logo/actions. */
  .dynamic-capsule.is-expanded .capsule-primary{
    position:absolute !important;
    left:50% !important;
    top:4px !important;
    height:44px !important;
    transform:translateX(-50%) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:max-content !important;
    margin:0 !important;
    z-index:5 !important;
  }

  /* Keep the logo pinned to the left side of the top row. */
  .dynamic-capsule.is-expanded .brand{
    position:absolute !important;
    left:7px !important;
    top:4px !important;
    margin:0 !important;
    z-index:6 !important;
  }

  /* Keep search/account pinned to the right side. */
  .dynamic-capsule.is-expanded .top-actions{
    position:absolute !important;
    right:7px !important;
    top:4px !important;
    height:44px !important;
    margin:0 !important;
    z-index:6 !important;
  }

  /* The expanded content is intentionally NOT centered.
     It keeps its original left-aligned three-column information layout. */
  .dynamic-capsule.is-expanded .capsule-expanded{
    left:0 !important;
    right:0 !important;
    top:58px !important;
    text-align:left !important;
  }

  .dynamic-capsule.is-expanded .mega-panel{
    justify-items:start !important;
    text-align:left !important;
  }

  .dynamic-capsule.is-expanded .mega-panel > div{
    text-align:left !important;
  }
}

/* Multi_Web0.26 — high-fidelity Dynamic Capsule motion
   Browser rendering is still synchronized to the display refresh rate.
   We create denser perceived motion with continuous interpolation, staged
   micro-transitions and compositor-friendly transforms. */

:root{
  --capsule-ease: cubic-bezier(.16,1,.3,1);
  --capsule-ease-soft: cubic-bezier(.22,.8,.28,1);
}

.dynamic-capsule{
  contain:layout paint;
  will-change:width,height,border-radius,box-shadow;
  backface-visibility:hidden;
  transition:
    width .72s var(--capsule-ease),
    max-width .72s var(--capsule-ease),
    height .76s var(--capsule-ease),
    border-radius .68s var(--capsule-ease),
    background-color .42s ease,
    box-shadow .58s var(--capsule-ease-soft);
}

/* Expansion content no longer pops in as one block. */
.dynamic-capsule .capsule-expanded{
  opacity:0;
  transform:translate3d(0,-8px,0) scale(.992);
  filter:blur(2px);
  will-change:opacity,transform,filter;
  transition:
    opacity .34s ease .06s,
    transform .62s var(--capsule-ease) .025s,
    filter .34s ease .04s;
}
.dynamic-capsule.is-expanded .capsule-expanded{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  filter:blur(0);
  transition:
    opacity .42s ease .12s,
    transform .68s var(--capsule-ease) .07s,
    filter .42s ease .08s;
}

/* Each column enters in a tiny sequence, giving the expansion more frames
   of visible intermediate state without making it feel slow. */
.mega-panel.active > div{
  opacity:0;
  transform:translate3d(0,10px,0);
  animation:multiMenuColumnIn .54s var(--capsule-ease) forwards;
}
.mega-panel.active > div:nth-child(1){animation-delay:.10s}
.mega-panel.active > div:nth-child(2){animation-delay:.145s}
.mega-panel.active > div:nth-child(3){animation-delay:.19s}

@keyframes multiMenuColumnIn{
  0%{opacity:0;transform:translate3d(0,10px,0)}
  18%{opacity:.16;transform:translate3d(0,8px,0)}
  38%{opacity:.42;transform:translate3d(0,5px,0)}
  62%{opacity:.72;transform:translate3d(0,2.4px,0)}
  82%{opacity:.92;transform:translate3d(0,.7px,0)}
  100%{opacity:1;transform:translate3d(0,0,0)}
}

/* Top-row elements stay visually stable while the shell expands. */
.dynamic-capsule .brand,
.dynamic-capsule .capsule-primary,
.dynamic-capsule .top-actions{
  will-change:transform,opacity;
  transition:
    transform .58s var(--capsule-ease),
    opacity .34s ease,
    background-color .3s ease,
    color .3s ease;
}

/* Active navigation indicator gets a softer material-like transition. */
.dynamic-capsule .capsule-primary a{
  transition:
    background-color .38s var(--capsule-ease-soft),
    color .30s ease,
    transform .42s var(--capsule-ease);
}

/* Smooth the switch between expanded categories. */
.mega-panel{
  transform-origin:50% 0;
}
.mega-panel.active{
  animation:multiPanelSettle .42s var(--capsule-ease);
}
@keyframes multiPanelSettle{
  0%{opacity:.55;transform:translate3d(0,-3px,0) scale(.997)}
  35%{opacity:.82;transform:translate3d(0,-1px,0) scale(.999)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
}

/* Closing gets its own slightly quicker but still soft curve. */
.dynamic-capsule.is-collapsing{
  transition:
    width .64s var(--capsule-ease),
    max-width .64s var(--capsule-ease),
    height .66s var(--capsule-ease),
    border-radius .62s var(--capsule-ease),
    background-color .36s ease,
    box-shadow .48s ease;
}

@media(prefers-reduced-motion:reduce){
  .dynamic-capsule,
  .dynamic-capsule *,
  .mega-panel.active,
  .mega-panel.active > div{
    animation:none!important;
    transition-duration:.01ms!important;
    filter:none!important;
  }
}

/* Multi_Web0.27 — restore collapsed navigation placement
   Collapsed state returns to the pre-v0.24 layout:
   logo -> navigation -> actions in one natural row.
   Expanded state keeps the v0.25 rule: top navigation centered,
   mega-menu content left-aligned. */

@media (min-width:801px){
  .dynamic-capsule:not(.is-expanded){
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
  }

  .dynamic-capsule:not(.is-expanded) .brand{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    flex:0 0 44px !important;
    margin:0 !important;
  }

  .dynamic-capsule:not(.is-expanded) .capsule-primary{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    height:44px !important;
    transform:none !important;
    display:flex !important;
    align-items:center !important;
    width:auto !important;
    margin:0 !important;
  }

  .dynamic-capsule:not(.is-expanded) .top-actions{
    position:relative !important;
    right:auto !important;
    top:auto !important;
    height:44px !important;
    margin-left:2px !important;
  }

  /* Expanded state intentionally remains unchanged:
     menu group is centered independently of logo/actions. */
  .dynamic-capsule.is-expanded .capsule-primary{
    position:absolute !important;
    left:50% !important;
    top:4px !important;
    transform:translateX(-50%) !important;
    justify-content:center !important;
  }
}

/* Multi_Web0.28 — slower, progressive Dynamic Capsule expansion
   Horizontal and downward growth are deliberately eased in over a longer
   interval so the shell no longer jumps to its expanded geometry. */

:root{
  --capsule-expand: cubic-bezier(.20,.72,.22,1);
  --capsule-collapse: cubic-bezier(.32,.02,.24,1);
}

/* Base/collapse motion */
.dynamic-capsule{
  transition:
    width 1.05s var(--capsule-collapse),
    max-width 1.05s var(--capsule-collapse),
    height .98s var(--capsule-collapse),
    border-radius .92s var(--capsule-collapse),
    background-color .48s ease,
    box-shadow .72s ease !important;
}

/* Expansion: side growth starts gently and the downward growth follows it,
   producing visible intermediate geometry instead of one large jump. */
.dynamic-capsule.is-expanded{
  transition:
    width 1.32s var(--capsule-expand),
    max-width 1.32s var(--capsule-expand),
    height 1.42s cubic-bezier(.18,.62,.20,1),
    border-radius 1.10s var(--capsule-expand),
    background-color .52s ease,
    box-shadow .88s ease !important;
}

/* Content waits until the shell has visibly begun expanding. */
.dynamic-capsule .capsule-expanded{
  opacity:0;
  transform:translate3d(0,-5px,0) scale(.996);
  filter:blur(1.5px);
  transition:
    opacity .34s ease,
    transform .62s var(--capsule-expand),
    filter .34s ease !important;
}
.dynamic-capsule.is-expanded .capsule-expanded{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  filter:blur(0);
  transition:
    opacity .52s ease .30s,
    transform .82s var(--capsule-expand) .20s,
    filter .50s ease .24s !important;
}

/* Delay the detailed columns until enough physical space exists. */
.dynamic-capsule.is-expanded .mega-panel.active > div{
  animation-duration:.68s !important;
}
.dynamic-capsule.is-expanded .mega-panel.active > div:nth-child(1){animation-delay:.34s !important}
.dynamic-capsule.is-expanded .mega-panel.active > div:nth-child(2){animation-delay:.40s !important}
.dynamic-capsule.is-expanded .mega-panel.active > div:nth-child(3){animation-delay:.46s !important}

/* Closing remains smooth but a little faster than opening. */
.dynamic-capsule.is-collapsing{
  transition:
    width .96s var(--capsule-collapse),
    max-width .96s var(--capsule-collapse),
    height .92s var(--capsule-collapse),
    border-radius .86s var(--capsule-collapse),
    background-color .42s ease,
    box-shadow .62s ease !important;
}

@media(prefers-reduced-motion:reduce){
  .dynamic-capsule,.dynamic-capsule *,
  .mega-panel.active,.mega-panel.active > div{
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
    animation-delay:0s!important;
  }
}

/* Multi_Web0.29 — uniform spacing in the collapsed Top Bar
   Treat the four categories as one equal-gap navigation group.
   The logo and utility actions remain separate controls. */

@media (min-width:801px){
  .dynamic-capsule:not(.is-expanded) .capsule-primary{
    display:grid !important;
    grid-template-columns:repeat(4, max-content) !important;
    column-gap:48px !important;
    align-items:center !important;
    justify-content:start !important;
  }

  .dynamic-capsule:not(.is-expanded) .capsule-primary > a{
    margin:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
}

/* Multi_Web0.30 — React + Framer Motion Dynamic Capsule
   Geometry is interpolated continuously by layout vectors/springs.
   CSS no longer drives width/height expansion timing. */

.react-topbar .react-capsule{
  transition:
    background-color .42s ease,
    color .32s ease,
    box-shadow .52s ease,
    border-color .42s ease !important;
  will-change:width,height,transform;
}

/* Geometry target states. Framer Motion's layout engine interpolates between them. */
@media (min-width:801px){
  .react-topbar .react-capsule{
    width:max-content !important;
    min-width:0 !important;
    height:54px !important;
  }
  .react-topbar .react-capsule.is-expanded{
    width:min(1180px,calc(100vw - 32px)) !important;
    height:440px !important;
  }

  /* Collapsed navigation: exact equal gaps. */
  .react-topbar .react-capsule:not(.is-expanded) .capsule-primary{
    display:grid !important;
    grid-template-columns:repeat(4,max-content) !important;
    column-gap:48px !important;
    position:relative !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;
    height:44px !important;
    width:auto !important;
    margin:0 !important;
  }
  .react-topbar .react-capsule:not(.is-expanded) .capsule-primary > a{
    margin:0 !important;
    padding-inline:0 !important;
  }

  /* Expanded top-row categories stay exactly centered. */
  .react-topbar .react-capsule.is-expanded .capsule-primary{
    position:absolute !important;
    left:50% !important;
    top:5px !important;
    transform:translateX(-50%) !important;
    display:grid !important;
    grid-template-columns:repeat(4,max-content) !important;
    column-gap:48px !important;
    width:max-content !important;
    height:44px !important;
  }
  .react-topbar .react-capsule.is-expanded .brand{
    position:absolute !important;
    left:7px !important;
    top:5px !important;
  }
  .react-topbar .react-capsule.is-expanded .top-actions{
    position:absolute !important;
    right:7px !important;
    top:5px !important;
  }
}

/* Expanded content remains left aligned, independent of centered top row. */
.react-topbar .react-expanded{
  display:block !important;
  opacity:1 !important;
  transform:none;
  filter:none !important;
  pointer-events:auto !important;
  text-align:left !important;
  animation:none !important;
}
.react-topbar .react-expanded .mega-panel{
  display:grid !important;
  text-align:left !important;
  animation:none !important;
}
.react-topbar .react-expanded .mega-panel > div{
  opacity:1;
  transform:none;
  animation:none !important;
  text-align:left !important;
}

@media(max-width:800px){
  .react-topbar .react-capsule{
    width:min(420px,calc(100vw - 20px)) !important;
    height:54px !important;
  }
  .react-topbar .react-capsule.is-expanded{
    width:calc(100vw - 20px) !important;
    height:min(560px,calc(100vh - 20px)) !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .react-topbar .react-capsule,
  .react-topbar .react-capsule *{
    transition:none !important;
    animation:none !important;
  }
}

/* Multi_Web0.31 — navigation visibility + link/button semantics */

/* React mount/topbar must always occupy its visible top layer. */
#multi-topbar-root{
  position:relative;
  z-index:10000;
}
.react-topbar{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  z-index:10000 !important;
}
.react-topbar .react-capsule{
  visibility:visible !important;
  opacity:1 !important;
}

/* Real capsule CTA: always visible.
   Hover changes its surface to Multi Blue instead of revealing the button. */
a.button,
a.cta,
.button,
.cta,
.hero-cta,
.capsule-button{
  opacity:1 !important;
  visibility:visible !important;
  color:#fff !important;
  background:#1d1d1f !important;
  border-color:#1d1d1f !important;
  transition:
    background-color .28s cubic-bezier(.22,1,.36,1),
    border-color .28s cubic-bezier(.22,1,.36,1),
    color .28s ease,
    transform .34s cubic-bezier(.22,1,.36,1) !important;
}
@media (hover:hover) and (pointer:fine){
  a.button:hover,
  a.cta:hover,
  .button:hover,
  .cta:hover,
  .hero-cta:hover,
  .capsule-button:hover{
    background:#4b8ff7 !important;
    border-color:#4b8ff7 !important;
    color:#fff !important;
  }
}

/* Text-only links are reserved for links embedded in explanatory copy.
   They are blue BEFORE hover and change shade on hover. */
.copy-link,
.text-link,
.prose a:not(.button):not(.cta),
.card-copy a:not(.button):not(.cta),
.description a:not(.button):not(.cta){
  color:#3478d4 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  opacity:1 !important;
  visibility:visible !important;
  transition:color .22s ease, opacity .22s ease !important;
}
@media (hover:hover) and (pointer:fine){
  .copy-link:hover,
  .text-link:hover,
  .prose a:not(.button):not(.cta):hover,
  .card-copy a:not(.button):not(.cta):hover,
  .description a:not(.button):not(.cta):hover{
    color:#1f5fae !important;
  }
}


/* Multi_Web0.32 — audited final interaction/navigation contract */
:root{
  --multi-blue:#5f9fe9;
  --multi-blue-hover:#397fd3;
  --multi-blue-light:#82b6f2;
}

/* Static navigation is a deployment-safe first paint. React replaces it only after mount. */
.static-topbar{display:block!important;visibility:visible!important;opacity:1!important;z-index:9998!important}
.react-topbar-ready .static-topbar{display:none!important}
#multi-topbar-root{position:relative;z-index:9999}
.react-topbar{display:block!important;visibility:visible!important;opacity:1!important;z-index:9999!important}

/* Never hide the category row merely because viewport width shrinks. */
.static-topbar .capsule-primary{display:grid!important}
@media (max-width:800px){
  .static-topbar{
    top:10px!important;
    left:50%!important;
    right:auto!important;
    transform:translateX(-50%)!important;
    width:calc(100vw - 20px)!important;
    max-width:calc(100vw - 20px)!important;
  }
  .static-topbar .static-capsule{
    width:100%!important;
    max-width:100%!important;
    min-height:52px!important;
    height:auto!important;
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr) 84px!important;
    align-items:center!important;
  }
  .static-topbar .capsule-primary{
    position:static!important;
    transform:none!important;
    width:100%!important;
    height:44px!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    column-gap:4px!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
  .static-topbar .capsule-primary a{
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    min-width:0!important;
    padding:0 5px!important;
    font-size:clamp(10px,2.4vw,13px)!important;
    white-space:nowrap!important;
  }
  .static-topbar .top-actions{display:flex!important;margin:0!important}
}
@media (max-width:520px){
  .static-topbar .static-capsule{
    grid-template-columns:40px minmax(0,1fr) 80px!important;
  }
  .static-topbar .capsule-primary{column-gap:0!important}
  .static-topbar .capsule-primary a{font-size:10px!important;padding:0 2px!important}
}

/* Standalone actions are capsules, not naked text links. */
.cta.secondary-action{
  display:inline-flex!important;
  align-items:center!important;
  width:max-content!important;
  max-width:100%!important;
  gap:18px!important;
  margin-top:23px!important;
  padding:12px 18px!important;
  border-radius:999px!important;
  background:#1d1d1f!important;
  border:1px solid #1d1d1f!important;
  color:#fff!important;
  font-size:14px!important;
  font-weight:600!important;
  line-height:1.2!important;
  box-shadow:none!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
}
.dark-panel .cta.secondary-action,
.dark-card .cta.secondary-action{
  background:#fff!important;
  border-color:#fff!important;
  color:#151517!important;
}
@media (hover:hover) and (pointer:fine){
  .cta.secondary-action:hover{
    background:var(--multi-blue)!important;
    border-color:var(--multi-blue)!important;
    color:#fff!important;
    transform:translateY(-1px)!important;
    box-shadow:0 10px 28px rgba(67,142,229,.20)!important;
  }
  .dark-panel .cta.secondary-action:hover,
  .dark-card .cta.secondary-action:hover{
    background:var(--multi-blue-light)!important;
    border-color:var(--multi-blue-light)!important;
    color:#101820!important;
  }
}

/* Naked links are allowed only when they live inside explanatory prose.
   They are blue at rest and shift shade on hover. */
.description a:not(.cta),
.prose a:not(.cta),
p.copy-text a:not(.cta),
.inline-link{
  display:inline!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--multi-blue)!important;
  box-shadow:none!important;
  font-weight:600!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  transition:color .24s ease!important;
}
@media (hover:hover) and (pointer:fine){
  .description a:not(.cta):hover,
  .prose a:not(.cta):hover,
  p.copy-text a:not(.cta):hover,
  .inline-link:hover{
    color:var(--multi-blue-hover)!important;
    background:transparent!important;
    transform:none!important;
  }
}

/* Historical .text-cta styling is disabled: standalone links must use capsules. */
.text-cta{color:inherit}

/* Keep React collapsed navigation visible at every responsive breakpoint. */
@media(max-width:800px){
  .react-topbar .react-capsule .capsule-primary{
    display:grid!important;
    grid-template-columns:repeat(4,max-content)!important;
    column-gap:clamp(12px,4vw,32px)!important;
    position:relative!important;
    inset:auto!important;
    transform:none!important;
    width:auto!important;
    height:44px!important;
    padding:0!important;
    flex-direction:row!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
  .react-topbar .react-capsule .capsule-primary a{
    display:flex!important;
    height:40px!important;
    padding:0!important;
  }
}

/* Multi_Web0.33 authoritative React topbar */
.static-topbar{display:none!important}
#multi-topbar-root{position:relative!important;z-index:10000!important}
.react-topbar{position:fixed!important;top:20px!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;width:auto!important;z-index:10000!important;display:block!important;opacity:1!important;visibility:visible!important}
.react-topbar .react-capsule{box-sizing:border-box!important;display:grid!important;grid-template-columns:72px auto 72px!important;grid-template-rows:54px 1fr!important;align-items:start!important;padding:0 8px!important;overflow:hidden!important;min-width:0!important;max-width:calc(100vw - 32px)!important;background:#1d1d1f!important;border-radius:999px!important;transition:border-radius .45s cubic-bezier(.22,1,.36,1),box-shadow .45s ease!important;will-change:width,height!important}
.react-topbar .react-capsule.is-expanded{border-radius:42px!important}
.react-topbar .brand{grid-column:1!important;grid-row:1!important;position:static!important;transform:none!important;display:flex!important;width:44px!important;height:54px!important;align-items:center!important;justify-content:center!important;margin:0!important;padding:0!important}
.react-topbar .brand img{display:block!important;width:34px!important;height:34px!important;object-fit:contain!important}
.react-topbar .capsule-primary{grid-column:2!important;grid-row:1!important;position:static!important;inset:auto!important;transform:none!important;display:grid!important;grid-template-columns:repeat(4,max-content)!important;column-gap:48px!important;align-items:center!important;justify-content:center!important;width:max-content!important;height:54px!important;margin:0!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
.react-topbar .capsule-primary>a{display:flex!important;align-items:center!important;justify-content:center!important;height:54px!important;margin:0!important;padding:0!important;color:#f5f5f7!important;font-size:16px!important;font-weight:600!important;line-height:1!important;white-space:nowrap!important}
.react-topbar .top-actions{grid-column:3!important;grid-row:1!important;position:static!important;display:grid!important;grid-template-columns:32px 32px!important;column-gap:8px!important;align-items:center!important;justify-content:end!important;width:72px!important;height:54px!important;margin:0!important;padding:0!important}
.react-topbar .icon-entry{display:flex!important;width:32px!important;height:54px!important;align-items:center!important;justify-content:center!important;color:#f5f5f7!important}
.react-topbar .icon-entry svg{width:24px!important;height:24px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important}
.react-topbar .react-expanded{grid-column:1/-1!important;grid-row:2!important;display:block!important;width:100%!important;padding:28px 34px 34px!important;box-sizing:border-box!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;text-align:left!important}
.react-topbar .mega-panel{display:grid!important;grid-template-columns:1.4fr 1fr 1fr!important;column-gap:56px!important;width:100%!important;text-align:left!important}
.react-topbar .mega-panel>div{text-align:left!important;opacity:1!important;transform:none!important}
.react-topbar .mega-panel p{color:#8e8e93!important;margin:0 0 20px!important}
.react-topbar .mega-panel a{display:block!important;color:#f5f5f7!important;margin:0 0 18px!important;text-align:left!important}
.react-topbar .mega-panel a.mega-lead{font-size:28px!important;font-weight:600!important}
@media(max-width:800px){.react-topbar{top:10px!important;width:calc(100vw - 20px)!important}.react-topbar .react-capsule{width:100%!important;max-width:100%!important;grid-template-columns:44px minmax(0,1fr) 64px!important;padding:0 6px!important}.react-topbar .capsule-primary{width:100%!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;column-gap:0!important}.react-topbar .capsule-primary>a{font-size:clamp(10px,2.4vw,13px)!important}.react-topbar .top-actions{width:64px!important;grid-template-columns:28px 28px!important;column-gap:4px!important}.react-topbar .react-expanded{padding:22px 18px 28px!important}.react-topbar .mega-panel{grid-template-columns:1fr!important;row-gap:20px!important}}